TechnologyGithub

How to setup a blog on github with Hexo

You can just copy & paste the codes below to setup a blog.

Related links

Prerequisites

Install Git

  • Windows: Download & install git.
  • Mac: Install it with Homebrew, MacPorts or installer.
  • Linux (Ubuntu, Debian): sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS): sudo yum install git-core

Install Node.js

The best way to install Node.js is with nvm.

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

Once nvm is installed, restart the terminal and run the following command to install Node.js.

$ nvm install 4

Alternatively, download and run the installer.

Install Hexo

Once all the requirements are installed, you can install Hexo with npm.

$ npm install -g hexo-cli

Setting up a github repository

You should change {blogname} with your desired word.

Setup a github repo with the name, {blogname}.github.io
ex) zirho.github.io
https://github.com/zirho/zirho.github.io

Setting up Hexo with Github

Setup a blog

1
2
3
4
$ hexo init {blogname}
$ cd {blogname}
$ npm i
$ git init

This will generate the {blogname} folder and install dependencies.

Install a theme

Browse here to find out something cool.

Once you decide your mind, fork it to customize it or just get the github repo url from the theme info.

ex) https://github.com/ppoffice/hexo-theme-minos

1
$ git submodule add {theme-github-url} themes/{theme-name}

Copy _config.yml.example to _config.yml

1
$ cp themes/{theme-name}/_config.yml.example themes/{theme-name}/_config.yml

*Some themes may differ on _config.yml.example file name
Refer to the theme docs

Update _config.yml to use newly installed theme. (Don't get confused with the theme config file)

1
$ vi _config.yml

Find theme attribute and change it.
ex) theme: hueman

1
theme: {theme-name}

Setup blog & deploy info

Edit _config.yml in root folder. (Don't get confused with the theme config file)

1
$ vi _config.yml

Update blog info as desired.
Below is my own for instance.

1
2
3
4
5
6
title: CodePaste 
subtitle:
description:
author: Joshua Youngjae Ji
language: en
timezone: America/Los_Angeles

Add below code at the bottom of the file for deploy on github repo.

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

Deploy the blog

1
2
$ npm i -S hexo-deployer-git
$ hexo deploy

At this point, you should be able to see your blog at http://{blogname}.github.io.

Add the source to the github repository (optional)

To maintain version of the code, you can make another branch and push the commits.

1
2
3
$ git remote add origin {your-git-repo-url}
$ git checkout -b source 
$ git push origin source

Deploy new post

Adding a new post

1
$ hexo new {postname}

Edit the new post file

1
$ vi source/_posts/{postname}.md

Regenerate files and deploy at once

1
$ hexo generate -d

Happy posting!

Share