0

0

Sublime进行静态网站生成(SSG)_使用Jekyll或Hugo模板引擎

穿越時空

穿越時空

发布时间:2025-12-17 09:29:29

|

764人浏览过

|

来源于php中文网

原创

Sublime Text 不是静态网站生成器,但可深度协同 Jekyll 或 Hugo:通过插件实现语法高亮与片段支持,配置构建系统一键编译,集成终端实现热重载,并借助侧边栏增强、多光标编辑等提升效率。

sublime进行静态网站生成(ssg)_使用jekyll或hugo模板引擎

Sublime Text 本身不是静态网站生成器(SSG),它只是一个轻量、可高度定制的代码编辑器。但它可以很好地配合 Jekyll 或 Hugo 这类 SSG 工具,提升本地开发效率——关键在于配置好构建系统、语法高亮、实时预览和文件管理。

用 Sublime 配合 Jekyll:本地编辑 + 自动编译

Jekyll 基于 Ruby,依赖命令行运行 jekyll serve。Sublime 不直接执行生成,但可通过以下方式深度协同:

  • 安装 Package Control 插件,再装 Jekyll(by dguillaumes)或 MarkdownEditing,获得 front matter 识别、Liquid 语法高亮、常用片段(如 ---\ntitle:\n---
  • 配置 Build System:菜单 → Tools → Build System → New Build System,粘贴以下内容并保存为 Jekyll.sublime-build(路径需匹配你的项目):
{
  "cmd": ["jekyll", "build"],
  "working_dir": "/your/site/path",
  "selector": "source.ruby"
}

Ctrl+B(Win/Linux)或 Cmd+BmacOS)即可一键构建,错误会显示在 Sublime 底部面板。

用 Sublime 配合 Hugo:快速编辑 + 热重载

Hugo 是 Go 编写的,无需 gem 环境,启动更快。Sublime 可通过以下方式无缝衔接:

LALALAND
LALALAND

AI驱动的时尚服装设计平台

下载
  • 安装 Hugo Syntax Highlighting:Package Control 搜索安装 Hugo SnippetsHugo Dev,支持 TOML/YAML front matter、shortcode 高亮和快捷插入
  • 终端集成更实用:推荐安装 Terminus 插件,在 Sublime 内嵌终端中运行 hugo server -D,保存 Markdown 或模板后自动刷新 http://localhost:1313,所见即所得
  • 自定义侧边栏右键菜单:用 SideBarEnhancements 插件,右键文件可快速“Open in Browser”或“Copy Path”,适合频繁预览单页效果

通用提效技巧(Jekyll & Hugo 共享)

无论选哪个引擎,这些设置能显著减少上下文切换:

  • 文件图标主题:安装 A File Icon,让 _layouts/content/archetypes/ 等目录有直观标识
  • 多光标 + 正则批量修改:比如统一更新所有文章的 draft: truedraft: false,用 Ctrl+H 开启正则模式,搜索 draft:\s*true 替换为 draft: false
  • 项目专属设置:右键项目文件夹 → Project → Edit Project,添加 "settings": {"tab_size": 2, "translate_tabs_to_spaces": true},保持与 SSG 社区约定一致(如 Hugo 官方模板多用 2 空格缩进)

基本上就这些。Sublime 不替代 Jekyll/Hugo 的构建逻辑,但把它配成趁手的“SSG 控制台”,写文章、调样式、改配置都更专注。不复杂但容易忽略的是:别忘了定期 bundle update(Jekyll)或 hugo version(Hugo),确保本地环境和部署平台版本一致,避免上线后渲染异常。

相关专题

更多
macOS怎么切换用户账户
macOS怎么切换用户账户

在 macOS 系统中,可通过多种方式切换用户账户。如点击苹果图标选择 “系统偏好设置”,打开 “用户与群组” 进行切换;或启用快速用户切换功能,通过菜单栏或控制中心的账户名称切换;还能使用快捷键 “Control+Command+Q” 锁定屏幕后切换。

332

2025.05.09

c语言编程软件有哪些
c语言编程软件有哪些

c语言编程软件有GCC、Clang、Microsoft Visual Studio、Eclipse、NetBeans、Dev-C++、Code::Blocks、KDevelop、Sublime Text和Atom。更多关于c语言编程软件的问题详情请看本专题的文章。php中文网欢迎大家前来学习。

587

2023.11.02

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

355

2023.11.09

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

409

2023.11.14

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

1843

2024.03.12

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1986

2024.08.16

磁盘配额是什么
磁盘配额是什么

磁盘配额是计算机中指定磁盘的储存限制,就是管理员可以为用户所能使用的磁盘空间进行配额限制,每一用户只能使用最大配额范围内的磁盘空间。php中文网为大家提供各种磁盘配额相关的内容,教程,供大家免费下载安装。

1349

2023.06.21

如何安装LINUX
如何安装LINUX

本站专题提供如何安装LINUX的相关教程文章,还有相关的下载、课程,大家可以免费体验。

702

2023.06.29

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

43

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.4万人学习

Git 教程
Git 教程

共21课时 | 2.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号