企业官网建设流程全解析

这个系列写到第四篇，前面几篇已经把环境安装、主题配置、部署上线都聊完了，理论上你现在应该已经有一个能跑通全流程的博客。但真到了日常使用的时候，很多人会卡在最基础的操作上：怎么新建一篇文章？怎么先写个草稿存着、不让人看到？首页那个“关于”“标签”的导航到底是怎么来的？为什么我明明写了分类，页面上却什么都显示不出来？

这篇就把这些“看起来很简单但细节不少”的事情一次性讲透。围绕四个关键词展开：文章与草稿的创建、预览与发布流程、四类常见页面（关于、标签、分类、归档）的搭建、以及模板（Scaffold）机制和文件命名规范。内容覆盖从敲下第一条命令到最终在浏览器里确认效果的全过程，适合刚搭好博客、准备开始正式写东西的人参考。

1. 一篇博客从无到有的完整流程拆解

1.1 在你敲下hexo new之前，先搞懂三件事

很多新手容易犯的毛病是：把“写博客”这件事想得太简单，以为就是在编辑器里敲文字然后同步到远程仓库。Hexo 看起来简单，但它内部其实把我们平时写文档的习惯固化成了几个明确的阶段，你只有顺着这几个阶段走，才不会在某个环节莫名其妙踩坑。

一个普通的博文，从“什么都还不是”到“网上能看到”，要经过下面这几步：

• 创建原始内容：运行hexo new，生成一个 markdown 文件，里面带好了标准格式（Scaffold 模板）
• 写作与修改：你在本地用编辑器写正文，可能在草稿区写，也可能直接写在正式文章区
• 本地预览：运行hexo server，打开http://localhost:4000看一眼渲染出来的网页长什么样
• 正式发布：如果你用的是草稿，得执行hexo publish；如果你直接在 post 目录写，这一步可以跳过
• 生成静态页：hexo generate，把 markdown 源文件变成纯静态 HTML
• 部署同步：hexo deploy，把生成出来的静态文件推送到托管平台

之所以要拆得这么细，是因为每一层都有自己独立的作用。生成与部署其实属于“上线”环节，而创建、预览、发布属于“写作流程”环节，这两个环节的概念如果混在一起，后面排查问题就很容易抓瞎。我见过有人直接在source/_posts里手写 markdown，然后跳过hexo new直接部署，结果页面因为缺少 front-matter 的title字段而显示乱码，这就是没理解“模板的作用就是把标准字段先给你填好”这个道理。

1.2 文章、草稿、页面，三者是什么关系

Hexo 里有三个高频概念，经常被混为一谈：post（文章）、draft（草稿）、page（页面）。它们本质上都是 markdown 文件，但存放位置和渲染逻辑完全不同，理解差异是接下来所有操作的基础。

文章（post）默认存放在source/_posts/目录下，会进入文章列表、首页的流式展示、以及归档系统。它是有“时间轴属性”的，你写的每一篇都会按日期被归档。草稿（draft）存放在source/_drafts/目录下，它就像手边还没画完的草图，平时不会渲染成网页，只有你明确开启预览模式才会看到，发布后会被移动到_posts目录变成正式文章。页面（page）存放在source/下的独立子目录里，比如source/about/index.md，它不属于文章流，是传统意义上的“单独网页”，常用来做关于页、标签页、自定义栏目。

从数据流的角度看，三者最终都会被渲染成 HTML，但入口不同、展示形态不同、周边联动也不同。建议你在开始写第一篇内容之前，先自己建一个表格把这几个概念放在一起对比记忆，因为在后面的实际操作中，命令参数也好、目录结构也好，全围绕这三个区分展开。

2. 模板（Scaffold）机制与文件名、标题名的关系拆解

2.1 Hexo 的 Scaffold 到底是个什么东西

Scaffold 直译是“脚手架”，你可以直接把它理解成“带格式的空白文档模版”。你安装完 Hexo 后，项目根目录下有个scaffolds文件夹，默认里面有三个文件：post.md、page.md、draft.md。这三个文件分别对应新建文章、新建页面、新建草稿时系统自动填入的初始内容。

我见过很多人几个月没打开过这个目录，这其实非常可惜。因为模板机制是提升写作效率的核心工具，一次性定制好模板，后续每次创建文件都会省掉大量重复填写的时间。

默认的scaffolds/post.md长这样：

