什么是Hexo

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

什么是Github Pages

GitHub Pages 是一个静态站点托管服务。
Github 页面旨在直接从 GitHub 仓库中直接托管您的个人、组织或项目页面。了解关于 GitHub Pages 网站不同类型的更多信息,请参阅用户、组织和项目页面
GitHub Pages 是静态站点托管服务器,不支持 PHP ,Ruby 或 Python 等服务器端代码。

搭建步骤:

  • Github创建个人仓库
  • 安装Git
  • 安装Node.js
  • 安装Hexo
  • Hexo基础命令
  • 推送网站
  • 绑定域名
  • 更换主题
  • 初识MarkDown语法
  • 发布文章
  • 个性化设置

创建Github个人仓库

登录到Github创建一个新的仓库,仓库名称为username.github.io。这是固定写法,免费账户Github Pages子域名必须为用户名;如果此时你还没有账户你需要自行在Github注册。

安装Git

什么是Git ?简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。如需更详细的信息,请查看Git官方文档或者其他的教程类文章。

  • Windows:下载并安装Git.
  • Mac:使用MacPorts或者下载安装程序,当然最好的方式是安装Xcode。
  • Linux:都用Linux了,我相信你是会的。

安装Node.js

Node.js为大多数平台提供了官方安装程序
与Hexo官方文档的不同,我推荐你使用LTS版本的Node.js.

在Windows下npm会和Node.js一起安装,Linux下需要手动安装npm.

安装Hexo

使用npm命令安装Hexo

输入:

1
npm install -g hexo-cli

初始化Hexo

1
hexo init Blog #Blog为目录名称可带路径自定义

安装完成后使用cd命令进入目录cd Blog
此时可以新建一个文档进行测试也可以直接启动Hexo Server.
Hexo在本地是实时文件渲染所有设置或文档更改直接刷新即可,不需要执行Generate.

Hexo基础命令

1
2
3
4
5
6
7
8
9
npm install -g hexo #安装Hexo
npm update -g hexo #更新
hexo init #初始化hexo

hexo n "New Doc" == hexo new "New Doc" #新建文章
hexo g == hexo generate #生成文件
hexo s == hexo server #启动本地服务
hexo d == hexo deploy #部署
hexo c == hexo clean #清理生成的本地文件

推送网站

配置Git

1
2
git config --global user.name "Github Username"
git config --global user.email "Github注册邮箱"

创建 Personal Access Token(与下一节二选一)

Github常规操作的在2021年情人节(8月14日)全局干掉了repo使用密码验证,所以不论是HTTPS还是SSH从现在开始你都不能使用密码,只能在Personal Access Token或者SSH密钥中二选一。
查看官方解释
创建Token:
1、在任何页面的右上角,点击个人资料照片,然后点击Settings
userbar-account-settings
2、在左侧边栏中,点击Developer Settings
developer-settings
3、在左侧边栏中,单击Personal access tokens
personal_access_tokens_tab
4、创建Token并设置一个描述名称和有效期以及控制权限。

5、和SSH密钥一样,同样有方法可以避免每次都要输入Token,你可以将Token写入远程仓库链接

1
git remote set-url origin https://<your_token>@github.com/<USERNAME>/<REPO>.git
  • <your_token>:换成你自己得到的token
  • <USERNAME>:是你自己github的用户名
  • <REPO>:是你的仓库名称

生成SSH密钥文件(可选)

生成密钥文件是便于推送的时候解决身份验证问题
创建密钥:

1
ssh-keygen -t rsa -C "Github注册邮箱"

可以不设置密码,直接三个回车,也可以根据个人需求再次设置密码。完成后转到.ssh文件夹中找到id_rsa.pub文件,使用记事本打开将内容复制。
打开Github_Settings_Keys,绑定公钥。其中Title任意填写,将id_rsa.pub中复制出来的文件粘贴进Key点击Add SSH Key即可。
Add SSH Key

测试密钥访问:

1
2
3
4
ssh -T [email protected]
#输入yes后看到返回值为:
Hi "Github Username" You've successfully authenticated, but Github does not provide shell access.
#即验证成功

准备推送

打开网站根目录编辑 _config.yml 文件
查看文件末尾deploy部分
参考如下:

1
2
3
4
5
6
7
deploy: 
type: git
repo: [email protected]:username/username.github.io
#如果在上一步中你选择了创建密钥那么你应该填写如上所述的SSH地址
#如果你选择的是创建Token那么你应该将地址写为https地址
#e.g repo: https://github.com/username/username.github.io
branch: gh-pages #推送位置,可根据规则自定义

如果在某些文章里在Git配置部分创建了密钥而且明确写明了密钥用途是用于Git推送,但是却在repo地址中使用HTTPS地址,此时你应该考虑他的文章是否具有参考价值,通常这种情况如果文章不是东拼西凑,那就是什么都不懂的瞎写。

生成文件与推送

在完成了上述操作后,现在需要加载一个推送插件,命令为:

1
npm install hexo-deployer-git --save

现在,你可以生成页面文件,并部署到Github Pages了。

1
2
hexo clean && hexo generate && hexo deploy
#当然,你也可以三条命令分开执行或者简写

在此之前你也可以使用hexo server使用本地预览确认是否符合你所需要。
现在,你已经可以打开你的仓库或者username.github.io查看线上预览了。

绑定域名

第一步当然你得拥有一个域名,但是我并不想在此处详细描写这个步骤。

设置DNS解析

第二步便是设置解析,找到你的域名DNS解析控制台
推荐记录如下:

1
2
3
4
$ dig WWW.EXAMPLE.COM +nostats +nocomments +nocmd
> ;WWW.EXAMPLE.COM. IN A
> WWW.EXAMPLE.COM. 3592 IN CNAME YOUR-USERNAME.github.io.
> EXAMPLE.COM. 3592 IN CNAME YOUR-USERNAME.github.io.

简单地说,你需要将设置一个WWW的CNAME记录和一个@的CNAME记录,指向地址为YOUR-USERNAME.github.io。

创建CNAME文件

既然已经完成了解析设置,现在需要在你的Pages仓库文件根目录下创建一个名为CNAME的文件
但是,每一次Hexo的推送都会覆盖掉之前的文件,所以在这里,你需要将CNAME文件存放于本地目录的source目录下,这样在你推送网站时,这个文件会一起推送,而不会因为在线创建而被推送所覆盖。
CNAME文件中所需要填写的内容非常简单 example.com 不需要其他的,填入你的主域即可。

访问你的域名

等待你的DNS解析生效后,便可以使用example.com访问了。

更换主题

选取你喜欢的主题,使用git clone命令将源码下载至themes目录,在主配置文件中将themes字段值修改为主题名称即可;其他设置你需要参考主题对应的文档。

初识MarkDown语法

请查看这份中文文档
关于MarkDown编辑器,推荐Typora.

发布新文章

使用命令创建新的文章,此时便会生成一个文章名称.md的文件

1
hexo new "新文章名称"

你需要使用支持MarkDown格式的文本编辑器来编辑,推荐请查看上一节。

个性化设置

网站的配置文件为根目录下的_config.yml文件,按需修改。
部分主题也在主题目录下同样提供了一个_config.yml文件,修改这个你需要参考主题文档。