Hexo+GitHub Pages+Redefine+Giscus建立个人站点

前情提要

搭建整个博客不需要任何额外的东西，比如域名，比如服务器之类的。但是需要你能访问到github。

熟练起来，搭建大约两个小时，初次搭建大约需要一天。

Hexo：一个博客框架，可以认为是一个帮助你快速建立博客的工具集。可以通过命令行的形式创建页面，启动服务，上传到github之类的。当然，除了Hexo，也有其它的博客框架。

Redefine：Hexo博客框架下的一个主题，Hexo可以管理多个主题。

GitHub Pages：github的静态网页部署方式，可以让你的html在网页上直接打开。

Giscus：博客需要评论，评论就需要评论系统，Giscus就是一个评论系统。 除此之外也有其它的评论系统，它们大概都是根据存储评论地方的不同而区分，比如有的是存在github的issue，有的是存在第三方存储平台，按需索取。

大概的流程是：

1. 你需要在Hexo的主题列表中选一个自己心仪的主题，然后在本地部署起来。（可以直接在本地访问网页）
2. 然后在github创建一个仓库，打开pages
3. 通过hexo将本地的博客系统部署到github仓库
4. 配置Giscus评论系统

搭建博客 & 部署pages

【基础篇】hexo博客搭建教程 - huanhao - 博客园 (cnblogs.com)

搭建博客可以参考上述这个链接，写的蛮详细的。

评论系统

我这个主题的评论系统支持四种：

我分别试了waline、gitalk、giscus三种，只有giscus可用。

waline在国内被墙，需要一个自定义域名，国内的域名需要备案，国外的申请也比较麻烦，过程很繁琐。

gitalk在国内没有被墙，但是它需要调一个github的auth api，这个api被墙了，所以也不能用。

只有giscus可以用。

如果你的主题支持giscus的话，打开配置文件，大概会有这些选项需要配置

giscus:
  repo: huyunfei-blog/blog-comment # Github repository name e.g. EvanNotFound/hexo-theme-redefine
  repo_id:  # Github repository id
  category:  # Github discussion category
  category_id:  # Github discussion category id
  mapping:  # Which value to use as the unique identifier for the page. e.g. pathname, url, title, og:title. DO NOT USE og:title WITH PJAX ENABLED since pjax will not update og:title when the page changes
  strict: 0 # Whether to enable strict mode. e.g. 0, 1
  reactions_enabled: 1 # Whether to enable reactions. e.g. 0, 1
  emit_metadata: 0 # Whether to emit metadata. e.g. 0, 1
  lang: zh-CN # Giscus language. e.g. en, zh-CN, zh-TW
  input_position: top # Place the comment box above/below the comments. e.g. top, bottom
  loading: lazy # Load the comments lazily

这些选项可以直接在giscus的官网生成配置：https://giscus.app/zh-CN

从这里开始：

我们可以看到，前提要求：

• 仓库公开
• 安装了giscus app
• 仓库的discussions功能开启

1，创建一个公开的仓库（我曾经用博客的仓库来做评论，但总是有问题，所以建议新建一个仓库。比如blog-comment）

2，安装giscus app：https://github.com/apps/giscus

如果不想给所有仓库都配置giscus，可以只给某个仓库设置：https://github.com/settings/installations/54280830

3，在仓库的settings中打开Discussions。（因为Giscus是使用GitHub Discussions来支持评论的）

接下来就可以继续填写了。我的github用户名是huyunfei-blog，仓库名是blog-comment，我应该填写：

huyunfei-blog/blog-comment

接下来第二项，下面这一项的意思是评论的标题是什么，如果是title的话，当你评论一下，在discussions中就会显示，文章名 - 博客名（world - Yun Fei’s Blog）。

这个可以根据自己的需求，我会把1,3,4勾选。

上面都配置完成之后，下面的配置项自然就会刷新，然后放到你的主题配置文件里。

然后可以部署到github上之后，试一下：

文章加密

// 下载
npm install --save hexo-blog-encrypt

// 站点配置文件（_config.yml）中启用，这个是全局配置。文件也可以设置，文件的配置优先级大于配置文件。
encrypt: # hexo-blog-encrypt
  abstract: 请输入密码查看.
  message: 您好, 这里需要密码.
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  
// 接下来就可以在文章的头部加上对应字段（如果password为空，则不加密）
password: 123

注意不要把md文件公开。不然就能看到password了。

你在本地设置好后，通过hexo上传到github，会自动把md文件编译为html，所以不会显示你的密码。

