轻松上手：从零开始搭建你的个人博客（Hexo + Matery 主题）

大家好！最近我发现了一个超赞的博客框架——Hexo，官网说它“快速、简洁且高效”。于是我心血来潮，决定用它搭配 hexo-theme-matery 这款漂亮的主题，搭建一个属于自己的技术小站，用来记录学习的点点滴滴。

如果你也想拥有一个完全由自己掌控的博客，那就跟着我一步步来吧！整个过程比你想象的要简单得多。

准备工作：环境安装

在开始之前，你的电脑需要先安装两个必备软件：

1. Node.js: Hexo 是基于 Node.js 的，所以这是必须的。
2. Git: 我们需要用 Git 来部署博客到 GitHub，以及备份我们的源代码。

这两个软件的安装过程都很简单，你可以在它们的官网上找到详细的教程。

第一步：安装 Hexo 脚手架

万事开头难，但 Hexo 的开头异常简单。打开你的终端（命令行工具），输入下面这行命令，全局安装 Hexo 的命令行工具（CLI）。

# -g 代表全局安装，这样你可以在任何目录下使用 hexo 命令
npm install -g hexo-cli

安装完成后，你可以通过 hexo -v 来检查是否安装成功。

第二步：一键建站

接下来，我们来创建博客的本地文件夹。找一个你喜欢的位置，然后执行以下命令：

# 将 <folder> 替换成你想要的文件夹名称，比如 my-blog
hexo init my-blog

Hexo 会自动为你创建一个名为 my-blog 的文件夹，并把所有需要的文件都准备好。然后，我们进入这个文件夹，并安装所有依赖。

# 进入你的博客文件夹
cd my-blog

# 安装项目所需的依赖包
npm install

这时候，你的博客文件夹看起来应该是这样的：

.
├── _config.yml      # 网站的核心配置文件，非常重要！
├── package.json     # 项目依赖信息
├── scaffolds        # 文章模板文件夹
├── source           # 存放你的文章、图片等源文件的地方
|   ├── _drafts      # 草稿箱
|   └── _posts       # 所有已发布的文章都在这里
└── themes           # 主题文件夹

第三步：让博客在本地跑起来

想看看你的博客长什么样吗？一条命令就搞定！

hexo server
# 或者用缩写 hexo s

终端会显示：
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

现在，打开浏览器，访问 http://localhost:4000/，你就能看到 Hexo 默认的博客页面啦！是不是很酷？这个本地服务是实时预览的，你在文件中做的任何修改，刷新网页就能看到效果。

小贴士：

• 如果 4000 端口被占用了，可以用 hexo s -p 5000 来换个端口。
• 想停止服务，在终端里按下 Ctrl+C 即可。

第四步：更换 Matery 主题

Hexo 默认的 landscape 主题有点朴素，我们来换上开头提到的高颜值主题 hexo-theme-matery。

首先，你需要把主题文件下载到 themes 文件夹里。最方便的方式是使用 Git 克隆：

# 确保你当前在博客的根目录 (my-blog)
git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery

下载完成后，打开博客根目录下的 _config.yml 文件（注意不是 themes/matery 里面的那个），找到 theme 这个配置项，把它改成 matery。

# _config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery # 原本是 landscape，我们把它改成 matery

保存文件后，先按 Ctrl+C 停掉之前的服务，然后重新执行 hexo s 启动。再次访问 http://localhost:4000/，你会发现你的博客已经焕然一新！

第五步：部署到 GitHub Pages

博客在本地跑起来只是第一步，我们最终的目的是让所有人都能访问到它。GitHub Pages 提供了免费的静态网站托管服务，简直是 Hexo 的绝配。

5.1 创建 GitHub 仓库

登录你的 GitHub，新建一个仓库。**仓库的名字必须是 你的用户名.github.io**。比如，我的 GitHub 用户名是 mandy-dev，那么仓库名就必须是 mandy-dev.github.io。

5.2 安装部署插件

Hexo 需要一个插件来帮助它把代码推送到 GitHub。

npm install hexo-deployer-git --save

5.3 修改部署配置

再次打开根目录的 _config.yml 文件，拉到最下面，找到 deploy 配置项，修改成这样：

# _config.yml

deploy:
  type: git
  repo: [email protected]:yourname/yourname.github.io.git # 把 yourname 换成你的 GitHub 用户名
  branch: main # 或者 master，取决于你的 GitHub 默认分支名

注意：repo 地址推荐使用 SSH 格式 (git@...)，这需要你提前配置好本地电脑与 GitHub 的 SSH Key。如果没配置，也可以使用 HTTPS 格式，但每次部署可能需要输入用户名和密码。

5.4 一键部署

现在，激动人心的时刻到了！执行下面两条命令：

# 1. 生成静态文件 (generate)
hexo generate
# 或者用缩写 hexo g

# 2. 部署到 GitHub (deploy)
hexo deploy
# 或者用缩写 hexo d

你也可以把它们合并成一条命令：hexo g -d。

命令执行成功后，稍等一两分钟，访问你的 https://你的用户名.github.io 网址，就能看到和本地一模一样的博客了！

第六步：备份你的博客源码

这一步非常重要！默认情况下，你推送到 GitHub 的只是生成的静态网页文件（HTML, CSS, JS），而你的 Markdown 源文件、配置文件都还只在你的本地电脑上。如果换了电脑或者电脑坏了，你的心血就全没了。

我们可以巧妙地利用 Git 的分支功能来备份源码。main (或 master) 分支用来存放网站的静态文件，我们再新建一个分支，比如叫 source，专门用来存放博客的源代码。

1. 在本地博客根目录初始化 Git（如果之前没有的话），并关联远程仓库。

   # 如果 .git 文件夹已存在，请跳过此步
   git init
   git remote add origin [email protected]:yourname/yourname.github.io.git

2. 创建一个 source 分支并切换过去。

   git checkout -b source

3. 将所有源代码文件添加到 source 分支并推送到 GitHub。
   为了避免将不必要的文件（比如 node_modules）也传上去，最好在根目录创建一个 .gitignore 文件，写入以下内容：

   .DS_Store
   Thumbs.db
   db.json
   *.log
   node_modules/
   public/
   .deploy*/

   然后执行：

   git add .
   git commit -m "feat: 初始化博客源代码备份"
   git push origin source

搞定！以后每次写完文章，记得先 git push origin source 备份源码，然后再 hexo g -d 发布网站。这样就万无一失了。

总结：常用命令备忘录

最后，附上一份常用命令清单，方便你随时查阅：

• 新建文章：hexo new "我的第一篇文章"
• 新建页面（比如“关于”页面）：hexo new page "about"
• 清除缓存（遇到奇怪问题时试试）：hexo clean
• 生成静态文件：hexo g
• 启动本地服务：hexo s
• 部署网站：hexo d
• 生成并部署：hexo g -d