无需购买服务器跟域名，使用 Github 和 Hexo 搭建自己的独立博客

1
2
3
4
# 该笔记参考UP主：安知鱼
# 文档一：https://anzhiy.cn/posts/ddae.html
# 文档二：https://anzhiy.cn/posts/sdxhu.html
# 参考视频地址：https://www.bilibili.com/video/BV13v4y1c75G?spm_id_from=333.999.0.0

0、前言

Github Pages 可以被认为是用户编写的、托管在 github 上的静态网页。使用 Github Pages 可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

这是 Hexo 的官网 地址：https://hexo.io/zh-cn/

1
# 此笔记以Linux环境部署（Windows、Mac系统差不多流程部署）

1、安装node.js

进入Node.js 官网：https://nodejs.org/en/download/

按照自己的机器选择对应的版本下载

image-20220917000120011

上传nodejs安装包到Linux服务器

image-20220917001325182

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[root@hexo ~]# wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz
# 解压
[root@hexo ~]# tar -xf node-v16.17.0-linux-x64.tar.xz -C /opt/
[root@hexo ~]# cd /opt
# 设置软链
[root@hexo /opt]# ln -s node-v16.17.0-linux-x64 node

# 设置nodejs环境变量，追加到profile文件下
cat >> /etc/profile << 'EOF'
export PATH=$PATH:/opt/node/bin
export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/opt/node/bin:/root/bin:/usr/git/bin
EOF

# 生效
[root@hexo /opt]# source /etc/profile

# 查看nodejs版本
[root@hexo /opt]# node -v
v16.17.0
[root@hexo /opt]# npm -v
8.15.0

2、安装git

1
# Centos7.6 用yum安装git默认是老版本，有一些软件不支持低版本，建议安装新版本git，提前避坑
1
2
3
4
5
6
7
8
9
10
11
12
13
# 首先，把老版本的 Git 卸掉
[root@hexo /opt]# yum -y remove git
[root@hexo /opt]# yum -y remove git-*

# 下载新版本git源
[root@hexo /opt]# yum -y install https://packages.endpointdev.com/rhel/7/os/x86_64/endpoint-repo.x86_64.rpm

# yum安装git
[root@hexo /opt]# yum -y install git

# 检查git版本
[root@hexo /opt]# git --version
git version 2.37.1

3、安装Hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[root@hexo /opt]# mkdir /opt/hexo-blog -p
[root@hexo /opt]# cd /opt/hexo-blog/

# 安装hexo脚手架，如果安装失败了就再输入一次
[root@hexo /opt/hexo-blog]# npm install hexo-cli -g

# hexo初始化配置
[root@hexo /opt/hexo-blog]# hexo init

# 初始化如果显示安装依赖失败的警告，请按提示执行npm install
[root@hexo /opt/hexo-blog]# npm install

# 安装hexo部署到git page的deployer，这是提交到github的插件
[root@hexo /opt/hexo-blog]# npm install hexo-deployer-git --save

安装hexo脚手架，如果安装失败了就再输入一次

image-20220917004858575

WARN警告提示需要运行“npm install”

image-20220917004656793

安装后会在/opt/hexo-blog目录生成所有文件信息

1
2
3
4
5
6
7
8
9
# 目录下文件目录解析
_config.landscape.yml  
node_modules  # 依赖目录，安装的插件依赖都在这
package-lock.json  
source				# 源码目录，未被Hexo渲染的md文件，写的文章就在这里面
_config.yml   # Hexo的配置文件
package.json  
scaffolds          
themes				# 主题，安装的主题在这

本地查看效果

1
2
3
4
5
# 生成本地文件
[root@hexo /opt/hexo-blog]# hexo generate

# 启动服务，注意不要Crtl+C，会中断服务。如不小心中断，请再次输入启动服务命令即可
[root@hexo /opt/hexo-blog]# hexo server

image-20220917005715250

