💡 This post is very old now and the information below may well be inaccurate.
I recently migrated my blog from Wordpress to Silvrback to Ghost. I was very happy with Silvrback, it’s an excellent writing platform. In the end I got fed up not being able to change how my site looked (no theming), so switched to Ghost.
I’m a bit of an uptime and performance freak. This website is relatively lightweight and performs well in most situations. I wanted to ensure it performed the best it ever could and sustained 100% uptime. Ghost isn’t difficult to setup on your own server but there are so many advantages to hosting a static site vs one that is dynamically generated server side with a database backend. Nor did I want to pay for a hosted solution once I discovered you can host your static site for free using GitHub Pages.
Static Ghost
Enter Buster. Buster is a static site generator for Ghost. There are many reasons you might want a static site
- Host it anywhere
- No database dependancy
- Better performance
- Easy to backup
- Far more secure, no admin backend
Getting Buster setup was easy and in 10 minutes I had a static copy of my then hosted Ghost blog. You can actually target any Ghost blog hosted on any server with Buster, it’s quite powerful.
GitHub Pages
Before you buster deploy you’ll want to setup a GitHub account (free) if you don’t already have one and then configure a GitHub Pages respository (also free) as per instructions here. Make sure you follow the guide on configuring a custom domain before you make and DNS changes.
My Workflow
I have a locally hosted copy of Ghost running on my Macbook and I target this using Buster. Getting Ghost up and running locally is very simple. The great thing about having a local install of Ghost is that I can publish posts before I’m finished, make styling changes etc and preview what they look like on the site before statically generating the updated version and pushing that to GitHub. I store my Ghost installation in my Dropbox along with the static files.
- http://127.0.0.1:2368/ghost
- Write post
- buster generate –domain=http://127.0.0.1:2368
- buster deploy
Performance
GitHub sits behind the Fastly CDN. You may not of heard of Fastly but they CDN for the likes of Twitter, Disqus, The Guardian, Shazam. Converting your site to static files and hosting with GitHub Pages will guarentee to improve performance. My site’s load time before I moved was 1.6s. My site now loads in just over 330ms.
Make the switch today. Loadsofpeoplearemovingtostatic.
Amazon S3 + CloudFront
If you don’t feel comfortable hosting your website for free then I’d highly recommend reading Paul’s“How To: Hosting on Amazon S3 with CloudFront”. Paul’s site is built using Jekyll 1, as are most blogs hosted on GitHub Pages, but you can follow pretty much everything he does to get your Buster generated static blog online.
- Buster is built from Jekyll
Comments
These comments were extracted from old Disqus threads and are displayed as static content.
Nice write up. I've got everything working but for one thing. When I try to buster deploy I get an error.
raise InvalidGitRepositoryError(epath)
git.exc.InvalidGitRepositoryError: /Users/Erik/static
Any thoughts?
Thanks again for the write up, interesting and fun little project.
Hey Erik. I'm glad it helped. Did you run 'buster setup' forgot to include that step in my post. If not, does /Users/Erik/static/ exist?
Yeah, I did buster setup and put in the URL to my git repo. Not sure what the problem is. I'll keep playing with it.
Oh and yes /Users/Erik/static is there.
For the URL of your repo try it with and without the .git at the end, I recall this error now
Didn't work. I wonder if where my Ghost folder and /static folder are located is the problem. My Ghost folder is in my /Users/Erik/Downloads and static is in /Users/Erik/static.
I got it working! I'm not sure what fixed it but here's what I did: Deleted the static folder and then deleted the repo on git and the corresponding folder on my Mac that was created when I cloned the repo to my desktop.
I then setup the repo again and re-cloned it to my desktop and then ran 'buster setup' again. I put my Ghost installation folder in the same root directory as the static folder, not sure that mattered.
I might try to move my static and Ghost folder to Dropbox like you said you have it setup but for now, I'll leave it as is since it's working.
By the way, it worked with .git at the send of the URL.
Again, thanks for the write up, I'm using Lector as my Ghost theme, too. I just have to make a few tweaks to the theme and I should be good.
Jack, one last question if I may. How did you get the menu/hamburger button to work properly on the Lector theme? When I click it on the git hosted static page the button just acts as a home button. The panel does not slide out to show the other options.
Did you do anything special to get it to work? I've looked at the .hbs files in the theme folder but nothing obvious jums out at me. I'm sorry for turning your comments section into my personal support forum!
Hey Erik, glad you got it working!
You'll need to copy the assets folder from the original theme to the static folder that is generated as buster won't automatically copy all the JavaScript files.
This is a very informative article.
I too want to follow what you have done. But I have a question.
I have syntax highlighting enabled on by Ghost Blog(hosted on Ghost server) using Prismjs. If I create static pages what effect would that have on the syntax highlighting?
I am very new to Ghost and web technologies but have deep experience with desktop apps.
Any help would be appreciated.
Thanks
msiyer
www.msiyer.com
This is a very informative article.
I have been passionately working with Ghost, hosted on Ghost server, for the past two days. I have a blog at www.msiyer.com I too want to follow your method.
I have a question:
I have syntax highlighting enabled on my blog using Prismjs. What would happen to it if I moved to static files?
Will Jekyll help me in some way to retain the syntax highlighting?
Any help would be appreciated.
Hi there. Prismjs is rendered client side using javascript so it will behave the same if your site is built using Ghost as it's backend or just static files. Hope this helps
Thanks for replying. It is good to hear that Prismjs would work.
I am still finding my way through this Javascript jungle. Server side and client side scripts are everywhere.
This is my first attempt at taming a web technology. I was basically a Desktop guy.
Thanks for your help Jack.
wow.. that was awesome.
thank you.. :D
Hi Jack
I have successfully deployed my ghost blog to github pages, and all was going really well, until I forgot my password! I have mailgun set up within my config.js file, and I am able to have a password link sent to me from ghost. in my config.js, I have indicated my custom url. However, the link provided in the email just takes me to github pages which says that page does not exist. Wondering what I am doing wrong...
I was able to solve the password issue in the sqlite db, thanks for the blog post!
Hi Jack.
I've a simple website hosted on github pages. I push and commit changes through the manager for windows, so I don't know how to use the command line...
How can I install ghost?
Hi people.
I installed Ghost on Windows locally, I've a website hosted on GitHub, and now I want to host my Ghost blog on it too.
What can I do?
Is there a way to made something like Ghost pro on GitHub pages? Or I can just publish static pages using Buster?
The command line is the only way? Or I can use GitHub for Windows in somehow?