[TOC]

互联网吸引我的地方有很多：开源、极客精神、知识共享、自由……

在接触到知识管理的概念后，我一直用 Markdown 记录自己的学习与思考。然而，这些记录始终只是静静地存放在本地，缺少一个输出的途径。而输出不仅是对知识的巩固，更是一个审视与优化笔记的过程。

在学习的过程中，我也读过无数优质的博客文章，也认识了一些拥有个人博客的人。

于是，我问自己：为什么不尝试拥有一个个人博客呢？

就这样，我开始行动了。

经过一番调研后，我最终选择了 Hexo 作为我的博客搭建工具，从零开始构建自己的知识分享平台

基础 Hexo 安装

参考：HEXO 系列教程 | 使用 GitHub 部署静态博客 HEXO | 夜梦星尘の折腾日记

按照以下步骤安装 Hexo：

  1. Git 安装
    如果已安装 Git，可跳过此步骤。

  2. Node.js 安装
    参考 Node.js 安装及环境配置之 Windows 篇 - 刘奇云。

    • 将 Node.js 安装在 C 盘。
    • npm 全局模块路径与缓存路径设为：D:\node。

  3. Hexo 安装
    使用以下命令安装 Hexo CLI：

    1
    npm install hexo-cli -g

  4. GitHub 配置

    • 新建一个名为 1900.github.io 的仓库。

    • 打开 Git Bash，输入以下命令生成 SSH Key：

      1
      ssh-keygen -t rsa -C "你的邮件地址"

    • 进入 C:\Users\用户名\.ssh，用记事本打开 id_rsa.pub，复制内容。

    • 在 GitHub 用户设置中添加 SSH Key，粘贴代码后保存。

    • 在 Git Bash 中输入以下命令，确保连接成功：

      1
      ssh -T git@github.com

  5. 创建博客

    • 新建一个文件夹 Blog，进入文件夹后运行以下命令：

      1
      2
      3
      4
      5
      hexo init myblog
      cd myblog
      npm install
      hexo g
      hexo s

    • 浏览器访问 localhost:4000，即可看到 Hexo 的基础界面。

将博客上线 GitHub

需要将博客上线github才能实现通过链接访问的功能。

  1. 修改 ​_config.yml​ 文件
    打开 myblog 文件夹中的 _config.yml，在 deploy 部分添加以下内容：

    1
    2
    3
    4
    deploy:
      type: git
      repository: https://github.com/ZachTZZ/1900.github.io
      branch: main

  2. 安装部署工具
    在 myblog 文件夹中运行以下命令安装自动部署工具：

    1
    npm install hexo-deployer-git --save

  3. 生成并上传博客
    使用 Git Bash，依次运行以下命令：

    1
    2
    hexo g   # 生成静态文件
    hexo d   # 上传到 GitHub

设计自己的主题

布局设计

在看了许多主题后，我发现它们要么过于简约，缺乏我需要的功能，要么过于复杂，显得冗杂不堪。于是，我决定自己设计并实现一个主题。多亏了 AI 的帮助，尤其是 Cursor 工具的出现，让我能够在短短三天内，从零基础学起，到实现我心中理想的布局。

这段经历让我意识到，人类可以将更多精力专注于设计和创造力的发挥，而通过与 AI 的协作实现自己的想法。在这个过程中，我不仅逐步熟悉了代码的内容，还逐渐提高了对技术需求的表达能力。

数学公式支持

在我的大部分文章中，都会用到 LaTeX 数学公式。然而，Hexo 的默认渲染器并不支持公式渲染，而现有的插件也各有不足。经过查阅资料和实际尝试，我终于实现了一个稳定、高效的公式渲染效果，主要参考了以下两篇文章：

相册

手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS)，新手小白一看就会-阿里云开发者社区

阿里云OSS被刷，我交了1000RMB学费 | NX の 博客

使用CDN加速OSS资源访问 - 对象存储 OSS - 阿里云

参考上述内容，我实现了自己的相册的搭建，以后更新相册只需要按照下面的步骤执行。

  1. 准备图片文件
    将图片文件（例如 PTZZ4567.jpg）通过 PicGo 上传到阿里云 OSS，获取对应的 URL。

  2. 更新 OSS URLs 文件
    在 source/images/gallery/oss-urls.json 文件中，添加新图片的 URL 映射，例如：

    1
    2
    3
    {
        "PTZZ4278.jpg": "https://1900-photo.oss-cn-beijing.aliyuncs.com/img/PTZZ4278.jpg"
    }

  3. 添加图片描述
    在 source/images/gallery/descriptions.json 文件中，为新图片添加描述，例如：

    1
    2
    3
    4
    5
    {
        "PTZZ4278.jpg": {
          "description": "《熊洞街》 \n 可爱的机械巨兽"
        }
    }

  4. 生成图片信息
    运行脚本 scripts/process-photos.js 来处理新添加的图片：

    1
    node scripts/process-photos.js

  5. 重新生成网站
    执行以下命令，清理旧文件并重新生成静态网站：

    1
    2
    hexo c
    hexo g

写文章

我的所有文章都在思源笔记中。思源是一款隐私优先的个人知识管理系统。在体验过 FlowUs（类似 Notion）、飞书等多款笔记软件后，因本地化需求，我最终选择了思源。它不仅功能齐全，例如支持双链，还支持使用 S3 同步功能实现多端数据同步。经过一年的使用，我发现它非常适合我的需求。

思源笔记支持将内容导出为 Markdown 格式，但导出的文件需要进行一定处理后，才能上传到我的博客。

  1. 在项目根目录下使用 Hexo 命令创建新文章：hexo new post "文章标题"

  2. 在文章开头添加必要的 Front-matter：

    1
    2
    3
    4
    5
    6
    ---
    title: 文章标题
    date: YYYY-MM-DD
    categories: 分类名称
    tags: [标签1, 标签2]
    ---

  3. 粘贴思源导出的md文件

  4. 本地预览

    1
    2
    hexo c   # 清理缓存
    hexo s  # 启动本地服务器预览

  5. 确认文章没问题后发布文章：

    1
    2
    3
    hexo c   
    hexo g   
    hexo d

写在后面

这三天，我初步搭建了一个博客框架。虽然还有许多细节需要完善，比如照片的布局，代码高亮的样式调整，还有大量内容等待填充，但基础结构已基本成型。如果你有任何建议或想法，非常欢迎与我交流！