[Hexo]通过GitHub Pages零成本搭建个人博客过程

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 9.7k 阅读时长 ≈ 9 分钟
本文主要记录博主如何使用Hexo框架搭建一个个人博客，并将其部署到GitHub Pages和Cloudflare Pages上，使用NexT主题对博客进行美化的过程

该博文记录博主搭建Hexo博客的过程，适合那些和博主一样希望搭建个人博客，但又不想花费太多成本的人。

仅需通过使用Hexo、GitHub和Cloudflare的免费服务，你也可以和博主一样轻松创建一个高效、简洁的个人博客网站。

事先准备

账号及域名注册

  • (必需) GitHub账号（需要使用GitHub Pages服务搭建Hexo）

  • (非必需) 域名 (可直接使用GitHub.io分配的域名，但国内网络常不能流畅访问)

  • (非必需) Cloudflare账号（可将个人域名设置在CF中进行解析，并将博客部署在CF的CDN里加速，后期还可搭建各种免费项目，如图床、视频聚合网站、事件提醒服务等）

软件安装

Node的安装

  1. 下载并安装系统相配的 Node，安装的目录建议使用默认目录C:/Program Files/nodejs/

  2. 安装完成后，按下键盘的win + R键，输入CMD并回车，执行如下命令，若输出版本信息，则说明安装成功

    1
    node -v

  3. 修改npm源:通过npm命令下载各种模块，默认都是从国处服务器下载，速度较慢，建议配置成华为云镜像源。打开CMD窗口，运行如下命令

    1
    npm config set registry https://mirrors.huaweicloud.com/repository/npm/

Git的安装

  1. 下载并安装适合你当前系统的 Git，安装的目录建议使用默认目录C:/Program Files/Git/

  2. 通过在CMD窗口输入如下命令，可查看Git版本信息

    1
    git -v

配置 Git 密钥并连接至 Github

  • 常用的 Git 命令 
    1
    2
    3
    git config -l  //查看所有配置
    git config --system --list //查看系统配置
    git config --global --list //查看用户（全局）配置

Git设置用户名和邮箱

  • 在CMD窗口输入以下命令，设置注册的github邮箱和用户名

    1
    2
    git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"

  • 通过git config -l检查是否配置成功

配置公钥以连接Github

  1. 在CMD窗口执行以下命令生成ssh公钥，此公钥用于你的这台计算机连接 Github，若新电脑要连接 Github，同样进行以上Git全部操作 
    1
    ssh-keygen -t rsa -C "你的邮箱"

  • 提示Enter file in which to save the key一直回车即可，新手小白不推荐设置密钥

  • 之后打开C:\用户\你的用户名\.ssh\文件夹内，会看到以下文件

    • id_rsa私钥
    • id_rsa.pub公钥

  • 右键选择打开方式，用记事本打开公钥id_rsa.pub，复制里面的内容，然后打开浏览器到github网页中配置ssh密钥

  1. 将 SSH KEY 配置到 GitHub
  • 进入github网页登录账号，点击右上角头像 - settings - SSH and GPG keys，名字随便起，复制的公钥内容填到Key那一栏
  1. 测试连接，在CMD命令框输入以下命令 
    1
    ssh -T git@github.com

  • 若提示ssh: connect to host github.com port 22: Connection timed out，则尝试更换wifi或尝试使用手机热点重试

  • 第一次连接Git会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可

  • 若出现Hi 你的用户名! You've successfully authenticated, but GitHub does not provide shell access.， 则设置成功

创建GitHub.io仓库

  1. 回到Github网页，点击右上角的+按钮，选择New repository，创建一个<你的用户名>.github.io的仓库

  2. 仓库名字的格式必须为：<你的用户名>.github.io (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名)

  3. 可见性必须选择 Public 方便第一次部署检查问题，点击Creat repository进行创建即可