在浏览器输入Linux服务器IP:4000，访问默认hexo页面

image-20220917005824290

4、Hexo安装butterfly主题

安知鱼UP主推荐的参考文档：https://butterfly.js.org/posts/21cfbf15

1
2
3
4
5
# Ctrl+C 中断服务，进入到hexo根目录
[root@hexo /opt]# cd /opt/hexo-blog/

# 下载主题
[root@hexo /opt/hexo-blog]# git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改 Hexo 根目录下的 _config.yml，把主题改为butterfly

1
2
3
# 把100行，默认主题“theme: landscape” 更改为“theme: butterfly”

[root@hexo /opt/hexo-blog]# sed -i '/^theme/ c theme: butterfly' /opt/hexo-blog/_config.yml

安装pug 以及 stylus 的渲染器插件

1
2
# 用于渲染前端主题页面的
[root@hexo /opt/hexo-blog]# npm install hexo-renderer-pug hexo-renderer-stylus --save

为了减少升级主题后带来的不便，请使用以下方法

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ,而不是 hexo 的 _config.yml)

1
2
3
4
5
6
# 注意：不要把主题的 _config.yml 删掉

# 注意： 以后只需要在 _config.butterfly.yml 进行配置就行。
# 如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

# Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度更高。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 进入根目录
[root@hexo /opt/hexo-blog]# cd /opt/hexo-blog

# 拷贝主题下的配置文件到根目录
[root@hexo /opt/hexo-blog]# cp /opt/hexo-blog/themes/butterfly/_config.yml /opt/hexo-blog/_config.butterfly.yml

# 清理缓存
[root@hexo /opt/hexo-blog]# hexo cl

# 提交到本地
[root@hexo /opt/hexo-blog]# hexo g

# 本地运行主题服务
[root@hexo /opt/hexo-blog]# hexo s

image-20220917013336170

在浏览器输入Linux服务器IP:4000，访问默认butterfly页面

image-20220917013243256

5、注册github账号

1
2
# 官网地址
https://github.com

打开github官网

image-20220916232839454

点击右上角“Sign up”按钮，打开注册入口

image-20220916222746810

输入自己邮箱地址，点击continue

image-20220916222926639

输入密码（注意：需要大小写加特殊字符），点击continue

image-20220916223150816

输入用户名，这个用户名关系到后来你的默认域名，请慎重。点击continue

image-20220916223221206

是否接受github的产品更新邮件，输入y。点击continue

image-20220916223352800

点击验证，验证成功后，点击Create account

image-20220916223800947

image-20220916223943285

image-20220916224025523

登录刚刚填写的邮箱，把收到的验证码填上

image-20220916233523161

这些信息可填可不填，点击底部“Skip personalization”跳过即可

image-20220916224256756

image-20220916224504314

看到这个页面，就注册成功image-20220916233708967

6、上传hexo代码到github

创建hexo仓库

image-20220916233815956

填写仓库名称、描述、选择公开。点击“Create repository”

1
2
3
# 仓库名称（Repository name）是用于后续访问的域名，请按照格式填写
# 仓库名称的格式必须是  用户名+github+io
# 示例：Dsurprised.github.io

image-20220917094006942

成功创建会跳转到这个页面，即表示成功

image-20220917093633317

在Linux服务器创建密钥

1
2
3
4
5
6
# 创建密钥，引号里面填写你的注册邮箱地址，然后一直回车
[root@hexo ~]# ssh-keygen -t rsa -C "surprise@qq.com"

# 复制密钥
[root@hexo ~]# vim  ~/.ssh/id_rsa.pub

打开github，选择右上角图标，点击Settings

image-20220917095029944

选择SSH and GPG keys

image-20220917095109569

点击New SSH key

image-20220917095135787

Titie名称随意填写，把生成的密钥复制到key上，点击Add SSH key

image-20220917095348207

测试SSH 是否成功

1
2
3
4
5
# 输入以下命令：
# 注意：git@github.com不要做任何更改

