[{"content":"写下一篇 Markdown，并不等于浏览器已经能访问它。一个静态博客至少包含两个阶段：构建页面和提供访问。\n先看完整链路 构建阶段：Markdown + Front Matter + 主题模板 + 站点配置 ↓ Hugo HTML / CSS / JavaScript / JSON 等文件 访问阶段：浏览器 ── HTTP(S) 请求 ──→ Nginx 浏览器 ←── 已生成的静态文件 ── Nginx 按内容流向，也可以概括为：\nMarkdown → Hugo → HTML/CSS/JS → Nginx → 浏览器。\n这里的 Nginx 是本站后续计划使用的 Web 服务器。本篇解释工作原理，不代表本站已经完成 Nginx 或 HTTPS 部署。\nMarkdown：专心描述内容 Markdown 用简洁的标记描述标题、段落、列表、链接和代码，例如：\n## 一段技术笔记 记录环境与复现步骤，比只写“问题解决了”更容易复用。 - 系统版本 - 操作步骤 - 观察到的现象 Hugo 文章开头还会有 Front Matter，保存标题、发布时间、分类与 draft 等元信息。正文和元信息都保存在文件中，便于阅读、编辑和版本管理。\nMarkdown 解决的是写作与内容结构问题。页面外观、菜单、资源地址等工作由后续环节处理。\nHugo：在发布前生成页面 Hugo 读取内容文件，将 Markdown 转成 HTML，再结合模板和配置生成完整页面。PaperMod 提供本站使用的模板与基础样式。\n例如，源文件与输出文件之间可以形成这样的对应关系：\ncontent/posts/markdown-to-browser/index.md ↓ hugo --minify public/posts/markdown-to-browser/index.html 简化后的 HTML 内容可能是：\n\u0026lt;h2\u0026gt;一段技术笔记\u0026lt;/h2\u0026gt; \u0026lt;p\u0026gt;记录环境与复现步骤，比只写“问题解决了”更容易复用。\u0026lt;/p\u0026gt; 这是结构示意，实际页面还会包含导航、文章元信息、资源引用等。--minify 会对生成结果执行压缩，减少不必要的空白等内容；它不负责把网站自动发布到公网。\nHTML、CSS、JavaScript：浏览器理解的资源 三个组件各有职责：\nHTML 描述内容结构，例如文章标题、段落、链接和代码块。 CSS 控制字体、颜色、间距以及不同屏幕下的布局。 JavaScript 为需要的交互提供逻辑，例如主题切换和本地搜索。 静态网站仍然可以交互。本站的搜索方案是在构建时生成 index.json，浏览器加载它之后用本地 JavaScript 匹配关键词，不需要为每次搜索运行一套数据库查询服务。\nNginx：把文件发送给请求它的人 在计划中的部署方式里，Nginx 会监听配置的端口，接收浏览器请求，并根据请求路径查找静态文件。\n例如，访问文章路径时，将来可以由 Web 服务器返回对应目录的 index.html；浏览器看到页面中的 CSS 或 JavaScript 地址后，再请求这些资源。找不到的资源应得到合适的 404 响应。\n在这条静态文件服务链路里，Nginx 不需要读取 Markdown，也不需要每次调用 Hugo。文章修改后，应先重新构建，再更新用于提供访问的静态产物。\nHTTPS 则在 HTTP 通信之上提供传输加密和服务器身份验证，需要单独配置证书与相关服务。本篇没有执行这些部署步骤。\n浏览器：组合资源并展示页面 浏览器拿到 HTML 后解析内容，读取 CSS 并计算布局，在需要时执行 JavaScript，最后把页面呈现在屏幕上。\n浏览器也可能使用缓存来复用之前取得的资源。缓存策略会影响更新何时可见，因此正式部署时应分别考虑 HTML 与带内容指纹的静态资源，而不能只确认“文件已经复制成功”。\n为什么这个博客不需要数据库 本项目的文章正文、日期和分类已经保存在 Markdown 与 Front Matter 中。Hugo 在构建阶段就能读取这些文件，生成文章页面、分类目录、RSS 和搜索索引。\n访客阅读时，请求的是现成文件，不需要通过数据库临时拼装文章，因此运行这套博客不依赖数据库。\n这并不意味着所有静态网站都排斥数据库。内容可能来自其他系统，也可以另接评论或搜索服务；只是这些组件不是当前博客的必要条件，本项目也没有引入它们。\n如何区分构建成功与上线成功 在本项目中，可以先执行：\nhugo --minify python3 scripts/verify-build.py 这两步用于生成并检查静态产物。真正上线还需要确认 Web 服务器、域名解析、网络访问与 HTTPS 等环节，之后再从浏览器实际访问验证。\nGit 负责记录内容与配置变化，Hugo 负责构建，Nginx 负责计划中的文件服务，浏览器负责展示。分清这些职责，排查问题时就能先判断故障出在内容、构建、资源路径还是访问链路。\n进一步阅读 HTZone 博客搭建记录 Hugo 官方介绍 Nginx 官方入门：提供静态内容 MDN：Web 是如何工作的 ","permalink":"https://htzone.top/posts/markdown-to-browser/","summary":"一篇 Markdown 笔记如何变成浏览器中的页面？区分内容编写、静态构建和 HTTP 访问，理解每个组件的职责。","title":"从 Markdown 到浏览器：静态网站是如何工作的"},{"content":"为什么选择静态博客 这个博客主要用于长期整理 Linux 内核、PCIe 驱动、嵌入式 Linux、计算机网络、硬件设计及个人工程项目。内容以文字、代码与问题分析为主，不需要在每次阅读时动态生成页面。\n因此，HTZone 选择静态博客：文章保存在普通文件中，页面在发布前生成。这样既方便用 Git 比较和追踪修改，也能减少运行时需要维护的组件。\n这不意味着静态网站没有维护工作。内容备份、软件更新、访问日志、域名、证书和服务器配置依然需要认真处理；只是本项目不需要为了展示文章而运行数据库和动态文章后台。\nHugo 与 PaperMod 各自负责什么 本站使用 Hugo Extended + PaperMod，文章以 Markdown 编写。\nMarkdown 保存正文，使用标题、列表、链接和代码块描述内容结构。 Hugo 读取正文、Front Matter 和站点配置，生成页面及相关资源。 PaperMod 提供页面模板、排版、导航、主题切换等基础展示能力。 站点配置与扩展文件 负责本站文案、菜单、字体、首页介绍和少量展示调整。 PaperMod 以 Git Submodule 引入，固定 Commit 为 969bebdc5600a1639158b5ef4eff9cf6cbb511ac。主题源码保持原样；定制放在项目自己的 hugo.toml、layouts/、assets/ 和 i18n/ 中。\nMarkdown 如何变成 HTML 每篇文章先通过 Front Matter 定义标题、日期和分类，再用 Markdown 编写正文。例如：\ntitle = \u0026#34;一篇技术笔记\u0026#34; draft = true categories = [\u0026#34;开发记录\u0026#34;] 这只是 Front Matter 字段示意，实际 Markdown 文件还需要 TOML 的 +++ 分隔符。\nHugo 在构建时将 Markdown 转换为 HTML 内容，再交给主题模板组合成完整页面，同时整理 CSS、JavaScript、RSS 与搜索 JSON。本站的静态构建命令是：\ncd /srv/htzone-blog hugo --minify 生成的文件位于 public/。浏览器将来读取的是构建产物，文章的原始 Markdown、Git 历史和主题模板用于维护与构建，不需要作为站点文件提供给访客。\nGit、Hugo、Nginx 的不同职责 组件 在本站中的职责 Git 记录源码与配置修改，固定主题版本，方便比较和回溯 Hugo 在构建阶段将文章与模板转换成静态产物 Nginx 计划在后续部署阶段接收 HTTP 请求，将静态文件发送给浏览器 浏览器 解析 HTML、应用 CSS，并执行页面需要的 JavaScript Git 提交不会自动让网站上线，Hugo 构建也不等同于 Nginx 已经提供服务。这几个环节需要分别配置和验证。\n当前实际完成的工作 任务 01 已完成目标阿里云服务器的环境检查，并验证专用 SSH 密钥登录。系统为 Ubuntu 24.04.5 LTS，架构为 x86_64，具备 2 vCPU；检查时系统可见内存约 1.58 GiB、根分区可用空间约 35 GiB。这些数字是当时的检查快照，不是性能测试结果。\n任务 02 已完成：\n从 Hugo 官方 Release 安装 Hugo Extended 0.168.0，安装包通过官方 SHA-256 校验。 在 /srv/htzone-blog 初始化 Hugo 与 Git，默认分支为 main。 引入并固定 PaperMod Submodule。 建立首页、技术文章、工程项目、关于、分类与搜索内容结构。 构建并校验首页、文章、内部链接、RSS 和搜索索引。 本次内容完善进一步调整了首页介绍和技术方向入口，补充了静态网站原理文章，并为未来的工程项目准备默认不发布的草稿模板。\n仍待完成的部署环节 截至本次内容整理，Nginx 和 Certbot 尚未安装，HTTPS 证书尚未申请，网站尚未配置为公网服务。后续需要核验域名解析、备案状态及公网访问规则，再逐步处理 Nginx、HTTPS 和发布流程。\n这些步骤是后续计划，不能将本次静态构建成功理解为已经完成正式上线。\n阅读与参考 如果想了解构建产物如何被浏览器读取，可以继续阅读从 Markdown 到浏览器：静态网站是如何工作的。也可以按分类浏览，或使用搜索与 RSS。\nHugo 官方介绍 PaperMod 官方仓库 Nginx 官方入门：提供静态内容 ","permalink":"https://htzone.top/posts/htzone-blog-setup/","summary":"为什么选择静态博客？从 Markdown、Hugo 和 PaperMod 到 Git 与未来的 Nginx，整理 HTZone 的实际搭建过程与当前进度。","title":"HTZone 博客搭建记录"},{"content":"这里是“二仙桥的恐龙”，也称 HTZone。一个用于记录工程实践、技术学习和问题定位方法的个人技术博客。\n主要关注 Linux 内核、PCIe 驱动、嵌入式 Linux、计算机网络与硬件设计。笔记从实际问题出发，尽量交代背景与条件，保留分析过程、验证方法和结论的适用范围。\n文章会随学习和实践逐步补充、修订。工程项目只记录已经确认的内容，不将计划或设想写成已经完成的结果。\n本站使用 Hugo 和 PaperMod 构建，文章采用 Markdown 编写，并通过 Git 管理。\n可以从技术文章开始，按分类查找内容，或通过 RSS 订阅后续更新。\n","permalink":"https://htzone.top/about/","summary":"\u003cp\u003e这里是“二仙桥的恐龙”，也称 HTZone。一个用于记录工程实践、技术学习和问题定位方法的个人技术博客。\u003c/p\u003e\n\u003cp\u003e主要关注 Linux 内核、PCIe 驱动、嵌入式 Linux、计算机网络与硬件设计。笔记从实际问题出发，尽量交代背景与条件，保留分析过程、验证方法和结论的适用范围。\u003c/p\u003e","title":"关于"}]