基于hexo+GitHub Pages建立静态博客的泛用型指南

起

前几年玩过 WordPress 建站，其实还蛮好玩的，也正是因此为契机才正式接触到了编程。整了一年的服务器最后发现一年下来也就写了十来篇，也就懒得续费了。时值 HTML 5 的规范刚定了下来，微信公众号在乱军中杀出一条血路。好像 hexo 与 GitHubpages 也是当年出来的，总而言之当年服务器懒得续费之后便把文章转向了 GitHubpages 和微信公众号两边。

当年的微信公众号才起步，网页编辑器甚至可以改 HTML 源码，而对应的 GitHub pages 这边就很麻烦，要先写好文章，再在本地生成文件，再提交到服务器。因为我一开始便是接触的 WordPress 这种可以直接在网页上编辑的动态博客，对于静态博客这种东西还是不那么喜欢。渐渐地我就没去管静态博客了。

2020年初，中国遭遇到了名为 2019-nCoV 的病毒所威胁，这个事件待疫情结束后我再看看记录不记录吧。总而言之，[2020/2/7] 我在微信公众号上久违地更新了一篇《小学生观察笔记》，然后在阅读只有 2 的情况下因为“遭到多人举报而删除”了。毕竟大公司也要恰饭，思来想去我便把公众号注销了，同时开始从头维护一个博客。

本文用于记录博客的建立与维护。

常驻系统为 win 10 所以本文主要面向 Windows系统。但我也是菜鸡一个，如果有其他的人看到了这篇文章觉得哪里不对可以教教我；个人博客，喷子大可不必，直接右上角即可关闭。

承

首先确立流程：

安装 Git
安装 Node.js
安装 hexo
GitHub 创建个人仓库
生成 SSh key 并添加到 GitHub
将 hexo 部署到 GitHub
建站完成，然后开始写泛用性指南

1、安装 Git

Git 是个将本地文件更方便上传到 GitHub 去的工具，还是个很优秀的版本管理系统。以后要是有心情，就再细细去学 git 的教程。

**下载地址：**从官网下载Git即可，安装选项全部默认就行了。

后文的“输入”默认都是用 git 执行

ps：可以在cmd里输入 git -v 查看版本信息确认是否安装成功。

pps：cmd是指命令提示符，开始菜单输入cmd即可打开。

2、安装 Node.js

Hexo 基于 Node.js 编写，所以需要安装 Node.js。

**下载地址：**同样是官网下载稳定版即可。安装同样是全部默认。

ps：在 cmd 输入 node -v 查看版本信息确认是否安装成功。

3、安装 Hexo

前期准备到此为止，这里开始进入正题。

首先在你想要的地方创建一个文件夹“小学生的秘密基地”，用于存放blog文件。

在文件夹内右键选择 ‘Git bash here’，用于定位到该目录。

输入 npm install hexo-cli -g，用于安装 Hexo。或许有报错，但没关系。

ps：输入 hexo -v 确认版本信息确认是否安装成功。

输入 hexo init Blog 初始化网站，代码中的 Blog 叫啥都行，后文默认 Blog 文件夹为根文件夹。

输入 cd blog 进入博客文件夹。

输入 npm install 安装必备组件。

至此，Blog 目录下应该生成了些许文件：

public：存放生成的页面
scaffolds：生成文章的模板
source：存放写的文章
themes：主题
_config.yml：博客的配置文件

可以用记事本稍微修改修改下配置文件。

输入hexo g 生成静态页面。

输入 hexo s 打开本地服务器可以本地预览，我以后基本都省略了这步。

在浏览器中打开 http://localhost:4000就可以看到博客的预览了。

Ctrl+c关闭本地服务器。

4、创建 GitHub 仓库

没注册的先注册，用户名就是将来的域名前缀。

新建项目仓库：New repository，项目名就是 yourname.github.io ，这里的yourname 就是你的用户名，我记得不是自己的用户名那个域名就会很长，虽然可以通过绑定自己的个人域名来解决。总之问题不大。

记得勾选README的初始化。

创建完成后，仓库的右侧有个 settings 按钮，下拉有个 GitHub Pages 的分栏，Source里应该有个选项，选 master branch 就会将你的网站在那个后缀为‘GitHub.io’的链接上公开。

5、生成 SSH key 并部署到 GitHub

整这玩意就是为了以后上传文件的时候不用输密码（除非你在设置 ssh key 的时候设置了密码）

首先创建一个 ssh key ：

输入：ssh-keygen -t rsa -C "your_email@example.com"

邮箱名想改的改，不改会不会出错我没试过。

这时候会让你输入一个文件名，用于保存刚才生成的 ssh key ，我换了几个文件夹都没成功，不输入直接回车默认倒成功了。

接着会提示你输入两次密码（是ssh key 的密码，用于日后 push 文件时要输的）直接回车，以后轻松。

接下来显示什么Your public key has been saved 啥的就表示你的ssh key已经创建成功了。