[root@hexo ~]# ssh -T git@github.com

image-20220917101556306

配置 Git 个人信息

1
2
3
4
# Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致

[root@hexo ~]# git config --global user.name "Dsurprised"
[root@hexo ~]# git config --global user.email "Dsurprised@qq.com"

回到刚创建的仓库页面，复制仓库地址

image-20220917095850582

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 打开_config.yml文件
[root@hexo /opt/hexo-blog]# vim /etc/hexo-blog/_config.yml

# 找到deploy，添加type、repository地址、branch分支3行信息
deploy:
  type: 'git'
  repository: git@github.com:Dsurprised/Dsurprised.github.io.git
  branch: main
  
# 回到根目录
[root@hexo /opt/hexo-blog]# cd /opt/hexo-blog
# 清理缓存
[root@hexo /opt/hexo-blog]# hexo cl
# 提交到本地
[root@hexo /opt/hexo-blog]# hexo g
# 提交到github
[root@hexo /opt/hexo-blog]# hexo d

image-20220917100709603

执行hexo d后，代码已提交到github，如下

image-20220917102237917

在浏览器输入仓库地址，公网即可访问到博客，如：Dsurprised.github.io

image-20220917102527555

7、安装vscode

vscode官网：https://code.visualstudio.com/

1
# 此处笔记以windows系统安装（mac系统安装以及操作基本一样）

image-20220917125856343

打开VSCodeUserSetup-x64-1.71.2.exe安装包，同意协议，下一步

image-20220917130211881

选择路径，下一步

image-20220917130311332

选择开始菜单文件夹，下一步

image-20220917130356189

创建桌面快捷方式，下一步

准备安装，点击“安装”按钮

image-20220917130548520

安装完成，点击“完成”按钮，打开vscode

image-20220917130746458

打开vscode，如果需要安装中文语言，请选择安装

image-20220917142114484

点击左侧栏扩展按钮

9045A97C6625E90AA2CE526279D0A06F

搜索remote-ssh 插件并安装

196F71533BA42494F81FB6B4217B04D2

安装完remote-ssh插件后，左侧栏会出现一个新图标，点击远程管理，再点击“+”添加远程虚拟机的账号

9C23ED48FA6893A7E0DF6BC6E6C2E702

输入vmware虚拟机的账号，如果是云服务器就输入公网的ip

9B67149D1826A4E0DC075DB97FB4F9B2

输入账号后，需要选择本地ssh文件路径，一般都是.ssh文件路径

8E3A3A1525349DEC42F79042D025DC5C

点击左侧框ip👉右边文件夹按钮，点击后会新建一个窗口

68927D6601055F6A0536C0E7ECEA38FB

在新窗口会显示需要选择远程连接的系统，选择Linux

8CD68C1889BD8C7966B1DC8FEFD2FFBD

然后会显示是否继续操作，选择Continue，如果不选择会报错

D8AA4A426E60BA1375C7C8A4DDF440B5

然后输入远程终端的密码

4A9D9C816713E5D7EE87CE2A6C893061

1
2
# 输入密码后，稍等一会，remote-ssh插件 正在初始化终端
# 初始化结束后，左下角会显示连接成功以及连接的IP地址

在左侧栏按钮，点击资源管理器，选择打开文件夹（这里的文件夹是Linux服务器的文件夹）

image-20220917113719239

输入hexo根目录路径，点击“确定按钮”，输入密码

image-20220917114429482

之后会弹出信任文件窗口，选择“是”

image-20220917114456998

选择顶部菜单栏“终端”按钮，点击新建终端。

image-20220917114540848

到这里了，基本安装配置完成，可以通过vscode远程编辑Linux服务器的文件，也可以直接新建终端远程操作Linux服务器

image-20220917114614027

8、配置github action自动部署

参考up主博客文章：https://anzhiy.cn/posts/asdx.html

打开github，选择Settings

