写了这么久博客,不如写一篇教程给自己——免得以后忘了怎么操作。
第一步:本地新建文章
在博客项目根目录打开终端:
cd "F:\文档\GitHub blog\Plocr.github.io"
用 Hexo 新建一篇文章:
npx hexo new "文章标题"
这会在 source/_posts/ 下生成一个 .md 文件。把它重命名为 .html 后缀,然后用 HTML 格式写。
文件顶部有一段叫 Front-matter 的配置区域:
---
title: 文章标题
date: 2025-05-15
tags: [项目日志]
excerpt: 摘要文字,显示在首页卡片
---
| 字段 | 说明 | 必填 |
|---|---|---|
| title | 文章标题 | 是 |
| date | 发布日期 | 是 |
| updated | 最后更新日期 | 否 |
| tags | 四选一:项目日志 / 工作流分享 / 随笔 / 影音推荐 | 推荐 |
| excerpt | 摘要,显示在首页卡片上 | 推荐 |
第二步:写内容
用 HTML 写正文。常用标签:
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>段落文字</p>
<blockquote>引用文字</blockquote>
<ul>
<li>列表项</li>
</ul>
<a href="https://...">链接</a>
<img src="图片URL" alt="描述">
<pre><code>代码块</code></pre>
图片建议用在线图床链接,不要放本地文件。
第三步:本地预览
写完后在本地看看效果:
npx hexo server
浏览器打开 http://localhost:4000,找到文章点进去。修改文件保存后刷新页面即可看到变化。
第四步:提交并推送
确认没问题后:
git add -A
git commit -m "新文章:文章标题"
git push origin master
推送后,Vercel 会自动检测到 master 分支的更新,开始构建并部署到 plocr.online。
第五步:等一会儿
Vercel 构建通常需要 1-2 分钟。去 Vercel Dashboard 可以实时看到构建进度。构建完成后,文章就在线了。
常见问题
- 推送后网站没变化?
- 去 Vercel 看部署日志。如果失败,大概率是 Front-matter 语法错误。
- 本地 hexo s 报错?
- 检查 Front-matter 的格式,
---必须成对出现。 - 标签不对?
- 标签只能从四个分类里选:项目日志、工作流分享、随笔、影音推荐。
- 文章没有封面?
- 有图就用第一张,没图就随机分配 12 种手绘插画之一,不用担心。
就是这样。写给自己看的,也算帮未来的自己省点事。