初始化 Hexo 博客

  1. 在本机创建一个本地文件夹来保存博客源码（如D:/Hexo-Blog），在文件夹内右键鼠标，选择Open Git Bash here

  2. 在Git BASH输入如下命令安装 Hexo

    1
    npm install -g hexo-cli && hexo -v

  3. 安装完后输入以下命令，验证是否安装成功

    1
    hexo -v

  4. 初始化 Hexo 项目安装相关依赖

    1
    2
    3
    hexo init blog-demo
    cd blog-demo
    npm i

  5. 初始化项目后，blog-demo 内会生成如下文件：

  • node_modules：依赖包
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题文件夹
  • .npmignore：发布时忽略的文件（可忽略）
  • _config.landscape.yml：默认主题的配置文件
  • config.yml：Hexo博客的主要配置文件
  • package.json：项目名称、描述、版本、运行和开发等信息

  1. 继续在打开的Git BASH窗口输入以下代码，启动项目

    1
    hexo cl && hexo s

  2. 打开浏览器，输入输出的地址：http://localhost:4000/ ，看到下面的效果，说明你的Hexo博客已初始化

将静态博客挂载到 GitHub Pages

  • 经过上面步骤你已经将Hexo成功初始化在你本地计算机内，接下来需要将本地静态的Hexo博客挂载到GitHub上使用GitHub Pages服务生成博客网址方便他人通过互联网进行访问

  1. 在博客源码目录（如D:/Hexo-Blog）内右键鼠标，选择Open Git Bash here，输入以下命令安装 hexo-deployer-git

    1
    npm install hexo-deployer-git --save

  2. 修改 _config.yml 文件

  • 在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考 官方的配置描述

  • 修改最后一行的配置，将repository修改为你自己的github项目地址，还有分支要改为main代表主分支（注意缩进）

    1
    2
    3
    4
    deploy:
        type: git
        repository: git@github.com:cmliussss2024/cmliussss2024.github.io.git
        branch: main
  1. 修改好_config.yml配置文件后，继续运行如下命令，将代码部署到 GitHub 
    1
    2
    3
    4
    5
    6
    7
    // 在Git BASH终端内
    hexo clean && hexo generate && hexo deploy  

    // 或者

    // 在VSCODE终端内
    hexo cl; hexo g; hexo d
  • hexo常用指令:
    • hexo clean：删除之前生成的文件，可以用hexo cl缩写。
    • hexo generate：生成静态文章，可以用hexo g缩写
    • hexo deploy：部署/发布文章，可以用hexo d缩写
    • hexo new [layout] <文章标题> : 新建文章，[layout]可忽略，<文章标题>为你文章标题，如果标题含空格的话，请使用引号括起来
    • hexo server: 启动服务器，可以用hexo s缩写，默认情况下，访问网址为：http://localhost:4000/

deploy时可能要你输入Github的 username 和 password

若出现Deploy done，则说明部署成功了

稍等两分钟，浏览器访问：https://<你的用户名>.github.io/ ，这时就能通过网络访问博客内容了

将静态博客挂载到 Cloudflare Pages

  1. 登录 cloudflare 选择 计算 (Workers) - Workers 和 Pages - 创建一个新项目 - 选择 Pages - 导入现有 Git 存储库 连接到 Git

  2. 然后登录你Blog仓库对应的GitHub帐号，点击保存并部署后等待部署完成即可

  3. 提示部署成功后，浏览器访问：https://<你的用户名>-github-io.pages.dev ，这时就能通过网络看到博客内容了

    到这里你就可以在Github中将<你的用户名>.github.io的仓库设置为Private私库了(不设置为私库别人可看到你的Hexo博客的所有内容，包括博客的所有文件、博文草稿、文章等，若无所谓可不设置)

  4. 若你拥有自己的域名并绑定在cloudflare中，可通过自定义域设置你的域名作为博客访问网址

至此你的博客已经成功部署，并且能够通过互联网访问，接下来将教你如何发布你的第一篇博文

如何发布博文

  1. 新建一篇博文文件，在博客所在的目录D:\Hexo-Demo\blog-demo\右键选择Open Git Bash here，在命令提示框内输入以下命令

    1
    hexo new 你的博文标题

    用文本编辑器(如事先准备章节中提到的VSCode)去编辑_posts/你的博文标题.md里的内容即可，注意博文使用Markdown格式书写

  2. 编辑完文章保存后可以使用如下命令，生成本地页面, 用浏览器打开 http://localhost:4000/ 进行预览

    1
    2
    3
    4
    5
    6
    7
    // Git BASH终端
    hexo cl && hexo s

    // 或者

    // VSCODE终端
    hexo cl; hexo s

    这时文章并未更新部署在网络中，只是通过生成本地服务，只能在本地预览

  3. 本地预览确认无误后，使用以下命令，将本地文章推送至GitHub仓库即可进行同步

    1
    2
    3
    4
    5
    6
    7
    // Git BASH终端
    hexo cl && hexo g && hexo d

    // 或者

    // VSCODE终端
    hexo cl; hexo g; hexo d
  • 推送成功后即可通过你的域名(部署了cf的也可用<你的用户名>-github-io.pages.dev)或<你的用户名>.github.io进行查看
  • 同步需要时间，若刷新页面发现未同步，稍等片刻后再尝试刷新查看

