hexo+github 搭建个人博客

1. 准备工作

• 系统环境：win11
• Node.js   下载    安装
• Git(Git Bash)   下载    安装

hexo 是基于 Node.js 支持的框架，所以搭建 hexo 博客就必须安装 Node.js 环境，在安装 Node.js 过程中会自带安装 npm（Node.js 软件包管理工具），后面需要利用 npm 命令进行一系列操作。

注意！1、如果 Nodejs 安装了最新的 v16.15.1（截至2022/6/11），那么在使用 npm 命令时可能会产生如下警告，但是不影响使用，如果有强迫症，可以改成 v16.15.0 。

npm WARN config global '--global', '--local' are deprecated. Use '--location=global' instead.

                 2、即使在切换淘宝源或更换成 cnpm 后，install 时仍然可能卡死，可以尝试切换网络。如果输入正确命令后产生报错，尝试用管理员方式运行。

2. 开始搭建

2.1 安装hexo

全局安装 hexo，安装完后就可以使用 hexo 命令了

1

npm install -g hexo-cli

查看版本信息

1

hexo -v

找个地方新建一个 myblog 文件夹（随意命名），用于存放博客所有内容，进入该文件夹根目录，初始化博客框架

1

hexo init myblog

执行完后，目录结构如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

myblog
├── node_modules            # 依赖目录，在该文件中 npm install 时会安装在这
├── scaffolds               # 模板文件夹，新建的文章将会从此目录下的文件中继承格式
│   ├── draft.md            	# 草稿模板
│   ├── page.md				   # 页面模板
│   └── post.md				   # 文章模板
├── source				   # 资源文件夹，存放文章、图片、分类、标签等
│   └── _posts
│       └── hello-world.md	# 默认的测试文章
├── themes				   # 主题目录，将手动下载的主题文件放在这里
├── .gitignore              # 指定不纳入git版本控制的文件
├── _config.landscape.yml	# 默认主题的配置文件，如果要换别的主题就可以删掉
├── _config.yml			   # 站点配置文件
├── package.json            # 应用程序信息，以及需要安装的模块信息
└── package-lock.json

注意！在执行完初始化操作后有可能不能生成 node_modules 文件夹，这时需要进入到 myblog 文件夹中执行以下代码以生成该文件夹：（需要管理员权限才能执行）

1

npm install

随后在 myblog 目录下执行以下命令，启动本地 hexo 服务器，localhost:4000 为本地浏览地址。后续会使用 github pages 对博客进行发布，在此过程中需要等待一两分钟的时间对旧博客进行更新，所以在页面调试的时候建议使用本地服务器进行事先的预览，调试完毕后将博客项目推至 github，节省时间。启动本地服务器后不需要重复启动，修改 md 文件后 Ctrl+s 保存，随后在网页刷新即可更新内容。

1

hexo s  # hexo server 

2.2 github 发布

在博客根目录下执行以下命令生成 public 文件夹，包含了网站的一些静态文件，用于提交至 github，hexo 只提交 public 文件夹

1

hexo g  # hexo generate

安装 hexo 上传插件 deploy-git

1

npm install hexo-deployer-git --save

配置一下 Git 全局用户名和邮箱

1
2

git config --global user.name "wutong1997"
git config --global user.email "1614478119@qq.com"

创建公钥，存放在 C:\Users\16144\.ssh 路径下的 id_rsa.pub 中，记事本打开复制公钥，进入到 github 用户设置下的 SSH and GPG keys 选项卡中，点击 New SSH key，粘贴公钥。

1

ssh-keygen -t rsa -C "用户邮箱"

打开终端输入 ssh -T git@github.com 测试 ssh 连接，成功连接后显示如下

在 github 上创建一个仓库用作以后博客的存储，仓库必须命名为 github用户名.github.io，并设置公开访问。进入仓库设置，配置Pages 发布站点，设置一下 branch 即可。

在站点配置文件 _config.yml 的最下面指定仓库路径与分支。注意：冒号后面必须有一个空格，分支 branch 必须与仓库默认分支相同。

1
2
3
4

deploy:
  type: git
  repo: git@github.com:用户名/用户名.github.io.git
  branch: master

在博客根目录下执行以下命令部署文章

1

$ hexo d    # hexo deploy

至此，基本的博客架构已经搭建完成。

3. 开放 Gitalk 评论区

Gitalk 的评论内容可以直接在 GitHub 后台管理，不需要注册别的账号，比较方便。下面介绍一下 Gitalk 的添加与开放。

3.1 配置github

路径：点击头像 -> settings -> Developer settings -> OAuth Apps -> New OAuth App

Application name：可以随意取一个应用的名字

HomePage URL：应用主页的完整链接，一般就是博客仓库的链接，不要加/

Application description：应用描述，可不写

