Build blogs with Hexo!

Welcome to my blog! In this my very first post, I will record my experience of building this blog with the help of Github Pages and the amazing Hexo! This not only keeps a record of what I did, but also may help those who want to build a personal blog site. Ok, let’s get down to the business.

Prerequisite

  • Node.js
  • Git

Node.js and Git should be installed properly on your machine.
If not, download Node.js and Git, then choose the version you want.

Install Hexo

1
$ npm install -g hexo-cli

Set up Hexo

1
2
3
$ hexo init [your-site-directory]
$ cd [your-site-directory]
$ npm install

If [your-site-directory] is not specified, hexo will create the project in the current working directory.

Create a post

1
$ hexo new post [your-post-title]

Will find a new post is created in /source/_posts

All posts created by hexo is written in Markdown. You can edit in favorite editor or I recommend to use this online editor – StackEdit.

Generate static files

1
$ hexo generate

This will create a /public folder in the root of your project, and it contains all static html, css, js, fonts, images, etc.

Run hexo server locally

1
$ hexo server

The server will be running in http://localhost:4000/ And this offers a convenient way for you to view what you have changed with the look of your website.

From offline to online

Hexo provides many ways to deploy the website to your real server. I choose to deploy to Github Pages.

Create a github repository

Go to github and create a repository named: [your-github-username]-github.io, mine is xiangxianzui.github.io.

Go to settings of created repository, pull down the page and you find:

GitHub Page Setting

Next, deploy a SSH key to this repository. This article is helpful.

Git deploy strategy for Hexo

Install the official git deploy strategy for hexo.

1
$ npm install hexo-deployer-git --save

After that, edit deploy config in your _config.yml (located in project root).

1
2
3
4
5
deploy:
type: git
repo: [your-ssh-repo]
branch: master
message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

Then, deploy website to git repository

1
$ hexo deploy

Note: If you are using Windows, it is recommended to run deploy command in Git Bash.

Take off!

Browse https://[your-github-username].github.io/ and enjoy your flight with Hexo!


Written with StackEdit.