My First Blog：如何从零创建专属于你的博客？

这是本博客的第一篇文章，主要记录建立博客的方法。目前的站点还是“毛坯房”的状态，以后会边写内容边做优化，这篇内容也会持续更新。

先说技术方案：源码托管在 GitHub，基于 Hexo 框架搭建，运行环境是 JavaScript（Node.js），网页主题用的是 NexT。

个人喜欢的博客范例：Liam 的博客，排版克制、内容扎实，是我搭站时参考的目标。

Step I：Git 与 GitHub

基础材料：能正常访问 GitHub 的网络环境、GitHub 账号一枚。

1. 安装 Git

Git 是版本管理工具，负责把本地文件同步到 GitHub。去 Git 官网下载对应系统版本的安装包（Windows 用户建议安装到 D 盘）。

Windows 安装时注意一步：在 Adjusting your PATH 环节，勾选 Git from the command line and also from 3rd-party software，这样之后才能在 Git Bash 里直接用 git 命令。

安装完成后打开 Git Bash（右键菜单里就有），输入：

git --version

能输出版本号就说明安装成功。macOS 用户一般自带 Git，首次运行 git --version 按提示安装命令行工具即可。

2. 将 Git 与 GitHub 绑定：SSH 公钥

SSH 公钥相当于一把“钥匙”，配好之后本机与 GitHub 之间传输文件就不用反复输密码。

在电脑上新建一个文件夹（比如 git codelife），在里面打开 Git Bash，生成密钥：

ssh-keygen -t rsa -C "你的邮箱"

一路按回车（连续 4 次，默认不设置密码）。然后查看公钥：

cd ~/.ssh
ls
cat id_rsa.pub

把输出的内容整段复制。打开 GitHub → 右上角头像 → Settings → SSH and GPG keys → New SSH key，粘贴保存。

验证是否绑定成功：

ssh -T git@github.com

第一次会询问是否信任该主机，输入 yes 回车。看到类似 “Hi 用户名! You've successfully authenticated” 的提示，就成功了。

3. 第一次提交：clone → add → commit → push

提交文件的整体思路只有一句话：把 GitHub 仓库克隆到本地 → 修改文件并提交到本地 → 推送到 GitHub 仓库。

在 GitHub 上新建一个仓库（比如命名为 text），复制它的 SSH 地址。回到本地文件夹打开 Git Bash：

git clone git@github.com:你的用户名/text.git

克隆完成后，在仓库文件夹里新建一个测试文件 text.txt，然后依次执行：

git status          # 查看仓库状态，能看到未跟踪的 text.txt
git add text.txt    # 把文件加入暂存区
git commit -m "commit text file"

第一次提交会提示 “Please tell me who you are”，按提示配置你的身份：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱@example.com"

配置完成后再 commit 一次，然后用 git log 查看提交记录、git status 确认工作区干净，最后推送到远程：

git push origin main

第一次推送会要求登录 GitHub 账号（或授权），之后就不用重复登录了。刷新 GitHub 仓库页面，看到 text.txt 就说明整个链路已经打通。

Step II：Node.js 与 Hexo

1. 安装 Node.js

Hexo 运行在 Node.js 上。去 Node.js 官网下载 LTS（长期支持） 版本，一路默认安装。完成后打开终端验证：

node -v
npm -v

两个命令都能输出版本号即可。

npm 是 Node.js 自带的包管理器，全局安装的模块默认放在用户目录。想自定义安装路径（比如 Windows 下装到 D 盘），可以执行：

npm config set prefix "D:\nodejs\node_global"

然后把 D:\nodejs\node_global 添加到系统环境变量 PATH 中，这样全局命令在任何目录都能直接调用。macOS / Linux 用户一般不需要这一步。

2. 创建 GitHub Pages 仓库

在 GitHub 新建一个仓库，命名必须为 你的用户名.github.io——用户名写错的话域名无法解析。仓库建好后，进入 Settings → Pages，把 Source 设为 main 分支，启用 GitHub Pages。

3. 安装 Hexo 并初始化

在电脑上新建一个文件夹（比如 Blog），在其中打开终端，全局安装 Hexo 命令行工具：

npm install -g hexo-cli

然后初始化博客：

hexo init
npm install

初始化完成后，本地生成网页并启动本地服务器预览：

hexo g    # generate，生成静态网页
hexo s    # server，启动本地服务

浏览器打开 http://localhost:4000，就能看到 Hexo 默认的欢迎页面。

