搭建个人博客（上）

Dec 3, 2023

搭建个人博客（上）

前言

“要搭个人博客！”这个想法我也不太清楚具体是什么时候出现的，大概是看了诸多大佬的博客之后就自然而然地想要效仿吧。总之，借着一个奇怪的契机（K 佬：去搭一个博客 我：好嘞），也是正式开始整博客了。作为第一篇博客，就讲讲我搭博客的过程以及遇到的一些小麻烦吧

框架

在怎么搭个人博客这个问题上，我考虑过三种整法：

  1. 在现有的博客平台（如 CSDN、博客园等）上写
  2. 用博客框架写，部署在 GitHub Pages 上
  3. 用博客框架写，部署在云服务器上

考虑了一下，如果要搭个人博客，我更喜欢自己能够定制整个页面，况且本人对 CSDN 等的好感度一直都挺低的，于是方案一被直接抛弃了；方案三需要我掏钱买一台暂时还没有别的用处的仅仅用来搭博客的云服务器以及一个域名，虽然有一台自己的服务器和一个自己的域名实在是酷毙了，但我的钱包还是让我放弃了方案三。最终我选择了折中的方案二，也就是广受欢迎的 Hexo + GitHub Pages 建站

Hello World

博客，启动！

Hexo

安装 Hexo 需要 Nodejs 环境，先去 Nodejs 官网下载安装包。一般来说会有 LTS 和 Current 两个版本，LTS 全称是 Long Term Support，也就是长期支持版本，相对会更稳定且不容易出 bug，所以正常情况下载 LTS 版本就行了。安装过程就是一路无脑 Next，安装完后可以在 cmd 中运行以下两个命令验证是否安装成功：

node -v
npm -v
# 如果都输出版本号就是安装成功了

接下来安装 Hexo：

npm install -g hexo-cli  # -g 指全局安装，局部安装可以运行 npm install hexo

验证安装成功：

hexo v  # 输出 Hexo 以及依赖包的版本

准备一个用来存放博客文件的空文件夹，在这个文件夹中打开 cmd 并运行：

hexo init  # 博客目录的初始化
npm install  # 安装博客需要的包

这个时候文件夹中应该多出了一大堆乱七八糟的文件和文件夹。太棒了，已经初始化好了！来看看 Hexo 送我们的新手大礼包是什么样的吧：

hexo g  # 从你写的博客中生成静态网页文件，以后每次更新完博客都要运行一遍
hexo s  # 在本地 localhost:4000 生成预览

在浏览器中访问 localhost:4000：

Hello Hexo!

Git & GitHub

我在搭博客之前就已经在使用这个游戏存档工具和最佳菜谱网站了，如果没安装 Git 或者没有 GitHub 账号的话可以参考网上各位大佬们的教程（我真懒）

装完 Git 以及注册完 GitHub 账号之后，需要新建一个仓库（repository），并取名叫 USERNAME.github.io（USERNAME就是你在 GitHub 的账号名）这个名字具有特殊意义，GitHub 会把这个仓库里的文件作为网站文件建站，可以通过 https://USERNAME.github.io 访问

值得一提的是，许多教程中提到需要配置 GitHub SSH key，但那其实是通过 SSH 连接 GitHub 才必要的步骤，如果在等会讲到的 Hexo 配置文件中使用 HTTPS 连接就可以省去这个步骤。我嘛，因为 Watt Toolkit 3.0.0-rc.2 在代理 GitHub 时并没有处理 22 端口，不停止加速就无法使用 SSH 连接，于是我毫不犹豫地选择了 HTTPS 连接

Hexo + Git + GitHub

在博客的文件夹下有个叫做 _config.yml 的文件，是整个博客的配置文件。不过现在需要它做的暂时只是让它告诉 Hexo 用什么方式（Git）把博客放到哪里（Github）去。随便用什么文字编辑器打开它，保证当中有这么几行：

deploy:
  type: git
  repo: https://github.com/USERNAME/USERNAME.github.io.git
  branch: main

