This is a blog based on Github Pages and powered by Hexo. The first post created by Hexo is always called “Hello World”, so I keep this title for my first post.
This is not my first blog. I have tried something else before, like wordpress. The problem is that it is hard to find a trustworthy website hosting service for free. Anyway, after doing some research, I think github might be a good choice. It was an easy setup, and a day would be enough to get everything done.
This post is about how to set up a blog using Github and Hexo.
Why Github Pages + Hexo
Actually you can write your blog using Github Issues. It is not bad at all, and it also has a built-in comment system. However, you can’t customize the blog theme, so it is not good enough.
A more popular solution is to use Github Pages as a web server to host static files. You can either upload Markdown files to Github Pages and then let Jekyll which is the engine behind Github Pages render the files and generate a static website, or use other engines like Hexo to generate the static website in your computer and upload the static files to Github Pages. I chose the second solution because I like the idea that I can deploy the blog locally.
Steps of setting up your own blog
1. Install Hexo and initialize your blog
1 | $ npm install -g hexo-cli # installation |
You can check http://localhost:4000/ to have a view of your blog, which contains a post generated by Hexo.
2. Create your Gitbub Pages
There are two kinds of Gitbub Pages: User Page and Project Page.
| User Page | Project Page |
|---|---|
| One user page per user account | One project page per repository |
| repository name: username.github.io | no requirements on repository names |
| files must be checked in to master | files must be checked in to gh-pages |
| https://username.github.io | https://username.github.io/projectname |
Either one can be used for hosting static files. I pick the first one because the url is a bit shorter.
3. Deploy your blog to Gitbub Pages
First, set information in _config.yml to use git.1
2$ cd blog
$ vim _config.yml
1 | # URL |
Second, install a plugin for deployment and use it to deploy the static files to Github Pages.1
2$ npm install hexo-deployer-git --save # install a plugin for deployment
$ hexo deploy # or hexo d, to deploy to remote site
4. Change your blog theme
I use NexT for my blog theme. The installation is easy. First, pull the code down from Github and put it under themes. Next, set information to use the theme.1
2
3# This is _config.yml for the site
# Extensions
theme: next
And here comes the fun part: customize your theme.
- Create new pages, such as about, categories and tags
- Go through the items listed in _config.yml under themes/next and make any changes whatever you like
- Modify the CSS files for whatever bothers you
The trick for the last point is that you need to find what the attributes are and where they are defined. Most of them can be found in /themes/next/source/css/_variables/base.styl, what I need to do is to overwrite them in /themes/next/source/css/_variables/custom.styl.
1 | // text |
And I also changed the font size of the menu in
/themes/next/source/css/_common/components/header/menu.styl.
Hexo commands
| Commands | Abbr. | Comments |
|---|---|---|
| hexo generate | hexo g | generate static files which are stored in public/ |
| hexo server | hexo s | run the server |
| hexo deploy | hexo d | deploy the static files to remote site |
| hexo clean | remove the generated files | |
| hexo new my-post-name | create a new post file | |
| hexo new page my-page-name | create a new page |
Images for the blog
I was intended to put the images under public/, so that I could use the same repository. But public/ can be removed entirely if I change the blog theme or run the “hexo clean” command, so I created another repository to store the images.
References
1 利用GitHub写博客的几种方式
2 How to use Hexo and deploy to GitHub Pages
3 手把手教你使用Hexo + Github Pages搭建个人独立博客
4 NexT特性配置
5 Hexo-编辑：在Next主题中插入表格的正确方法