Why Here and How I Build This Blog

I know the picture is very random and it really has nothing to do with the following content.

The other day I realized aside from the documentation I work on during the week. I need a place to put up some personal documentation to archive the knowledge I have learned and problem I have solved.

I have been playing with Ghost for a few years now. And I happen to saw a couple very neat project on Github about using Ghost to host a github page.

Basically the whole idea is to run the Ghost CMS on your local laptop/server/etc. and run a python tool called buster to clone all the contents locally and export to your designate folder(repo) for your github.

Overview

personal-blog/
|__ ghost/
|__ buster/
   |__ blog/    ---> github repo
   |__ changeURL.sh
   |__ generate.sh

1. Install Ghost on your local machine

There is a whole walk through on Ghost.org. Basically make sure you have node and npm installed on your machine. If you are using macOS like myself, you should also have brew[1] installed already.

*nix:

# CentOS / RHEL
yum install -y node npm

# ubuntu
apt-get install -y node npm

macOS:

brew install node npm

2. Install Ghost-Cli and Ghost

One thing I like ghost is that they have a solid cli based tool to help manage the application. (when I first get in touch with WP, there wasn't one. not sure if they have one now or not)

Using your npm to install the ghost package. (Yes, ghost is written in node.js)

npm install ghost-cli

After you got the ghost-cli installed, use it to start a ghost site on your local machine:

mkdir -p personal-blog/ghost
cd personal-blog/ghost
ghost install local

3. Write post

Now open your browser to https://localhost:2368/ghost. Follow the instruction to create an account and start writing. Note that the port 2368 might various if you already have a service occupying the port.

The ghost running port is specified inside file config.development.json.

4. Create github repo

This shouldn't be hard. But create a github repo and pull it down to your local machine.

5. Install Buster

We use buster to brute force our local ghost site and create a static site in our blog/ directory. To install buster, make sure you have python2.7 installed and run:

pip install buster

6. Create script for brute force and preparing static site.

Let's dive straight into the code, shall we?

cd personal-blog/buster
touch generate.sh
touch changeURL.sh
chmod +x generate.sh
chmod +x changeURL.sh

Inside generate.sh:

#!/bin/bash
echo 'Generate pages...'
buster generate --domain=https://your_local_ghost_address:2368/ --dir=blog

Inside changeURL.sh:

Replace:
[github username] --> Your github username
[github repo] --> Your github repo name for github page.

#!/bin/bash
echo 'Changing: your_local_ghost_address:2368 --> [github username].github.io/[github repo]'
find blog/ -name *.html -type f -exec sed -i '' 's/your_local_ghost_address:2368/[github username].github.io\/[github repo]/g' {} \;
resultOne=$(echo $?)
echo 'Changing: https:// --> https://'
find blog/ -name *.html -type f -exec sed -i '' 's/http:\/\//https:\/\//g' {} \;
resultTwo=$(echo $?)


if [ $resultOne == 0 ] && [ $resultTwo == 0 ]; then
    echo "DONE!"
else
    echo "!!! FAILED !!!"
fi

After you have created the scripts, run the generate.sh first and then changeURL.sh.

Finally... Push to Github and turn on github page option

Now you are almost done!
Just go into the repo folder commit the changes and push an update to your remote github repo git commit -a -m 'some update message' && git push origin master.

Remember to turn on the github page option in the repo settings.


Reference:

  1. Homebrew