Hexo博客美化

主题安装

博主使用的 hexo 主题是 NexT，安装步骤参考官方的说明文档

1
npm install hexo-theme-next

安装完成后，在 Hexo 配置文件_config.yml中将 theme 设置为 next

1
theme: next

插件安装

NexT主题内置了很多的插件，安装插件能够更好的管理和了解博客的数据，以下就博主使用的几款插件的安装进行说明，更多插件请查看主题的_config.yml进行查看设置

文章字数和阅读时间统计

文章字数统计和文章阅读时间估算，具体配置见: https://github.com/next-theme/hexo-word-counter , npm安装命令:

1
npm install hexo-word-counter

在主题设置文件_config.yml设置为开启

1
2
3
symbols_count_time:
  separated_meta: true
  item_text_total: false

盘古

自动在中日韩字符与半角字符间插入空格，NexT主题内置，修改主题设置文件_config.yml开启即可

1
pangu: true

图片查看

可放大图片进行查看的功能，NexT主题内置几款图片放大的插件，修改主题设置文件_config.yml开启即可

搜索功能

博客内文章搜索功能 Local Search，具体配置见: https://github.com/next-theme/hexo-generator-searchdb ，npm安装命令:

1
npm install hexo-generator-searchdb

在主题设置文件_config.yml设置为开启

1
2
3
4
5
local_search:
  enable: true
  top_n_per_article: 1
  unescape: false
  preload: false

waline评论系统

博客文章内添加waline评论系统，具体配置见: https://waline.js.org/guide/get-started/ ，插件安装指令:

1
npm install @waline/hexo-next

在主题设置文件_config.yml内添加以下代码，并根据自己需要进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# Waline设置
# 参考文档: https://waline.js.org
waline:
  enable: true  # 是否开启waline
  serverURL: https://waline.vercel.app # Waline 服务地址链接，根据官方教程设置获取，需修改为你自己的链接地址

  # 评论区样式，以下两项可不做修改使用默认即可
  libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js # Waline 库的 CDN 地址
  cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css # Waline 样式表（CSS）的 CDN 地址

  # 自定义评论框占位符，输入前在看
  # locale:
  #   placeholder: Welcome to comment 

  # 如果为 false，评论数只会显示在文章页面，不会显示在首页
  commentCount: true
  # 文章浏览量统计。注意:与 `waline.pageview` 和 `leancloud_visitors`冲突，不要同时启用
  pageview: false

  # 自定义表情包
  # 详情见: https://waline.js.org/guide/features/emoji.html
  # emoji:
  #   - https://unpkg.com/@waline/emojis@1.2.0/weibo
  #   - https://unpkg.com/@waline/emojis@1.2.0/alus
  #   - https://unpkg.com/@waline/emojis@1.2.0/bilibili
  #   - https://unpkg.com/@waline/emojis@1.2.0/qq
  #   - https://unpkg.com/@waline/emojis@1.2.0/tieba
  #   - https://unpkg.com/@waline/emojis@1.2.0/tw-emoji

  # 评论信息，有效的 meta 字段包括 nick（昵称）、mail（邮箱)和 link（链接)
  # meta:
  #   - nick
  #   - mail
  #   - link
  
  # 设置必填的评论信息字段，例如：[nick] 或 [nick, mail]
  # requiredMeta:
  #   - nick

  # 语言，可用值：en-US、zh-CN、zh-TW、pt-BR、ru-RU、jp-JP
  # lang: zh-CN
  # 评论字数限制，设置为 0 时表示不限制
  # wordLimit: 0

  # 评论是否要求登录, 可选项: 'enable', 'disable', 'force'
  # login: enable

  # 每页评论数
  # pageSize: 10

NexT主题美化修改

添加背景

添加 Canvas ribbon 背景动画

