基于Hexo框架搭建个人博客记录

操作

在GitHub上部署自己的博客 Deploy your blog on GitHub

下载并安装git和node.js。
在存放博客文件的目录下新建Hexo文件夹用于下载存放Hexo框架。
在博客目录下打开Git Bash，在Hexo官网里依次输入安装指令，即可完成安装。
1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
在官方主题网站下载主题，参照主题里的官方文档下载对应的文件到./blog/themes文件夹内，每次更新可以进入对应主题文件夹内，打开Git Bash，输入git pull来进行更新，下载完根据官网文档，安装一些依赖库，将Hexo的gitalk中变量themes的值改成你想要更改的主题的名字，Git Bash中输入hexo g更新网页，后面再启动服务就能看到更新后的主题了。除此之外，配置文件中还有很多别的变量也可以进行探索，以上在官方文档中有详细的描述。

到目前为止，我们的博客都是在本地的，因此需要挂载到服务器上，才能真正成为一个别人能访问的网页博客，我选择部署在GitHub上，运用了GitHub推出的GitHub Page功能，参考官方部署文档，第一步要学怎么在GitHub建立一个库，此处为了学习git的一些知识，不打算使用官方提供的一键部署。

首先在自己的GitHub上开一个库名字为你的GitHub用户名.github.io
然后更改你的./blog名字为库的同名字，进入blog目录打开Git Bash，输入以下指令：
1
2
3
4
5
6
git init
git add .
git commit -m "First init"
git branch -M main
git remote add origin 库URL（到你的库上复制下来，用来链接到库上的）
git push -u origin main
输入以上指令，应该就成功上传库了，每次更新就再次输入最后一条指令就行了，你在新建库之后GitHub网页会给你提示，如下：
命令行输入node -v，查询并记下node的版本，我这里是v20.12.0。
在GitHub你建立的库中选中Settings > Pages > Source，将其改为GitHub Actions。

继续在网页端中建立.github/workflows/pages.yml（本人选择在本地写好后再次上传），填入以下内容并且更改版本号为本地版本号：

name: Pages

on:
  push:
    branches:
      - main  # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
          # Ref: https://github.com/actions/setup-node#supported-version-syntax
          node-version: '20'
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

经历以上种种，你应该已经成功部署GitHub Page了，点开自己的链接看看吧！我的是一只帕勒斯的小站。

图片显示 Display of the picture

我发现正常的上传md文件，其中的图片并不能正常显示，解决办法有两个，其一是在网络上上传图片，并贴上图片对应的url，其二是修改hexo的配置，使其能识别服务器上的图片，以下是我的操作过程：

首先下载插件hexo-renderer-marked，他能方便我们对图片文件夹的管理：

npm install hexo-renderer-marked
然后更改 .config.yml 中的post_asset_folder值为true，添加以下匹配值：
1
2
3
marked:
  prependRoot: true
  postAsset: true
他的功能是建立新文章的时候会添加一个同名的文件夹，该文件夹将作为本文章的图片存储目录。
然后修改scaffolds文件夹下的post.md，添加哈希值typora-root-url: {{title}}，这样我们在用typora的时候会使图片默认路径为同文件夹下的同名文件夹，这样就方便了我们使用typora来编辑我们的文章。

然后我们在文章中使用![](图片.jpg)格式就可以显示图片了，注意！括号内是不能有空格的，这样我们就编辑好了，但是还有一点需要注意！本地启动hexo服务可能并不会显示图片，此时我们需要上传更新我们GitHub库，在GitHub Page上是能正常显示的，最好再每次上传之前先清一下本地的缓存，输入hexo clean清理缓存，有些主题可能不清网页显示会出问题（如果你是Gitee用户就重新上传更新Gitee库吧~）。

经历以上种种，想必你已经能在自己的博客上正常的显示图片了，恭喜你！🫡

分类和标签 Categories and Tags

文章的分类和贴标签对于一个长期更新博客的人的一个很重要的事情，下面是贴标签过程：

首先在配置文件 _config.yaml 文件中对categories值进行如下结构更改：
1
2
3
categories:
- category1
- category2
增加category1和category2两个分类，增加tag的结构也是同样的。
然后在你的文章中的顶部配置区写上和上面一样结构的代码，就可以实现该功能，例如我的文章分类为category1，标签有tag1和tag2：
1
2
3
4
5
category:
- category1
tag:
- tag1
- tag2
想要方便的话可以在scaffolds文件夹下的post.md中加入一行category: ，就能在生成文件的时候加上这句话了。

GitHub登录评论 Commit by GitHub account

能留下评论也是一个博客的重要功能，以下是使用了gitalk来实现的评论功能，由于这里比较简单，我直接贴我用的主题的官方文档了。

尝试了gitalk之后，不知道为什么不行，但是gitcus可以正常使用。

Hexo框架常用指令

以下指令均可以在官方指令文档中找到，仅挑选出我认为比较常用的

开启服务

hexo server

hexo s

创建新博客

hexo new "blog name"

更新静态文件

hexo generate

hexo g

参考文档

官方文档

超详细！0成本搭建个人网站！！【建议收藏】

hexo博客如何插入图片

The blog of APLaS