Authorization callback URL：回调 URL，OAuth documentation 中说的是【键入用户授权安装后要重定向到的完整 URL，如果应用程序需要识别和授权用户到服务器的请求，则使用此 URL】。意思就是进行评论需要先获取 github 授权，即使用自己账号登录 github，此时会跳转到登录界面，在登陆成功后自动跳转的地址就是这个URL，因为要返回博客，所以这里把博客链接写进去。

Enable Device Flow：使能设备流。不是很清楚。

完成上述操作后点击Update application，此时会生成Client ID和Client secrets，将它们拷贝到博客主题_config.yml中。

注意！ Client secrets 在 Update application 后最好立马拷贝，不然过一会儿就拷贝不了，只能重新生成。

3.2 配置 _config.yml

路径：themes -> 主题文件夹 -> _config.yml（本博客主题是butterfly）

开启评论区，主要配置 use，后面跟的是评论插件的名字，这里填 gitalk

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42
  use: gitalk # Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

配置 Gitalk

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

gitalk:
  enable: true  # 使能 gitalk
  client_id:  # 客户端ID
  client_secret:  # 客户端密码
  repo: wutong1997.github.io  # 仓库名称，不是仓库链接
  owner: wutong1997  # 仓库拥有者，自己的github账户名
  admin: wutong1997  # 管理员，自己的github账户名
  language: zh-CN  # 设置成中文评论
  perPage: 10  # 设置每页显示评论条数
  distractionFreeMode: true  # 类似Facebook评论框的全屏遮罩效果。默认值：false
  pagerDirection: last  # 评论排序方式，last为按评论创建时间倒叙，first为按创建时间正序。默认值：last
  createIssueManually: true  # 如果当前页面没有相应的 issues 且登录的用户属于 admin，则会自动创建 issue。
 			# 如果设置为 true，则显示一个初始化页面，创建 issues 需要点击 init 按钮。默认值：false
  count: false # 显示评论数量

完成上述配置后保存更新即可看到评论功能。使用GitHub账户登录后即可评论。

GitHub 后台对应的仓库下会自动生成 issues ，可对评论进行管理。

4. GitHub + jsDelivr 搭建图床

markdown 使用本地图片路径，在部署博客后图片不会显示，所以需要使用图床工具，用 URL 方式访问静态资源获取图片，这里使用 GitHub 作为图床，用于存放博客图片，操作如下：

4.1 方法一

不建议使用此方法

在 GitHub 账户下新建一个用于存放博客图片的仓库（略）

生成一个 token，路径：点击头像 -> settings -> Developer settings -> Personal access tokens -> Generate new token

Note：随便填写，该 token 用于下面会讲到 PicGo 软件，可以以其为名

Expiration：设置 token 有效天数

Select scopes：选择作用域，一般就是仓库。其他不用勾选。最后生成一下 token

安装 PicGo（向 GitHub 上传图片的好帮手，不要重复上传同一张图片，会失败，除非先删除仓库中的这张图片），根据提示输入信息。

4.2 方法二

在本地博客文件的 source 文件夹下新建 img 文件夹用于存放博客图像，随后在 img 文件夹下新建用于存放对应博客图片的文件夹（命名应简洁且易于不同博客间的区分，例如当前博客可以使用命名：hexobuild）。博客部署后，由于博客仓库是公开的，所以可以直接获取图片的 url 链接，并于博客编写中引用。

注意！ 可能有人觉得这样存在一个悖论问题：由于本地博客中的图片采用 url 链接方式进行在线显示，所以需要确保网络上存在这个图片的 url 链接，然而 url 链接需要博客部署后（本地博客文件中的 img 更新到 github 博客仓库）才能真实存在，然而在博客编写时就需要这个图片的链接，所以存在了矛盾。确实存在这样的问题，但可以先引用图片 url 链接，即使当前图片还没上传，但事实上我们知道上传后该图片的链接地址，所以先填上再说。当博客部署后，博客将显示图片。优点：不用新建一个远程仓库。缺点：本地编写博客时看不到图片

由于 GitHub 是境外网站，访问极不稳定，速度也很慢，这导致博客在加载图片时极其缓慢，甚至加载不出来。所以在需要使用 CDN 服务加速图片加载，这里用了 jsDeliver ，只需改一下 Markdown 中的图片链接即可。

CDN：内容分发网络（Content Delivery Network）。它是架构在网络上的内容分发网络，主要依靠部署在不同地区的边缘服务器，利用DNS负载均衡、系统智能调度、内容分发、中转缓存等让用户（访问者）按照就近原则更快更稳定的获取到所需内容跟资源。

jsDelivr：免费、高速且稳定的 CDN 服务，提供了 NPM、Github、WordPress Plugin 和其他自定义网站的资源镜像。

链接修改方式：

原链接：

模版： 

现链接： 

>>>end<<<