从WordPress到Hexo:Markdown让技术博主告别格式焦虑,实现一键排版和跨平台同步,写作效率提升三倍
说实话，作为一个技术博主，我曾经在WordPress后台折腾了整整一个下午，就为了调好一篇文章的标题层级、代码高亮和段落间距。那时候我写的不是文章，是CSS布局。
直到我遇见了Hexo和Markdown，整个世界都安静了。
今天想聊聊我是怎么从一个被格式折磨到崩溃的WordPress用户，变成了Hexo的忠实粉丝，以及这个过程到底给我的写作效率带来了什么变化。
那些年，我在WordPress里吃过的苦
先说说我的”血泪史”吧。
三年前我开始写技术博客，选了当时最流行的WordPress。听起来很合理对吧？安装简单、插件丰富、主题满天飞。
第一个坑：视觉编辑器是个摆设
刚开始我觉得挺好，所见即所得嘛。但写过几篇技术文章后，我发现问题来了——当我想插入一段代码时，编辑器开始抽风。格式乱了，缩进没了，高亮不生效了，有时候甚至直接崩掉。
我尝试过各种方案：
- 用插件（比如Syntax Highlighter）——加载速度变慢，页面卡顿
- 用HTML标签手动写代码块——每次都要重新学API
- 用第三方编辑器写完了再粘贴——粘贴后格式全乱
第二个坑：发布流程繁琐
每次写完文章，我要：
- 在编辑器里排版
- 预览看看效果（经常预览和实际显示不一致）
- 上传封面图（经常因为图床问题导致图片加载失败）
- 设置标签和分类
- 点击发布
- 在手机上刷新看看效果
这一套下来，写一篇文章的时间，一半花在了”排版”上。
第三个坑：跨平台同步是个噩梦
我有三个地方写文章：
- 家里电脑（主力）
- 公司电脑（偶尔补充）
- 手机备忘录（灵感记录）
每次同步都要手动复制粘贴，或者用一些同步插件。有次我用了两个浏览器标签写同一篇文章，结果因为缓存问题，公司电脑覆盖了我家里没发布的草稿。那篇文章我重写了一遍，花了两个晚上。
说实话，那时候我经常怀疑自己是不是不适合写博客。
第一次接触Markdown，我以为是个噱头
朋友给我安利Markdown的时候，我的第一反应是：”不就是纯文本吗？有什么稀奇的？”
后来我试了一天，真香了。
Markdown到底解决了什么？
简单说，Markdown把”写作”和”排版”彻底分开了。
在WordPress里，你写作的时候必须同时考虑格式——”这个标题是二级还是三级？这段代码要不要加高亮？这张图要不要左浮动？”
在Markdown里，你只需要关注内容本身：
# 这是一个一级标题
## 这是一个二级标题
这是一段普通文本，**加粗**，*斜体*，还有`行内代码`。
```javascript
function hello() {
console.log('Hello, World!');
}
- 列表项一
- 列表项二
- 列表项三
看，你完全不需要管字体大小、颜色、间距这些破事。语法简单到几乎不需要学习成本，写完后自动转成漂亮的HTML。
**为什么Markdown对技术博主特别友好？**
因为我写的都是技术文章啊！技术文章里有什么？
- 代码块
- 命令行
- 数学公式
- 层级分明的标题结构
- 引用和注释
这些在Markdown里都是原生支持的，而且支持得非常标准。
## 为什么选择Hexo而不是其他静态博客框架？
市面上静态博客框架不少，Hugo、Jekyll、Gatsby……我挑花了眼，最后选了Hexo。理由很简单：
**1. 中文社区最活跃**
这个太重要了。遇到问题搜"Hexo"出来的是中文解决方案，搜"Hugo"出来的是英文文档。对于一个非英语母语的技术博主来说，沟通成本低就是生产力。
**2. 主题生态最丰富**
搜一下"Hexo主题"，能找到几百个现成的。我试了至少十个主题，最终选了"Next"，简洁、干净、代码高亮效果很好。
**3. 部署最简单**
Hexo一键部署到GitHub Pages、Vercel、Netlify，基本上就是一个命令的事。
让我给你展示一下我的完整部署流程：
```bash
# 1. 安装Hexo
npm install -g hexo-cli
# 2. 初始化博客目录
hexo init my-blog
cd my-blog
# 3. 安装依赖
npm install
# 4. 本地预览（写文章时随时查看效果）
hexo s
# 5. 生成静态文件
hexo g
# 6. 部署到GitHub Pages
hexo d
是不是比WordPress的发布流程简单多了？
我的Hexo博客完整配置
说实话，我第一次搭建Hexo博客也踩了不少坑。让我把完整的配置过程分享给你，省的再走弯路。
第一步：初始化和基础配置
# 创建博客目录
mkdir tech-blog && cd tech-blog
# 初始化Hexo
hexo init
npm install
# 编辑配置文件 _config.yml
# 这是Hexo的核心配置文件
我的 _config.yml 关键配置：
# 站点基本信息
title: 我的技术笔记
subtitle: '一个程序员的成长记录'
description: '专注前端、后端、DevOps技术分享'
keywords: '技术博客,前端开发,后端开发,编程'
author: 我的名字
language: zh-CN
timezone: Asia/Shanghai
# URL设置
url: https://myblog.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults: null
# 部署配置
deploy:
type: git
repo: https://github.com/myname/myblog.git
branch: main
第二步：安装插件
# 安装常用插件
npm install hexo-generator-index --save # 首页索引
npm install hexo-generator-archive --save # 归档页
npm install hexo-generator-category --save # 分类
npm install hexo-generator-tag --save # 标签
npm install hexo-server --save # 本地服务器
npm install hexo-deployer-git --save # Git部署
# 代码高亮主题
npm install hexo-wordcount --save # 字数统计
npm install hexo-prism-plugin --save # 代码高亮（Prism.js）
第三步：写第一篇Hexo文章
Hexo的文章都放在 source/_posts/ 目录下，每篇文章都是Markdown文件。
---
title: 从WordPress迁移到Hexo的完整指南
date: 2024-01-15 10:30:00
tags:
- Hexo
- 博客
- 迁移指南
categories:
- 技术分享
---
这是我的文章正文内容...
是不是比WordPress的发布界面清爽多了？
Markdown写作的真实效率提升
让我用数据说话。
WordPress时期的写作流程：
写草稿（2小时）→ 排版调试（1小时）→ 预览调整（30分钟）
→ 上传图床（20分钟）→ 发布（10分钟）
→ 手机检查（10分钟）
总计：约4小时
Hexo + Markdown的写作流程：
写草稿（2小时）→ 本地预览（10分钟）→ 部署（5分钟）
总计：约2小时15分钟
效率提升：约45%
但这还不是全部。因为Hexo + Markdown还有一个隐形福利：专注。
在WordPress里，你写文章的时候，脑子里始终有个声音在问：”这个格式对不对？这个颜色好不好看？”
在Hexo里，你只需要写。排版是自动的，主题会帮你处理好一切。你只需要关注内容本身。
这个”专注”带来的效率提升，很难量化，但绝对不亚于那45%。
跨平台同步的终极方案
这是我迁移后最大的爽点。
之前的痛苦：
我有三个设备，三个地方写东西，每次同步都是噩梦。
现在的方案：
# 1. 用Git管理博客源码
git clone https://github.com/myname/myblog.git
# 2. 在任何设备上，只需要：
cd myblog
hexo s # 本地预览
hexo d # 部署
具体操作流程：
# 在家里的电脑上写文章
code source/_posts/我的新文章.md # 用VS Code写
hexo s # 本地预览
# 写完后提交到Git
git add .
git commit -m "添加新文章：xxx"
git push origin main
# 在公司的电脑上继续写
git pull origin main # 同步最新代码
code source/_posts/我的新文章.md # 继续编辑
hexo s # 本地预览
git add .
git commit -m "补充内容"
git push origin main
手机上的方案：
手机不方便用命令行，所以我用了两个方案：
- Drafts App（iOS）：在Drafts里写好文章，通过动作自动同步到GitHub
- GitHub Mobile：直接用手机编辑Markdown文件，提交后自动触发部署
# GitHub Actions配置：.github/workflows/deploy.yml
name: Deploy Hexo Blog
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install Dependencies
run: npm install
- name: Generate Static Files
run: hexo generate
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
看到这个配置了吗？只要我push代码到GitHub，GitHub Actions会自动帮我部署。完全自动化，我连服务器都不用管。
一键排版的真正含义
很多人听到”一键排版”会想：这不就是点一个按钮吗？
没那么简单。
Hexo的”一键排版”指的是：你写的Markdown内容，自动转换成符合主题样式的HTML。
具体来说：
# 标题一
## 标题二
这是一段包含`行内代码`的文本，还有**加粗**和*斜体*。
```python
def hello():
print("Hello, Hexo!")
- 列表项一
- 列表项二
会自动生成：
```html
<h1>标题一</h1>
<h2>标题二</h2>
<p>这是一段包含<code>行内代码</code>的文本，还有<strong>加粗</strong>和<em>斜体</em>。</p>
<pre><code class="language-python">def hello():
print("Hello, Hexo!")
</code></pre>
<ul>
<li>列表项一</li>
<li>列表项二</li>
</ul>
这些HTML的样式，全部由主题CSS控制。你写Markdown的时候不需要考虑任何样式，主题会帮你处理好一切。
更厉害的是，你可以一键切换主题：
# 更换主题只需要改配置
# 编辑 _config.yml，把 theme 改成你想要的主题名
theme: next # 换成next主题
# 重新生成并部署
hexo clean && hexo g && hexo d
十分钟，整个博客的颜值就变了。
给想迁移的WordPress用户的建议
如果你也在用WordPress，而且正在考虑迁移到Hexo，我给你几个建议：
1. 不要一次性迁移所有文章
这是一个常见的错误。我一开始想把WordPress的所有文章都导出来，结果折腾了一整天。
正确的做法是：只迁移最近的文章，旧的留在WordPress或者干脆不迁移。
# 用这个命令从WordPress导出Markdown
# 安装hexo-migrator-wordpress插件
npm install hexo-migrator-wordpress --save
# 导出单篇文章（推荐）
hexo migrate wordpress 你的文章URL
2. 先本地搭建，熟练后再部署
不要一开始就搞部署、Git、GitHub Pages这些复杂的东西。
# 先本地跑起来
hexo init myblog
cd myblog
npm install
hexo s
然后在浏览器打开 http://localhost:4000 看看效果。这样你能专注于学习Markdown和Hexo的基本操作。
3. 准备好替代WordPress插件的方案
WordPress之所以强大，是因为有插件。Hexo没有插件系统（或者说插件系统完全不同）。
你需要提前想好，你用了哪些WordPress插件，Hexo里怎么替代：
| WordPress插件 | Hexo替代方案 |
|---|---|
| Yoast SEO | Hexo的front-matter配置 |
| Akismet | GitHub Issues评论系统 |
| WP Super Cache | 静态文件，不需要缓存 |
| Contact Form | 邮箱链接或第三方表单 |
| 百度统计 | 手动添加统计代码 |
4. 写文章的最佳实践
---
title: 文章标题
date: 2024-01-15 10:30:00
tags:
- 标签1
- 标签2
categories:
- 分类
description: 文章摘要，用于SEO
---
文章正文从这里开始...
养成写front-matter的习惯，这样你的文章才有标题、日期、标签和分类。
真实案例：我写一篇技术文章的完整过程
让我给你展示一下我现在写一篇文章的完整流程，让你感受一下效率的提升。
1. 写草稿（在家里）
# 创建新文章
hexo new "React hooks最佳实践"
# 编辑文章
code source/_posts/react-hooks-best-practices.md
我开始写内容，Markdown语法很直观：
---
title: React Hooks最佳实践
date: 2024-01-15 10:30:00
tags:
- React
- JavaScript
- 前端
categories:
- 前端开发
---
# 前言
React Hooks是React 16.8引入的特性...
## useEffect的正确用法
```javascript
useEffect(() => {
// 副作用逻辑
return () => {
// 清理函数
};
}, [dependency]);
…
**2. 本地预览**
```bash
hexo s
浏览器自动打开 http://localhost:4000，我可以直接看到效果。修改文章后，浏览器会自动刷新。
3. 提交代码
git add .
git commit -m "添加文章：React Hooks最佳实践"
git push origin main
4. 自动部署
GitHub Actions自动触发，几分钟后，我的博客就更新了。
5. 手机上查看
打开博客，文章已经上线。
从开始写文章到上线，总共花了30分钟。其中写内容花了20分钟，剩下的10分钟都是自动化流程。
在WordPress时代，同样的文章，光是排版和发布就要花掉至少一个小时。
一些实用的Hexo技巧
分享几个我用了很久的Hexo技巧，希望能帮到你：
技巧1：使用代码块时，指定语言
```javascript
const name = 'Hexo';
不指定语言，代码高亮会失效。
**技巧2：插入图片用绝对路径**
```markdown
或者用相对路径：
技巧3：使用短代码简化常见操作
{% note %}
这是一个提示信息。
{% endnote %}
{% tip %}
这是一个技巧提示。
{% endtip %}
{% warning %}
这是一个警告信息。
{% endwarning %}
技巧4：自定义SEO配置
在front-matter中添加description，Hexo会自动生成meta标签。
---
title: 文章标题
description: 这是文章的摘要，用于SEO优化
---
技巧5：使用标签页自动归档
Hexo会自动生成标签页和分类页，你不需要手动创建。
迁移后的心理变化
最后，我想聊聊心态上的变化。
迁移到Hexo后，我最明显的感受是：写作不再是一种负担。
在WordPress时代，每次打开编辑器，我都会有一种”又要开始干活了”的压力。排版、上传图片、调样式……这些事虽然不难，但很烦。
在Hexo时代，我只需要打开编辑器，写Markdown，然后发布。剩下的事情，工具都帮我做好了。
这种”无感”的发布流程，让我更愿意写文章。因为我知道，写文章就是写文章，不需要额外处理任何格式问题。
写作的快乐回来了。
如果你也在被WordPress的格式问题折磨，或者单纯想尝试更高效的写作方式，我强烈推荐你试试Hexo + Markdown。
相信我，一旦你习惯了这种”只管写，其他交给工具”的感觉，你就回不去了。
有什么问题的话，欢迎在评论区留言，我会尽量回复。😊