博客网站从阿里云服务器迁移到 GitHub。

购买的阿里云服务器快到期了，最近又穷得叮当响，只好把博客网站迁移到 GitHub 上。本地文件更是历经坎坷，以致还曾想过把博客网站从 Hexo 迁移到其他有数据库的博客平台，无奈时间成本太高，最后又搬回 Hexo。前不久狠狠心买了一台新笔记本，加之最近终于~~有些自己的时间~~（啊！我终于勤快了一点点！），决定使用最新版的 Hexo 在新笔记本上重新搭建一下这个被我遗忘很久的博客网站。

本地环境搭建

本地搭建过程详见 Hexo + 阿里云服务器搭建个人博客网站，此处不再赘述。

服务器：GitHub 个人仓库

总体思路为依托 GitHub 个人仓库存储网站。首先注册一个 GitHub 账号，记住注册时的用户名，邮箱和密码。在 GitHub 上创建一个名为 “xxx.github.io” 的公开个人仓库，其中 "xxx" 替换为用户名即可。回到电脑端，安装 Git 软件。Git 是分布式版本控制系统，通过 ssh 公钥连接后就可以实现 Hexo 代码在本地电脑和服务器之间同步。安装完成后打开 “Git Bash”，输入自己在 GitHub 上注册的用户名和邮箱：

1 2	git config --global user.name "GitHub用户名" git config --global user.email "GitHub注册邮箱"

然后输入生成 ssh 公钥的指令：

1	ssh-keygen -t rsa

在生成公钥过程中会弹出一些选项，不需要更改，一直按回车即可。之后就可以在公钥生成过程中提示的文件路径（C/Users/XXX/）下找到一个 “.ssh” 的文件夹，文件夹中有 “id_rsa” 和 “id_rsa.pub” 两个文件，其中 “id_rsa.pub” 就是用于连接本地和云服务器的公钥，相当于本地电脑有了一把访问服务器的 “钥匙”，后续工作需要把这个公钥配置到云服务器上。在 GitHub 网站中，依次进入 "Settings" -> "SSH and GPG keys", 在 “SSH keys” 一栏点击 "New SSH key"。在电脑上用文本编辑器打开上一步创建的 “id_rsa.pub”，把里面的内容复制粘贴到 GitHub 网站 "New SSH key"中，"Title" 内容可编辑为个人博客名称，方便识别。

在电脑端 “Git Bash” 中输入命令验证是否绑定成功：

1	ssh git@github.com

如果看到以下提示表示绑定成功："Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. Connection to github.com closed."在本地博客文件目录 ("D:") 下，找到"_config.yml" 文件，打开后在文件最后完善 "Deployment" 相关信息：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://github.com/chihchaoo/chihchaoo.github.io.git
  branch: main

仓库 "repository" 一栏填入 github 中博客仓库地址。由于 github 改版，分支 "branch" 后面要填 "main" 而不是 "master"。另外注意所有内容都要在英文状态下输入，而且英文冒号和后面的内容之间要有一个空格，这个空格必不可少。

最后在 Terminal 中安装 hexo-deployer-git 插件，然后生成 hexo 文件并部署到 github 上：

1 2	npm install hexo-deployer-git --save hexo g -d

注意第一次执行 hexo d 指令时会弹出创建并确认 GitHub 令牌 "token" 的窗口，这是 GitHub 更新安全措施产生的，只需要点击确认即可。最后在浏览器地址栏输入 "xxx.github.io" 就可以看到网页已经上线了。

最后一个小事项。在 Github 创建个人仓库时，一般会一起创建一个 "README.md" 的文件，主要用来简单描述这个仓库的主要作用。但是每次在本地执行完 deploy 命令后，会覆盖 Github 仓库中的文件，因为本地没有这个 "README.md" 文件，所以仓库中的 "README.md" 文件就会被删除。即便在本地创建这个文件，hexo 又会把 markdown 文件渲染为 html 格式，最后的结果就会怪怪的。解决办法来自如何让 Hexo 不渲染某些文件。首先在本地博客文件夹 "source" 目录下创建一个新的 "README.md" 文件，先简单写一些内容。再在博客目录下找到站点配置文件 "_config.yml"，打开后搜索 "skip_render" 参数，在后面添加 "README.md"，注意英文冒号后面要有一个空格。之后再执行 deploy 命令就不会出现问题了。

