Web

Create a Static Ghost Blog with Buster

Shaumik Daityari
Share

If we were in the mid 2000s, the unanimous choice to start a blog would have been WordPress or Blogger. The last few years have seen a rise in the number of blogging platforms, making this a great time for someone who likes to experiment. One such option, that was released to the public late last year, is Ghost.

The best part about Ghost is the support for Markdown — which lets you focus on writing. However, if you are still skeptical, you should look at David Blane’s comparison of Ghost’s features to the big three.

If you agree that you should give Ghost a try, there is a small hiccup. If you want to use Ghost.org for hosting your blog, the basic plan starts at $5 per month, restricting you to 10,000 page views (which you can easily reach if your post has a good day on Hacker News). If you download the source code, you would need to host it on a separate server, something that requires some expertise.

But we can overcome those issues. In this post, I will show you an easy way to use Ghost for your blog, yet host it for free.

What are Static Websites?

A static site is a set of HTML documents or static web pages, nothing more, nothing less. It means that irrespective of the user requesting the site, the content would remain the same. On the contrary, for a dynamic site, the same URL might show different content to different users (for example, https://twitter.com would show me something entirely different to what it would show you, assuming one of us is logged in).

A static website is often cheap or free to host as compared to a dynamic website. But, to generate and update a static site, you would need some specific skills. Unless, of course, you have Buster.

What is Buster?

Buster is a “brute force static site generator for Ghost” (get it?). Buster lets you preview the generated static blog and deploy to GitHub for hosting your site. It’s written in Python and it’s easy to install. You can either download through pip or clone the repository and install.

The process that we will follow is something like this:

  • Generate static pages from a Ghost site using brute force
  • Preview them using Buster (optional)
  • Deploy to our server (like GitHub Pages)

Using GitHub Pages to Host Your Static Website

GitHub lets you host your static pages for free through GitHub Pages. Any repository you have on GitHub can be configured to provide a preview on the web. All you need to do is create a branch called gh-pages and your repository is accessible at username.github.io/repository-name, where you replace username and repository-name with their respective values.

There are many alternatives to GitHub Pages, one of which is My.DropPages an unofficial Dropbox application. Although Buster is configured to push to GitHub pages, you can always stop at just generating the static site and manually upload it somewhere else. In this post, we will continue with the assumption that you are going to upload your website to GitHub Pages.

Adding a Custom Subdomain to GitHub Pages

If you need a domain to point to your GitHub Pages repository, you need to add a CNAME record in your domain’s DNS file. For such a blog, you would need to add a CNAME record for the desired subdomain with the value username.github.io.

Subdomain example

Next, you would need to add a file named CNAME to your repository. The content of the file is simply the string my_subdomain.my_domain.com (again replacing the values with your actual subdomain and domain).

How to use Buster

The various commands are as follows, which may be used in a roughly chronological order:

  • buster setup [--gh-repo=<repo-url>] — Makes a static/ directory and initializes a Git repository inside it. You should have a basic repository set up on GitHub.
  • buster generate [--domain=<local-address>] — Generates pages from a local running instance (or overwrites the existing pages). The local address is usually 127.0.0.1:2368.
  • buster preview — Previews the local static site at localhost:9000.
  • buster add-domain [domain-name] — Adds the custom domain or subdomain to the CNAME in your repository.
  • buster deploy — Pushes your changes to GitHub. This is done through the https protocol, and you need to enter your GitHub username and password.

Note: You should run these commands just outside the static directory. If you run them in a different directory managed by Git, the generate command would create a static folder and commit the files in your existing repository.

Adding Comments to Your Static Pages

One downside of a static website is the inability to add comments. However, third-party services like Disqus only require you to insert a <script> tag, which gets you a comment box. Disqus recognizes the URL from which the request is generated and automatically saves the comments to the relevant thread.

To insert the Disqus comment system on your static site, you need to insert it in the Ghost template, from which the static site is generated. Once you register with Disqus, you’ll be provided with a code snippet to insert on your site.

Find the file post.hbs in the theme directory in Ghost (typically /content/themes/[theme_name]/post.hbs) and paste it in between {{/post}} and </article>. For more information, you could look at a detailed help page on Disqus regarding its installation on Ghost sites. If you have done this correctly, Disqus should appear on your local site, and Buster would extract it automatically.

Final Words

I’d like to end the post with a demo, a blog that I maintain to report my weekly progress in the Google Summer of Code. The static site generated by Buster is available on GitHub.

What do you think of Buster? Do you know of any alternatives? Let us know in the comments below.