使用 GitHub Pages 搭建 Hexo 博客

发表于 更新于 阅读次数： 本文字数： 738 阅读时长 ≈ 3 分钟

使用 GitHub Pages 搭建 Hexo 博客

我以前的博客是使用 Nginx + Typecho 搭建

由于 Typecho 对 Markdown 语法的支持不是很好 再加上各种漏洞和问题导致容易被入侵

于是我就将我的博客转移至 GitHub Pages

安装 Node.js

移步至 https://nodejs.org/en/download 下载自己系统的对应版本

npm换源 (可选

某些地方使用npm可能会失败

这里我将npm设置为taobao镜像

1
2
3
npm config set registry https://registry.npm.taobao.org
// cnpmjs源
// http://r.cnpmjs.org/

安装 Hexo

1
2
npm install -g hexo-cli
// 安装出现问题看上一步切换npm源

在一个指定目录输入

1
hexo init .

执行完会在该目录生成一个 hexo 博客的目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
magoo@hyperv-ubuntu > ~/github/testblog > tree
.
├── .github
├── node_modules
│   └── 略
├── scaffolds
│   └── 略
├── source
│   └── _posts (博客内容)
├── themes (hexo主题)
├── .npmignore
├── _config.landscape.yml
├── _config.yml
├── package.json
└── package-lock.json

_config.yml 就是hexo的配置文件啦

创建一篇文章

1
hexo new "文章名称"

就会在 source/_posts 中生成 文章名称.md

编辑完成后 在bash中输入

1
2
3
4
hexo generate
// hexo g
hexo server
// hexo s

访问 localhost:4000 或 127.0.0.1:4000 对博客进行预览

在终端中Ctrl+C关闭预览

目录结构

hexo默认会把文章全部都塞进_posts里 这样就非常难受了

像下面这样手动建立不同的目录方便整理文章

1
2
3
4
5
6
7
8
9
10
11
12
magoo@hyperv-ubuntu > ~/github/testblog/source > tree
.
├── categories
│   ├── index
│   └── index.md
├── _data
│   └── next.yml
└── _posts
    ├── misc
    │   └── use-hexo-with-github-actions.md
    └── C++
        └── CoffeePot.md

使用资源文件夹

https://hexo.io/zh-cn/docs/asset-folders

在Hexo的官方文档中提到了资源文件夹

我的图片和附件都挂在OSS上 资源文件夹好像并没有什么用 (逃

Github Pages

新建一个 repository

名称为 username.github.io

gitee和gitlab原理相同

GitHub 现在能自动识别 username.github.io 自动进行Action操作

后面将GitHub Pages设置修改为

githubpages

将构建完成的页面部署到GitHub Pages

执行

1
hexo g

构建完成的博客位置在 testblog\public

将里面的文件全部push到 username.github.io 就会进行自动构建

过一会就可以通过 http://username.github.io 进行访问了

https和自定义域名

自定义域名

方法一

在 repository 设置中找到 Pages 设置

customdomain

输入自定义的域名 例如: custom.domain.com

方法二

在 testblog\public 目录中添加空白文件 命名为 CNAME 内容为

1
custom.domain.com

再将博客push到repository 就会自动使用你的自定义域名

https

在 repository 的 Pages 设置中

https

将Enforce HTTPS打开

  • Enforce HTTPS
备注

如果以往有在DNS中部署过SSL的要先停止解析原SSL的验证记录

否则在通过 https://custom.domain.com 访问时会警告网站不安全警告

小结

看着好像挺简单的 但是我部署的时候老是遇到github clone失败

快来部署属于你自己的小空间叭~