周末到底怎么过才不算浪费很多人会第一时间想到“去哪儿玩”随后又在出行前被路线、天气、采购和记录问题劝退。尤其是像青城山这种离城市不远、适合避暑的地方听起来是很轻松的周末 staycation实际上从出发到结束需要操心的事情并不少天气是否合适、路上多久、超市补给买什么、回来后拍的视频和照片怎么整理。这篇文章想聊的不是“如何写游记”而是另外一个更实际的问题当你真的把“Salt’Vlog出发青城山避暑时刻周末staycation逛超市小采购”这样的内容做完之后靠什么把这些文字、图片、视频和采购清单沉淀下来我的答案是用一站式静态站点生成器搭建一个个人 Vlog 站点。它不像开发一套内容管理系统那么重又能比朋友圈和短视频平台更好地保留你的内容。读完这篇文章你会得到一套完整可复制的流程从安装 Hexo 环境、初始化站点、配置主题到编写一篇带视频和购物清单的 Vlog 文章最后部署上 GitHub Pages并且能在本地完成效果验证。整套流程不需要购买服务器也不需要写复杂的后端代码。1. 为什么技术人需要一个自己的 Vlog 站点先回到一个常见的矛盾Vlog 本身是视频内容为什么还需要一个网站如果你只在短视频平台发布内容发布之后基本就和自己无关了。平台负责推荐、存储和播放也意味着平台可以随时调整推荐逻辑、下架内容、修改播放器样式。你今天精心剪辑的青城山避暑视频三个月后可能连搜索排名都在很后面。更现实的问题是人一旦有了多个平台账号内容就是分散的B站一段、抖音一段、微博一段找起来非常麻烦。这时候一个独立 Vlog 站点的价值就体现出来了它把文字、图片、视频、清单和标签统一放到一个固定的地址下。你发的每个内容都拥有自己的 URL可以被搜索引擎收录可以被朋友直接转发也可以被你自己的脚本批量处理。对于技术人来说这种“内容可控感”和“数据归属感”比平台流量更值得在意。另一个维度是编辑自由。在社交平台发图文排版、链接、样式都受限制而在自己的站点里你可以用 Markdown 写一整篇青城山避暑攻略可以在文章中间嵌入一段 B 站视频也可以放一个超市采购清单表格。所有排版都由自己控制内容表达不再被平台模板约束。因此这篇文章的读者画像很清晰喜欢记录生活、又不愿意把内容版权完全交给平台的开发者和独立创作者。如果你只是随手发个动态那不是本文讨论的范畴但如果你想把每一次周末 staycation 都做成可持续更新的内容资产静态博客是入门成本最低的方案。2. 静态站点生成器的核心概念与适用场景静态站点生成器的核心思路是在本地用 Markdown 写文章再通过模板渲染成一批静态 HTML 页面。我们常说的 Hexo、Hugo、VuePress、Astro 都干这件事。它和传统动态博客的最大区别是动态博客需要后端程序、数据库和运行环境每次访问都实时查询而静态站点生成器在构建阶段就把所有页面生成好部署时只需要把 HTML、CSS、JS 文件放到静态服务器上。没有数据库这一点对个人网站来说反而是巨大的优势。首先是廉价GitHub Pages、Gitee Pages、对象存储等平台都可以托管静态文件很多情况下是免费或极低成本的其次是安全没有数据库意味着最常见的注入攻击面大幅减少最后是速度纯静态文件可以通过 CDN 加速全球访问速度都很快。我经常用这样一个类比动态博客像是一家随时开火的餐厅后厨、食材、厨师一应俱全来一位客人做一道菜静态博客则像是一家提前做好便当的店每天的菜在开门前就做好了客人来了直接拿走。对于更新频率不高、以内容记录为主的个人站点后者的效率和成本都更合理。当然静态站点的局限性也很明显。它不适合需要复杂交互的功能比如用户注册、评论区实时审核、动态数据展示。评论区可以通过集成第三方服务实现但本质上还是借用外部系统。所以我的判断是静态站点生成器最适合“个人内容沉淀”场景而不是“产品业务平台”场景。对比维度静态站点生成器Hexo传统动态博客WordPress运行环境无需后端构建后纯静态需要 PHP、数据库、Web 服务部署成本可免费托管 GitHub Pages需要云服务器或虚拟主机内容形式Markdown 源文件 静态页面数据库记录 动态渲染安全维护攻击面小基本无需补丁需要定期更新程序与插件适合场景个人博客、Vlog、文档站社区、电商、复杂业务站点3. 环境准备从零安装 Hexo 开发环境在开始搭建之前需要先把本地环境准备好。这里以 Hexo 为例因为它的插件体系比较成熟教程也多踩到坑时更容易找到解决方案。硬件和操作系统门槛很低Windows、macOS、Linux 都可以。需要提前安装的工具包括 Git 和 Node.js。Git 用来拉取主题和推送部署代码Node.js 是运行 Hexo 的基础环境。Node.js 版本建议使用 LTS 版本太老的版本可能导致依赖安装失败太新的版本有时也会遇到插件兼容问题本文以常见的 Node 20 LTS 为例其他版本也可以按同样的思路操作。安装好 Node.js 后在终端执行下面的命令安装 Hexo 命令行工具npm install -g hexo-cli安装完成后可以执行hexo version来确认是否安装成功。如果终端能输出 Hexo 的版本号说明命令行工具已经就绪。如果提示command not found优先检查 Node.js 是否真的加入了系统环境变量或重开终端后再试。除了命令行工具还需要一个趁手的代码编辑器。VSCode 是最稳妥的选择它对 Markdown、YAML、JavaScript 都有很好的支持之后写文章和调配置都会方便。这一步不需要安装额外插件但如果你希望写 Markdown 时有实时预览可以在 VSCode 里加一个 Markdown Preview Enhanced 插件。4. 初始化站点并完成基础配置环境准备好之后下一步是在本地初始化一个 Hexo 站点。假设你的项目目录叫salt-vlog执行以下命令完成初始化hexo init salt-vlog cd salt-vlog npm install这里做了三件事创建项目目录、生成 Hexo 基础文件、安装依赖包。初始化完成后目录里会有一个source文件夹、一个_config.yml主配置文件以及package.json等常规文件。Hexo 默认的主题是 landscape但既然是个人 Vlog 站点建议换成视觉更现代的 Butterfly 主题。执行下面的命令把主题克隆到本地git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly克隆完成之后还需要安装 Butterfly 主题依赖的两个渲染插件npm install hexo-renderer-pug hexo-renderer-stylus --save接下来打开主配置_config.yml把主题和站点基础信息配置好。下面是一份适合 Salt’Vlog 的示例配置# 文件路径salt-vlog/_config.yml title: Salts Vlog subtitle: 记录周末 staycation 的点滴 description: 青城山避暑、周末短途、超市采购用文字和视频记录生活 author: Salt language: zh-CN timezone: Asia/Shanghai url: https://saltvlog.github.io/ root: / theme: butterfly post_asset_folder: true这段配置里title会出现在浏览器标签和博客页头description会被搜索引擎用来生成摘要timezone会影响文章发布时间显示。post_asset_folder: true表示每篇文章可以有一个同名的资源文件夹图片和附件放在里面管理起来更清晰。5. 用 Markdown 记录青城山避暑周末站点配置好之后真正的内容创作阶段就开始了。假设你要发一篇标题为“出发青城山避暑时刻周末 staycation 逛超市小采购”的文章首先要在source/_posts目录下新建一个 Markdown 文件。Hexo 创建文章有专门命令也可以手动新建文件。推荐先使用命令hexo new qingchengshan-weekend执行后source/_posts下会生成qingchengshan-weekend.md文件里面预设了 Front Matter。把内容替换成下面的示例--- title: 出发青城山避暑时刻周末 staycation 逛超市小采购 date: 2025-06-01 10:30:00 tags: - Vlog - 青城山 - 周末 categories: - 周末记录 --- 这周末没有远行只做了一次 staycation去青城山躲太阳顺便逛超市小采购。 ## 出发前 上午 8 点出发车程大概一个半小时。出发前先查了青城山天气确认没有雷雨才放心出门。这次不打算爬全程只走到半山腰的凉亭就折返。 ## 逛超市小采购 出发前去超市补了一波货清单如下 | 商品 | 数量 | 用途 | | --- | --- | --- | | 桶装水 | 2 桶 | 上山补水 | | 三明治 | 4 份 | 午餐 | | 防晒喷雾 | 1 瓶 | 户外防晒 | | 驱蚊液 | 1 瓶 | 山林防蚊 | | 巧克力 | 3 条 | 快速补充能量 | ## Vlog 记录 下山后把手机里的片段剪成了一支短 Vlog视频里记录了山路、凉亭和超市采购的零散画面。Front Matter 里的title是文章标题tags和categories用于内容归类。正文部分可以直接用 Markdown 语法写感受也可以用表格记录采购清单。这种结构化表达在朋友圈里很难实现但在自己的站点里非常自然。尤其是逛超市小采购这个场景很多人觉得不值得写但恰恰是这类生活细节最容易让读者产生共鸣。把清单用表格列出来比单纯拍一个大塑料袋更有信息量也更方便后续自己复盘。6. 图片压缩与视频嵌入的关键细节Vlog 站点里视频是核心但图片也不能忽视。一篇记录青城山避暑的文章如果配了十几张原图页面加载速度会非常糟糕。开发者的习惯是先把图片压缩再上传。对于常见的.jpg和.png图片可以在本地安装 ImageMagick然后用一段简单的命令批量压缩。假设图片放在source/images/qingchengshan/目录下可以执行for img in source/images/qingchengshan/*.jpg; do convert $img -resize 1920x1080 -quality 80 ${img%.jpg}-compressed.jpg done这段命令会把每张 JPEG 图片限制在 1920x1080 分辨率以内并把质量调整到 80。如果你不需要原图可以把压缩后的文件直接覆盖原文件或者在源文件目录里只保留压缩版本。视频的处理思路完全不同。个人服务器带宽有限不建议直接把高清视频文件放到站点目录更好的方案是先把视频上传到 B 站或视频号等平台再把播放器嵌入到自己的页面里。这样既能借助平台分发又能保证自己站点加载速度。在 Markdown 正文中嵌入 B 站视频只需插入对应的 iframe。把下面代码中的aid换成你自己视频的 IDdiv classvideo-container iframe srchttps://player.bilibili.com/player.html?aid123456789page1 scrollingno border0 frameborderno framespacing0 allowfullscreentrue /iframe /div为什么要用平台外链而不是直接放视频文件首先是成本问题B 站做了转码和 CDN你不需要为流量付费其次是体验问题用户在浏览器里播放视频时平台会处理清晰度切换、进度记忆和缓存策略。你只需要在文章里留一个播放器入口剩余的事情交给平台。7. 部署到 GitHub Pages 并配置自动发布内容基本完成后就要考虑上线了。GitHub Pages 是最适合静态博客的免费托管方案之一支持绑定自定义域名也支持 HTTPS更别提借助 GitHub Actions 实现自动化部署。部署之前需要先在 GitHub 上创建一个新仓库仓库名建议为saltvlog.github.io这个名称最终会成为访问地址。创建仓库时不用勾选 README因为在本地推送会覆盖。然后回到项目根目录先把整个项目推送到 GitHub 仓库的main分支。推送完成之后在项目里新建一个 GitHub Actions 工作流文件# 文件路径.github/workflows/deploy.yml name: Deploy Hexo Site on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout source uses: actions/checkoutv4 - name: Setup Node uses: actions/setup-nodev4 with: node-version: 20 - name: Install dependencies run: npm install - name: Generate static files run: npx hexo generate - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pagesv4 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public这个工作流的意思是每次你往main分支推送代码GitHub 会帮你自动执行依赖安装、Hexo 构建并把public目录发布到gh-pages分支。之后你只需要维护main分支里的 Markdown 源文件不用手动构建和上传。需要注意的是GitHub Pages 的部署通常默认监听gh-pages分支因此使用这个 Action 后不需要再去仓库设置里改分支。如果你想要发布到自定义域名可在仓库的 Settings - Pages 中自定义域名并在source目录下添加 CNAME 文件。8. 本地预览、上线与效果验证部署之前先在本地跑一遍预览是最稳妥的做法。在项目根目录执行hexo clean hexo generate hexo serverhexo clean会清空缓存hexo generate会生成静态文件到public目录hexo server则启动本地开发服务器。启动成功后终端会显示类似Hexo is running at http://localhost:4000的提示。打开浏览器输入http://localhost:4000如果能看到站点首页并且刚刚写的青城山文章也在列表中说明本地构建链路是通的。此时可以重点检查三件事第一文章里的中文标题和标签是否正常显示第二视频 iframe 是否能正常加载第三采购清单表格在手机宽度下是否出现横向滚动。本地验证通过后把代码推送到 GitHub 仓库main分支然后在 GitHub 仓库的 Actions 页面观察工作流是否运行成功。等待一两分钟后访问https://saltvlog.github.io/如果看到的内容和本地基本一致说明部署成功。如果线上页面样式不对最可能的原因是站点根路径不匹配。_config.yml里的url要和仓库地址严格对应否则 CSS、JS 资源会加载 404。这是 Hexo 部署到 GitHub Pages 时最常见的坑之一排查时先看浏览器开发者工具里的 Network 请求。9. 常见问题与排查思路个人站点搭建过程中很多问题看起来千奇百怪实际上都能从环境、配置、依赖三个方向找原因。下面整理一份高频问题清单问题现象可能原因排查方式解决方案hexo命令找不到Node.js 未安装或环境变量未配置执行node -v验证重新安装 Node.js重开终端本地预览打开空白页插件依赖缺失查看终端报错信息执行npm install补齐依赖文章图片不显示图片路径错误或资源未生成在浏览器打开图片地址看返回使用绝对路径/images/xxx.jpg或资源文件夹部署后样式丢失_config.yml中url配置错误查看 CSS 请求返回状态按照仓库地址修正url和root视频 iframe 无法播放aid 参数错误或浏览器限制复制链接单独访问确认视频 ID 正确检查是否允许外链推送后 Actions 构建失败依赖版本不兼容查看 Actions 日志锁定 Node 版本更新package.json中文文件名导致链接乱码URL 编码问题查看文章地址避免中文文件名使用英文 slug如果你遇到hexo server后页面能打开但文章列表为空可以检查source/_posts下的 Markdown 文件是否有语法错误尤其是 Front Matter 里是否缺少title或date。Front Matter 是整篇文章的元信息任何一个字段格式不对Hexo 都可能直接跳过这篇文章。还有一类问题不是程序报错而是内容加载慢。图片体积和视频预热是主要原因。图片要提前压缩视频则不要放在自己站点目录下如果一定要自托管至少用云存储加 CDN而不是丢在服务器根路径上。10. 内容管理最佳实践与后续方向站点能跑起来只是第一步真正考验耐心的是长期维护。这里有几条值得坚持的内容管理规范。第一给文章编号和归档。Vlog 内容天然有连续性比如“青城山避暑”“周末 staycation”“逛超市小采购”如果只靠标签时间一长会乱。建议在文章 Front Matter 里增加categories每月归档一次同时配合hexo-generator-archive这类插件自动生成归档页。第二图片和视频素材要有统一命名规则。比如用2025-06-01-qingchengshan-001.jpg这样的格式而不是IMG_2345.jpg。统一命名不仅方便搜索也方便被搜索引擎识别。第三不要忽略 SEO。Hexo 可以通过插件快速生成站点地图执行下面的命令安装 sitemap 插件npm install hexo-generator-sitemap --save然后在_config.yml里增加一行配置sitemap: path: sitemap.xml每次重新生成后站点根目录会出现sitemap.xml之后可以把它提交到 Google Search Console 或百度站长平台。这样别人搜索“青城山 避暑 staycation”时你这篇 Vlog 文章就有机会被收录。第四对外链内容保持备份意识。由于你使用的是 B 站等平台外链如果视频被误删或平台接口变化页面上的播放器可能失效。视频原文件务必备份到本地或云盘文章正文里的关键画面最好也保留一两张截图作为兜底。从实践角度出发这套 Hexo 工作流足够支撑一个人长期更新。如果后续想继续深入有三个方向值得探索一是从单站点变成多站点把 Vlog 和生活记录拆成两个子站点二是改用更现代的 Astro 或 VitePress把性能压得更高三是接入自定义评论区系统把读者反馈也沉淀下来。但无论怎么演进核心原则不变源文件在本地、内容归属在自己手里、构建流程可自动化。下一次周末去青城山避暑逛完超市小采购回来打开编辑器写几行 Markdown把图片和视频放进去推送发布。这个流程熟练之后整个过程可能比剪辑一段短视频还要快。个人 Vlog 站点带来的价值不只是让别人看到你去了哪里而是让每一次记录都真正属于你自己。