image-20220917145229297

滑到底部，选择Developer settings

image-20220917145322780

选择Personal access tokens，点击Generate new token

image-20220917145514616

随意起个名字，选择NO expiration（token用不过期），勾上repo仓库以及workflow工作流，然后滑到下面点击创建

image-20220917145736204

image-20220917145938334

创建完后，会显示一个token。因为token只会在该页面显示一次，请保存下来。

1
2
3
# 先保存token
# 先保存token
# 先保存token

image-20220917150026108

重新打开一个github页面，创建一个新仓库

image-20220917150512189

在 .github文件夹,注意开头是有个. 的。然后在.github 内新建 workflows 文件夹，再在 workflows 文件夹内新建 autodeploy.yml,在 .github/workflows/autodeploy.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
# 创建文件夹
mkdir /opt/hexo-blog/.github/workflows -p

# 配置自动部署
# 需要更改自己的token以及repositorty-name仓库名称，注意是一开始hexo博客仓库，不是后来创建的存放源码的仓库

cat > /opt/hexo-blog/.github/workflows << 'EOF'
name: 自动部署
# 当有改动推送到main分支时，启动Action
on:
  push:
    branches:
      - main
      #2020年10月后github新建仓库默认分支改为main，注意更改
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: main

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        uses: actions/cache@v1
        id: cache
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install gulp-cli -g #全局安装gulp
          npm install --save

      - name: 生成静态文件
        run: |
          hexo clean
          hexo generate

      - name: 部署到Github
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: ghp_2s6rW7XoyxxxxxxxxxxxcCqX7Nn8W1nzghQ
          repository-name: Dsurprised/Dsurprised.github.io
          branch: main
          folder: public
          commit-message: '${{ github.event.head_commit.message }} Updated By Github Actions'
EOF

重新设置远程仓库和分支

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
# 因为能够使用指令进行安装的内容不包括在需要提交的源码内，所有我们需要将这些内容添加到屏蔽项，表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。打开.gitignore,输入以下内容：

# 添加屏蔽项
cat > /opt/hexo-blog/.gitignore << 'EOF'
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git
EOF

# 删除或者先把/themes/butterfly/.git移动到非博客文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目，从而无法被上传到源码仓库。

# 移动主题下的.git 到/tmp
[root@hexo /opt/hexo-blog/themes/butterfly]# mv .git /tmp

# 回到根目录
[root@hexo /opt/hexo-blog/themes/butterfly]# cd /opt/hexo-blog/

# 初始化
[root@hexo /opt/hexo-blog]# git init

# 存放源码的github私有仓库
[root@hexo /opt/hexo-blog]# git remote add origin git@github.com:Dsurprised/hexo-source-Repo.git

# 切换到main分支
[root@hexo /opt/hexo-blog]# git checkout -b main

# 运行 git 提交指令，将博客源码提交到 github 上
[root@hexo /opt/hexo-blog]# git add .
[root@hexo /opt/hexo-blog]# git commit -m "github action update"
[root@hexo /opt/hexo-blog]# git push origin main
1
2
3
# 关闭vscode，重启vscode，让vscode重新识别git
# 关闭vscode，重启vscode，让vscode重新识别git
# 关闭vscode，重启vscode，让vscode重新识别git

安装Emoji Commit 分支提交插件（可装可不装，这只是个表情插件）

image-20220917165205334

测试自动部署的效果

1
2
3
4
5
# 在根目录 source/_posts 下创建test.md文档，配置个标题

---
title: test
---

image-20220917170708330

点击左侧栏源码管理，点击emoji插件

image-20220917170944209

自行选择提交的备注语

image-20220917171044684

输入本次更新的内容，如：测试。点击commit提交

image-20220917171151043

提交完后，点击sync changes 同步更新博客仓库，这样就可以快速的自动部署。

image-20220917171259687

可以到源码仓库跟博客仓库上，查看是否自动部署成功

image-20220917171656007

