文章摘要
GPT 4
此内容根据文章生成，仅用于文章内容的解释与总结。

前言

本文将通过Hexo + GitHub Pages实现个人博客的搭建，与大家分享自己的想法。

另外，这还是免费的，只需要借用短暂的一刻钟。

简单介绍

Hexo：一个静态博客生成器

Waline：一款简洁、安全的评论系统

  • Hexo 默认是不带评论系统的，需要手动配置（如果主题支持，只需简单配置即可）。

  • Waline可以部署在Serverless平台上（例如Vercel）

Vercel：一个用来部署前端应用的云平台，提供免费部署服务的能力。

  • 此处，Waline的应用运行在Vercel平台

LeanCloud：一个提供BssS（后端及服务）的平台，提供免费的资源。

  • 此处，Waline的后端数据就存储在LeanCloud的实例中

环境配置

💡提示：一般情况下，Git和Node.js都会被写入系统的环境变量，以便能被终端（命令提示符）直接调用；若上述操作均没有作用，请检查环境变量的配置。

安装Node.js

下载并安装Node.js

装完可进入命令提示符，输入node -v，若返回版本信息，则证明安装成功。

1
v18.15.0

安装Git

下载并安装Git

装完可进入命令提示符，输入git --version，若返回版本信息，则证明安装成功。

1
git version 2.39.2.windows.1

安装Hexo

打开命令提示符，输入 npm install -g hexo-cli

装完可输入hexo -v，检查安装情况；若返回版本信息，则证明安装成功。

以下为命令提示符的部分输出

1
2
3
4
5
hexo-cli: 4.3.0
os: win32 10.0.19045
node: 18.15.0
v8: 10.2.154.26-node.25
<...>

创建本地博客

初始化目录

例如在F盘创建文件夹gitBlog（根据需要进行修改，只要自己清楚）

  • 鼠标右键刚刚创建名为gitBlog的文件夹，选择Git Bash Here（使用Git Bash打开）

在Git Bash会话窗口中，输入hexo init，初始化目录

1
2
3
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

💡提示：如果弹出证书错误警告，可以先使用git config --global http.sslVerify false关闭SSL验证（会降低安全性）。

更换主题

例如使用 hexo-theme-fluid 主题，在博客目录打开命令提示符，输入npm install --save hexo-theme-fluid

此时命令提示符会有输出：

1
>added 1 package, and audited 241 packages in 5s

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml （配置文件）内容复制进去。

💡提示：主题的配置_config.fluid.yml有很多客制化选项，需要根据个人需要修改。

📚帮助：hexo-theme-fluid 主题的配置指南

根据项目文档启用主题，修改博客目录的_config.yml文件，指向刚刚下载好的 fluid 主题，并将语言设置成 zh-CN 。

image-20230316193033314

image-20230316193059123

根据项目文档创建关于页面，输入hexo new page about

1
2
INFO  Validating config
INFO  Created: F:\gitBlog\source\about\index.md

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

1
2
3
4
5
6
---
title: 关于
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

撰写文章

所有基础框架都已经创建完成，接下来可以开始写你的第一篇博客了

在 /source/_posts 目录，创建后缀名为md的文件，使用 Markdown 或 HTML 语法，尽情抒发你的灵感吧。

例如创建一个名为 helloworld.md 文件

1
2
3
4
5
6
7
8
9
10
11
12
>---
>title: Hello World
>categories: 
 - 日常
>tags: 
 - Hexo
>---

>## 欢迎

>当你看到这个页面，则说明Hexo已搭建成功！尽情发挥吧~

本地检查

在Git Bash会话窗口中，输入hexo s。

测试服务启动，可在浏览器的地址栏输入 https://localhost:4000 访问。

image-20230316020918854

此时可以看到博客效果，检查客制化配置是否符合自己的需求。

  • 如果满意，则同时按下 Ctrl + C 键，退出测试服务。

  • 如果不合适，修改并保存主题的配置文件，然后重启测试服务。

image-20230316185936877

部署到GitHub

注册GitHub账号

访问GitHub，单击顶部的 Sign in ，根据提示注册账户。

配置访问密钥

生成密钥

  • 打开命令提示符

  • 输入ssh-keygen -t rsa -C "you@example.com"（使用时请将 you@example.com 修改成你的邮箱）

  • 访问当前用户所在的目录，有个./ssh的文件夹，里面存放着刚刚生成的密钥文件

  • 使用记事本打开id_rsa.pub文件

    image-20230316200429844

添加密钥

  • 登录GitHub，鼠标移动至右侧头像，单击 Settings 进入设置

  • 在设置页面，进入 SSH and GPG Key 页面，单击 New SSH Key 以新建密钥

    image-20230316200703440

  • 将刚刚打开的密钥文件复制粘贴至 Key 里，密钥类型 Key type 保持默认即可，随后单击 Add SSH key 添加。

    image-20230316201031018

  • 添加后，能在身份认证密钥中看到信息

    image-20230316201218946

设置本地账户

  • 打开命令提示符
  • 设置用户邮箱 git config --global user.email "you@example.com" （请将you@example.com修改成你的邮箱）
  • 设置用户名字 git config --global user.name "Name" （请将Name修改成你的昵称）