4. 配置部署，推上 GitHub

打开博客根目录下的主配置文件 _config.yml，在文件底部写入部署信息：

deploy:
  type: git
  repository: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main

然后安装部署插件：

npm install hexo-deployer-git --save

最后执行“素质三连”：

hexo clean    # 清除缓存
hexo g        # 重新生成网页
hexo d        # 部署到 GitHub 仓库

等命令跑完，浏览器访问 https://你的用户名.github.io，你的博客就上线了。

Step III：域名的注册与解析

xxx.github.io 这个地址太长，不利于记忆，而且在国内访问并不稳定。国际主流的域名注册商（如 GoDaddy、Network Solutions）提供的域名在国内访问也常常有问题，所以需要一个国内能稳定访问的域名。

1. 注册域名

阿里云、腾讯云等国内服务商都有价格低廉的域名，可以一次买很多年，但需要实名认证，稍微麻烦一点。当时我注册了一个腾讯云的十年域名，一劳永逸。

2. 域名解析：CNAME 记录

很多教程会教你先用 ping 查出 GitHub Pages 的 IP 地址，再用 A 记录解析。但 IP 地址一段时间后可能变化，容易出现网址定向失败的问题。

更稳妥的做法是使用 CNAME 记录：打开腾讯云控制台 → 域名解析 → 新手快速解析，记录类型选择 CNAME，目标域名填 你的用户名.github.io，确定即可。这样 GitHub 的 IP 再怎么变，解析都不会失效。

3. 绑定 GitHub Pages

域名解析只是第一步，还要让 GitHub 知道这个域名属于你的博客。

在 Hexo 项目的 source/ 目录下新建一个 CNAME 文件（注意没有扩展名），写入你的新域名：

dcblog.site

然后回到 GitHub 仓库的 Settings → Pages，在 Custom domain 一栏填写同样的域名，保存，等待 DNS check successful。

再次执行 hexo clean && hexo g && hexo d 部署，访问新域名，博客就正式搬进了自己的门牌号。

Step IV：主题配置与优化

1. 让网站被 Google 和 Bing 收录

生成 sitemap

先安装 sitemap 生成插件（一个给 Google，一个给百度）：

npm install hexo-generator-sitemap hexo-generator-baidu-sitemap --save

在 _config.yml 中添加配置：

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

执行 hexo g，在 public/ 目录下就能看到生成的 sitemap.xml。它相当于网站的“目录册”，告诉搜索引擎网站里有哪些页面。

HTML 验证

打开 Google Search Console，添加资源时选择 URL prefix（网址前缀），填写你的域名。

注意：填写的域名必须和 _config.yml 里的 url 字段完全一致。如果一边是 你的用户名.github.io，另一边是 dcblog.site，验证永远不会成功。

选择 HTML 验证方式，下载验证文件，放到 themes/next/source/ 目录下，然后执行：

hexo clean && hexo g && hexo d

稍等片刻，回到验证页面点击 Verify。这步只证明“网站是你的”，搜索引擎还不知道网站里有什么，所以还需要提交 sitemap。

提交 sitemap

在 Search Console 的 Sitemaps 页面，点击 Add a new sitemap，输入 sitemap.xml，提交。状态显示 Success 后，等待一段时间，搜索 site:dcblog.site 验证是否被收录。Bing 的站长工具（Bing Webmaster Tools）流程完全类似，可以同时提交。

参考：一次成功的体验：Hexo 博客添加谷歌收录

2. 部署站内搜索

站内搜索让读者能直接搜文章。先安装搜索插件：

npm install hexo-generator-search --save

在 _config.yml 中添加：

search:
  path: search.xml
  field: post
  content: true

然后在 NexT 主题的配置文件 themes/next/_config.yml 中开启本地搜索：

local_search:
  enable: true
  trigger: auto

建议 trigger 选择 auto 而非 manual——前者输入时实时出结果，后者需要手动触发，体验差一截。

参考：Hexo 博客添加站内搜索功能

3. 在主页配置留言板

评论和留言是博客互动的基础。我用的评论系统是 Valine：它需要一个 LeanCloud 应用提供数据存储。

先到 LeanCloud 注册并创建应用，在 设置 → 应用凭证 里拿到 AppID 和 AppKey。然后在 NexT 主题配置中开启 Valine：

valine:
  enable: true
  appid: 你的 AppID
  appkey: 你的 AppKey
  notify: false
  verify: false
  placeholder: 说点什么吧
  avatar: mm

新建留言板页面：

