搭建一个属于自己的个人博客

最近感觉自己需要一个个人博客来记录一下自己写的东西，就开始和队里师傅dre4m一起开始搭建，第一次搭建个人博客真的是非常的困难，最后好在也是搭好了，写一篇文章记录一下。

感谢Wh1teJ0ker提供的方案，使用思源一键化上传文章到自己的个人博客，弄好了直接使用思源插件发布文章就可以了，真的非常方便。

准备

思源准备

在你的思源里面下载这两个插件

github准备

1.准备一个github账号，并创建一个yourname.github.io仓库

类似于这样

我的github名为N1mbus-lock,就创建一个N1mbus-lock.github.io的仓库

https://pages.github.com/

只在再在这个仓库里面写入你的index.html(名字必须得为index.html)，在进行访问https://N1mbus.github.io 就可以访问到你写的页面了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>N1mbus</title>
</head>
<body>
    <h1>N1mbus的个人主页</h1>
    <h1>Hello ~</h1>
</body>
</html>

这是一个简单的页面，你可以先在仓库里面放入一个index.html尝试一下是否能打开自己的页面

如果可以打开页面，就可以将这个文件删除了，在这个方案中，我们不需要手动向这个仓库中添加任何文件，会自动将编译号之后的文件放里面

2.然后创建一个存放你图片的仓库

在我的github中，我将这个仓库命名为Pic。

3.创建一个存放自己源码的仓库

我的存放源码的仓库叫做blog

安装git

由于我使用的是wsl是自带的git，所以不需要再下载git，如果想在windows环境下运行git，可以自己尝试在windows上下载git，但是听说很容易报错git下载(Windows)

安装NodeJS

如果在windows环境下安装NodeJS，请参考NodeJS安装及配置(Windows)

我使用的方法是使用nvm安装安装NodeJS

安装 nvm：

1	`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh \| bash`

使 nvm 立即可用：
1
source ~/.bashrc
使用 nvm 安装 Node.js（例如安装最新版的 Node.js）：
1
nvm install node # 安装最新的版本
或者安装特定版本：
1
nvm install 16 # 安装 Node.js 16.x 版本

设置默认版本（如果有多个版本）：

1 2	`nvm use node # 使用最新版本 nvm use 16 # 使用 Node.js 16.x`

检查版本确认安装：
1
2
node -v npm -v

但是nvm工具是国外的，可能下载失败（我采用的是给我的wsl使用镜像走我本机的代理）

可以使用apt下载NodeJS

1 2	`sudo apt update sudo apt install nodejs npm`

但是这样安装可能安装的版本不支持

安装Hexo

好啦，准备工作弄好了，我们要开始搭建博客了

我使用的是采用Hexo搭建个人博客

安装 Hexo

1	`npm install -g hexo-cli`

查看版本

hexo -v

创建一个项目 hexo-blog 并初始化

1
2
3

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

1 2	`hexo g hexo server`

浏览器访问 http://localhost:4000，页面默认主图风格如下

是真的很简陋了，可以下载一个主题改改

更换主题

由于我只用过fluid，我就只介绍一下fluid吧

Fluid

去里面下载最新的release版本解压到thems目录并重命名为fluid

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

1 2	`theme: fluid # 指定主题 language: zh-CN # 指定语言，会影响主题显示的语言，按需修改`

创建「关于页」

首次使用主题的「关于页」需要手动创建：

1	`hexo new page about`

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

修改配置

_config.yml

按这个修改（这个在这个文件的开头）

这里把主题修改为fluid（文件的末尾处）

这个在文件的末尾，repo是ssh

/thems/fluid/_config.yml

这里是修改浏览器导航的那个头像图案的,如下图

这里是修改打字效果的一些设置，我没改

这里修改的的是浏览器导航的文字

这里修改的是背景图

就是这个图

修改的是首页的文字，就是上面那个图中间的文字

这是修改关于页的一些配置，avatar图片是下图中的那个小猫图片

这是我修改后的代码和样子

about:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  avatar: /img/avatar.png
  name: "喵喵喵~"
  intro: "你有小鱼干吗"
  # 更多图标可从 https://hexo.fluid-dev.com/docs/icon/ 查找，`class` 代表图标的 css class，添加 `qrcode` 后，图标不再是链接而是悬浮二维码
  # More icons can be found from https://hexo.fluid-dev.com/docs/en/icon/  `class` is the css class of the icon. If adding `qrcode`, the icon is no longer a link, but a hovering QR code
  icons:
    - { class: "iconfont icon-github-fill", link: "https://github.com/N1mbus-lock", tip: "GitHub" }
    - { class: "iconfont icon-qq-fill", qrcode: "/img/qq.png" }