1	skip_render: README.md

配置域名

是否购买域名完全看个人需求。如果要求不高，以上步骤搭建的 xxx.github.io 格式域名完全够用，如果想要一个专属的个性域名就需要购买了。国内推荐在阿里云、腾讯云或华为云上购买。

域名备案之后，还需要对域名进行解析。打开本地电脑 Terminal，ping 一下个人 Github 网站的 ip：

记下提供的 ip 地址。进入购买域名的网站，登录后进入个人控制台，在域名列表界面后进入域名解析页面，按照下图进行配置：

在本地博客文件夹 "source" 目录下创建一个名为 "CNAME" 的文件，在其中写入个人域名。这里需要注意文件全名就是 "CNAME"，没有任何后缀，不是 "CNAME.txt" 。另外域名前不要加诸如 "www." 等任何前缀。

在本地电脑终端部署一下：

1 2	hexo clean hexo g -d

hexo clean 命令可以清除缓存文件 (db.json) 和已生成的静态文件 (public)。最后在 Github 上检查一下，可以看到 "Custom domain" 中已经填入了域名：

至此域名绑定成功，在浏览器中输入个人域名就可以正常访问了：

主题更换与修改

博客网站以前使用的是 NexT 主题，趁着此次网站大更新，换了个更美观些的主题 Fluid。 Fluid 主题用户手册写的非常详细，按照用户手册操作基本没问题，下面只记录个别参数的配置过程。

数学和化学公式

数学公式有两个渲染引擎，mathjax 和 katex，其中 mathjax 支持的公式相对较多较全。首先在 ** 站点配置文件 ** 中开启：

# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

Hexo 默认的 markdown 渲染器不支持复杂公式，所以必须更换渲染器。

# 卸载原有渲染器
npm uninstall hexo-renderer-marked --save
# 安装新器
npm install hexo-renderer-pandoc --save

然后在电脑上下载并安装 Pandoc 。如果下载压缩包的话，需要把解压后文件夹的路径添加到系统环境变量中。重启电脑，在终端输入 pandoc --version，如果能正常返回 pandoc.exe 的版本号才算安装成功。

添加站点运行时间

在网站查到的添加运行时间的脚本都是 “ejs” 代码。Fluid 用户手册中有两个方法，一是导入 “自定义 JS/CSS/HTML”，二是注入 “ejs” 代码。可惜两种方法反复实验了几次均以失败告终，最后只能老老实实用一种最笨的办法实现了。

首先在 /themes/fluid/layout/_partials/footer 文件夹下创建一个 runtime.ejs 文件，写入以下代码：

<div class="runtime">
    <span id="timeDate">载入天数...</span>
    <span id="times">载入时分秒...</span>
    <script>
    var now = new Date();
    function createtime(){
        var grt= new Date("02/25/2020 09:00:00");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){
            hnum = "0" + hnum;
        }
        minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if(String(mnum).length ==1 ){
                  mnum = "0" + mnum;
        }
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if(String(snum).length ==1 ){
                  snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML = "理乐志已运行 " + dnum + " 天 ";  //此次自定义显示内容
        document.getElementById("times").innerHTML = hnum + " 时 " + mnum + " 分 " + snum + " 秒";
    }  //此次自定义显示内容
    setInterval("createtime()",250);
    </script>
</div>

在 /themes/fluid/layout/_partials 文件夹下找到 footer.ejs 文件，添加以下内容：

<div class="footer-inner">
  ...
  <% if (theme.footer.runtime.enable) { %>
    <!-- 站点运行时间 -->
    <%- partial('_partials/footer/runtime.ejs') %>
  <% } %>
</div>

最后在主题配置文件 _config.fluid.yml 中的 footer 参数添加：

footer:
  # 站点运行时间
  runtime:
    enable: true

大功告成

理乐志

Hexo + GitHub 搭建个人博客网站