当然也可以选择用 SSH 而不是 HTTPS 的方式连接 Github，需要把 repo 属性改成 git@github.com:USERNAME/USERNAME.github.io.git 以及配置 Github SSH key，详情请见网上各大佬的文章（懒开二度）

接下来装能让 Hexo 通过 Git 部署博客的插件：

npm install hexo-deployer-git --save

部署！

hexo d

去 https://USERNAME.github.io 看看：

Hello GitHub Hexo!

_config.yml

第一步的搭建已经完成了，该回头看看究竟发生什么了。首先要看的就是根目录下的 _config.yml 这个配置文件

.yml 扩展名的文件使用的是 YAML 语言，因其能清晰地表达层次结构，常用于书写配置文件。YAML 的语法并不复杂，只需要 10 分钟左右就足以掌握其大致用法

了解大致用法之后，就可以正式看看 _config.yml 里面都塞了些什么了。完整的配置选项可以在 Hexo 官方文档的“配置”一节中查看，下面是一些我用到的配置选项：

title: Image Builder  # 网站标题，就是显示在标签页上的文字
subtitle: iamge_builder's blog  # 副标题
description: iamge_builder's blog  # 简介，主要是给搜索引擎看的
keywords: 编程 网站  # 关键词
author: iamge_builder  # 作者名字
language: default  # 网站语言，这个需要根据主题灵活调整
timezone: Asia/Shanghai  # 时区，中国大陆填 Asia/Shanghai 就行

url: https://image-builder-1837.github.io  # 网站网址

theme: clover  # 网站主题

写博客

Markdown

Hexo 创建的博客文件默认使用 Markdown 语法书写，这年头不会 Markdown 真的还算编程人吗（暴论）

调侃归调侃，Markdown 最大的特点就是将样式融合进了文本之中，这使得书写 Markdown 时并非像 Word 那样需要用鼠标一个个选中调整，而是双手不离开键盘就能同时完成书写和排版。如今无论是 GitHub 的 README.md 或是大部分笔记软件如 Obsidian、Typora、trilium 等都使用 Markdown 语法，这值得每个希望能集中精神码字的人学习

子文件夹

在正式开始写博客之前，大致了解一下博客文件夹中几个子文件夹的作用有助于理解 Hexo 的工作方式

  • node_modules：存放 Nodejs 的一些包
  • public：hexo g 生成的静态网页文件都放在这里，hexo d 也是把这个文件夹发送给 GitHub
  • scaffolds：等会的博客文件都是用这里面的模板生成的
  • source：博客、主页、归档、关于等页面文件存放的位置
  • themes：放主题的地方

New!

来生成一篇新博客！

hexo new "Title"

Hexo 有默认有三种模板：

  • post：默认模板，用于生成博客
  • page：用来生成一些诸如主页、归档、关于等非博客页面文件
  • draft：草稿，感觉没啥用

默认使用 post 模板，这个例子中会用 scaffolds/post.md 在 source/_posts 下生成 Title.md。如果你要生成“关于”页面：

hexo new page "About"

就会用 scaffolds/page.md 在 source/About 下生成 index.md

接下来就可以用你喜欢的 Markdown 编辑器（比如 VSCode）打开 Title.md 进行写作了。写完依旧是 hexo g 加 hexo s 预览，hexo d 部署，就不在此赘述了

图床

有时在博客中需要引用图片，一种简单直接的做法就是把图片放在 source 文件夹下通过相对路径引用。但这种做法在图片数量越来越多的情况下会狠狠地拖慢网站的加载速度。所以可以选择把图片上传到图床里并使用 Markdown 图片语法 ![ImageName](ImageLink) 来引用。 所谓的图床就是见网上大佬的科普（三回啊三回）

其实也可以专门建一个 GitHub 仓库充当图床，我就是这么干的

结语

至此，Hexo 的搭建以及基本使用都已经讲完了，下回该讲讲让我博客拖了整整三天才完成的罪魁祸首——主题了🥶