添加你的 ssh key 到 GitHub 上：

输入 clip < ~/.ssh/id_rsa.pub ，用于拷贝id_rsa.pub 文件里的内容。不嫌麻烦用记事本打开复制应该也是可以的。

点击 Add SSH key，把刚刚复制的内容粘贴单到对应输入框（前后不要有空格），Title的输入框里随便取个名字就行。

输入 ssh -T git@github.com

会显示 Are you sure you want to continue connecting (yes/no)?

输入 yes

这时候会要你输密码。就刚刚的ssh key的密码。

总之成功会有 successfully 的字眼，失败会有 denied 字眼。

6、部署 hexo 到 GitHub

最后一步了，博客根目录输入 npm install hexo-deployer-git --save 安装 deploy-git。

修改根目录下的config文件：

deploy: type: git epository: 你GitHub项目地址，例如我的：https://github.com/singlebee/singlebee.github.io branch: master

然后输入 hexo clean 清除你生成的东西，有时候改了东西网页却没变可以用这个清除一下。在某些情况（尤其是更换主题后），如果发现对站点的更改无论如何也不生效，就可能需要运行该命令。

输入 hexo g 生成静态文件

输入 hexo d 部署到服务器

ps：deploy阶段可能会弹出要求输入密码

过一小会就可通过之前的 GitHub pages 设置的域名打开博客了。

7、写文章

[2020/2/7] 基于hexo+GitHub Pages 建立了本博客，不但简陋而且粗糙。

这篇文章是用 Tea 这个客户端编写文件，再导出为 Markdown 格式的文件，再拖入根目录\source\_posts 目录下，vscode倒也能实时预览 .md 文件，但总感觉没这个轻便。

写完后在根目录输入 hexo g -d 便可以更新博客了。相比于在网页编辑好再发送还是麻烦了点。

转

这一部分主要用于记录日后的更新。从此处开始往下的内容将不再是面向小白读者，自娱自乐的内容，酌情观看。

[2020/2/8] 替换了主题 Nexmoe

一个比较特别的Hexo主题：GitHub地址

更换主题

主题的更换十分简单，基本思路就是在网上找喜欢的 theme ，将其复制到 博客根目录\theme 下，修改根目录下的config文件，将theme相关的内容改为需要的主题。

以下为 Nexmoe 主题的更换教程：

cd themes # 载入主题目录git clone https://github.com/nexmoe/hexo-theme-nexmoe.git nexmoe # 安装cd nexmoe # 进入 Nexmoe 主题目录npm i --save hexo-wordcount# Node 版本 7.6.0 之前,请安装 2.x 版本 (Node.js v7.6.0 and previous) # npm install hexo-wordcount@2 --savecp -i _config.example.yml _config.yml修改博客配置文件

更多主题可以前往hexo主题官网查看。

[2020/2/9] 添加了建站时间。

添加建站时间

之前 WordPress 站点里就整了这个，很喜欢这个功能。基本逻辑如下：

创建一个时间点，用作建站时间A
获取当前时间点B
B-A=建站时间（秒）
将秒换算成天

没找到footer，估计这个主题没有footer，把信息写在了header里了。

修改根目录\themes\nexmoe\layout\_partial\header.ejs
找到合适的地方加进去

<span id="sitetime"></span>

<script language=javascript>    function siteTime() {        window.setTimeout("siteTime()", 1000);        var seconds = 1000;        var minutes = seconds * 60;        var hours = minutes * 60;        var days = hours * 24;        var years = days * 365;        var today = new Date();        var todayYear = today.getFullYear();        var todayMonth = today.getMonth() + 1;        var todayDate = today.getDate();        var todayHour = today.getHours();        var todayMinute = today.getMinutes();        var todaySecond = today.getSeconds();        var t1 = Date.UTC(2020, 02, 07, 22, 00, 00); //建站时间 2020-2-07 22:00:00        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);        var diff = t2 - t1;        var diffYears = Math.floor(diff / years);        var diffDays = Math.floor((diff / days) - diffYears * 365);        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);        //还没一年，注释掉年        //document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";        document.getElementById("sitetime").innerHTML = "本站已稳定运行 " +diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";    }    siteTime();</script>

待解决事项：

index 页面上文章图片问题（目前认为过大）
文章页面的copyright和index下的copyright未统一
头像和网页icon还未添加
404页面还未制作
tag 的引入
考虑在侧边栏添加一个网易云音乐的播放列表
已加入的文章的头图需要更换
todo list前的样式希望隐藏去黑点
背景想换
more…

合

[2020/2/7] 注销了微信公众号（于同月9号恢复注销，仅是为了同步文章时间）

[2020/2/7] 建立博客

[2020/2/8] 替换主题

[2020/2/8] 初步完工《泛用性指南》

[2020/2/9]

主题更换及添加建站时间
调整了copyright部分的样式
调整了文章页面的样式
替换了头像
新增了颜文字抖动特效
给已有文章添加了tags
替换了文章头图
添加了favicon