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.
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.
$ 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.
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|
Either one can be used for hosting static files. I pick the first one because the url is a bit shorter.
First, set information in _config.yml to use git.
$ cd blog
$ vim _config.yml
Second, install a plugin for deployment and use it to deploy the static files to Github Pages.
$ npm install hexo-deployer-git --save # install a plugin for deployment
$ hexo deploy # or hexo d, to deploy to remote site
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.
# This is _config.yml for the site
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.
And I also changed the font size of the menu in
|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|
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.