打开音乐播放器，系好安全带，开车！

1 前言

近日正值暑期，小伙伴们都在家里空调西瓜绿豆冰沙，而笔者这个准研究生却提前来到学校啃“西瓜书”。奈何才疏学浅，只得遍寻网络究其根本。期间拜读了各路大牛的优秀博文，惊叹其写作功力深厚之余，不免为其几年如一日的坚持而动容。于是笔者暗自摩拳擦掌，从而有了此间小筑与此篇小文。

在本文中笔者将会简要地复现搭建此博客的过程。既可方便来日再造轮子，又能给有缘人提供些许指引。

2 博客搭建之初步

笔者使用的是Window 10操作系统，所以Linux/Mac OS用户还请酌情参考。

主要步骤：

  1. Git
  2. Node.js
  3. Hexo
  4. 推送网站
  5. 绑定域名

2.1 Git

一款强大且应用广泛的分布式版本控制软件。

2.1.1 安装与验证

下载并安装Git，完成后可在CMD中输入git version进行验证。

2.1.2 账号绑定

将Git与Github账号进行绑定。

  1. 完善用户信息。在鼠标右键的菜单栏中选择Git Bash here，输入：
     git config --global user.name "GitHub的用户名"
 git config --global user.email "GitHub的注册邮箱"

  2. 配置SSH密钥。继续输入：

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

    然后按三次回车键，即不设置密码，并生成SSH密钥文件。

    之后在C:\Users\UserName\.ssh文件夹中找到生成的文件id_rsa.pub，复制其中的内容。

    最后在进入GitHub_setting_key中点击New SSH key，粘贴至Key中，完成添加。

  3. 验证绑定结果。继续输入：
     ssh git@github.com
    提示是否通过SSH密钥匹配登陆。输入：
     yes
    提示登录成功。
  4. 如需继续绑定Coding账户，可直接将之前生成的公钥添加到Coding账号中。验证绑定结果，输入：
     ssh -T git@git.coding.net

如需更多了解，可查阅Git官方文档。

2.2 Node.js

一个能够在服务器端运行JavaScript的，开源且跨平台的JavaScript运行环境。

下载并安装Node.js，完成后可在CMD中输入npm -v进行验证。

如需更多了解，可查阅Node.js官方文档。

2.3 Hexo

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装步骤：

  1. 在电脑中创建一个文件夹Hexo。Hexo框架以及之后发布的网页文件都将保存在其中。
  2. 按住shift键，鼠标右击文件夹Hexo，点击菜单栏中的在此处打开Powershell窗口。
  3. 安装Hexo。在Powershell窗口输入：
     npm install -g hexo-cli
  4. 初始化博客。继续输入：
     hexo init blog
  5. 构建网站雏形。继续输入：
     cd blog
 hexo g

  6. 开启本地服务器。继续输入：

     hexo s

    此时在浏览器中访问localhost:4000，即可预览博客网站。通过Ctrl+C关闭本地预览。

  7. 安装Git部署插件。继续输入：
     npm install hexo-deployer-git --save

如需更多了解，可查阅Hexo官方文档。

2.4 推送网站

  1. 分别在GitHub和Coding中新建仓库YvanZh.github.io和YvanZh.coding.me。（GitHub的仓库名须为xxx.github.io，Coding的仓库名请随意发挥。）
  2. 在安装好Hexo框架的根目录blog下，打开站点配置文件_config.yml。
  3. 配置部署位置。于最后几段代码中找到deploy，对其进行修改：
     deploy:
     type: git
     repo: 
         github: git@github.com:YvanZh/YvanZh.github.io.git
         coding: git@git.coding.net:YvanZh/YvanZh.coding.me.git
     branch: master
    此处两个大坑需要特别留意：
    • 冒号后面必须添加一个空格。
    • 仓库名后面必须添加.git。

  4. 清除缓存文件，生成静态文件并部署到网站。继续输入：

     hexo clean
 hexo g -d

    至此，可以在浏览器中输入仓库路径YvanZh.github.io或YvanZh.coding.me来在线访问的博客了！

2.5 绑定域名

  1. 购买域名。笔者是在aliyun上购买.top域名，首年5元。
  2. 配置域名解析。此时GitHub&Coding双重配置的好处就体现了：我们可以将境外的访问解析到YvanZh.github.io，将国内的访问解析到YvanZh.coding.me，从而提高访问速度。
记录类型 主机记录 记录值 解析线路
CNAME @ YvanZh.github.io 境外
CNAME @ YvanZh.coding.me 默认
  1. 进入GitHub仓库YvanZh.github.io的Setting页面，修改Custom domain项为所购买的域名Yvanzh.top。
  2. 进入Coding仓库YvanZh.coding.me的页面：
    • 点击侧边栏代码，出现下拉菜单。
    • 点击下拉菜单中的Pages服务，出现对应的主页面。
    • 点击主页面中出现的自动部署Pages服务，等待部署完毕。
    • 填入所购买的域名YvanZh.top并点击绑定新域名。
  3. 打开文件资源管理器:
    • 在blog\source目录下新建一个CNAME.txt文件。
    • 写入YvanZh.top，保存并退出。
    • 删除其文件扩展名.txt。

PS：配置域名解析以及绑定域名后，均需一段时间方能生效。所以短时间无法访问网站是正常的情况，还请耐心等待。可以尝试在CMD输入：

ping yvanzh.top
ping yvanzh.github.io
ping yvanzh.coding.me

从而判断问题出在域名解析、GitHubPage部署、CodingPage部署三者中的何处。

2018年12月9日更新：开启GitHub Page与Coding Page的强制HTPPS服务，小绿锁成就达成~

3 博客搭建之个性化

初步的搭建的任务圆满完成，后续就是进行添砖加瓦的个性化设置了。

Tips：

  • 在进行个性化配置之前，先备份一下blog文件夹，以防万一。
  • 耐心与细心。因为有些设置比较繁杂，一次不成功还请多尝试，不要轻易放弃。
  • 速度与美观。不要过于追求酷炫而使网页变得笨重，更不要忘记搭建博客的初衷。
  • 强烈安利VS Code，果然开源就是力量。源代码管理功能可以使得修改代码事半功倍。
  • 每配置好一小处，可以来一套‘素质三连’查看效果：
      hexo cl    # 清除缓存文件。
  hexo g -d # 生成静态网页文件并部署。
  hexo s   # 开启本地服务器。浏览器访问localhost：4000即可进行预览；Ctrl+C即可关闭预览。

笔者使用的是NeXT主题，可参考Hexo+NeXT主题优化一文。

4 博客迁移

  1. 傻瓜式：

    在所要迁移的设备中安装Git以及Node.js并设置好环境变量。将原Hexo根目录文件夹复制到新设备中，并Git bash here：

     npm install -g hexo-cli
 npm install hexo-deployer-git --save

  2. 小机灵大法：Hexo 之博客备份

5 结语

笔者从无到有，历时五日终尝胜果。期间踩坑无数，更添脖颈酸痛。水平有限，万望海涵，如有纰漏，敬请斧正。

愿不忘初心，坚持写作，与诸位共勉！

6 后记

研究生三年，说长不长，说短不短。但每当想到计算机领域的爆炸发展，以及走在前列的那些高平台、高起点的竞争对手们，唯有努力提升自我价值！

定个目标：周内看文献写笔记，周末写博客做总结。把学习与生活都记录下来。不奢独上高楼，但求不会秃头。

挖个小坑：今年七夕一个人过无疑了，明年总该有小姐姐陪了吧。