image-20220917171733289

到浏览器访问用户名+github.io，如：https://dsurprised.github.io/ 看效果

image-20220917171913703

9、Hexo seo优化

配置文章链接转数字或字母，方便百度、谷歌方便收录文章

参考: https://github.com/rozbo/hexo-abbrlink

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 安装
[root@hexo /opt/hexo-blog]# npm install hexo-abbrlink --save

# 修改_confige.yml
[root@hexo /opt/hexo-blog]# sed -i '/^permalink:/ c permalink: posts/:abbrlink.html' /opt/hexo-blog/_config.yml

# 更改语言为zh-CN
[root@hexo /opt/hexo-blog]# sed -i '/^language:/ c language: zh-CN' /opt/hexo-blog/_config.yml

# 追加以下配置，请确保是否追加成功，不成功请手动编辑

cat >> /opt/hexo-blog/_config.yml << 'EOF'
# abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex
EOF
1
2
# 运行hexo三件套，查看效果。只是在本地运行，不会提交到github
[root@hexo /opt/hexo-blog]# hexo cl && hexo g && hexo s

效果演示，修改前

image-20220917195137108

效果演示，修改后

image-20220917195209031

安装本地搜索依赖

参考：https://github.com/wzpan/hexo-generator-search

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 安装
[root@hexo /opt/hexo-blog]# npm install hexo-generator-search --save

# 在_config.yml配置插件参数
cat >> /opt/hexo-blog/_config.yml << 'EOF'
# 本地搜索
search:
  path: search.xml
  field: all
  content: true
EOF

# 修改主题的_config.butterfly.yml配置文件，把local_search模块下的enable的值更改为true，打开搜索功能
# sed语句的n代表查找的当前行的下一行，n后面冒号“;”表示在括号里面执行多条语句。
[root@hexo /opt/hexo-blog]# sed -i '/^local_search:/{n;s#enable: false#enable: true#}' /opt/hexo-blog/_config.butterfly.yml

1
2
# 运行hexo三件套，查看效果。只是在本地运行，不会提交到github
[root@hexo /opt/hexo-blog]# hexo cl && hexo g && hexo s

效果演示，修改前

image-20220917195603159

效果演示，修改后

image-20220917195625143

10、修改博客标题，添加文章

修改博客基础信息

1
2
3
4
5
6
7
8
9
10
# 在hexo的_config.yml配置文件中，修改基础信息

# Site
title: Surprise`Blog`     # 标题
subtitle: '一个有趣的博主'		# 副标题
description: '分享在工作遇到的坑,欢迎收藏' 	# 站点描述
keywords: 'Linux,zabbix,docker,kubernetes'      # 站点关键词
author: surprise		# 作者
language: zh-CN     # 语言
timezone: ''

image-20220917204338958

添加新文章

1
2
3
4
5
6
# 方法一：执行该命令可以直接在source/_posts目录下创建一个新文档
[root@hexo /opt/hexo-blog]# hexo new 文章标题

# 方法二：直接在source/_posts目录下右键新建文件，以.md结尾的文件即可

# 方法三：直接把已经编辑好的markdown文档上传或者 直接拖到这个目录即可

image-20220917201354776

配置文章信息

参考：https://butterfly.js.org/posts/dc584b87/

1
2
3
4
5
6
7
8
9
10
11
# 用命令创建的文章，默认会有title（必须）、date（必须）信息
---
title: 文章标题
date: 2022-09-17 11:48:35
tags: 这是文章啥标签
cover: '这是文章封面照片,一般填写图床图片链接'
categories: 这是文章啥分类
abbrlink: sdfsdfs  # 这是装了seo优化会自动生成的参数，每篇文章创建后会自动添加这一行，每篇文章不能重复，否则会指向同一篇文章。一般创建新文章不添加这个参数，如果是复制文章进行编辑，直接删除让程序自行生成即可。
---

# 更多参数以及使用方法，请参考上面地址

