Hosting Ghost on Heroku

Earlier this week I launched my updated personal website along with my blog. A friend asked me about what platform I use to manage my blog posts and I told her I actually hard-coded it, so every time I have a new article I have to create a new html file, edit it and upload it using FTP. I realized there should be a better way to do this. I remember hearing about “Ghost”, a simple blogging platform that’s designed by a former WordPress designer John O'Nolan, who emphasized a lot on making blogging experience simple and elegant. I decided to move my blog to Ghost, but I need a place to host it, so I did some research and came across an easy way to host Ghost on Heroku, and it's free!

Here’s a step-by-step tutorial:

Part 1. Deploy Ghost on Heroku


I found this "One-button Heroku deploy for the Ghost" on GitHub, which works pretty well except some minor image uploading issues.

https://github.com/cobyism/ghost-on-heroku

1.Go to the link above and click the “Deploy to Heroku” button. You will be asked to create an account or login to Heroku.
Login form 2.Fill out the form or login and you will see this page.
Page

3.Type in your App Name and press the “Deploy for Free” button.
Deploy for Free 4.After a few seconds you should be able to manage your ghost blog by clicking “Manage App”, which will take you to http://your-app-name.herokuapp.com/ghost
Or you can view your blog by clicking “View “, which will take you to http://your-app-name.herokuapp.com
Manage or view

Done! You are ready to use Ghost to write blog on Heroku!

Ghost uses Markdown to write articles, if you are not familiar with it, you can always go to this page: http://support.ghost.org/markdown-guide/

Now that you got your Ghost deployed on Heroku, you might wonder, can I customize the my Ghost blog to look better? Or, can I have a custom URL for my blog page instead of "your-app-name.herokuapp.com"? Yes you can, but it requires some knowledge of command line tools and git, and of course HTML and CSS. You can skip the next part if you don’t want to go into this hassle.


Part 2. Customize Theme + Custom URL


Customize Theme

To customize Ghost theme you have to be able to access the remote files in your Heroku App, so first you need to install Heroku Toolbelt: https://toolbelt.heroku.com/, and install Git: http://git-scm.com/book/en/v2/Getting-Started-Installing-Git

After that, you can open up Terminal or command line tools and login Heroku with your email and password by typing:

$ heroku login

After the authentication is successful, you can clone your remote heroku app to a local repo:

$ heroku git:clone --app your-app-name

You will see all the files inside "your-app-name" folder, and all the theme related files will be inside "/content/themes/casper", now you can edit the files to make changes for you blog theme.

Read this to understand the theme structure:
https://ghostforbeginners.com/ghost-theme-structure/

Also Ghost theme is using .hbs files instead .html files so you would need some knowledge about Handlebars: http://handlebarsjs.com/, for me it’s doing things like PHP but much simpler.

After editing the files or adding new files, you can:

  1. Add all untrack files to stage
    $ git add –A

  2. Commit edited files
    $ git commit -a -m “commit message”

  3. Push your local files to your remote heroku app
    $ git push heroku master

Done! You will see your changes when you launch your heroku app (http://your-app-name.herokuapp.com). If you are not interested in editing the theme files, you can also download themes from: http://marketplace.ghost.org/themes/free/


Custom URL:

To have a custom URL for your blog, you need to get your own domain name first. For example, I have “www.youwenliang.com” on Godaddy, so I can go to my Godaddy account, go to DNS manager and under CNAME change “www” to target “your-app-name.herokuapp.com” instead of “@” so that when people go to www.youwenliang.com it will redirect to my Heroku app. Or I can use a subdomain, for example adding “blog” under CNAME and target it to my app, then I can go to blog.youwenliang.com to see my app.
Manage or view

You also need to enter this in Terminal to add your custom URL to your Heroku app:

$ heroku domains:add www.your-domain-name.com

So for me, I typed this:

$ heroku domains:add www.youwenliang.com

and this:

$ heroku domains:add blog.youwenliang.com

Done! Now you have your custom theme and custom URL, way to go!


Resources:

Information about Heroku + Custom domains: https://devcenter.heroku.com/articles/custom-domains

Learn about Git Basics:
http://git-scm.com/book/en/v2/Getting-Started-Git-Basics

Learn about Git commands:
https://confluence.atlassian.com/display/STASH/Basic+Git+commands

Develop App with Heroku:
https://devcenter.heroku.com/