使用hexo搭建github静态博客

hexo
  1. 1. 登陆Github，创建Reposity
  2. 2. 安装Node.js
  3. 3. 安装git
  4. 4. 安装hexo
  5. 5. 配置config
  6. 6. 配置ssh key。
  7. 7. 发布
  8. 8. 查看
  9. 9. 切换主题

网上虽然不乏此类教程，但是实际操作起来还是遇到了一些问题。
总结如下。

以Windows 7系统为例：

登陆Github，创建Reposity

  1. 用户名.github.io, 例如我的是zhouzhuo810.github.io
  2. 点击Setting->Choose Theme->随便选一个Theme->Select->默认Readme
  3. 访问username.github.io可以看到readme的内容即可。

安装Node.js

https://nodejs.org/en/
选择第二个下载安装。

安装git

安装hexo

使用cmd命令行工具，

1
2
3
4
5
6
F:
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

配置config

1
2
3
4
5
6
title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: zh-CN 
timezone: Asia/Shanghai
1
2
3
4
deploy:
    type: git 
    repo: 复制github的ssh格式的路径(不要用https格式的)
    branch: master

配置ssh key。

  1. 打开git bash
    1
    2
    3
    $ git config --global user.name "你的github用户名"
    $ git config --global user.email "你的github验证邮箱"
    $ ssh-keygen -t rsa -C "你的github验证邮箱"

一路回车即可。

默认在C:\Users\Administrator.ssh下

找到id_rsa.pub文件。

2.
记事本打开，复制所有内容。

到
https://github.com/settings/keys
配置即可

标题随意。

3.
最后别忘了最关键的一步：

验证SSH key配置是否成功：

1
$ ssh -T git@github.com

如果弹出
Are you sure you want to continue connecting (yes/no)?
输入yes，回车

等待结果：
如果返回以下内容，说明成功了。

1
Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.

然后在博客目录下，执行如下命令：

1
npm install hexo-deployer-git --save

不行就

1
npm install --save hexo-deployer-git

发布

1
2
3
hexo g

hexo d

查看

不出意外的话，通过username.github.io可以访问到发布的内容了。

切换主题

https://github.com/stkevintan/hexo-theme-material-flow

1.安装插件和下载主题

1
2
3
4
5
6
# change to work dir
cd /your_blog_dir/
# install dependencies
npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content
# download source
git clone https://github.com/stkevintan/hexo-theme-material-flow themes/material-flow

注意事项：多个插件同时安装报错时，拆分成单个插件安装即可。

如：

1
2
3
4
5
6
7
8
npm i -S hexo-generator-search

npm i -S hexo-generator-feed

...

...

2.修改配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
avatar: /images/avatar.jpg
favicon: /images/favicon.ico

theme: material-flow
search:
  path: search.xml
  field: post

autoprefixer:
  exclude:
    - '*.min.css'
  # remove: false # prevent autoprefixer remove page-break-inside
  # browsers:
  #   - 'last 2 versions'
  #   - '> 5%'

# Generator json content
jsonContent:
  meta: false
  keywords: false
  pages:
    title: true
    slug: false
    date: false
    updated: false
    comments: false
    path: false
    link: false
    permalink: true
    excerpt: false
    keywords: false
    text: true
    raw: false
    content: false
  posts:
    title: true
    slug: false
    date: false
    updated: false
    comments: false
    path: false
    link: false
    permalink: true
    excerpt: false
    keywords: false
    text: true
    raw: false
    content: false
    categories: false
    tags: false

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

3.头像和网站图标配置

在sources文件夹下新建images文件夹即可。

hexo
prev：