共计 6566 个字符，预计需要花费 17 分钟才能阅读完成。
一、前言
看过很多人，用 github 创建个人博客，最近抽空也实现的自己的博客，下面就把摸索过程记录下。
二、准备
安装 Node.js
Node.js 下载地址：https://nodejs.org/en/download/
安装过程一路默认安装即可。
详细安装文档参看：http://www.runoob.com/nodejs/…
安装 Git 软件
Git 软件下载地址：https://git-scm.com/download
安装过程一路默认安装即可。
关于更多的 Git 讲解参看：
https://www.liaoxuefeng.com/w…
安装 Hexo
什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
Hexo 官方网站：https://hexo.io/zh-cn/，我用的当前版本是 v6.4.0，基本步骤：
新建一个 blog 空文件夹，cmd 窗口或 vscode 终端，输入命令 npm install -g hexo-cli 全局安装 hexo；
安装完成后输入 hexo - v 显示 hexo 的相关信息说明安装成功；
输入命令 hexo init 初始化 hexo 项目，安装相关依赖：
上一步安装完成，输入命令 hexo s 或 hexo server，开启服务，成功后，在浏览器访问 http://localhost:4000 生成的默认主题博客。PS：在这里可以 npm install hexo-browsersync –save 实现热更新，不必每次更改都去刷新浏览器。
安装完成后的目录结构
– node_modules // 依赖包
– public // 存放生成的页面
– scaffolds // 生成页模板
– source // 创建的源文章
– themes // 主题
– _config.yml // 博客配置（站点配置）
– db.json // 解析 source 得到的库文件
– package.json // 项目依赖配置
三、修改站点配置
_config.yml 文件是对整个站点基本信息的配置，比如：
# Site
title: // 博客名称
subtitle: // 副标题
description: // 描述 用于 seo
keywords: // 关键字 用于 seo
author: // 作者 用于 seo
language: // 语言
timezone: // 时区
四、Github 创建一个 hexo 的代码库
和创建其它 git 仓库一样，只不过名称必须为 yourname.github.io 这种形式，其中 yourname 是你 github 个人账号名，创建好后，找到站点配置文件（blog 下的_config.yml 文件），找到：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
改成你的 博客 git 仓库地址和分支：
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
这样，远程仓库配置完成。接下来
输入命令 hexo generate 或 hexo g 将原 markedown 文章生成静态页面，放置在生成的 public 目录下；
npm install hexo-deployer-git –save 安装 hexo 的 git 插件；
再输入命令 hexo deploy 或 hexo d 将生成的静态页面推送到远程仓库；
完成后，在浏览器访问 https://yourname.github.io/，就能看到你构建好的个人博客啦！
五、写文章
hexo 支持用 markdown 写作，在目录 blog/source/_posts 新建 markdown 文件，或者使用命令 hexo new posts 你的文章标题。
小坑：{{}} 符号编译出错
markdown 生成静态页面，{{}} 是 swig 模板符号，属于特殊字符，在编译时解析不了双大括号中间字符串就会报错
FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 3, Column 8]
unexpected token: }}
解决方案：用转义字符代替
{-> { — 大括号左边部分 Left curly brace
} -> } — 大括号右边部分 Right curly brace
六、配置主题
hexo 默认主题是 landscape，样式可能不是每个人都喜爱的，官方页提供了一些主题，可以按自己的风格安装，只需在站点配置文件_config.yml 更改主题名称。
Next 主题是目前比较流行的主题，文档相对比较成熟。next 主题文档
安装
cd blog
git clone https://github.com/theme-next/hexo-theme-next themes/next
更换主题
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
修改 Next 主题配置文件
目录 blog/themes/next 找到_config.yml 文件，其中有很多配置项，下面列举几个常用的。
更换头像
# Sidebar Avatar
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.png
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: false
只需将头像的 url 换成你自己头像的 url 或者直接覆盖头像图片即可。
注意这里的根 / 的绝对路径是 blog/themes/next/source/，以后写文章引用本地图片的话，注意放到这个目录下！
代码高亮
NexT 使用 Tomorrow Theme 作为代码高亮，共有 5 款主题供你选择。NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night，night blue，night bright，night eighties。
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
添加分类页
文章可能需要分类，添加分类页
cd blog
hexo new page categories
此时在 blog/source 目录下就生成了 categories/index.md 文件：
—
title: 分类
date: 2018-08-28 14:59:48
type: categories
comments: false // 分类页不需要添加评论
—
然后，放开主题配置文件_config.yml 中 menu setting 对 categories 注释
menu:
home: / || home
categories: /categories/ || th
以后文章的内容头声明的分类就会在分类页有索引了。
添加标签页
跟添加分类页一样，文章也需要标签
cd blog
hexo new page tags
此时在 blog/source 目录下就生成了 tags/index.md 文件：
—
title: 标签
date: 2018-08-28 14:34:22
type: tags
comments: false // 标签页不需要评论
—
然后，放开主题配置文件_config.yml 中 menu setting 对 tags 注释
menu:
home: / || home
tags: /tags/ || tags
以后文章的内容头声明的分类就会在分类页有分类了。
404 页
当访问当前站点，页面找不到，跳转到 404 页，推荐用腾讯公益 404 页面，寻找丢失儿童，让大家一起关注此项公益事业！使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8;”/>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”robots” content=”all” />
<meta name=”robots” content=”index,follow”/>
<link rel=”stylesheet” type=”text/css” href=”https://qzone.qq.com/gy/404/style/404style.css”>
</head>
<body>
<script type=”text/plain” src=”http://www.qq.com/404/search_children.js”
charset=”utf-8″ homePageUrl=”/”
homePageName=” 回到我的主页 ”>
</script>
<script src=”https://qzone.qq.com/gy/404/data.js” charset=”utf-8″></script>
<script src=”https://qzone.qq.com/gy/404/page.js” charset=”utf-8″></script>
</body>
</html>
站点分析统计
对于个人站点，我们需要统计用户访问量，用户分布，跳转率等。Next 主题推荐使用的有百度统计、Google 分析、腾讯分析了，使用均一样，注册获取站点统计 id。
百度统计
我一直用的百度统计，注册百度统计，管理 > 网站列表 > 新增网站完成后，代码管理 > 代码获取，就能得到统计 id。
# Baidu Analytics ID
baidu_analytics: 统计 id
不蒜子统计
不蒜子统计可以统计站点以及每个页面的 PV、UV 和站点总的访问数，以小眼睛的形式展现。
编辑主题配置文件中的 busuanzi_count 的配置项。当 enable: true 时，代表开启全局开关。若 total_visitors、total_views、post_views 的值均为 false 时，不蒜子仅作记录而不会在页面上显示。
内容分享服务
Next 主题还提供了对外提供分享接口，包括百度分享、addthis Share 和 NeedMoreShare2，要用到哪个，只需把相应 enable: true，注册账号获取 id 即可。
评论功能
当前版本配置，支持畅言，Disqus，valine，gitment。
畅言 – 搜狐提供的评论组件，功能丰富，体验优异，防止注水；但必须进行域名备案。只要域名备过案就可以通过审核。
Disqus – 国外使用较多的评论组件。万里长城永不倒，一枝红杏出墙来，你懂的。
valine – LeanCloud 提供的后端云服务，可用于统计网址访问数据，分为开发版和商用版，只需要注册生成应用 App ID 和 App Key 即可使用。
Ditment – Gitment 是一款基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。
畅言要备案，对于对于挂靠在 GitHub 的博客非常的不友好，放弃！Disqus，目前国内网络环境访问不了，放弃！valine 在用户没有认证登录可以评论，不能防止恶意注水，放弃！我选择用 Gitment，让用户用自己的 GitHub 账号才能评论，用 git 的一个仓库来存储评论（评论以该仓库的 issue 形式展现）。
gitment 配置
Gitment 的全部配置项如下，
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: true # Hide ‘Powered by …’ on footer, and more
language: zh-CN # Force language, or auto switch by theme
github_user: xxx # MUST HAVE, Your Github Username
github_repo: xxx # MUST HAVE, The name of the repo you use to store Gitment comments
client_id: xxx # MUST HAVE, Github client id for the Gitment
client_secret: xxx # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
开启 enable 为 true 就显示评论框了，不过要真正实现评论可用，需要用自己的 github 账号注册一个应用许可证书，即 OAuth application，注册成功就生成了 client_id 和 client_secret。
步骤：你的 github 首页 > settings > Developer settings > OAuth Apps > New oAuth App。填写好相关信息，其中，Homepage URL 和 Authorization callback URL 都写上你的 github 博客首页地址，比如 https://xxx.github.io/，点击 Register application 即可完成注册，生成 Client ID 和 Client Secret。
这样，用户点击评论框右边登入跳转到 github 授权，允许授权跳转回来就可以评论啦！
小坑：有些文章评论初始化弹出 validation failed 错误
因为 GitHub 的每个 issues 有两个 lables，一个是 gitment，另一个是 id，id 取的是页面 pathname，标签长度限定不超过 50 个字符，而像一般中文标题文章，转义后字符很容易超过 50 个字符。
目录 blog/themes/next/layout/_third-party/comments 找到文件 gitment.swig，
在这里我用文章创建时间戳来当作 id，这样长度就不会超过 50 个字符，成功解决！
七、总结
构建自己的博客并不难，也不需要什么专业代码基础，需要的是耐心而已（┭┮﹏┭┮都是配置）。PS：我的 GitHub 博客 https://wuwhs.github.io 大佬拍轻点