typora和博客的图片显示问题

通常来说，hexo的文件目录是下面这样：

public文件夹是每次hexo编译source文件夹下的内容，然后重新生成的，public文件夹我们不要动，通常只在source文件夹下修改。

source文件夹下，posts就是存的我们博客文章，是很多md文件。about，categories、tags是一些独立页面。比如我的博客的“关于”，就是about里控制的。

也就是说，当你在写博客文件的时候，你是基于_posts这个文件夹来写的。但是实际上的博客运行时，是基于public文件夹来访问的。这肯定会导致两方的图片路径不匹配。

首先需要修改typora的图像路径（你也可以用相对路径），我这里是为了其它原因，采用了绝对路径。

总归是插入图片之后，放到source文件夹下的images文件夹（images没有的话自己创建，其实也可以是任何的名字，但是纠结起来很麻烦，images是最方便的）。

最后的filename意思是以文件名称创建一个文件夹，这样每个博客文章都有一个文件夹，便于图片的分类识别。

这个时候，当你在_posts下写文章的时候，插入一张图片，图片路径显示的应该是：**../images/(文章名字)/(图片名字)**

此时你部署博客，会发现图片无法正常显示，因为到了网络上就变成了：

https://……/website/../images/(文章名字)/(图片名字)

会发现站点后边，把那个“..”也拼接上去了，如果把“..”去掉，图片就可以正常显示了。

这个时候需要设置一下typora的根图片根目录为source文件夹：

这个时候你再插入图片，就从**../images/(文章名字)/(图片名字)变成了/images/(文章名字)/(图片名字)**，图片也可以正常显示了。

然后你的文章的抬头，会多一个typora-root-url，这个意思就是图片的根目录修改。

热加载配置文件

启动hexo之后，当你修改配置文件，浏览器不会自动刷新，更新相关内容。

可以通过下面这种方式，实现热加载。

// 安装插件实现热加载，然后正常启动即可
npm install --save-dev nodemon

// 根目录创建nodemon.json配置文件
{
  "watch": ["_config.yml", "_config.*.yml"],
  "exec": "hexo s",
  "ext": "yml"
}

// 启动Hexo服务器
npx nodemon

修改hexo默认生成的md文件格式

hexo new post “博客名称”

上述命令可以生成一个博客，也就是在_posts文件夹下，生成一个md文件。默认会有一些抬头，比如文件名称和时间字段。

但是这个默认生成的md未必是我们想要的，比如我们需要多加一些字段，甚至是我们可以设置一个博客模版，需要在哪里修改？

修改下面的post.md文件即可。

SEO优化

优化的意思是可以提升你的博客的页面排名，得到更多的曝光。

通常来说，可以提交给百度和谷歌收录。但是由于我们的博客是部署在github上，而百度不收录pages的站点。（但其实对于个人独立站来说，百度的收录就跟没有一样，页面排名根本上不去。）

所以我们的SEO优化只有一条路，就是让google收录。

文章永久链接

这样你修改文章名称或者日期后，文章链接不会发生变化。有时候主题里会内置这个。

// 安装插件
npm install hexo-abbrline --save

// 修改站点配置文件（_config.yml），需要注意，可能你的站点已经配置了permaline这个参数，如果重复了，站点部署会失败
permalink: posts/:abbrlink/
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex
   

生成站点地图

// 安装插件
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-sitemap --save
// 修改站点配置文件
url: https://huyunfei-blog.github.io/website  // 修改为你的github站点
# sitemap
Plugins:
  - hexo-generator-baidu-sitemap
  - hexo-generator-sitemap
baidusitemap:
  path: baidusitemap.xml
sitemap:
  path: sitemap.xml

hexo generate && hexo server之后，可以直接访问localhost:4000/sitemap.xml查看站点地图，就是你的各个html的路径。

提交给google search console收录

登录到google search console ，然后我选择的html验证。

你需要把google要你下载的那个html放到source文件夹下，然后hexo s -d部署到github上。

此时通过你的站点应该是可以正常访问这个文件的：

https://huyunfei-blog.github.io/website/google9f1d…

然后回到google search，就可以点击验证了。 验证通过之后，这个文件可以删掉。

进来之后，可以看到你的站点的相关数据，但是新提交的，需要一天时间之后才能看到。

点击站点地图，这里把刚才的sitemap站点数据写在上面添加进去，这样当你新产出博客后，会自动添加到站点地图而被google感知到。