ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

构建 Rockstar 官方网站:codewithrockstar.com 的 Jekyll、Just the Docs 与 WASM 解释器集成实战指南

构建 Rockstar 官方网站:codewithrockstar.com 的 Jekyll、Just the Docs 与 WASM 解释器集成实战指南 编程语言编译器【免费下载链接】rockstarHome of the Rockstar programming language项目地址https://gitcode.com/gh_mirrors/ro/rockstar点击查看免费下载Rockstar 是一门以 80 年代硬摇滚与重金属歌词为语法灵感的深奥编程语言而 codewithrockstar.com 正是它的官方网站文档、示例代码与在线解释器都集中在这里。本文基于仓库中 codewithrockstar.com/README.md 的模板说明与 根目录 README 的项目说明结合codewithrockstar.com/目录下的真实配置与源码完整讲解这套站点是如何用 Jekyll Just the Docs 构建、如何把 C# 编写的 Starship 解释器编译成 WebAssembly 嵌入页面、以及如何完成本地预览、GitHub Pages 发布与日常开发迭代的。读完本文你将能独立复现这套文档站 在线解释器 编辑器的构建流程。网站是什么一次了解 codewithrockstar.com 的组成仓库根目录的 README.md 将整个 Rockstar 项目划分为三个主要组件/Starship用 C# 和 .NET 编写的 Starship 解释器/cm-lang-rockstar用于 Rockstar 官网的 CodeMirror 编辑器/codewithrockstar.comRockstar 的网站、文档与示例。codewithrockstar.com站点本身由 Jekyll 构建并托管在 GitHub Pages 上页面中嵌入的在线解释器是 Starship 引擎编译为 WebAssembly 的产物。这意味着整个网站由三层组成静态站点层Jekyll Just the Docs 主题负责渲染文档、示例与页面布局交互层CodeMirror 编辑器来自cm-lang-rockstar提供带语法高亮的代码编辑体验运行时层Starship 解释器编译成的 WASM 模块在浏览器内执行 Rockstar 代码。因此理解codewithrockstar.com/README.md它本身沿用了 Just the Docs 官方模板的说明只是第一步真正要掌握的是把这套模板说明应用到本仓库实际站点结构中的完整工程实践。本地构建与预览从 Gemfile 到 localhost:4000假设你的电脑已经安装好 Jekyll 与 Bundler即 Ruby 环境构建并预览站点的完整流程如下将工作目录切换到站点根目录即codewithrockstar.com/运行bundle install安装依赖运行bundle exec jekyll serve构建站点并在localhost:4000预览构建产物存放在_site目录中。cd codewithrockstar.com bundle install bundle exec jekyll serve执行后Jekyll 会按照 Gemfile 中声明的依赖jekyll、just-the-docs、wdm以及 Gemfile.lock 锁定的精确版本完成解析与安装随后读取 _config.yml 中的站点配置进行渲染。预览期间的每一次文件变更都会触发增量重建配合根目录 README 提到的开发模式见后文符号链接工作流即可在浏览器中实时查看最新的文档与示例。如果想要把构建好的站点发布到 GitHub Pages 以外的平台直接把_site目录中的所有文件上传到目标平台即可这是 Jekyll 静态站点最常见的部署方式。站点配置详解读懂 _config.yml仓库中的 _config.yml 是站点配置的真实范例它比模板示例更完整地展示了 Just the Docs 站点的典型配置title: Rockstar tagline: Tommy used to work on the docs. theme: just-the-docs url: https://codewithrockstar.com defaults: - scope: path: values: title: Rockstar tagline: Tommy used to work on the docs. image: /images/rockstar-og-image.jpg description: Rockstar is an esoteric programming language based on the ‘lyrical conventions of 1980s hard rock songs and power ballads.’. It was created by Dylan Beattie in 2018. color_scheme: darkstar include: - _framework各配置项的作用如下title/tagline站点标题与标语tagline那句 Tommy used to work on the docs. 是 Rockstar 官方文档里的一处自嘲式幽默theme: just-the-docs声明使用 gem 方式加载的 Just the Docs 主题url站点正式域名用于生成规范的绝对 URLdefaults通过scope为所有页面path: 注入默认前置元数据包括标题、标语、社交分享图image与description——/images/rockstar-og-image.jpg即 _config.yml 中引用的社交分享图color_scheme: darkstar启用仓库自带的深色配色方案定义位于 _sass/color_schemes/darkstar.scssinclude额外纳入 Jekyll 默认忽略的目录。可以看到实际站点的_config.yml比模板示例多了defaults元数据注入与自定义color_scheme这正是把通用模板改造成品牌化官网的关键步骤。依赖与主题版本管理Gemfile 与 Gemfile.lock站点的依赖由 Gemfile 声明source https://rubygems.org gem jekyll, ~ 4.3.3 # installed by gem jekyll gem just-the-docs, 0.10.1 # pinned to the current release gem wdm, 0.1.0, platforms: [:mingw, :mswin, :x64_mingw, :jruby]需要修改 Jekyll 或主题版本时直接编辑Gemfile中对应的gem行即可。本仓库将just-the-docs精确锁定在0.10.1确保站点布局与样式在不同环境下构建结果一致。与之配套的 Gemfile.lock 记录了依赖树的精确解析结果从源码角度可以确认几点关键事实Jekyll 实际解析版本为4.3.4满足~ 4.3.3的约束just-the-docs0.10.1依赖jekyll、jekyll-include-cache、jekyll-seo-tag与rake因此jekyll-seo-tag是被主题自动引入的插件无需在_config.yml中手动声明jekyll-sass-converter3.x 使用sass-embedded完成 SCSS 编译darkstar.scss这类自定义配色方案正是通过该链路生效的平台相关的wdmWindows Directory Monitor只在 Windows 环境安装用于提升文件监听性能。扩展 Jekyll 插件Just the Docs 主题会自动包含jekyll-seo-tag插件这一点在依赖树中已得到印证。若要添加额外插件需要在Gemfile与_config.yml两处同时声明。以jekyll-default-layout为例在Gemfile中添加gem jekyll-default-layout在_config.yml中添加plugins: - jekyll-default-layout注意如果使用的 Jekyll 版本低于 3.5.0配置键应使用gems而不是plugins。当前仓库锁定的 Jekyll 4.3.4 使用plugins键。内容组织docs 文档、examples 示例与页面定制模板要求新建站点后替换两个页面文件index.md站点首页与README.md面向访问仓库者的说明。在codewithrockstar.com中这一工作已经完成并大幅扩展docs/index.md 是文档首页通过layout: home与前置元数据examples: /examples/01-getting-started/指向示例目录完整的 v2 文档位于 docs/ 下按01-getting-started.md到99-rockstar-acid-test.md的序号组织对应示例代码目录 examples/站点的examples目录与 .NET 测试工程共享同一份示例代码——根目录 README 明确说明所有 Rockstar 代码示例同时属于Rockstar.Test.NET 测试套件项目和codewithrockstar.com站点对应测试示例位于 Starship/Rockstar.Test/programs/examples。这意味着每份.rock文件既是可被测试套件执行的用例又是官网文档中可运行的示例避免了内容重复维护。此外站点的交互页面还包含一个全屏在线解释器页 online.html它通过前置元数据nav_exclude: true从导航中隐藏自己页面内嵌入一个data-controlsplay,parse,reset,args,input,full的编辑器实例并提示快捷键Ctrl-EntermacOS 为Cmd-Enter运行、Shift-Ctrl-Enter解析。把 Starship 解释器编译成 WASM 嵌入网站网站最核心的交互能力是在浏览器里运行 Rockstar 代码其实现方式是将 C# 编写的 Starship 解释器通过 .NET 的 WebAssembly 工具链编译产物供 Jekyll 站点引用。构建命令如下需要 .NET SDK 环境dotnet build ./Starship/Starship.sln dotnet publish ./Starship/Rockstar.Wasm -o codewithrockstar.com/wasm/ -c Debug第一步先构建包含解释器与解析器的完整解决方案 Starship/Starship.sln第二步把 Starship/Rockstar.Wasm 项目以 Debug 配置发布到codewithrockstar.com/wasm/目录。发布产物中既包含 WASM 二进制也包含 RockstarRunner.cs 暴露的互操作入口浏览器端通过 wasm-demo/wasm.js 加载模块并调用其运行函数。仓库中的 wasm-demo/index.html 是一个最简的 WASM 演示页页面提供一个textarea输入源码、一个 Run 按钮和一个pre输出区通过typemodule的脚本引入wasm.js。这个几十行的页面把解释器如何嵌入网页的核心链路压缩到了最小可运行形态非常适合作为理解 WASM 集成原理的起点。在线解释器与 CodeMirror 编辑器编辑体验来自仓库的另一个组件cm-lang-rockstarCodeMirror 编辑器它提供了 Rockstar 语言的语法高亮与词法分析能力语法定义 rockstar.grammar 与 rockstar-highlight.js词法分析器 rockstar-lexer.js 与 rockstar-tokenizer.js主题配色 themes/ 下提供了 dracula、cobalt、solarized-light 等多套主题与官网深色风格的darkstar配色呼应。网站端的编辑器胶水代码位于 js/rockstar-editor.js由 CodeMirror 构建而来配合 js/main.js 与 js/worker.js 完成页面初始化和交互编排。online.html 中data-storage-keyrockstar-editor属性还表明编辑器支持将代码保存在浏览器本地存储中。发布到 GitHub Pagescodewithrockstar.com的部署方式是 GitHub Pages。在新建仓库 模板的通用流程下发布步骤如下若站点仓库名为YOUR-USERNAME/YOUR-SITE-NAME在_config.yml中填写title: YOUR TITLE description: YOUR DESCRIPTION theme: just-the-docs url: https://YOUR-USERNAME.github.io/YOUR-SITE-NAME aux_links: # 不需要可删除 Template Repository: https://github.com/YOUR-USERNAME/YOUR-SITE-NAME将更新后的_config.yml推送到站点仓库在仓库的Settings→Pages→Build and deployment中选择Source: GitHub Actions若存在失败的 Actions 构建到Actions标签页点击Re-run jobs重新执行。需要留意的是推送后站点变更的发布最长可能需要 10 分钟才会生效。在本仓库的实际 CI 中构建与发布由多个工作流配合完成详见根目录 README.md 的 Building with GitHub Actions 一节build-rockstar-2.0在 Linux 上构建解释器、运行测试套件并产出 Linux 原生二进制与 WASM 解释器build-windows-binary与build-macos-binary分别产出对应平台的二进制release-rockstar-engine基于最新二进制创建发布build-and-deploy-website则下载 WASM 二进制、构建 CodeMirror 编辑器、构建 Jekyll 站点并部署到 GitHub Pages。这一流水线把解释器构建 → 网站打包 → 发布串成了全自动链路。从现有项目仓库托管文档定制 GitHub Actions 工作流如果你的文档希望与项目代码放在同一个仓库里而不是独立的站点仓库可以在项目根目录创建docs目录把模板文件拷入然后调整 GitHub Actions 工作流使构建与部署步骤指向docs目录而不是项目根目录。核心修改点如下为 build job 设置默认working-directorybuild: runs-on: ubuntu-latest defaults: run: working-directory: docs为 Setup Ruby 步骤设置working-directory- name: Setup Ruby uses: ruby/setup-rubyv1 with: ruby-version: 3.1 bundler-cache: true cache-version: 0 working-directory: ${{ github.workspace }}/docs为上传构建产物的步骤指定docs/_site/路径- name: Upload artifact uses: actions/upload-pages-artifactv1 with: path: docs/_site/修改工作流触发条件只在docs目录内的变更发生时启动构建避免无关改动触发整站重建on: push: branches: - main paths: - docs/**本仓库采取的则是另一种组织方式网站源码含 Jekyll 配置、文档、示例放在仓库根目录的codewithrockstar.com/子目录中而 WASM 产物与编辑器由Starship、cm-lang-rockstar两个组件构建后汇入再统一由build-and-deploy-website工作流部署。开发模式用符号链接打通 .NET 与 Jekyll在日常开发中频繁手动把 WASM 产物拷贝到网站目录显然低效。根目录 README 记录了一种开发模式在codewithrockstar.com目录下建立指向 .NET 构建输出与测试示例目录的符号链接Windows 示例 cd codewithrockstar.com mklink /d wasm ..\Starship\Rockstar.Wasm\bin\Debug\net8.0-browser mklink /d examples ..\Starship\Rockstar.Test\programs\examples建立链接后目录结构如下codewithrockstar.com /wasm -- [ /Starship/Rockstar.Wasm/bin/Debug/net8.0-browser ] /examples -- [ /Starship/Rockstar.Test/programs/examples ] /index.html /example.md /js /rockstar-editor.js (from codemirror)这样重新构建 .NET 解决方案会同步更新 WASM 解释器Jekyll 将其视为/wasm/**静态资源并触发站点重建而examples目录中的示例代码与 .NET 测试套件保持同一份源文件。Linux/macOS 下等价的做法是ln -s符号链接。该模式体现了单一代码源、多处消费的工程理念示例既是测试输入又是官网可运行的代码块。自定义 Liquid 标签rockstar_include 源码解析为了让文档页能直接嵌入并高亮显示仓库中的.rock示例文件网站定义了一个自定义 Liquid 标签。其实现位于 _plugins/rockstar_include.rbclass RockstarInclude Liquid::Tag def initialize(_tag_name, markup, _parse_context) super markup markup.strip end def render(context) page context.registers[:page] parts markup.split( , 2) expanded_path Liquid::Template.parse(parts[0].strip).render(context) page_filename File.basename(page[path], .*) root_path File.expand_path(context.registers[:site].config[source]) file_path File.join(root_path, examples, page_filename, expanded_path) attributes parts.length 1 ? parts[1] : all -ROCKSTAR {:>赞分享编程语言编译器【免费下载链接】rockstarHome of the Rockstar programming language项目地址https://gitcode.com/gh_mirrors/ro/rockstar点击查看免费下载相关推荐OSS-Fuzz 文档站本地构建与预览基于 Jekyll 与 Just the Docs 的完整指南OSS Fuzz 文档站本地构建与预览基于 Jekyll 与 Just the Docs 的完整指南 本文面向希望为 OSS Fuzz 文档站点贡献内容或搭建网络安全开发工具CI/CDRimSort 文档站点编写与构建指南基于 Jekyll 与 Just the Docs 的贡献规范RimSort 文档站点编写与构建指南基于 Jekyll 与 Just the Docs 的贡献规范 RimSort 的用户文档是一套托管于 GitHub P桌面应用游戏开发CLIRimSort 文档编写指南基于 Jekyll 与 Just the Docs 的站点构建、本地预览与写作规范RimSort 文档编写指南基于 Jekyll 与 Just the Docs 的站点构建、本地预览与写作规范 本文是 RimSort 开源仓库的文档协作规范桌面应用游戏开发CLI上一篇erd入门教程5分钟学会创建你的第一个数据库ER图下一篇XV测试框架简约而不简单速度与简洁的完美结合创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表