博客网站从阿里云服务器迁移到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 搭建个人博客网站