Sublime Text安装并配置Jekyll静态站点本地运行环境

陌强吖_4614

陌强吖_4614

2026-08-13

212人浏览

原创

sublime text本身不运行jekyll,仅调用系统ruby环境执行jekyll serve;需先在终端验证jekyll -v是否返回版本号,再配置build system封装bundle exec jekyll serve命令,并确保项目根目录正确、编码为utf-8、依赖完整。

sublime text安装并配置jekyll静态站点本地运行环境

Sublime Text里装不了Jekyll?先确认Ruby环境是否就位

Sublime Text本身不运行Jekyll,它只是编辑器;真正执行jekyll serve的是系统里的Ruby环境。很多人卡在“点开Sublime就能启动本地预览”,结果命令行报错command not found: jekyll——问题根本不在编辑器,而在终端里jekyll压根没装好。

验证方法:打开终端(不是Sublime的Build System),输入:
jekyll -v
如果返回版本号(如4.3.2),说明Jekyll已就绪;否则得先装Ruby和Jekyll,再回来配Sublime。

  • Windows用户注意:必须安装Ruby + DevKit,不能只装RubyInstaller默认包(缺编译工具,gem install jekyll会失败)
  • macOS用户推荐用brew install ruby,再gem install jekyll bundler,避免系统Ruby权限问题
  • Linux(如Ubuntu)需额外装build-essential和ruby-dev,否则bundle install会因缺少头文件中断

用Package Control装Markdown插件,但别指望它跑Jekyll服务

Sublime Text能帮你高效写Markdown、实时预览HTML,但它不会替你执行bundle exec jekyll serve。所谓“配置Jekyll环境”,实际是两件事:写文档快 + 本地预览准。这两块靠插件补足,但服务进程仍得手动启停。

推荐装这三个插件(通过Ctrl+Shift+P → Package Control: Install Package):
MarkdownEditing(语法高亮/快捷键支持)
MarkdownPreview(导出HTML或浏览器预览)
SideBarEnhancements(右键菜单直接Open in Browser)

Sublime Text Build Linux版
Sublime Text Build Linux版

Sublime Text Linux x86-64 deb 安装包。官方也提供 rpm、tar.xz 和软件源安装方式。

下载
  • MarkdownPreview默认用Python内置HTTP服务,不走Jekyll渲染逻辑,所以Liquid标签(如{% include %})、数据文件、插件功能全无效
  • 想看真实Jekyll效果,必须先在项目根目录运行bundle exec jekyll serve,再把MarkdownPreview设为browser模式,指向http://localhost:4000/xxx.html
  • 插件设置路径:Preferences → Package Settings → MarkdownPreview → Settings,关键项:"markdown_extensions": ["meta", "toc", "fenced_code"](加meta才能读Front Matter)

Sublime里一键启动Jekyll服务?用Build System绕过终端

虽然Sublime不能替代终端,但可以封装常用命令成Build System,省去反复切窗口敲命令的麻烦。这不是“全自动”,而是把bundle exec jekyll serve变成Ctrl+B一键触发。

操作路径:Tools → Build System → New Build System,贴入以下内容并保存为Jekyll.sublime-build:

{
  "cmd": ["bundle", "exec", "jekyll", "serve"],
  "working_dir": "${project_path:${folder}}",
  "shell": true,
  "encoding": "utf-8"
}
  • working_dir确保命令在当前项目根目录执行,否则_config.yml找不到
  • Windows用户需把bundle换成bundle.bat,且确认bundle命令已加入PATH(Ruby安装时勾选“Add Ruby executables to your PATH”)
  • Build输出窗口里看到Server address: http://127.0.0.1:4000/才算成功;若卡在Configuration file: none,说明没在Jekyll项目根目录打开Sublime工程

中文路径或GBK编码导致Jekyll build失败?别怪Sublime

Windows上常见错误:invalid byte sequence in GBK 或 Encoding::UndefinedConversionError。这不是Sublime的问题,而是Ruby默认用系统编码(GBK)读UTF-8写的Markdown文件,一碰中文就崩。

临时解法(不改系统):
在项目根目录新建.bashrc(或git-bash下生效),加一行:
export RUBYOPT="-KU"
再用Git Bash而非CMD运行bundle exec jekyll serve。

  • 更彻底的方案:修改_config.yml,加encoding: utf-8(Jekyll 4.0+支持)
  • Sublime保存文件时务必选UTF-8编码(右下角状态栏确认),不要用UTF-8 with BOM,否则Jekyll解析Front Matter会失败
  • 旧版Jekyll(lib/jekyll/convertible.rb里的File.read调用,强制加:encoding => 'UTF-8'——但升级Jekyll比修源码更省事
Jekyll本地运行的核心从来不在编辑器里,而在于终端里那个持续运行的jekyll serve进程。Sublime能做的,只是让写、看、触发变得更顺手;一旦涉及编码、依赖、插件加载顺序这些底层问题,最终还得回到命令行里查bundle list、看_site目录有没有生成、盯住终端日志里的第一行报错。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

2026.10.16

0

10

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

2026.10.16

0

10

OpenJDK怎么部署Java应用
OpenJDK怎么部署Java应用

Java项目开发完成后,怎样部署到目标环境并正常运行?本专题介绍OpenJDK应用部署流程,涵盖运行环境准备、版本兼容检查、应用打包、启动参数配置和日志查看,帮助你理清部署前后的操作顺序,减少环境差异造成的运行问题。

2026.10.16

0

10

Revel框架模板渲染与表单验证
Revel框架模板渲染与表单验证

本专题围绕Revel框架视图层开发,介绍模板语法、变量输出、布局复用、表单提交、参数绑定与验证规则,帮助开发者完成安全规范的页面交互。

2026.10.16

0

15

Revel框架MVC路由与控制器
Revel框架MVC路由与控制器

本专题聚焦Revel框架MVC核心机制,讲解路由定义、控制器Action、参数绑定、请求响应和反向路由,并结合常见场景梳理接口请求处理流程。

2026.10.16

0

15

Revel框架入门与安装配置
Revel框架入门与安装配置

本专题从Revel框架环境搭建讲起,系统介绍命令行工具安装、项目创建、目录结构、配置文件及热代码重载,帮助开发者快速完成首个Go Web应用。

2026.10.16

0

15

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

2026.10.15

0

20

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

2026.10.15

0

18

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

2026.10.15

0

20

热门下载

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

精品课程

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