2024.11最新Hexo+GitHub搭建个人博客
2024.11最新Hexo+GitHub搭建个人博客
一、Hexo介绍
Hexo 是一个快速、简洁且高效的博客框架，有丰富的主题和插件可供使用。 Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。这篇文章讲述如何使用Hexo+GitHub Pages搭建个人博客。
以下是我基于 Hexo 搭建的个人博客：
木林小辞🥝 - RationalDysaniaer的个人博客
二、环境搭建
安装 Hexo 需要先安装以下两个应用程序：
- Node.js（官方建议使用 Node.js 12.0 及以上版本）
- Git
Hexo 是基于 Node.js 的框架，同时我们要用到 git 进行部署，这里我推荐两个都安装最新版本
安装 Node.js
下载地址：Node.js — 下载 Node.js®
可根据自己操作系统，按照官网提示安装
windows 系统安装时，请确保勾选 Add to PATH 选项（默认已勾选）
安装 Git
- Windows安装地址：Git - Downloading Package
- Mac：使用 Homebrew, MacPorts ，或者下载程序：git-osx-installer (abandoned) download | SourceForge.net
- Linux (Ubuntu, Debian)：
sudo apt-get install git-core - Linux (Fedora, Red Hat, CentOS)：
sudo yum install git-core
测试是否安装成功
打开终端输入以下指令判断是否安装成功且正确配置环境变量，如下图，如果成功看到版本号，代表安装成功
若安装过程中遇到问题，可百度解决，这里不做过多讲解
三、本地搭建 Hexo 博客
先将博客在本地搭建起来，新建一个文件夹用来存放博客程序，文件名和位置任意。
我这里是在 D 盘下新建了一个 Blog 文件夹，在该文件夹下，右键->显示更多选项，点击 Open Git Bash here，如果无此选项，请检查环境搭建时候成功
打开后输入以下命令一键安装hexo
$ npm install -g hexo-cli
可能遇到的问题：
输入命令后长时间卡住无法安装成功，可参考以下解决方案
此时按下 Ctrl+C 停止当前命令，输入以下命令配置淘宝镜像$ npm config set registry https://registry.npmmirror.com然后重新输入命令安装hexo
完成后输入以下命令初始化并安装组件
$ hexo init
$ npm install
可能遇到的问题：
输入hexo init后，如果卡在INFO Install dependencies不动，此时需按下 Ctrl+C 停止此命令，继续输入npm install即可。
这是可以发现文件夹中拉取了一些文件，根据日志可以了解到这是从远程仓库 https://github.com/hexojs/hexo-starter.git 中拉去的，打开可以发现是一个名为 hexo-starter 的初始项目
启动服务器（默认情况下，访问网址为： http://localhost:4000/）
$ hexo server
按住Ctrl键，再用鼠标左键点击最下面的网址即可跳转的浏览器，或者直接在浏览器输入地址http://localhost:4000，就能在浏览器中打开预览页面，按下 Ctrl+C 可以关闭服务
此时博客就已经在本地部署成功
四、部署到 GitHub Pages
创建GitHub仓库
在GitHub新建仓库，仓库名为用户名.github.io,这里的用户名替换为你自己GitHub上的用户名
比如我的用户名是RationalDysaniaer，新建的仓库名就是rationaldysaniaer.github.io
创建时选择 public 将仓库公开，推荐勾选 Add a REAMD file 为仓库创建描述文件
配置SSH密钥连接GitHub
2021年8月13日 GitHub 取消了对密码身份验证的支持，我们需要使用 GitHub 的个人访问令牌来代替密码，但每次上传都需要输入一次用户名和 token 显然比较麻烦，安全性也较低，配置 ssh 后就可以更加方便的上传文件
打开C盘，进入 Users 文件夹，接着打开电脑用户名文件夹，寻找是否有.ssh文件夹，如果有的话需删除掉，没有就继续进行下面的步骤
在该文件夹下右键打开Git Bash，输入以下命令生成ssh密钥，中途需按下三次回车键
$ ssh-keygen -t rsa -C "github绑定的邮箱"
成功后在该目录下生成了.ssh文件夹，用记事本打开.ssh文件夹下的id_rsa.pub文件，复制里面的内容
在GitHub设置中点击SSH and GPG keys选项，点击New SSH key
出现以下界面
填写 Title项 为 hexo，将复制的内容粘贴到 Key 文本框中，点击 Add SSH key 后需要输入一次 GitHub 密码，即可添加成功
再次打开Git Bush,输入以下命令验证是否能连接成功
$ ssh -T git@github.com
如果询问是否继续连接，输入yes即可，如下图出现successfully即为连接成功
最后，配置用户名和邮箱
$ git config --global user.name "Github上的username"
$ git config --global user.email "GitHub绑定的邮箱"
到这里已经成功配置好了 ssh 连接，可以将本地博客部署到 GitHub 了·
在刚刚创建的博客文件夹下再次打开 git bush，安装 hexo-deployer-git 插件
$ npm install hexo-deployer-git --save
打开_config.yml文件，更改最后面的 deploy 内容，用户名替换为自己的 github 用户名
deploy:
type: git
repository: https://github.com/用户名/用户名.github.io.git
branch: main
生成静态文件
$ hexo g
上传到GitHub
$ hexo d
上传成功后就可以通过浏览器访问到你的博客网站
博客地址：https://用户名.github.io
将用户名替换为你自己的 GitHub 用户名，就可以通过此网址访问你的博客了，快将自己的博客网址发给你的小伙伴炫耀一下吧！
如果想要时博客更加美观，可以到 hexo 官网下载博客主题，同时查看官方文档修改配置文件，发表博客文章，一点点完善你的博客。
五、使用主题
进入 Hexo 主题页面：Themes | Hexo
挑选一个你喜欢的主题，如果要使用这个主题，就去看该主题 GitHub 上的 readme 文件，最好不要直接自己摸索
如果readme文件没有说明如何使用，则使用一般方法：
-
克隆主题项目到 hexo 博客根目录 themes 文件夹下
-
更改博客配置文件
_config.yml,theme 选项值设为新的主题名称，这个配置可以用来切换下载到 themes 文件夹下的不同主题
清楚缓存并重新启动项目，就可以看到新的主题界面了
如果要更新主题，进入主题文件夹下使用以下命令
$ cd themes/主题名
$ git pull origin master
使用的主题一般也会有一个自己单独的配置文件，详细配置请看GitHub上该主题作者的readme文档
还有一些并未放在官网上的第三方主题，可能更改了大量博客起始文件的内容，并不是复制到主题文件夹下使用，而是直接克隆到整个博客项目
六、配置
需要在 _config.yml 中修改配置
可查阅官方文档进行配置：配置 |Hexo 系列
接下来是一些进阶内容
七、Hexo目录结构
在初始化博客文件后，项目文件夹将如下所示：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml
网站的配置文件， 可以在此配置大部分的参数
package.json
应用程序的信息， EJS, Stylus 和 Markdown 渲染引擎已默认安装，可以自由移除
scaffolds
模版文件夹，在新建文章时，Hexo 会根据 scaffold 来创建文件
source
资源文件夹。 是存放用户资源的地方。 除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes
主题文件夹， Hexo 会根据主题来生成静态页面。
八、常用命令
初始化
$ hexo init [folder]
初始化网站。如果没有提供 folder，Hexo 会在当前目录下搭建一个网站
此命令是运行以下步骤的快捷方式：
- Git clone hexo-starter including hexo-theme-landscape
- 安装依赖项
新建文章
$ hexo new <title>
生成静态文件
$ hexo generate
可以简写为：
$ hexo g
部署网站
$ hexo deploy
可以简写为：
$ hexo d
清除缓存
$ hexo clean
可以简写为：
$ hexo cl
清除缓存文件 (db.json) 和已生成的静态文件 (public)。
列出所有路由
$ hexo list <type>
显示版本信息
$ hexo version
九、部署到Vercel加速访问
Vercel 是一个用于静态站点和无服务器函数的云平台，使开发者能够轻松部署他们的项目。
使用Vercel的优点可以阅读下面的文档：
Vercel：前端开发者的最佳部署工具 | 数据学习者官方网站(Datalearner)
Vercel官网：
Vercel: Build and deploy the best web experiences with the Frontend Cloud