本文记录了基于 shoka 主题的 hexo 基础搭建流程，不包含 algolia 搜索以及 valine 以及 shoka 主题的一些定制功能的实现。

# 事件起因

其实我已经有了一个 typecho 博客，那么为什么我还要再搭建一个 hexo 博客呢？
起因是这样的，有一天我无意间看到 mqygalaxy 的博客。这个博客的主题瞬间戳中我的 XP，实在太对我的胃口了，顿时有了产生了 “我也整个呗” 的冲动。
曾几何时，我也尝试过搭建 hexo 博客，但都在繁琐的搭建教程面前半途而废，但这次这个主题给了我前所未有的动力。

当然，我会选择 hexo 搭建备站，还因为一些 hexo 本身的优点:

1. hexo 博客托管于 github, 对我来说，安全性比 typecho 高。^[1]
2. 完全免费白嫖实在太香了！代码托管用 github ，cdn 加速用 jsdeliver ，评论用 valine ，搜索用 algolia ，而且体验都还不错。
3. 虽然搭建很繁琐，后续的使用还是比较简单的。其实也可以通过 github action 实现在线编辑，不过我还是比较喜欢用 Visual Studio Code 安装 markdown插件 进行本地编辑。
4. 霜月琉璃大佬的 shoka 主题不光好看，还有很多适合当笔记使用的特性，我本来就准备把博客当作笔记来写，这让我爱不释手。
5. 跟 typecho 一样使用 markdown 进行博客编写，这点对我很重要。
6. 可以使用随机图 api，终于不用辛苦选图了。

# 搭建过程

# Hexo 搭建

Hexo 可以理解为一个软件，他可以一键生成一套静态博客的文件。生成后可以放在任意地方进行访问，当然你也可以通过 hexo s 启动本地服务器，使用 localhost:4000 进行本地访问。我们通常通过本地访问来调试，确定没有问题后再进行上传 github。

# 安装 Node.js

Hexo 基于 Node.js ，所以在安装 hexo 之前，你需要准备 Nodejs 环境，请根据自己的平台选择相应的方式进行安装。
这里仅介绍 win10 下的安装，Nodejs 官网下载 Windows Installer , 然后无脑下一步就行了。
安装后，打开 cmd ，在命令行中输入 node -v 来检查是否工作正常，只要有返回就行。

# 安装 Git

安装 Hexo 的一键脚本中需要 git 环境，后续需要将 hexo 部署到 github 也会用到 git ，所以先得安装 git 。

请在 git 官网根据自己的平台选择对应的安装方式，这里不作赘述。
安装完成后，在 cmd 输入 git ，如果有返回，就证明工作正常。

# 安装 Hexo

1. 在合适的位置 新建一个文件夹 ，用于存放你的 hexo 博客文件位置。
2. 进入文件夹，按住 shift 的同时点击 右键 ，在右键菜单中点击 在此处打开powershell窗口
3. 输入命令 npm i -g hexo-cli 进行安装
4. 输入 hexo init 初始化以及 npm install 安装必要组件
   
5. 至此 Hexo 安装完毕，可以使用 hexo s 启用本地服务器，在浏览器输入 localhost:4000 尝试访问。
   

# 安装主题

以 shoka 主题为例，其他主题不保证可以适用。

# 下载主题以及配置主题

1. 在博客文件夹根目录下使用下述命令进行安装

# cd your-blog

git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

2. 下载完成后，文件会在 博客路径下的theme 下
   比如这里，我的博客根路径为 D:\Doc\example\ ，那么 shoka 的主题文件就在 D:\Doc\example\theme\shoka\ 下
   

3. 编辑博客根目录下的 _config.yml , 搜索 theme ，修改为：

theme: shoka

4. 删除 _config.landscape.yml ，这是 hexo 默认主题的配置文件，建议删除

# 安装 shoka 主题所需的必要插件

# 安装 hexo-renderer-multi-markdown-it

1. 卸载掉默认的 hexo-renderer-marked ，以及别的 markdown 文件渲染器。

npm un hexo-renderer-marked --save

# 或者

yarn remove hexo-renderer-marked

2. 在博客根目录下用如下命令进行插件安装

npm i hexo-renderer-multi-markdown-it --save

# 或者

yarn add hexo-renderer-multi-markdown-it

如图：

3. 编辑 _config.yml , 配置插件参数，在合适位置添加