创建仓库

  • 访问GitHub，登录账号

  • 鼠标移动至右侧头像，单击 Your Repositories 进入仓库

  • 单击 New 新建一个仓库

    image-20230316202411624

  • 仓库名为 用户名.github.io，其他保持默认即可（即公开仓库、不添加README文档）

    由于笔者已经创建过相同名字的仓库，无法再次创建

    image-20230316203050848

  • 创建完成，会看到一个快速操作的说明

  • 我们需要记录仓库的地址

    • 即 https://github.com/userName/userName.github.io.git
    • 或 git@github.com:userName/userName.github.io.git
    • 💡提示：取其中一个地址即可，记得把userName修改成自己的用户名。

编辑配置文件

  • 回到本地博客目录（例如本文中的 F:\gitBlog\目录中）

  • 使用文本编辑器打开_config.yml文件，找到 #Deployment 这一行，

    根据记录的仓库地址，填入对应的内容

    • 如果使用https

      1
      2
      3
      4
      deploy:
      	type: git
      	repository: https://github.com/userName/userName.github.io.git
      	branch: master

    • 如果使用git

      1
      2
      3
      4
      deploy:
        type: git
        repo: git@github.com:userName/userName.github.io.git
        branch: master

    💡提示：取其中一个方式即可，记得把userName修改成自己的用户名。

  • 保存配置文件

上传到仓库

  • 打开命令提示符

  • 安装工具 npm install hexo-deployer-git --save（此步骤仅需操作操作一次）

  • 清理缓存 hexo clean

  • 生成并上传 hexo g && hexo d

    • 当命令提示符出现一下输出，即部署成功

      1
      INFO Deploy done: git

  • 此时我们可以直接访问自己的博客： https://userName.github.io （将userName修改成自己的用户名）

    image-20230316204914556

部署评论系统

注册Leancloud国际版账号

  • 访问 Leancloud-国际版-注册页面

  • 根据提示，注册国际版账号

    💡为什么要注册国际版？只因国内版需要绑定已备案的域名。

    💡可以通过左上角版本提示确认注册区域（需显示为国际版）

  • 注册完登录账户，单击页面的创建应用

    • 其中选择开发版计价方案，自定名称

      image-20230316220639361

    • 单击创建

  • 单击刚刚创建好的应用

    image-20230316220727045

  • 在应用界面依次找到 设置 → 应用凭证

    • 记录 AppID 、AppKey 和 MasterKey 这三个变量的值（请勿随意公开）

      Snipaste_2023-03-16_13-55-49

在Vercel部署Waline

  • 单击此处，一键部署Waline

  • 根据提示，需要注册一个账户

    可单击 Continue with GitHub ，使用GitHub账户快捷注册

  • 重新访问在Vercel部署Waline的页面

    • 自行设置仓库名字（Repository Name），单击 Create 创建
    • 等待 Deploy 构建完成

  • 此时单击 Go to Dashboard 进入仪表盘

    • 在仪表盘界面，依次找到 Setting → Environment Variables

    • 根据上一步记录下来的三个值，配置环境变量

      它们的对照关系如下表所示：

      Vercel Environment Lean Cloud
      LEAN_ID AppID
      LEAN_KEY AppKey
      LEAN_MASTER_KEY MasterKey

      image-20230316223210952

    • 配置完如下图所示

      image-20230316223259417

  • 为了使环境变量生效，需要重新构建一次

    • 在仪表盘界面单击 Deployments

    • 单击实例最右侧的按钮，找到 Redeploy

    • image-20230316223844673

    • 此时会弹出提示，同意就好

      image-20230316223950489

    • 等待其构建结束，并回到 Project 页面

    • 记录 DOMAINS 下面的值

      image-20230316224209174

修改Hexo Fluid主题配置

注：本文基于hexo-theme-fluid主题进行演示，不一定通用；其他主题请参考主题作者撰写的说明文档，谢谢！

📚帮助：hexo-theme-fluid 主题的配置指南

使用编辑器（如 Vim、Notepad3、VS Code等）

  • 打开本地博客目录的_config.fluid.yml文件

通过查找功能，搜索comment（评论插件）有关的行

  • 例如第728行到第735行，启用文章的评论功能

    1
    2
    3
    comments:
      enable: true
      type: waline

  • 例如第1022行到1029行，启用友链的评论功能

    1
    2
    3
    comments:
      enable: true
      type: waline

通过查找功能，搜索Waline有关的行

  • 例如第812行到825行

  • 只需要添加服务链接就好（也就是上一步记录下来的链接），例如（请注意缩进）

    1
    serverURL: 'waline-ser4hexo.vercel.app'

    image-20230316225734456

重新部署 Hexo ，就能看到效果了

  • 在本地博客目录打开命令提示符

  • 💡重新部署命令：hexo clean && hexo g && hexo d

注册Waline账号

Waline支持评论管理，需要注册一个账号作为管理员

  • 默认第一个注册的就有管理员权限

  • 服务部署好一定要及时注册

    image-20230316230450429

享用

现在，你就可以把你的博客分享给小伙伴啦~

image-20230316230651177