image-20220917204528398

显示导航栏

1
2
3
4
5
6
7
8
9
10
11
12
# 打开主题配置文件_config_butterfly.yml,把menu模块的Home、Tags、Categories、Link前面的“#”号和空格去掉，如下
----------------------------------------------
menu:
  Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

hexo三件套本地预览效果，现在点击还是显示404，因为还没创建页面

image-20220918011053271

添加标签页

1
2
3
4
5
6
7
8
9
10
# 输入以下命令新建标签页，根目录下会创建source/tags/index.md这个文件
[root@hexo /opt/hexo-blog]# hexo new page tags

# 修改index.md
---
title: 我是标签页
date: 2022-09-18 00:24:08
type: "tags"
---
# 记得添加 type: "tags"

hexo三件套本地预览效果，点击标签，会跳转到标签页，会看到所有文章的标签

image-20220918002934613

添加分类页

1
2
3
4
5
6
7
8
9
10
# 输入以下命令新建分类页，根目录下会创建source/categories/index.md这个文件
[root@hexo /opt/hexo-blog]# hexo new page categories

# 修改index.md
---
title: 我是标签页
date: 2022-09-18 00:24:08
type: "categories"
---
# 记得添加 type: "categories"

hexo三件套本地预览效果，点击分类，会跳转到分类页，会看到所有文章的分类

image-20220918004003755

添加友情链接

1
2
3
4
5
6
7
8
9
10
11
# 输入以下命令新建友情链接，根目录下会创建source/link/index.md这个文件
[root@hexo /opt/hexo-blog]# hexo new page link

# 修改index.md
---
title: 我是友情链接
date: 2022-09-18 00:47:50
type: "link"
---

# 记得添加 type: "link"

友情链接添加

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
# 在Hexo博客目录中的source/_data（如果沒有 _data 文件夾，请自行创建），创建一個文件link.yml

# 创建_data目录
[root@hexo /opt/hexo-blog]# mkdir source/_data -p

# 这是示例，根据自己的需求更改内容
# 创建link.yml并添加内容，如果出现格式错误，请手动添加
cat > /opt/hexo-blog/source/_data/link.yml << 'EOF'
- class_name: 友情鏈接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、簡單且強大的網誌框架

- class_name: 網站
  class_desc: 值得推薦的網站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 視頻網站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中國最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台
EOF

hexo三件套本地预览效果

1
2
# 注意：如果友情链接一刷新就出现多组，这是本地运行的bug。上传到github就没有啦
# 还有更多的友情链接效果，请查看参考链接配置

image-20220918013047627

11、hexo修改默认端口号

hexo默认的端口号是4000，如果端口被占用，hexo就会启动失败。我们可以通过以下2种方法修改hexo默认端口号。

1）修改hexo根目录package.json

1
2
3
4
5
6
7
8
# 在server命令中添加 “-p 端口号” 配置。 这时启动hexo就不能再用 hexo server 命令了，而是使用 npm run server 启动。这样端口号就改成4001了。

"scripts": {
 "build": "hexo generate",
 "clean": "hexo clean",
 "deploy": "hexo deploy",
 "server": "hexo server -p 4001"  # 修改这行
},

2）修改启动文件

hexo的启动文件地址 node_modules\hexo-server\index.js 修改port即可。我这里把port改成了4001。这样再执行hexo server的时候，端口号就变成了4001

1
2
3
4
5
6
7
8
hexo.config.server = Object.assign({
 port: 4001,
 log: false,
 // `undefined` uses Node's default (try `::` with fallback to `0.0.0.0`)
 ip: undefined,
 compress: false,
 header: true
}, hexo.config.server);

推荐第1种方法，修改package.json。因为这样可以保证修改可以被同步到git上。这样当你换一台电脑的时候，修改依然生效。

而使用第2种方法，因为修改不能上传，换一台电脑或者换一个文件夹，修改就丢失了。