markdown:

  render: # 渲染器设置

    html: false # 过滤 HTML 标签

    xhtmlOut: true # 使用 '/' 来闭合单标签 （比如 <br />）。

    breaks: true # 转换段落里的 '\n' 到 <br>。

    linkify: true # 将类似 URL 的文本自动转换为链接。

    typographer: 

    quotes: '“”‘’'

  plugins: # markdown-it 插件设置

    - plugin:

        name: markdown-it-toc-and-anchor

        enable: true

        options: # 文章目录以及锚点应用的 class 名称，shoka 主题必须设置成这样

          tocClassName: 'toc'

          anchorClassName: 'anchor'

    - plugin:

        name: markdown-it-multimd-table

        enable: true

        options:

          multiline: true

          rowspan: true

          headerless: true

    - plugin:

        name: ./markdown-it-furigana

        enable: true

        options:

          fallbackParens: "()"

    - plugin:

        name: ./markdown-it-spoiler

        enable: true

        options:

          title: "你知道得太多了"

如图：

4. 继续编辑 _config.yml , 找到如下字段

highlight:

  enable: true

  line_number: true

  auto_detect: false

  tab_replace: ''

  wrap: true

  hljs: false

将 enable: true 改成 enable: false

# hexo-autoprefixer

1. 同上，通过命令安装

npm install hexo-autoprefixer --save

2. 编辑 _config.yml ，合适位置加入

autoprefixer:

  exclude:

    - '*.min.css'

# 检查主题是否工作正常

1. 使用 hexo clean , hexo g , hexo s 三连
2. 浏览器输入 localhost:4000 ，点开默认的博文 hello world ，查看网页是否渲染正常（为防止网页缓存导致显示异常，建议打开无痕窗口进行浏览）
   
3. 如果不正常请挨个检查上述步骤中的配置

# 配置 github 相关参数，将博客上传至 github

# git 绑定 github 账号

1. 鼠标右键或者菜单搜索打开 Git Bash （鼠标右键为 Git Bash Here 在此路径打开，不影响以下操作）
   设置 user.name 和 user.email 的配置信息，分别输入后回车：

git config --global user.name "你的GitHub用户名"

git config --global user.email "你的GitHub注册邮箱"

2. 绑定后生成 ssh密钥 文件：

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

默认不需要设置密码
生成 ssh 文件后， git 会直接给出 .ssh 文件夹所在路径， WIN10 一般在 C:\Users\用户名\.ssh

3. 打开 .ssh 文件夹找到 id_rsa.pub ，复制里面的全部内容

4. 新建 ssh key
   打开 GitHub ，点击右上角个人头像 --> Setting --> SSH and GPG keys --> New SSH key
title 任意填写，将你复制的内容粘贴至 Key 中，点击 add SSH Key

5. 在 Git Bash 中输入 ssh git@github.com 检测公钥设置是否成功
   如若出现 Hi 你的用户名！You've successfully authenticated…… 的说明即为成功

设置密钥可以让你在使用 Git 上传时省去每次都得输入账号密码的烦恼

# 推送网站的相关配置

1. 编辑博客根目录下的 _config.yml , 修改 deploy 项，在文件最后

# 以下格式可能不符，请主动修改

deploy

  type: git

  repo: git@github.com:用户名/仓库名.git # 仓库地址

  branch: master

2. 安装 Git 部署插件，输入命令

npm i hexo-deployer-git --save

3. 此时已经配置完毕，可以使用 hexo d 进行推送

# 更换域名

如果你使用的 github 送给你的域名可以省略此步骤

1. 首先得购买域名，如果是国内供应商购买的域名可能需要备案，在购买域名的地方配置域名解析，如我在阿里购买的域名为 moehz.com ，我想用 blog.moehz.com 这个域名来作为这个博客的地址，那么我需要先配置 blog.moehz.com 的 CNAME 解析为 github 白给我的域名 mint233.github.io ，如图：
   
2. 在仓库的 setting 界面往下拉，可以看到 Git Pages 的设置选项，在这里可以设置自定义域名，强制开启 https（github 会自动帮你从 Let's Encrypt 申请证书）。
   
3. 在浏览器里使用自定义域名访问看看，应该已经生效了吧！而且此时如果你访问 github 白给的域名也会自动跳转到自定义域名。如我访问 mint233.github.io 会自动跳转到 blog.moehz.com 。
4. 不过这里还没有万事 OK，因为此时你如果写了一篇新文章，使用 hexo d 来上传的话，会发现域名又变回去了！所以你还需要一步来防止 github 的这个行为，也很简单，在博客的库下面新建一个 CNAME 文件，内容就写你的自定义域名，如我就应该写 blog.moehz.com ，这样它就不会擅自将域名变回去了！