--- title: {{ title }} date: {{ date }} tags: ---

重点是{{ title }}和{{ date }}这两个模板变量。当你执行hexo new post "你好"时，Hexo 会把{{ title }}替换成你输入的内容（也就是“你好”），{{ date }}替换成当前时间，其他字段原样保留。这是最基础但也最实用的动态填充。

scaffolds/draft.md默认内容也差不多，区别在于它额外带有layout: draft这样的概念，表示这篇文章是草稿。scaffolds/page.md则更精简，通常只保留title和date，因为页面不需要标签、分类这些字段。

2.2 文件名称和博客标题不是一回事，千万别混淆

这是很多新手困惑的重灾区：我说执行hexo new post "Hello World"，生成的文件名却叫Hello-World.md，这两个到底是什么关系？

先明确区分。hexo new后面跟的那段话，会被当成“标题（title）”写入 markdown 文件头部的 front-matter，用于在网页上展示。而生成的文件名，是根据标题做了一次“slugify”处理得到的——简单说就是把空格换成连字符，大写转小写，去掉特殊符号。所以Hello World变成hello-world.md。

这里的关键是：文件名最终会直接影响你的 URL 路径。Hexo 默认的文章链接格式是：

permalink: :year/:month/:day/:title/

这个:title不是 front-matter 里的标题字段，而是文件的 slug，默认取文件名。也就是说，如果你用中文我的第一篇当标题，生成的文件名可能是我的第一篇.md（某些版本会直接保留中文），URL 里就可能出现中文编码字符，虽然现代浏览器能处理，但在分享、SEO 和部分平台处理上都不够优雅。

我个人比较推荐的做法是：创建文章时使用英文或拼音 slug 作为标题参数，比如写一篇关于“草稿功能怎么用”的文章，执行：

hexo new draft "draft-workflow-in-hexo"

生成source/_drafts/draft-workflow-in-hexo.md，然后在 markdown 头部把title改成中文：

--- title: Hexo 草稿功能完整使用指南 date: 2025-01-15 10:24:00 tags: ---

这样一来，URL 保持干净，页面上显示的还是正式的中文标题，两者互不干扰，这是实际项目中绝大多数人的做法。

2.3 自定义模板：把入口字段一次性配好

默认模板只有title、date、tags三个字段，但现实中写一篇文章通常还要填分类（categories）、置顶标志（sticky）、文章摘要（excerpt）、自定义关键词等信息。每次创建完文件再改，虽然可行，但效率太低，而且容易忘。

正确姿势是直接把scaffolds/post.md改造成符合自己习惯的样子。比如我可以把它改成：

--- title: {{ title }} date: {{ date }} category: - 默认分类 tags: - 未分类 toc: true sticky: 0 --- <!-- 这里是文章摘要，也可以直接写“请开始你的写作” --> <!-- more -->

操作方式就是用任意文本编辑器打开scaffolds/post.md，把内容替换成上面的形式，保存即可。后续每执行一次hexo new，新建的 markdown 都会自动带上这些字段。

注意，{{ title }}和{{ date }}是保留的模板变量，不要写成死文字。你需要在自定义模板中保留这两个动态变量，否则每次生成的文件会缺字段甚至直接报错。

category和categories的区别也值得提一句：在 Hexo 3.x 及以上版本中，推荐使用categories键并在后面接列表形式（多个并列分类要用嵌套列表的写法），而单数形式的category也能解析，但在某些主题里可能出现兼容问题。如果你不确定当前主题对哪个支持更稳，可以先在本地预览验证一次再大规模使用。

3. 手把手实操：创建、预览、发布文章与页面

3.1 创建正式文章的三种姿势

当你准备正式写一篇博客时，最常用的命令是：

hexo new post "my-new-article"

post是布局名，也可以省略，因为默认布局就是post：

hexo new "my-new-article"

如果这个命令没有生效，可能是你的_config.yml里default_layout被改掉了，检查一下这个配置项是否仍为post即可。

第二个姿势是直接指定模板。方才我们自定义了scaffolds/post.md，如果你不仅改了默认模板，还额外建了一个新的模板文件（比如scaffolds/tech-post.md），那你可以通过：

hexo new post "my-tech-article" --path tech/example

甚至使用-l或--lang参数来创建多语言内容？这个接口不同版本行为不太一样，建议以当前版本的官方说明为准，但在一般场景下用不上。

