使用github Page + hexo 快速搭建博客

2021-06-25

2021.06.24 下午利用实训的时间初步搭建了个人博客

Hexo

是一款非常流行的博客搭建框架，Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。简单来说就是将用户的markdown文章转换为静态网页。用户还可以非常方便地选择各种主题，并进行自定义，整个过程基本不需要自己写前端代码，但最好有一些前端知识。

GitHub Page

用来托管个人的静态网站，所以可以用来搭建个人博客，也不用去写后端，但是有一些限制，比如：

GitHub Pages 源仓库建议限制为1GB；
发布的 GitHub Pages 网站可能不超过1GB；
GitHub Pages 网站每月的带宽限制为100GB；
GitHub Pages 网站每小时限制10个软件。

此外，GitHub Pages网站必须避免：

我们的“服务条款”或“社区准则”中的非法或其他方式禁止的内容或活动
暴力或威胁的内容或活动
自动批量活动过多（例如垃圾邮件）
危及 GitHub 用户或 GitHub 服务的活动
丰富快速的方案
内容误导您的身份或网站目的

简而言之通过hexo与githubPage我们可以省去写后端与前端，可以非常方便快捷地搭建一个样式精美的个人博客，也不用占用自己的服务器资源。

准备

在开始搭建前需要做一些准备工作：

创建一个GitHub账户，学习创建仓库
学习git相关知识，用ssh-key绑定本地和远程仓库
安装node.js 和 npm

开始

1.创建GitHub Page

创建方法和普通仓库基本一致，注意仓库名称一定要写成 username.github.io 其中username是本人github账户的用户名，其他名称无效，将来访问地址便是 http://username.github.io ,比如本人的github用户名为zrichard9527，访问地址便是 http://zrichard9527.github.io 所以每个用户最多可以创建一个这样用域名直接访问的仓库。

仓库性质选择public

初始化可以选择添加一个readme

仓库创建好后点击setting

分支选择master，目前主分支为main也可选择main，选择一个主题，出现 your github pages site is currently built from the master branch 说明配置成功，未成功则复制提示内容百度搜索，上图是因为配置了域名，显示为发布在该域名，后续会介绍如何绑定到自己的域名

2.安装配置hexo

前提是已经安装并配置好了node.js 和 npm工具，选择一个盘创建一个文件夹例如：D:\Blog

在Blog中打开git bash here

安装hexo：npm install -g hexo-cli

安装完成后在系统path环境变量中新增 D:\Blog\node_modules\hexo-cli\bin 其中D:\Blog即刚才hexo的安装目录

初始化：hexo init

静态部署：hexo g # g 是generate的简称

接着使用：hexo s 可以在本地访问部署的网页，浏览器输入 http://localhost:4000 就可以打开新部署的网页，Ctrl+c 停止运行

3.将Hexo部署到GitHub

回到Blog文件夹，打开 _config.yml文件，将deploy修改为：（注意冒号后面需要一个空格）

deploy:
  type: git
  repository: git@github.com:ZRICHARD9527/ZRICHARD9527.github.io.git  #仓库地址，使用ssh协议可以避免每次推送输入账号密码
  branch: master #选择分支

URL修改为:

1	url: http://zrichard9527.github.io

然后回到 Blog 文件夹中，打开 Git Bash，安装Git部署插件，输入命令：

1	npm install hexo-deployer-git --save

然后分别输入以下三条命令：

1
2
3

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

完成以后，打开浏览器，输入 https://username.github.io 就可以打开你的网页了，username为账户名

4.解析域名

打开cmd通过ping获取站点ip地址

ping zrichard9527.github.io

在云服务器控制台域名编辑中添加5条记录，CNAME值为zrichard9527.github.io ，A记录为站点ip，启用了https后需要添加4条记录

主机记录	记录类型	记录值
www	CNAME	zrichard9527.github.io
@	A	185.199.108.153
@	A	185.199.109.153
@	A	185.199.110.153
@	A	185.199.111.153

IP地址固定统一都是上面所列的4个，具体内容，参见 Setting up an apex domain

打开 Blog 文件夹里的 source 文件夹，添加CNAME文件，可以先创建一个CNAME.txt文件，打开后写上你的域名，保存后要重命名，将.txt删除

回到 Blog 文件夹，右键打开 Git Bash，依次输入下面三条命令：

1
2
3

hexo clean
hexo g
hexo d

这时候在浏览器直接输入域名就会进入搭建的网页啦！

0625