作为一个前端攻城狮，总有一个博客梦，想做一个好看的，有特色的博客，又不想从头开始造轮子，偶然的一天看到了别人用github pages搭的个人博客页，十分简洁大气，遂问了搭建方法，自己开始尝试，中途踩了不少的坑，花了半天的时间，看了这篇博客的亲们，肯定不会超过一个小时。

1.配置环境

• node.js：安装Hexo需要使用node.js环境

• git：提交你的本地仓库

• github账号：创建仓库，配置github pages域名等

  一般来搭建github pages的亲们这些都已经很熟悉了吧，就不在这里啰嗦了，确实有需求，百度上也有很多经验贴。

2.安装Hexo

全局安装hexo

$ npm install -g hexo

进入本地项目路径，初始化hexo

$ hexo init

安装启动服务，并更新package.json文件中的依赖

$ npm install hexo-server --save

好了，可以启动服务预览一下

$ hexo s

Tips1: 默认是4000的端口，可能有不少人运行了之后发现无法访问，通常这种情况是4000端口被占用，比如电脑上安装了福析阅读器的人。

可以更改端口

$ hexo s -p 5000

如果不想每次都更改这个文件这么麻烦的话，可以在hexo的配置文件_config.yml中修改或增加这段代码

# Server
server:
  port: 4000
  compress: true
  header: true

3.使用Yilia模板

Hexo有很多模板，可以去官网上看，这里挑一种模板感觉比较简洁明了的模板给大家讲解

官方效果如下

感觉比较简洁明了，有搜索、标签等功能。

1.安装

进入项目路径，执行以下代码

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

2.运行

hexo g
hexo s

会看到初始效果，即上图中没有头像、只有一篇已发文章、标签文章列表不能使用、博主名和签名默认值、文章没有评论功能的样子。

3.配置

接下来，我们来配置一些个人信息，并说明如何发布文章，部署博客到自己的github pages。

一共有两个配置文件，一个是根目录下的_config.yml这个文件，一个是主题目录下的 _config.yml文件。下文中称根目录下的为config1文件，主题目录下的为config2文件。需要注意的是，所有配置冒号后面都需要有一个空格。

侧边栏

博主名、昵称

在config1文件中，我们在# Site区块中更改title、subtitle、author、email、keywords等值即可。

其他社交

左侧栏中还有知乎、微博等分享链接，在config2文件中，配置# Subnav区块

subnav:
  github: "https://github.com/Kate605690919"
  zhihu: "http://www.zhihu.com/people/shu-zhen-49"

头像

在config2文件中，我们配置avatar属性，模仿默认值写上自己的相对路径，此处相对路径定位到根目录的source文件夹中，或是写图片外链。

导航

在config2文件中，我们配置#Menu区块

menu:
    主页: /
    相册: /photos

主页和相册两个key值就是导航中显示的名字，对应的value即为路径，此处相对路径对应的定位也是根目录的source文件夹中，与头像的位置定位相同。

智能菜单

左侧栏中的所有文章，关于我，友链等选项，在config2中设置smart_menu属性对应的项，具体配置，这个文件中有注释说明。其中，如使用友链，需配置friends属性；如使用关于我，需配置aboutme属性，所有文章需要另外配置，配置方法参见 运行之后，点击所有文章，上面写的方法，照做即可。

smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  友情链接1: http://localhost:4000/
  友情链接2: http://localhost:4000/
  友情链接3: http://localhost:4000/
  友情链接4: http://localhost:4000/
  友情链接5: http://localhost:4000/
  友情链接6: http://localhost:4000/

aboutme: 谢谢大佬打赏~<br><br>博主大人很漂亮<br>大家常来逛~

文章区域

要发布的文章，请用markdown编写，放在根目录的source文件夹的_post子文件夹中，只这么做的话，会发现不显示标题，列表页也会将所有内容截断显示出来，需要在md文件的开头加上以下配置内容。

---
title: React报错汇总(持续更新中...)
tags:
  - React
  - JavaScript
toc: true
comment: true
---

标题

title就是文章的标题。

标签

tags就是这篇文章的所属标签，除了列表页，点击左侧导航栏的所有文章处，也可以用tags来进行索引。

目录

toc表明是否显示目录，除了此处外，还需配置config2文件中toc相关部分，具体内容config2文件中有注释。

快速回顶部按钮

快速回顶部按钮是config2中的top属性，设置为true即会出现。

评论

设置comment属性为true，即为此页需显示评论，初次之外还应配置config2文件中评论部分，犹豫多说、网易云跟帖相继关闭，disqus又觉得样式丑，配置麻烦，此处使用gitment。

gitment需要配置一下属性

#5、Gitment
gitment_owner: Kate605690919      #你的 GitHub ID
gitment_repo: 'Kate605690919.github.io'          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

前两个都很容易填写，gitment_oauth是github第三方接口授权，在浏览器中打开github，登录之后步骤如下：

上图的表单填写，除最后一项需要填写你博客网站的网址之外，均可随意填写，提交之后就可以看到这个Application对应的client_id和 client_secret。

列表页文章只显示部分内容，显示更多按钮

在文章适当的位置插入<!-- more-->即可在此处截断，替代的显示更多按钮。

4.发布文章

添加进去的文章如何显示出来呢，还是只需要这两个命令

hexo g
hexo s

即可看到你添加进去的文章了。

5.部署到github pages

设置config1中的deploy属性

deploy:
  type: git
  repository: https://github.com/Kate605690919/Kate605690919.github.io.git
  branch: master

repository就是着这个博客所在仓库的地址

然后在终端里运行下列命令即可。

hexo clean
hexo g
hexo deploy

恭喜你，达成成就~。