如何使用Sublime制作静态博客｜结合Markdown与构建工具实践

使用 sublime 搭建静态博客的步骤如下：1. 安装 markdownediting 和 markdown preview 插件，提升写作与预览体验；2. 配置 sublime 构建系统，结合 pandoc 或 marked 自动将 markdown 转为 html；3. 引入 eleventy 等静态站点生成器，自动批量构建网站页面；4. 利用自定义快捷键和 snippet 模板提升新建文件与格式插入效率。通过这些步骤，可在 sublime 中高效完成静态博客的撰写、预览与生成。

用 Sublime 写静态博客，其实并不难。它不是一个专门的博客工具，但搭配 Markdown 和一些构建工具，可以很高效地完成写作、预览和生成静态页面的全流程。下面我会从几个实际操作的角度，讲讲怎么用 Sublime 来搭建一个简单的静态博客。

安装 Markdown 插件，提升写作体验

Sublime 本身对 Markdown 支持不错，但要真正用起来顺手，还是得装几个插件。推荐安装 MarkdownEditing 和 Markdown Preview。

• MarkdownEditing 可以提供语法高亮、快捷键、主题等增强体验。
• Markdown Preview 能让你在浏览器中实时预览 Markdown 内容，方便检查格式。

安装方法也很简单，先装好 Package Control，然后用快捷键 Ctrl+Shift+P 打开命令面板，输入 Install Package，搜索插件名安装就行。

装好之后，新建一个 .md 文件，选好语法模式，就可以开始写文章了。

用构建系统自动转换 Markdown 为 HTML

写完 Markdown 还得转成 HTML 才能发布，手动转太麻烦。Sublime 的“构建系统”功能可以帮你自动化这个过程。

推荐用 Pandoc 或者 marked 这类工具来转换。比如用 Pandoc：

1. 安装 Pandoc（Mac 可用 Homebrew，Windows 有安装包）。
2. 在 Sublime 中新建一个 .sublime-build 文件，内容如下：

{
  "cmd": ["pandoc", "$file", "-o", "$file_base_name.html"],
  "selector": "source.markdown"
}

保存后，在 Markdown 文件中按 Ctrl+B，就能自动生成一个同名的 HTML 文件。

这样每次写完文章，点一下构建，就直接生成网页了，非常方便。

配合静态站点生成器批量处理文章

如果你打算写多个页面，比如首页、文章列表、归档页等，那手动一个个生成 HTML 就不太现实了。这时候可以引入一个轻量的静态站点生成器，比如 Hugo 或 Jekyll，或者更简单的 11ty（Eleventy）。

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

313

查看详情

这些工具支持 Markdown，而且可以自动把你的文章组织成完整的网站。你可以用 Sublime 编辑 Markdown 文件，然后让这些工具监听文件变化，自动构建整个站点。

举个例子，用 Eleventy 的话：

1. 安装 Node.js。
2. 全局安装 Eleventy：npm install -g @11ty/eleventy
3. 在项目目录下放 Markdown 文件，运行 eleventy --watch，它会自动生成 HTML 并监听变化。

你写文章时用 Sublime 修改 .md 文件，Eleventy 会自动更新网页内容，开发效率非常高。

小技巧：设置快捷键和模板提升效率

写博客多了你会发现，每次都要新建 Markdown 文件、写标题、日期这些很麻烦。Sublime 支持自定义快捷键和代码片段，可以帮你节省时间。

比如你可以：

• 设置一个快捷键，一键新建带好标题和日期的 Markdown 文件。
• 用 Snippet 快速插入常用格式，比如文章头信息（Front Matter）。

举个例子，新建一个 Snippet，内容如下：

<snippet>
  <content><![CDATA[
---
title: ${1:文章标题}
date: `date "+%Y-%m-%d"`
---

${2:正文内容}
]]></content>
  <tabTrigger>blog</tabTrigger>
  <scope>text.html.markdown</scope>
</snippet>

保存后，在 Markdown 文件中输入 blog 再按 Tab，就能快速生成带标题和日期的文章模板。

基本上就这些。用 Sublime 做静态博客，虽然不是一键搞定，但流程一旦搭好，写起来非常轻快。Markdown + 构建工具的组合，简单又灵活，适合喜欢自己动手的朋友。

以上就是如何使用Sublime制作静态博客｜结合Markdown与构建工具实践的详细内容，更多请关注php中文网其它相关文章！