ARTICLE DETAIL

资讯详情

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

Apache Beam 官方网站构建指南:Hugo + Docsy 技术栈、本地预览、测试与自动发布全解析

Apache Beam 官方网站构建指南:Hugo + Docsy 技术栈、本地预览、测试与自动发布全解析 大数据批处理流处理数据工程【免费下载链接】beamApache Beam is a unified programming model for Batch and Streaming data processing.项目地址https://gitcode.com/gh_mirrors/beam4/beam点击查看免费下载Apache Beam 项目官网beam.apache.org由本仓库website/目录下的源码构建而成。本文以仓库中的 website/README.md 为骨架结合website/build.gradle、website/www/site/config.toml、website/www/check-links.sh等源码文件完整讲解网站的工程结构、本地开发环境搭建、Hugo 内容创作规范、测试与自动发布流程并给出常见问题的排查方案。读完本文你将能够在本地完整启动 Beam 官网开发环境、预览与验证文档改动并理解从 PR 合并到线上发布的全链路。一、网站技术栈与仓库结构Apache Beam 官网采用静态站点生成方案构建核心组件如下组件用途Hugo静态站点生成器负责将 Markdown 内容渲染为 HTMLDocsy专为技术文档与开源项目设计的 Hugo 主题以 git submodule 形式引入Twitter Bootstrap提供布局、样式与响应式能力保证文档在不同设备与屏幕尺寸下外观一致网站内容以Markdown编写并遵循 Hugo 的内容组织结构因此贡献者添加或更新文档非常方便。该方案的具体技术细节可在仓库配置文件 website/www/site/config.toml 中验证例如第 1319 行声明了baseURL /、站点标题title Apache Beam与theme [docsy]。1.1 源码目录中的网站模块website/目录在仓库中的布局如下以仓库根目录为起点website/README.md网站构建、预览、测试与发布的顶层说明本文的主体website/CONTRIBUTE.md面向贡献者的详细写作与开发指南website/build.gradleGradle 任务链封装 Docker 构建、本地预览、测试与发布website/Dockerfile网站构建镜像内置 Hugo、Node.js、Yarn、gcloud 等依赖website/www/网站源码主体内含site/Hugo 站点、package.json、check-links.sh、build_code_samples.sh等website/ADD_CASE_STUDY.md 与 website/ADD_LOGO.md案例研究页与 Logo 的添加指南1.2 一个关键约定API 文档与官网源码分离由源码直接生成的 API 参考文档——Java 的Javadoc与 Python 的Pydoc——并不存放在本仓库的网站源码中而是独立维护在 beam-site 仓库的 release-docs 分支。这一分离保证了 API 参考文档与正式发布的版本保持一致也解释了为何build.gradle的commitWebsite任务中会有针对documentation/sdks/javadoc与documentation/sdks/pydoc目录的断言检查website/build.gradle。二、本地开发环境准备2.1 前置条件Docker预览网站改动与运行网站测试都依赖 Docker。网站构建镜像的定义见 website/Dockerfile其中安装了 Hugoextended 版 v0.117.0见 website/Dockerfile、Node.js LTS、Yarnv1.22.22、Google Cloud SDK 以及lynx链接检查工具等依赖。2.2 初始化 git submoduleDocsy 主题Docsy 主题以 git submodule 引入克隆仓库后需要先更新子模块。请在仓库根目录执行$ git submodule update --init --recursive该步骤在 Gradle 任务链中对应initGitSubmodules任务website/build.gradle它会通过 Docker 容器内的 git 命令执行同样的更新。2.3 首次构建拉取代码示例内容网站中使用{{ code_sample }}短代码从 Beam 项目仓库内嵌代码片段。构建前需先运行 website/www/build_code_samples.sh它扫描site/content下所有{{ code_sample path/to/file tag }}引用website/www/build_code_samples.sh将对应的源码文件复制到site/code_samples目录供 Hugo 短代码注入。该步骤在 Gradle 中由buildCodeSamples任务website/build.gradle封装实际执行yarn build_code_samples。三、本地构建与实时预览在仓库根目录执行以下命令构建并启动本地网站服务$ ./gradlew :website:serveWebsite执行要点该命令必须在仓库根目录运行本地修改会触发网站自动重建Hugo 热重载浏览器即可实时看到效果Gradle 会创建 Docker 容器并将宿主仓库根目录挂载进容器随后以yarn develop即cd site hugo server启动开发服务器并将容器端口 1313 发布到宿主机127.0.0.1:1313见 website/build.gradle 与 website/build.gradle。从 website/build.gradle 可以看出serveWebsite依赖的setupDockerContainer还会动态生成一个/tmp/_config_branch_repo.toml配置文件将branch_repo指向当前作者的分支PR 场景或默认的apache/beam/blob/master从而使站点内指向 GitHub 源码与 Colab Notebook 的链接在本地分支、PR 预发布与生产环境都能正确解析。3.1 其他构建变体同一套 Gradle 脚本还定义了三种构建产物website/build.gradle任务产物用途buildLocalWebsitebuild/website/generated-local-content本地构建无 baseURL 前缀buildGcsWebsitebuild/website/generated-gcs-contentPR 预发布baseURL 使用 PR 号或用户名-分支名buildApacheWebsitebuild/website/generated-apache-content生产构建最终上线内容其中 baseURL 的生成逻辑见 website/build.gradle优先取环境变量ghprbPullIdPR 号否则取用户名-当前分支以便多个工作树互不干扰地共享 GCS 预发布空间。四、网站测试与链接检查网站测试同样在仓库根目录运行$ ./gradlew :website:testWebsite该任务先构建本地网站再执行 website/www/check-links.sh 对生成的 HTML 做链接体检website/build.gradle。链接检查脚本的核心逻辑website/www/check-links.sh包括用lynx -listonly从所有 HTML 页面提取全部链接过滤出外部链接排除localhost、docker.local及指向本仓库编辑页的链接检查是否误用了指向beam.apache.org生产站或 GCS 预发布站的绝对链接并提示改用相对链接用curl逐个验证外部链接可达性--max-time 10 --retry 2失败且不在白名单verified_list中的链接会被标记为 invalid最终输出全部失效链接及对应 HTTP 错误码。该脚本依赖lynx命令若本地缺少会直接报错退出website/www/check-links.sh。构建镜像已预装该工具。五、Hugo 配置详解站点配置集中在 website/www/site/config.toml关键项如下配置项当前值说明baseURL/站点根路径theme[docsy]使用 Docsy 主题contentDir/defaultContentLanguagecontent/en/en默认内容目录与语言enableGitInfotrue启用 git 提交信息为.Lastmod等提供数据pygmentsStyletango代码高亮配色github_repoapache/beam页面内提 issue / 改进此页链接指向的仓库[params] release_latest2.76.0全站最新版本号可在文档中通过{{ param release_latest }}引用[params] branch_repoapache/beam/blob/master源码与 Notebook 链接指向的仓库分支从源码结构可以推断[params]中的值相当于站点级全局变量例如修改release_latest即可让全站所有引用最新版本的文案同步更新无需逐页改动website/www/site/config.toml。此外config.toml还预留了 Google Analytics 配置入口website/www/site/config.toml默认注释关闭。六、内容创作用 Hugo 方式为官网新增文档网站内容创作规范详见 website/CONTRIBUTE.md这里提炼最核心的实操方法。6.1 新增一篇文档在website/www/site/目录下运行$ hugo new documentation/runtime/new-doc.md会生成带 frontmatter 的新文件--- title: New Doc ---由于文件位于documentation下其布局会自动继承layouts/documentation/下的模板。多语言版本如波兰语pl用$ hugo new -c content/pl documentation/runtime/new-doc.md6.2 新增博客文章$ hugo new blog/my-new-blogpost.md生成的文件带有date、categories: [blog]、authors等 frontmatter文件名即博客 URL/blog/{filename}并需用!--more--分隔摘要与正文。6.3 新增落地页创建content/en/about/_index.md并填写标题与内容即可URL 为/about同时可在layouts/about/下定义同名模板Hugo 会自动匹配。6.4 高频 Hugo 短代码自动目录{{ toc }}多语言代码页签{{ language-switchers java py go }}或将{{ highlight java }}/{{ highlight py }}相邻放置中间不能有空行否则 Hugo 会生成多余p标签破坏页签布局代码高亮优先使用{{ highlight java }}若希望代码块不受语言切换影响改用普通围栏代码块java带类名渲染{{ highlight classclass-name }}与{{ paragraph classjava-language}}用于激活语言切换Bootstrap 表格样式{{ table }}包裹 Markdown 表格内嵌仓库代码{{ code_sample sdks/python/apache_beam/examples/complete/game/user_score.py extract_and_sum_score }}由 website/www/build_code_samples.sh 预取内容全局参数{{ param release_latest }}、{{ param branch_repo }}相对链接写法CSS/JS 中的资源路径应使用 Hugo 语法如img.src {{ images/arrow-expandable.svg | absURL }}确保在 localhost、staging、production 均能生成正确的绝对链接website/CONTRIBUTE.md6.5 从 Jekyll 迁移到 Hugo 的注意点CONTRIBUTE.md 记录了迁移要点website/CONTRIBUTE.mdredirect_to改为直接替换链接或使用 frontmatteraliases{:.myclass}类语法改用短代码实现博客文件名不再带日期前缀日期写入 frontmatter{{ site.baseurl }}由 Hugo 配置文件统一处理Jekyll 的{{ site.release_latest }}对应改为{{ param release_latest }}。七、部署与自动发布流程原文档明确了发布链路PR 合并后后台 Jenkins 任务自动生成网站内容并推送到仓库的asf-site分支下的website/generated-content目录随后被同步到 beam.apache.org。仓库中的 website/build.gradle 完整实现了这一流水线buildApacheWebsite在 Docker 容器内以HUGO_ENVproduction hugo --minify生成生产内容website/www/package.jsoncommitWebsitewebsite/build.gradlefetch 并切换到asf-site分支删除旧的website/generated-content将新构建内容拷贝提交commit message 记录发布日期与 master 最近提交号publishWebsitewebsite/build.gradle将asf-site分支推送到gitbox.apache.org的 Beam 仓库stageWebsitewebsite/build.gradle用于 PR 预发布通过append_index_html_to_internal_links.py修正内部链接后用gcloud storage rsync同步到gs://apache-beam-website-pull-requests/{baseUrl}的 GCS 桶。八、常见问题排查8.1 Apple Silicon 上的 Docker Error 255原文档给出的修复方式为打开 website/Dockerfile将基础镜像改为FROM --platformlinux/amd64 debian:stretch-slim。需要说明的是当前仓库的 Dockerfile 已经应用了该平台修复第 21 行即为FROM --platformlinux/amd64 debian:stable-slim同时基础镜像已由debian:stretch-slim升级为debian:stable-slim。在 Apple Silicon 上遇到容器启动错误时应确认本机 Docker 配置了正确的平台模拟支持再重新构建镜像。8.2 Hugo dev server 不刷新静态文件Hugo 开发服务器会监听站点内容、静态文件、配置等变化并自动重建。若修改了静态文件例如 website/www/site/static/js/section-nav.js后浏览器不更新可先观察终端输出确认服务器是否检测到变化正常应出现类似日志Change of Static files detected, rebuilding site. 2021-07-16 15:25:29.730 0000 Syncing js/section-nav.js to /如果日志显示已同步但页面依旧旧内容则多半是浏览器缓存问题可尝试强制刷新或打开开发者工具Chrome 为例在 Network 面板勾选 Disable cache 后刷新。九、进一步阅读website/CONTRIBUTE.md完整的项目结构、配置走读、新增文档/博客/落地页、Hugo 写作规范、Jekyll 迁移与多语言翻译指南website/ADD_CASE_STUDY.md 与 website/ADD_LOGO.md案例研究与 Logo 添加指南website/Dockerfile 与 website/build.gradle构建镜像与发布流水线的底层实现website/www/site/config.toml站点全量配置含版本号、仓库链接、SEO 与语言配置website/www/check-links.sh 与 website/www/build_code_samples.sh链接体检与代码示例预取脚本赞分享大数据批处理流处理数据工程【免费下载链接】beamApache Beam is a unified programming model for Batch and Streaming data processing.项目地址https://gitcode.com/gh_mirrors/beam4/beam点击查看免费下载相关推荐在本地构建与运行 Kustomize 官方文档站点基于 Hugo 与 Docsy 的 site/ 开发部署指南在本地构建与运行 Kustomize 官方文档站点基于 Hugo 与 Docsy 的 site/ 开发部署指南 本篇指南面向希望参与 Kustomize 官方CLI开发工具云原生LocalAI 官网与文档的 Hugo 双子站构建架构及本地预览/部署指南LocalAI 官网与文档的 Hugo 双子站构建架构及本地预览/部署指南 本文以 LocalAI 仓库中 website/README.md https://人工智能大模型模型推理服务本地部署LLM 网关多模态AI AgentRAGMCP 服务Apache MXNet 官网静态站mxnet.io v2构建与发布指南基于 Jekyll 的本地预览、Beta 与 Release 全流程Apache MXNet 官网静态站mxnet.io v2构建与发布指南基于 Jekyll 的本地预览、Beta 与 Release 全流程 Apache深度学习人工智能机器学习分布式训练上一篇AutoClip Agent 实战指南用 MCP 工具与 CLI 把长视频切成带评分的高光片段下一篇ARIS OpenAlex 学术搜索技能实战指南开源引文图谱、机构归属与资助信息的深度检索创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表