主页
avatar

Kared

使用 Github Pages 搭建 Hexo 博客

一点字  0分钟 Share

[scode type=“yellow” size=“simple”] 🤖 本博客内容使用 GPT-4 技术进行润色 [/scode]

一、Hexo

1、关于Hexo

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

2、安装Hexo

安装教程比较简单，可以参考官方文档进行安装：https://hexo.io/zh-cn/docs/

因为 Hexo 是基于 Node.js 的，所以需要先安装下列应用程序：

  • Node.js （Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本）
  • Git（根据系统版本自行下载安装）

安装后，我们可以通过简单的命令 npm install -g hexo-cli 来完成 Hexo 的安装。

3、使用Hexo

① 初始化Hexo

在你想要创建博客的文件夹打开 cmd 或者 Git Bash，也可以通过 cd your_blog_path 命令进入到博客创建的路径，通过命令 hexo init 进行项目初始化；也能通过命令 hexo init your_blog_path 直接将项目初始化到指定目录中。

// 配置用户名和邮箱
$ git config --global user.name "your username"
$ git config --global user.email "your email"

// 项目的初始化
$ hexo init <folder>
$ cd <folder>
$ npm install

项目初始化

创建的博客项目文件夹的目录如下：

.
├── _config.yml  // 网站的配置信息
├── package.json  // 应用程序的信息
├── scaffolds  // 模版文件夹
├── source  // 存放Markdown文件
|   ├── _drafts  // 存放Markdown草稿文件
|   └── _posts  // 存放Markdown博客文件
└── themes  // 主题文件夹

② 创建文章页面

$ hexo new "new article title"  // 创建新文章

$ hexo new draft "new draft title"  // 创建新草稿

$ hexo public post "draft title"  // 发布草稿

$ hexo new page --path new/page "new page title"  // 创建新页面

创建文章/草稿

创建的博客和草稿均可以在 \your\blog\path\source\_posts\ 路径中看到，然后对 Markdown 文件进行编辑即可撰写自己的博客内容。

③ 生成静态文件

$ hexo generate  // 生成静态文件
$ hexo g  // 在没有其他 g 开头的命令时，可以命令简化

将所有博客的 Markdown 文件转化成静态 HTML 页面，同时打包其他页面的静态文件。

生成静态文件

④ 本地运行调试

$ hexo server  // 本地运行调试
$ hexo s  // 在没有其他 s 开头的命令时，可以命令简化

本地运行 node.js 服务，在浏览器输入 http://localhost:4000/ 即可查看博客样式。

本地运行调试

博客-首页

博客-详情页

⑤ 清除缓存和静态文件

$ hexo clean  // 清除缓存文件和已生成的静态文件

由于 Hexo 是静态博客框架，所以博客内容更新后并无法实时更新内容，需要清除原先的缓存文件和静态文件重新生成，才能够更新页面中的内容。

⑥ 更多命令

$ hexo help
INFO  Validating config
Usage: hexo <command>

Commands:
  clean     Remove generated files and cache.
  config    Get or set configurations.
  deploy    Deploy your website.
  generate  Generate static files.
  help      Get help on a command.
  init      Create a new Hexo folder.
  list      List the information of the site
  migrate   Migrate your site from other system to Hexo.
  new       Create a new post.
  publish   Moves a draft post from _drafts to _posts folder.
  render    Render files with renderer plugins.
  server    Start the server.
  version   Display version information.

Global Options:
  --config  Specify config file instead of using _config.yml
  --cwd     Specify the CWD
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/

4、配置Hexo

我们可以看到，博客中的作者个人信息并非自己的，我们可以修改 Hexo 根目录下的 _config.yml 文件来修改博客的作者信息，所有配置信息均显而易见，自行翻译即可。

配置Hexo

二、Butterfly

1、关于Butterfly

默认的主题可能并不是我们想要的效果，那么就可以通过更换主题来实现自己满意度效果，我们可以在官网的 主题页面 选择想要的主题，也可以自己按照官方文档写一个主题🧐。

我个人审美选择的是 Butterfly 主题，Butterfly 主页的展示页面以及教程内容如下：https://butterfly.js.org/。大家也可以根据自己的爱好选择自己喜欢的主题，具体教程可以参照网络博客或者主题作者教程内容。

2、安装并应用主题

① 安装Butterfly

直接通过 git clone 拷贝 Butterfly 的 Git 仓库到本地即可，在 Blog 根目录下执行以下命令，如果 Github 访问较慢可以参考 主题教程博客 的其他地址，或者体验一下测试版。

$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

② 应用Butterfly

修改 Hexo 根目录下的 _config.yml 文件，把主题修改为 butterfly。

theme: butterfly

应用 Butterfly 需要 pug 以及 stylus 的渲染器，如果没有下载这些插件，请使用以下命令进行安装：

$ npm install hexo-renderer-pug hexo-renderer-stylus --save