Canvas ribbon是Next主题内置在的背景动画，可随机生成一条彩带作为背景，修改主题的_config.yml的canvas_ribbon即可开启

1
2
canvas_ribbon:
  enable: true
添加 Canvas nest 背景动画

Canvas nest是一个几乎不影响性能的背景动画，配置细节参考: https://github.com/theme-next/theme-next-canvas-nest

在 hexo博客根目录下source/_data目录内新建文件footer.njk(若不存在则新建一个)，写入以下代码，并保存

1
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

然后在主题的_config.yml, 找到custom_file_path 一项将 footer一行取消注释

1
2
custom_file_path:
  footer: source/_data/footer.njk
添加自定义图片背景

在 hexo博客根目录下source/_data目录内新建文件styles.styl(若不存在则新建一个)，写入以下代码，并保存

1
2
3
4
5
6
7
8
// 自定义图片图片
body {
    background:background_url(/images/background.jpg);  //背景图片的url或将图片放入images文件夹内
    background-repeat: no-repeat;  //图片无法铺满时，是否重复及重复方式
    background-attachment:fixed;  //图片是否跟随滚动
    background-size:cover;  //覆盖
    background-position:center;  //图片显示起始位置
}

然后在主题的_config.yml, 找到custom_file_path 一项将 style一行取消注释

1
2
custom_file_path:
  style: source/_data/styles.styl

圆角设置

在 hexo博客根目录下source/_data目录内新建文件variables.styl(若不存在则新建一个)，写入以下代码，并保存

1
2
3
// 圆角设置
$border-radius-inner = 15px;
$border-radius = 15px;

然后在主题的_config.yml, 找到custom_file_path一项将variable一行取消注释

1
2
custom_file_path:
  variable: source/_data/variables.styl

透明度设置

因为不同版本的Next主题设置可能元素的命名不同，导致博主搜索寻找其他博主分享的透明度设置方法都不能生效，在这里博主分享博主自己原创的Next版本(8.23.2)的透明度配置，并提供一种自己查找元素设置透明度的方法，若有更好的方法请评论告诉我

8.23.2版本Next主题透明度设置

在 hexo博客根目录下source/_data目录内新建文件styles.styl(若不存在则新建一个)，写入以下代码，并保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 文章块背景半透明（避免白色遮挡背景图）
.post-block {
  background: rgba(255, 255, 255, 0.5) none repeat scroll !important;
}

// 博客标题栏透明度
.site-brand-container {
  opacity: 0.85;
}

/* (两项为伪元素无法定义透明度, 暂时未找到方法，若网友有方法请告诉我)
// 侧边栏菜单透明度
.main-menu{
  background: rgba(255, 255, 255, 0.5) ;
}
.site-nav{
  background: rgba(255, 255, 255, 0.5);
} */

// 头像栏/目录栏透明度
.sidebar-inner {
  background: rgba(255, 255, 255, 0.5);
}

// 顶部菜单栏背景半透明
.header-inner {
  background: rgba(255, 255, 255, 0.5);
}

// 搜索框透明度
.popup {
  opacity: 0.85;
}

// 评论栏透明度
.comments{
  background: rgba(255, 255, 255, 0.75) none repeat scroll !important;
}

然后在主题的_config.yml, 找到custom_file_path一项将style一行取消注释

1
2
custom_file_path:
  style: source/_data/styles.styl
透明元素查看方法

若上述设置添加后在你的主题无法生效，可用下面方法查看元素名并修改上面代码尝试

浏览器打开你的博客网页，按下F12打开控制台界面，点击图中①的元素选择器，悬停在你想要查看元素的地方(如图中②处)，点击后③处会显示该元素的代码，其中class中的空格前的即为元素名(sidebar-inner)，你可修改上面透明度设置的元素名尝试是否生效，也可通过图中⑤处搜索是否有background属性，并在图⑥处进行修改预览，最后应用还需按上面透明度设置的方法写入styles.styl才能生效

自定义行内代码样式

自定义行内代码的颜色和设置，行内代码为markdown代码中用符号 ` 包含内容的样式，如:这是行内代码
在 Next主题 根目录下source/css目录内找到main.styl，在最后面添加以下代码，并保存即可

1
2
3
4
5
6
7
8
9
// 针对行内代码标签的美化
code{
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

参考: