使用Github Pages + Hexo 搭建个人博客

发表于

都说没有博客的前端不是好前端，之前在本地oneNote上习惯写一些心得与总结的文档，但仅供自己学习与参考，没有做到更好的分享与交流。在此，开启我的博客之路。
用github pages + hexo 搭建了我的个人博客，也踩了一些坑，与大家分享：

大致流程:

  1. 新建github pages账号。
  2. 在本地环境搭建Hexo，hexo和github pages账号绑定，通过hexo命令将代码上传github pages上。

新建github pages

需要一个github账号，然后新建一个仓库，仓库名称必须是：yourGithubName.github.io
例如：我的github账号为：yaoyiee，新建仓库名称为:

1
yaoyiee.github.io

安装Hexo

Hexo是一个快速，简单且高效的博客框架，它通过Markdown（或其它引擎）解析并生成静态网页。
首先需要安装git和node环境，默认已经安装好了，现在安装hexo.

1
$ npm install -g hexo-cli

利用Hexo建站

1
2
3
$ hexo init <yourFolderName>
$ cd <yourFolderName>
$ npm install

本地查看效果

1
$ hexo server

在浏览器中输入：http://localhost:4000，显示为默认主题效果。

github pages与 Hexo进行绑定

配置 _config.yml 文件，在_config.yml 文件最后修改配置（注意type, repository, branch前面有空格）

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
   type: git
   repository: https://github.com/yaoyiee/yaoyiee.github.io.git
   branch: master

内容上传到github pages

通过hexo命令上传

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

如果上传失败，可更新package.json文件，可将下面内容替换package.json

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
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.5"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-browsersync": "^0.2.0",
    "hexo-deployer-git": "^0.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.0",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.1.2",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-jade": "^0.3.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-sass": "^0.2.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }
}