Ghost with custom front-end

Developer help
1

Hi I have really tried to figure this out on my own, but I’d like some direction from you all.

I am creating a blog that I wanted very much integrated into my site, which is built in angular. Instead of having the blog URL blog.example.com, I wanted it to be in example.com/blog and it to be a subpage within my webapp, and share the headers as all other pages.

The blog would be accessible to users (logged in) as well as guest users. In the case of a logged in user, the header would have their account buttons, and for a guest user the buttons would be “sign up” and “sign in”. In either event, the URL of the blog, and URL of the articles would remain the same. example.com/blog/article_title.

While self-hosting wasn;t a requirement, I decided that it would be good to now selfhost assuming major blog growth.

We attempted by using the ghost casper theme installed on blog.example.com, and iframe the html body into my example.com/blog, but this caused the following issues:

  1. I added share buttons within the body of the articles, and these would point to the blog.example.com pages
  2. the address bar would not update to show the current article (/article-name)
  3. If I were to share a specific article example.com/blog/article-name, it would take the user to the main page.

Because of all of this we decided that the iframe method for this was not going to work. We are now looking to use Ghost as a headless CMS and I have the following questions.

If I use Ghost as a headless CMS, I would be creating my example.com/blog in angular and calling the Ghost API.

  1. If I am self-hosting, the API calls would be calling my server where it is installed. Does ghost allow this? or go I have to be a PRO user? I am assuming it is possible as in admin/integrations it allows me to create the api key

  2. When installing ghost on my server, it is requiring me to give a blog URL. I am not sure what URL I should put here. I shouldn’t put the example.com/blog as this is where my custom angular site is. And I don’t want to put it in blog.example.com because I wouldn’t want anyone to see any other front end.

  3. The preview in the admin of the site. What would that show?

  4. What am I loosing with my angular front end, custom install? What would I need to make sure of for SEO related purposes? One of my goals was to make sure that my main site example.com was elevated by having the blog pages as a subpage.

  5. Is there a more simple way I m missing to get the setup I want? I want to get this right the first time so that I get the articles to the right permalink the first time. This is the first blog project my developers are undertaking in ghost. I already have someone building the angular equivalent to our customized casper theme.

2

  1. Ghost Pro is just Ghost self-hosted without the hassle. Pretty much anything you can do w/ Ghost Pro can be done on your self-hosted install, including calling to the Ghost API.

  2. It should be example.com/blog. After you set that, you need to configure the admin url to e.g. ghost.example.com/blog. The url and admin url must have the same subdirectory path.

  3. Getting previews set up is a bit tricky but doable. You basically need to add a route for /blog/p/ in your Angular app to request the draft post and render it, and you’ll need to make sure that the user that is viewing the preview your site is allowed to.

  4. You’ll have to recreate the SEO tags that ghost creates (e.g. og and twitter tags), but it will provide you with the data.

  5. If you have someone building an Angular equivalent of your Casper theme, it’ll probably be much easier to just proxy /blog to Ghost and let ghost serve your front end