I have been procrastinating on building a personal blog for quite a while. It is one of those things that you know it is important and would do great good to you, but you just can’t seem to find time to finally work on it (and, yes, almost always, it is just your another excuse).
Things have changed after I am half way through this awesome book (Soft Skills: The software developer’s life manual) by John Sonmez. The book again emphasizes the importance of a well-maintained blog to your personal brand and your career as a developer, among other good career tips. More importantly, it teaches a few really practical GTD tricks that seems to have cured with my procrastination so far (FYI, I am using them right now to write this blog post).
So, here your are, at my new blog “Commit Logs” at commitlogs.com, where I will be blogging about programming, data science and technology in general.
Alright, enough talking, let’s see some code :).
Step-by-Step Guide
So you have decided to build your own blog. There are a couple of questions that you need to ask yourself.
Where you want to host your blog?
I chose Github Page, instead of a more traditional wordpress based host, because 1) I already use Github on a daily basis for other projects 2) there is no over-head to set up a database 3) it provides a free 300Mb storage space.
What framework you want to use?
Assuming you decided to host your blog on Github Page, there are a couple of frameworks to choose from, e.g. Jekyll (ruby), Pelican (python) and Hexo (javascript). All these frameworks provide dummy setup within a few commands so you don’t really need to know the langauge to start with. I decided to use Hexo for its beautiful themes (you know those front-end guys love javascript, right?) and numerous handy plugins.
Whether you want to use customized domain name?
I would strongly recommend as it is important to build your own personal brand and it really only costs a few bucks a year. It is also very easy to set up. More on this later.
You can keep on reading if you (smartly) decided to host your shiny new blog on Github Page using Hexo ;).
Prerequisites
Before started, you need to make sure node.js and git are installed locally. If not, you can get them installed easily with the follwing commands in terminal (note that I am assuming your are using a Mac).
Install homebrew
In case you haven’t already, you should also install homebrew, which I, among a lot of other folks, believe is the best package manager on Mac.
1 | $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
Install git
1 | $ brew install git |
Check if git is installed successfully with git --version.
Install node.js and npm
node.js is a javascript runtime and npm is its package manager, which will be installed automatically together with node.js.
1 | $ brew install node |
Check if they are installed successfully with node --version and npm --version.
Set up Hexo
Hexo can be installed locally with one line of command.
1 | $ npm install hexo-cli -g |
Suppose you want to save all files related to your blog under a local folder named myblog.
1 | $ hexo init myblog |
Surprise, surprise, you have already successfully built your blog locally with a sample blog post. Visit http://localhost:4000/ to find it out!
Choose a Hexo theme
One of the advantages of Hexo is that its community has contributed to a great number of awesome themes for your blog (you can, of course, build your own if you desire). You can find a list of samples on their website or Github wiki.
Pick the one that you like (I am using next, the theme of this blog, as an example) and install it under your myblog folder.
1 | $ hexo clean |
To apply the installed theme, you just need to modify myblog/_config.yaml.
1 | # Extensions |
Note that, there are actually two _config.yaml files. One is directly under myblog/ and the other is under myblog/theme/next, which is specific to each theme and used to modify a theme. I am not going into too much details about the configuration of myblog/theme/next/_config.yaml. You can usually find pretty good documentation under the git repo of the theme that you chose.
To see the new appearance of your blog, excute the following commands and refresh the page http://localhost:4000/.
1 | $ hexo clean |
Add useful plugins
Besides themes, the Hexo community also develops many useful plugins that can be enabled pretty easily. Take the ones that I use for this blog for example. You can install them via
1 | $ npm install hexo-generator-feed --save |
and then edit the myblog/_config.yaml by adding the following lines.
1 | # Extensions |
These plugins will generate three files atom.xml, sitemap.xml and search.xml under myblog/public/ after you generate the site to enable RSS feed and other utilities (details can be found under the git repos for these plugins).
So far, you have finished almost 80% of local development work, isn’t it easy?
Set up Github Page
Now, let us set up the Github Page for the new blog. Every Github user account has one repo to host a blog page and the repo has to be named as username.github.io. Here is my repo for example https://github.com/LeiG/LeiG.github.io.
You just need to create an empty repo with a name of the required format. It is exactly the same as what you would do with other repos, so I am going to skip the details here. A good Github wiki page may help if you run into any issues (see creating-a-new-repository).
Deploy to Gihub Page
Here comes the most important step. That is, you need to deploy your local blog to Github Page. Don’t freak out. It is just as simple as all the previous steps.
First, you will need to install a plugin
1 | $ npm install hexo-deployer-git --save |
and add the following to myblog/_config.yaml (replace LeiG with yours).
1 | deploy: |
After that, deploy to Github is as easy as a one-line command. If you run into any permission issues, it may be that you need to add ssh key to your Github account (see here).
1 | hexo d -g |
Note Hexo blog can be deployed to multiple platforms. Here I only cover the Github part, but you can find all the details on this wiki page.
Okay, if you have followed through all the steps, you should now be able to access your Github Page at LeiG.github.io (replace LeiG with your own username)!
Set up customized domain name
If you are serious about this blog thing, I would recommend you to get a customized domain name. You can get one for a few bucks very easily and it would greatly help your personal brand. Plus, it just feels so cool to have a space on the Internet that is yours.
I registered my domain name commitlogs.com with Namecheap, which is one of many similar services, but I find it very easy to deal with.
Add a CNAME file
After you decide on your domain name, you need to add a CNAME to the git repo. Take my domain name commitlogs.com for example, you need to create a file named CNAME under myblog/public that contains only one line of content.
1 | commitlogs.com |
Set up the DNS
Use the setup at Namecheap, you first navigate to your Domain List >> Advanced DNS option and set up the DNS as the following:
- Click the Add New Record button and then select
A Recordfrom the list. You will then enter@for Host and192.30.252.153for IP Address. Leave the TTL asAutomatic. - Add another new
A Recordwith the same@for Host, but192.30.252.154for IP Address. Leave the TTL asAutomatic. - Add a new
CNAME Record. For Host setwwwand for the IP Address use your Github Page address with trailing period (e.g.LeiG.github.io.).
Save the changes and you are all set, although it may take some time for the changes to propagate.
Create a new post
You can now post your first blog article or generate a new page to start your exciting blog journey.
1 | $ hexo new "my_first_blog_post" #create a new blog post |
Hexo automatically generate a Markdown file under myblog/source/_posts/ and you can use your favorite Markdown editor to open it and generate awesome content right away.
Ending
Congratulations on your new blog!
Hope you enjoy this post and feel free to leave a comment if you have any questions. Remember, the only way to build a successful blog is to consistently produce high quality content.
Let’s back each other up!