创建完文件后，建议用编辑器打开确认一下：文件名、目录、front-matter 是否符合预期。不要把创建命令当作可以无脑执行完就关掉的流程，检查是一个好习惯。

3.2 草稿的完整工作流：创建到预览到发布

写作场景中，草稿功能解决的核心痛点是“同一篇文章可以在不同时段反复编辑，但不想让访客看到半成品”。

第一步：创建草稿

hexo new draft "idea-of-week"

这个命令会在source/_drafts/目录下生成一个 markdown 文件，打开它开始正文写作。这个阶段的文件与正式文章完全隔离，你随便写、随意改都不会影响线上站点。

第二步：本地预览草稿

直接运行hexo server时，你会发现草稿文件是看不到的。这是 Hexo 的默认行为：本地预览默认不渲染_drafts目录的内容。必须加上草稿选项：

hexo server --draft

或者写作：

hexo s --draft

启动后访问http://localhost:4000，就能在列表中看到你的草稿了。这个“预览”过程是基于内存里的渲染临时结果，不会影响public目录里已经生成好的静态文件，所以你可以放心反复开关。

这里有一个容易被忽略的小细节：hexo server --draft打开之后，你如果继续编辑草稿文件，页面是可以自动热更新刷新的，但有时会遇到缓存导致的内容不刷新，建议直接用无痕窗口访问本地预览地址，排除浏览器缓存干扰。

第三步：从草稿到正式

当你确定文章可以公开，执行：

hexo publish draft "idea-of-week"

或简写：

hexo publish "idea-of-week"

这个命令会把source/_drafts/idea-of-week.md移动到source/_posts/idea-of-week.md，并自动根据_posts的模板补全相关字段。发布之后别忘了本地预览确认一下，然后执行hexo clean && hexo generate && hexo deploy完整走一遍部署流程。

草稿机制还有一个用途：如果你从别处看到好的素材，想马上记下来但没空成文，直接建一个草稿标题存着即可。不用刻意补全内容，等有空了再打开补写。

3.3 创建“关于、标签、分类、归档”页面

很多主题初次安装时，导航栏可能只有首页和归档，其他页面需要自己手动创建。这一节逐个过一遍。

关于页（About）

几乎所有博客都有关于页。执行：

hexo new page "about"

Hexo 会生成source/about/index.md，文件内容默认只有标题。修改它的正文部分，写入你希望在“关于”页面展示的内容，然后保存。部分主题能自动把source/about/识别为 About 页面并加入导航，还有一些主题需要你在 主题的_config.yml的menu中手动添加一行：

menu: 关于: /about

具体参数看主题文档。如果你浏览本地预览发现导航没出现这个链接，优先检查主题配置文件的 menu 项。

标签页（Tags）

执行：

hexo new page "tags"

生成文件后，关键是编辑source/tags/index.md，将type字段设置为对应值，不同主题要求不一致，但绝大多数主题会识别以下内容：

--- title: 标签 date: 2025-01-15 10:30:00 type: "tags" ---

这样标签页就能自动聚合所有文章顶部的tags字段，不需要你手工维护一个标签列表。如果你打开标签页发现没有任何内容，往往不是页面建错了，而是文章里还没写过任何标签，或者文章的 front-matter 里使用了tag而不是tags，主题只认tags。

分类页（Categories）

分类页的创建逻辑和标签页几乎一致：

hexo new page "categories"

然后把source/categories/index.md的type设为"categories"。注意，分类页汇总的是每篇文章的categories字段。有些人会用category（单数），这会导致页面无法正确渲染，一定要按标准写法来，在每篇文章的头部写成：

categories: - 前端

或者，如果你想设置多级分类（父分类下再分子分类），用列表套列表：

categories: - [前端, JavaScript]

这里的书写顺序是：前面的是父级，后面的是子级，页面会按层级展示。

归档页（Archives）

归档页的情况比较特殊。绝大多数主题默认就把首页做成了文章的流式归档列表，如果你访问/archives是空白的，说明你单独建归档页但没有正确配置。常规做法是在导航栏菜单中直接指向：

archive: /archives

部分主题默认提供/archives路由，不需要你手工创建页面文件。如果你的主题没有这个路由，可以通过新建页面：

hexo new page "archives"

然后编辑source/archives/index.md，将type设为"archives"。这里提醒一句：不同主题对归档页 support 程度差异很大，不要生搬硬套，要以你当前使用的主题文档为准。

3.4 自定义页面：不仅局限于这四种

除了上面四个标配页面，Hexo 还允许你创建任意名称的静态页面，比如“读书清单”“开发日志”“推荐链接”，方法一模一样：

hexo new page "links"

随后编辑source/links/index.md写入内容。注意，自定义页面不会自动出现在导航里，还是需要到主题配置的menu手工加链接。而且自定义页面的 URL 路由是/links，这里面如果用了中文路径，会生成带编码的链接，强烈建议页面文件名也保持英文 slug。

3.5 发布到线上：从本地到静态页到最后一步

无论你创建的是文章还是页面，最终想让大家访问到，都必须走生成+部署两个动作：

hexo clean hexo generate hexo deploy

hexo clean会清空缓存数据库和public目录，这一条很多人容易漏，尤其是切换主题或者改了较大配置后。不clean有时候会碰到“旧页面还在线上”的灵异问题，绝大多数时候就是缓存没清干净。

hexo generate负责把源文件渲染成静态页面到public目录。建议生成后先本地运行hexo server看一眼，确认无误再hexo deploy。不要跳过中间验证，排版错误、链接残缺这类问题在本地看一眼就能拦住大半。

部署完成后，强烈建议强制刷新浏览器（Ctrl+Shift+R），再访问网址确认。有时候提示“部署成功”但页面还是旧的，多半是浏览器缓存或 CDN 缓存的问题。

4. 常见问题与排查技巧实录

4.1 高频问题速查表

4.2 关于文件名规范的避坑心得

关于文件名，我自己在长期使用中吃过很大亏，后来养成了一套固定习惯：所有创建操作都使用英文或拼音作为参数，绝不把中文直接传给hexo new。

理由很简单：你无法保证以后迁移主题或评论系统时，中文 URL 在所有环节都表现一致。我见过有人部署到新平台后，整站文章 URL 从中文变成乱码，不得不一轮轮改链接，非常痛苦。英文 slug 虽然写的时候要多想一下，但后续几乎零成本，值得坚持。

如果你真的希望 URL 上保留特定英文关键词，但又不想 file 名和 title 拆开记忆，可以在front-matter里显式指定slug。例如：

--- title: 使用草稿功能提高写作效率 date: 2025-01-15 10:45:00 slug: hexo-draft-guide tags: - hexo ---

这样文件可以随意命名，但 URL 使用的是你指定的 slug，灵活度更高。

4.3 关于草稿工作流的使用建议

我在实际写作中，已经养成了“先草稿、后发布”的强制流程，哪怕是一篇短记也走这个流程。一是每次部署前都能在本地预览看到最终效果，二是养成了“未完成内容不离开草稿区”的习惯，避免一激动直接部署出去后又后悔改内容。

草稿多了以后，记得定期清理：已经废弃的草稿该删除就删除，不要让_drafts堆积成垃圾场。清理方式就是手动删掉对应文件，没有专门命令。

4.4 关于模板定制的最后一个细节

很多主题自带额外的 front-matter 字段，比如 banner 图片地址、音乐链接、表情符号等，可以一次性写进scaffolds/post.md里，避免每次手敲。

但要注意，模板中如果写死了一些不是所有文章都用的字段（比如某个特定实验脚本），会导致新文章带着一些奇怪的空值，反而增加干扰。我的建议是模板只保留“每篇都必然用到的核心字段”，不常用的后补即可。模板是为了减少重复，不是让它替你做所有决定。

5. 写在最后：实战后的几点体会

博客做到这一步，你已经拥有了完整的“内容生产流水线”。从建草稿、本地预览、发布文章、创建页面，到部署上线，这一整套流程熟练之后，日常更新就是几分钟的事情。

我个人的体会是：Hexo 真正厉害的地方不在于它有多少炫技功能，而在于把“写作”这件事的各个环节拆得明明白白。你理解了草稿与正式、页面与文章、模板与标题之间的边界，就相当于在这套系统的地基上站稳了。

最后再分享一个小技巧：如果你以后准备大量写作，建议给每篇文章的 front-matter 加一个updated字段（或者让主题自动展示），这样读者能直观看到内容是否过期。很多老文章不写更新时间，几年后还挂在搜索结果里，其实里面的方法早就失效了，对信任你的读者是一种伤害。这个字段在模板里加上一行即可，几乎不占成本。