关于社交软件的图标，可以在这里面找https://hexo.fluid-dev.com/docs/icon/

这些就是一些样式的修改，我放出来的是我自己修改过的地方，如果有更多需求，可以自己去看看代码然后按需修改

添加浏览量统计

先去LeanCloud里面注册一个账号然后认证一下

创建一个应用，选择开发版

屏幕截图 2025-04-02 162750

在设置里面的操作凭证里面，记录下appid，appkey和rest api服务器地址

在这把这个改为true

然后再在这把appid，appkey和rest api服务器地址依次填进去

这里修改为这样

可以看到出现了浏览次数

添加评论功能

先把评论功能开启

把之前的appid和appkey填进去就可以了

评论头像加载不出来，应该是有地方没改到，但是想摆烂，就这样吧，也不是不能接受

‍

现在我们的网站已经在本地搭好了，接下来就是部署到github上

‍

部署

PicGo配置

把思源里面的插件配置好，让它能够把我们的图片放到github仓库里面

选择github作为图床，然后按如图配置，如果不会生成token，github生成token（生成不会过期的token，就不用一直换了）

PicGO就配置好了

publisher配置

先把你之前写在本地的文件导入到你存放源码的仓库里面，只需要传如下图的文件就可以了（如果之前没有使用过github，传文件应该会成为一个很大的挑战，~~因为我就在这被卡住了~~）

然后进入到思源里面进行配置插件

导入平台之后点进hexo里面进行配置，配置内容如图

github action

生成一对ssh公私钥

1	`ssh-keygen -t ed25519 -f hexo_deploy_key_nopass -N ""`

请使用这个命令生成公私钥，笔者当时在配置时候就因为这个问题找了好久的报错

为什么要使用这个命令

因为这个生成公私钥的命令不需要输入密码，而一般生成的公私钥需要输入密码，但是可能是因为我当时使用的那一份脚本没有输入密码，所以一直报权限错误（~~应该是吧~~）

然后进入到github里面你存放源码的那一个仓库里面

在setting里面选择secrets and variables选择Actions进入到这个界面，创建一个新的secret

命名为HEXO_DEPLOY_PRI（因为那一份脚本里就是这样写的）然后将hexo_deploy_key_nopass里的所有内容写进去

然后进入到我们之前创建的那个yourname.github.io仓库

setting里选择Deploy keys，然后将hexo_deploy_key_nopass.pub里的所用东西写进去，命名为HEXO_DEPLOY_PUB

现在已经完成了这两个仓库间的通信

最后，再在存放源码的仓库里面的.github目录下创建一个一个工作流程然后在里面写入我们的配置文件main.yml就成功了

写入

name: HEXO CI

on:
  push:
    branches:
    - main

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20.x]

    steps:
      - uses: actions/checkout@v3

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{ secrets.HEXO_DEPLOY_PRI }}
        run: |
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" | tr -d '\r' > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name ""  #这里写你的github昵称
          git config --global user.email "" #这里写你的邮箱

      - name: Install dependencies
        run: |
          npm install -g hexo-cli
          npm install hexo-deployer-git --save
          npm install

      - name: Deploy hexo
        run: |
          hexo clean
          hexo g
          hexo d

好啦好啦，终于大功告成了，这样你就会拥有一个属于自己的博客了

然后使用publisher发布就可以了

出现的问题

1.安全性

我们开始部署的存放blog源码的仓库公开的，好像去年爆出过一个漏洞可以使用一种插件修改别人的github仓库内容，以防别人破环我们的博客。

解决方案：直接将blog源码仓库改为私人的即可，只要你给publisher中的token权限足够，不会出现通信问题

2.图片问题

使用PicGO会将本地图片一直上传至github仓库并替换图片链接，导致在无网络的环境下思源上的图片加载不出来

解决方案：在我们后来的实践中发现，publisher插件中存在内置的picgo，所以即使关闭picgo插件也能够上传并且不会替换你本地链接，网页上的链接也会是github上的链接（这样的话，好像没有必要picgo这个插件）

参考文章

GitHub Pages + Hexo搭建个人博客网站，史上最全教程

Hexo + github actions 自動化部署

和Dre4m师傅一起搭建的，这是她写的文章，如果我写的有什么遗漏的，可以看看她的免费开源的一键化部署方案

‍

其他

#github pages #Hexo #思源 #博客搭建

搭建一个属于自己的个人博客

http://example.com/post/build-a-personal-blog-of-your-own-1qpsrd.html

作者

N1mbus

发布于

2025年4月2日

更新于

2025年4月2日

许可协议

CSAPP 第三章：程序的机器级表示上一篇