So you want to start a tech blog but you have no idea where to start, wondering about hosting cost, the content management and other related stuffs ?! Don't worry I got you, you're in the right place where I will show you how to achieve it for free.
If you're a bit like me, I know for sure it's a big jump that you decided to start writing. It feels good to share our bit of knowledge isn't it ?! So, congratulations and thanks in advance for sharing. That said, I know we guys in the tech world don't usually like a lot of chat, so I'm just gonna skip to the matter.
If you haven't guessed by now why the hosting is no problem at all, let me give you the answer: Github Pages. It offers basically personal or project based websites hosted in a github repository. So bye bye the trouble to find a hosting provider or a personal server to store our files, we just have to use a github repository (thank you Github 👏).
If you have never used Github pages before, you can follow the basic instructions given at Github Pages for the usual "Hello World" setup.
Now the hosting problem is fixed and you basically have a website available at
username.github.io, let's discuss about the content management. If you are a web designer with your custom template and a hardcore that prefer writing your posts manually in HTML files, well go ahead, upload your theme and your HTML files to the repository you just created and you're done, no need to continue this reading.
Ghost is open source (hosted on github), simple to use and is the most popular headless Node.js CMS for professional publishing. It offers most of the features of WordPress and a brief comparison is available here.
Now you've met Ghost, let's use it. Fire up your terminal and install their CLI tool:
npm install ghost-cli -g
Once done, cd into an empty directory and install ghost locally:
ghost install local
Once the installation finished you'll be able to access your new generated site on http://localhost:2368 and http://localhost:2368/ghost to access Ghost control panel and proceed to it's configuration. Take the time to explore it, try some theming... and have fun.
Some useful ghost commands are:
ghost stopto stop Ghost
ghost startto start Ghost
ghost logviews logs
Now you've noticed that we need npm in order to run ghost and access our website but Github won't do things like running npm for us so our repository must be filled with static pages. That's where Buster kicks in 💪.
Buster is a tool written in python that will generate static pages from our local ghost website. Isn't that cool ?! 🤩. Installing it is simple:
pip install git+https://github.com/manthansharma/buster/
The buster command works within the
static subfolder of the directory where ghost is. And like we want that static folder to be the content of our github repository, let's initialize it with this:
# Inside Ghost folder git clone https://github.com/<username>/<username>.github.io.git static
Then, we proceed to the generation of the static files:
buster generate --web-url=<username>.github.io
This command will replace during the generation all instances of
http://localhost:2368 by the URL you provided so the redirection between pages and posts won't be messed up once deployed on Github Pages.
And finally, to deploy your website:
This will automatically add, commit and push all files in the static folder to your GitHub repo.
For the initial push, there can be some delay before Github deploys your website, if so please wait a while. Now you have a very nice blog at username.github.io 😎.
To update or add more posts later, just start ghost locally, make your modifications then generate and deploy using buster.
Ghost uses a SQLite database to keep track of your configuration and posts and it would be a little troublesome if you come to lose it since you will be like starting from zero and losing too any custom modifications you made to your theme. So I advise you to upload your ghost folder to a private repository with a .gitignore file containing:
static/ content/themes/casper/ content/logs/ versions/ current/node_modules/ current/content/themes/casper/ current/content/logs/
Next Steps: Custom Domain For Your Blog