Hexo + GitHub Pages 博客作业报告
2024-04-20 20:15:08 #report

作业内容

基于Hexo和Github Pages搭建了一个静态的个人blog，用于分享我的论文阅读和实验报告等。

环境配置

Git 和 Github SSH key

安装成功后，需要将Git与GitHub账户进行绑定，在Git Bash中设置用户信息：

1
2
$ git config --global user.name "github 用户名"
$ git config --global user.email "github 注册邮箱"

然后生成ssh密钥：

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

找到生成的id_rsa.pub文件，复制其中密钥至GitHub-settings-keys新建一个SSH key即可。

Node.Js

Windows直接在Node.Js官网下载即可。
下载完成后可在终端输入以下命令查看node和npm是否成功安装：

1
2
$ node -v
$ npm -v

Hexo

新建一个路径用于存放blog文件，在Git Bash中cd到该路径下，使用npm命令安装Hexo：

1
$ npm i hexo-cli -g

初始化hexo并安装必备组件：

1
2
$ hexo init .
$ npm install

Github Pages

新建一个public仓库，仓库名为：_”Github用户名”.github.io_ （必须以此为用户名，否则后续GitHub Pages的url会出现问题），在仓库设置中的_”Pages”部分选择‘master’_分支作为source。
GitHub Pages 配置保存后，个人主页的网站将会自动发布到 https://“GitHub用户名”.github.io，并且可以在仓库的设置页面中的 “GitHub Pages” 部分查看网页更新情况。

部署至GitHub

修改blog目录中的站点配置文件_config.yml_，加入以下内容：

1
2
3
4
deploy:
  type: git
  repo: <repo-url>
  branch: master

完成后通过以下命令即可将本地内容推送至Github repository中，并可在浏览器中访问

1
$ hexo generate --deploy

写blog

通过如下命令在_blog/source/_posts_路径下生成新的Markdown文件，修改.md文件并推送至GitHub repository后，即可在网页中查看博客内容：

1
$ hexo n "title"

blog页面布局 & 设计思路

我的blog包含Home Page、Archives Page、Tags Page和About Page四个页面，主要遵循简洁大方、清晰明了的设计思想，使用一个简单的hexo主题oranges。

功能完善

我的blog所添加功能包括：日夜模式、全文搜索、文章图片懒加载、文章分享、浏览量统计等等。

全文搜索（search）功能

Full-text Search Display
通过插件hexo-generator-search实现。

1
$ npm install hexo-generator-search --save

在站点配置文件_config.yml_，添加以下内容：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

文章图片懒加载（Lazy image loading）功能

通过插件hexo-lazyload-image实现。

1
$ npm install hexo-lazyload-image --save

在站点配置文件_config.yml_，添加以下内容：

1
2
3
4
5
lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: false # optional

总结与反思

选取Hexo作为博客主题的原因：

  • 简单易用：使用Markdown语法编写内容，学习简单，快速上手。
  • 自动化部署：支持自动化部署到各种平台（如GitHub Pages、Netlify等），可以通过简单的命令实现内容更新的快速部署。
  • 丰富的主题和插件：提供了大量的主题和插件，可以根据需求定制网站风格和功能。
  • 生态系统健全：Hexo是一个成熟的静态网站生成器，拥有活跃的社区和丰富的文档，解决问题和获取支持相对容易。

搭建过程中遇到的问题和解决方法

1. Hexo无法正确识别Git插件

解决方法：安装hexo-deployer-git 插件

1
$ npm install hexo-deployer-git --save

2. 无法访问Git仓库

错误原因：本地 Git 配置的证书错误或过期
解决方法：更新Git证书或重新安装Git，并检查Git配置，确保证书路径正确配置，也可以通过如下命令手动设置证书路径：

1
$ git config --global http.sslCAInfo /path/to/certificate.crt

3. 部署过程中身份验证失败

错误原因：GitHub 在 2021 年 8 月 13 日移除了对密码验证的支持，因此需要使用其他的身份验证方式来进行部署。
解决方法：配置好Git仓库的SSH密钥后，在Hexo的本地配置文件_config.yml_中使用git URL，而非HTTPS URL，可无需身份信息验证。

4. Hexo成功部署到Git仓库，但访问网页显示404（no GitHub Pages）

错误原因：仓库名和GitHub用户名不一致，导致GitHub Pages 默认会使用用户名作为子域名，然后将仓库名称添加到域名后面。
解决方法：修改仓库名为用户名，避免生成域名时的不一致。

2024-04-20 20:15:08 #report
Next