在GitHub上搭建静态博客

Create Hexo Blog

This post is an guidance of building static blog on github pages, my personal blog is generated with Hexo NexT theme.

Run time :

Ubuntu 16.04
Node.js

Install Node.js

Because nvm (node version manager) is the best tool to install Node.js, you should get nvmbefore installing stable node.js :

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
$ nvm install stable # install stable node.js (which include npm/Node Package Manager)

Install Hexo (Static Blog Generator in Node.js)

Hexo, an excellent blog framework, can help you build a beautiful static site within several minutes. The recommended language is Markdown when you post your passage.

$ npm install -g hexo-cli

Initialize a Hexo Site

Now, it’s time to initialize your first Hexo site :

$ hexo init yourblog # 'yourblog' is a file to sotre your blog project
$ cd yourblog # all operations is executed under this directory
$ npm install # install some module, whose info is stored in `yourblog/package.josn`

Once initialised, here’s what your project folder will look like :

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

yourblog/_config.yml is a site configuration file, you can customize your site info here.

source/_posts is used to store your posts, you can write posts here after reading Hexo doc and Markdown tutorial. And hexo init command creates a Hello-World post for you, you will deploy this post in github pages.

You can download your favorite blog themes in themes , then activate one from theme in yourblog/_config.yml , and you can also modify your themes in themes according to your preference.

Now, let’s start a local server to run your blog :

$ hexo server # execute this command in your blog path

By default, this is at http://localhost:4000/.

Install NexT Theme

All blog themes should be placed in yourblog/themes, and the latest version NexT theme from Github public repository is recommended.

$ cd yourblog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next # necessary to learn [git](https://git-scm.com/doc)

Landscape theme is applied by default, So you have to enable NexT theme like this by edit yourblog/_config.yml:

theme: next # a space before next

Now, you can run NexT theme blog in local machine by hexo s.

Next, you should create your personal github pages to host your static blog.

Create User Pages in Github

In github pages, there three types of gh-pages: User Pages, Organization Pages and Project Pages. User & Organization Pages are created for user and organization, Project Pages serve for project repositories. If you’d like to create Organization Pages and Project Pages or to learn details about them, see this User, Organization, and Project Pages.

User Pages live in a special repository dedicated to GitHub Pages files. You will need to name this repository with the account name.

You must use the username.github.io naming scheme.

Content from the master branch will be used to build and publish your GitHub Pages site.

@DevDocshelp.github.com/articles/user-organization-and-project-pages

By default, you create master branch of User Pages repository by this step:

Create User Pages Repository

Deploy Blog

Hexo provides a fast and easy command to help users to deploy blogs through git or other methods. But you have to install corresponding deployer and configure yourblog/_config.yml(take git type as example):

$ npm install hexo-deployer-git --save # please execute this command under your hexo project

Then edit yourblog/_config.yml like this:

deploy:
  type: git
    repo: [email protected]:username/username.github.io.git #please edit according to your github user name
    branch: master

Right now, you can use hexo d or hexo deploy to deploy you static blog. Https://username.github.io is the home page of your github user pages.

Configure/Modify NexT Theme

Change Scheme

NexT provides three schemes of theme: Muse, Mist and Pisces, can be assign by editing yourblog/themes/next/_config.yml :

#scheme: Muse  #default
#scheme: Mist
scheme: Pisces #recommanded

Menu

Besides, menu can also be personalized :

yourblog/themes/next/_config.yml
menu:
  home: /
  archives: /archives #created by default
  categories: /categories
  tags: /tags

Then, you need to create categories and tags :

$ cd yourblog
$ hexo new page tags
$ hexo new page categories

Editing yourblog/source/categories/index.md and yourblog/source/tags/index.md to add counterpart types:

---
title: Tags #Category
date: 2016-08-25 12:50:01
type: "tags" #categories
---

Favicon

Put your favicon.ico into hexo-site/source/ directory or cloud storage and add url to configuration.

favicon: http://ocb49zgcj.bkt.clouddn.com/favicon.ico

More theme configurations are listed here, which guides you setting fonts, syntax highlight scheme and so on.

Configure Hexo

yourblog/_config.yml is site configuration, you can setting avatar, author name, site description, Comment Plugin, Search Engine, etc.

Avatar & Author Name & Site Description

Add avatar author description item in Hexo _config.yml:

yourblog/_config.yml

avatar: http://example.com/avatar.png # or relative path /images/avatar.png, please place avatar in yourblog/source/images/

author: your author name

description: 革命尚未成功，同志仍需努力

Comment Plugin

By default, Hexo supports DISQUS comment system, NexT supports duoshuo commetn system. Adding disqus short name or duoshuo short name in yourblog/_config.yml to activate one of them.

disqus_shortname: your-disqus-shortname
duoshuo_shortname: your-duoshuo-shortname
# short names are created by signing up an account in DISQUS or DuoShuo.

Local Search Engine

Before adding local search engine in yourblog/_config.yml, please install hexo-generator-search :

$ npm install hexo-generator-search --save # executed in yourblog/

Then, adding these items:

yourblog/_config.yml
search:
  path: search.xml
  field: post
url: http://Captain-Alan.top # edit according to your site directory

More configurations can be find in this blog.

Create First Post

Initialize a Post

Posts are created by a command executed under yourblog/:

$ hexo new post