清楚原先的缓存文件和静态文件，重新生成静态文件，本地运行可以得到如下页面（如果显示存在问题，可能是有些插件缺少导致的，自行查看日志信息，安装缺少的插件即可）：

Butterfly

3、配置Butterfly

此时的 Butterfly 并不是我们想要的样子，还有很多UI配置并不符合我们的要求，所以我们需要修改 theme\butterfly 路径下的 _config.yml 文件来修改博客主题配置。

配置Butterfly

具体配置自行先根据作者的 教程 自行了解吧，太久不用已经更新了很多新的功能。

三、Github Pages

1、关于Github Pages

GitHub Pages 是 Github 提供给用户用来展示个人或者项目主页的静态网页系统，通过 Github 网站托管和发布的公开网页。一般多用于托管个人的静态网站，所以现在很多人也用来它来搭建私人博客，也算是省去了购买服务器、域名等等一系列复杂的操作。

Github Pages 我个人觉得虽然是国外的服务器，但是访问起来并不算慢，如果觉得慢，可以考虑 CDN 加速、使用国内图床或者使用 Coding 提供的类似服务。

2、创建Github Pages仓库

这个需要注册一个 Github 账号，然后点击 Github 右上角的 + 号 -> new repository 来创建一个新的仓库。需要注意下面两个红色框框，建议将第一个红框中的仓库名设置成以下格式：username.github.io，其中 username 请对应换成你的 Github 用户名；同时，第二个红框要将该仓库设置为公开可以访问。

创建新仓库

3、配置Git和SSH密钥

// 配置Git的用户名和密码
$ git config --global user.name "your username"
$ git config --global user.email "your email"

// 生成公钥
$ ssh-keygen -t rsa -C "your email"

如果第一次使用 git 需要设置用户名和邮箱，然后在 cmd 命令行或者 git bash 中执行上述命令生成公钥，如下图所示：

生成公钥

然后打开如图红框所示路径下的文件，即 C:\Users\Kared\.ssh\id_rsa.pub，复制文本中的所有内容。点击 Github 右上角的用户头像 -> Settings -> SSH and GPG keys -> New SSH key 来创建一个新的 SSH Key，其中 Title 可以随意填写（方便记忆哪一台设备的公钥即可），Key 需要填写刚才复制的公钥文本内容。

SSH-Key

完成上述操作后，进入 cmd 或者 Git Bash 输入下面命令进行验证，获得成功回复即配置成功。

$ ssh -T git@github.com

4、上传到Github仓库

先修改 Hexo 根目录下的 _config.yml 文件来配置其中的 repo 信息，内容如下：

deploy:
  type: git
  repo: #你的仓库地址，如:https://github.com/xxx/xxx.github.io.git
  branch: master

Hexo 有对应的 Github 上传插件，当然你也可以直接使用 Git 在静态文件的文件夹直接上传，插件安装命令如下：

npm install hexo-deployer-git --save

然后我们就可以通过命令 hexo d 直接上传静态文件到 Github 仓库中。每次更新依次执行下述命令即可：

$ hexo clean
$ hexo g
$ hexo d

在 Github 中刷新对应的 repository 页面，即可看到提交的内容。在 repository 页面进入仓库的 Settings 先确认仓库名是否是 username.github.io ，然后下滑到 GitHub Pages 查看一下静态页面是否已经发布，复制对应的博客网址：https://username.github.io 即可查看自己的博客。

5、Github Pages 更换自己的域名

只需要进入该仓库的设置，找到 Settings -> Pages -> Custom domain 并加入自己的域名保存即可。

自定义域名

我们已经将自定义域名放在 Github Pages 上了，然后，我们需要进行 DNS 解析此时。在本机命令行使用命令 ping + username.github.io （注意替换成自己的 username） 获取我们博客服务器的 IP 地址，并在域名注册商的平台上添加新的 A记录 解析到个人设置的域名。最后，稍微等待片刻，我们就可以使用自定义的域名访问博客了。

A 记录： 最基本的记录类型，也称为地址记录，为域名或子域名提供 IPv4 地址。该记录将域名指向 IP 地址。

其他相关

博客图床

[post cid=“19” cover=""/]

CDN 加速

当我们将GitHub用作图床时，我们可以免费使用 jsDelivr 的 CDN 加速服务。按照以下说明进行设置：

https://cdn.jsdelivr.net/gh/username/repository@version/filepath/filename
  • 将 username 替换为你的 GitHub 用户名。
  • 将 repository 替换为用于存储图片的 GitHub 仓库名。
  • 将 version 替换为你想要加载的 GitHub 仓库分支版本。
  • 将 filepath 替换为文件在仓库中的路径（可选）。
  • 将 filename 替换为文件名。

请确保你的文件是公开可访问的，以便CDN能够正确加载它们。

通过按照这些说明设置 URL，你可以使用 jsDelivr 的 CDN 加速服务加载 GitHub 图床上的文件。这样做可以提高文件的加载速度和可靠性，同时减轻 GitHub 服务器的负载。

Hexo Github Blog CDN DNS 博客搭建