老咸鱼的池塘
使用Github Pages搭建个人博客
2023-03-16
技术
00
请注意，本文编写于 85 天前，最后修改于 45 天前，其中某些信息可能已经过时。

目录

前言
简单介绍
环境配置
安装Node.js
安装Git
安装Hexo
初始化目录
更换主题
撰写文章
部署到GitHub
注册GitHub账号
配置访问密钥
创建仓库
编辑配置文件
上传到仓库
部署评论系统
注册Leancloud国际版账号
在Vercel部署Waline
修改Hexo Fluid主题配置
注册Waline账号
享用
充电站

哪个Blogger能拒绝一个白嫖搭建博客的机会呢？

前言

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

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

简单介绍

Hexo：一个静态博客生成器

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

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

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

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

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

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

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

环境配置

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

安装Node.js

下载并安装Node.js

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

powershell
v18.15.0

安装Git

下载并安装Git

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

powershell
git version 2.39.2.windows.1

安装Hexo

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

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

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

powershell
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，初始化目录

powershell
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

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

powershell
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

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

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

markdown
---
title: 关于
layout: about
---

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

撰写文章

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

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

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

markdown
---
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

      yml
      deploy:
	type: git
	repository: https://github.com/userName/userName.github.io.git
	branch: master

    • 如果使用git

      yml
      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

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

      powershell
      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 EnvironmentLean Cloud
      LEAN_IDAppID
      LEAN_KEYAppKey
      LEAN_MASTER_KEYMasterKey
      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行，启用文章的评论功能

    yml
      comments:
    enable: true
    type: waline

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

    yml
      comments:
    enable: true
    type: waline

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

  • 例如第812行到825行

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

    yml
      serverURL: 'waline-ser4hexo.vercel.app'
    image-20230316225734456

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

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

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

注册Waline账号

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

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

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

    image-20230316230450429

享用

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

欢迎有空来卡酱的Demo站串门哦~

image-20230316230651177

充电站

本文作者:喵卡

本文链接:

版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

萌ICP备20220192号 | 虫洞·十年之约 | 🚆开往-友链接力 | 51LA统计