hexo new page message-board

编辑 source/message-board/index.md，把 Valine 挂载到页面里，并指定独立的 path（这样留言板与文章评论互不干扰）：

<div id="vcomments"></div>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: "#vcomments",
    appId: "你的 AppID",
    appKey: "你的 AppKey",
    path: "/message-board",
    placeholder: "欢迎留言",
  });
</script>

重新部署后，导航栏里的“留言板”就是大家踩脚印的地方了。

参考：Hexo 博客配置留言板

4. 使用个性化图标

NexT 主题内置了 Font Awesome 图标库，直接用类名就能给页面加上图标：

<i class="fas fa-bell"></i>

图标的颜色和大小可以用内联样式调整：

<i class="fa fa-car" style="font-size:60px;color:red;"></i>

想替换浏览器标签页上的站点图标（favicon），准备一张 32×32 的 PNG，放到 themes/next/source/images/ 下，再修改主题配置里的 favicon 路径即可。想使用更多图标，也可以单独下载 Font Awesome 库并引入它的 CSS 文件。

参考：Font Awesome 图标字体使用

5. 留坑（后续计划）

目前还有一些想做的优化，先记在这里：

配置中英文切换；
在 About 页面配置更丰富的排版；
给代码块添加高亮。

Step V：博客撰写与发布

1. Markdown 语法

Markdown 语法免去了 Word 文档调整排版的烦恼，门槛又比 LaTeX 低，配合好用的编辑器可以实现“所见即所得”。

最常用的语法就这些：

# 一级标题
## 二级标题

**加粗** 和 *斜体*

- 无序列表项
- 另一项

1. 有序列表项
2. 第二项

> 引用一段话

`行内代码`

[链接文字](https://example.com)

![图片说明](/images/xxx.png)

列表是写博客的高频操作，有两点注意：一是有序列表和无序列表可以互相嵌套，嵌套时缩进四个空格（或一个制表符）；二是在一个列表里不要混用 -、*、+ 三种标记，不同应用对混用的处理不一致。完整的列表语法见 Markdown 官网中文教程：列表。

2. 特殊输入：数学公式与化学方程式

写技术文章免不了公式。NexT 主题内置了 MathJax 和 mhchem，只需在主题配置文件中把对应的开关改为 true 即可。

数学公式用 $...$ 包裹（行内）或 $$...$$ 包裹（独立成行），例如 $E=mc^2$ 。化学方程式使用 mhchem 的 \ce{} 语法，例如：

$\ce{2H2 + O2 -> 2H2O}$

关于 mhchem 支持的反应箭头、上下标、状态符号等完整语法，见 mhchem 官方手册。

一个已知限制：Markdown 本身不支持修改图片尺寸，图片只能按原始大小显示，需要更精细的排版时得借助 HTML 辅助。

3. 选择 Markdown 编译器

Editor.md：来自 GitHub 大佬 Pandao 的开源 Markdown 编译器，支持实时预览，源码和在线示例都在。用它需要针对 Hexo 做重新封装，适合喜欢折腾的人。
Typora：所见即所得的 Markdown 编辑器，当时价格 89 元。配合 Hexo 的发布流程很顺：先执行 hexo new "文章标题"，会生成 source/_posts/文章标题.md 以及一个同名文件夹用于存放这篇文章的图片；在 Typora 里直接把图片拖进文档，设置 优先使用相对路径，图片会自动复制到对应文件夹，部署后不会出现图片挂掉的问题。完整流程见 Typora + Hexo 发布博客。
VS Code：写代码顺手，装个 Markdown 插件也能写博客，适合不想额外装软件的人。

4. 发布博客

Hexo 博客本质是静态网页，每次内容更新都需要重新生成。发布就是“素质三连”：

hexo clean    # 清除缓存文件
hexo g        # hexo generate 的缩写，重新生成网页
hexo d        # hexo deploy 的缩写，把新网页部署到 GitHub 仓库

hexo clean 清掉旧的生成结果，避免缓存残留导致页面不更新；hexo g 把 Markdown 编译成 HTML；hexo d 推送到仓库，GitHub Pages 随即生效。

结尾

到这里，一个从仓库、框架、域名到收录、搜索、留言、写作发布的完整博客就建起来了。网站目前还是毛坯房，之后会边写内容边装修——代码高亮、中英文切换、页面排版都会陆续补上，这篇记录也会跟着更新。

如果你也照着搭出了自己的博客，欢迎在留言板踩个脚印。