零成本基建系列——如何在没有云服务器的情况下用codex+vitepress+cloudflare pages搭建自己的网站

为什么不自己买云服务器?首先,当然是不想花钱。而且自己部署云服务器还得考虑安全等因素,运维起来也挺麻烦和耗精力的。

我自己对 UI 设计天然不擅长,网站需要长什么样其实没有概念。同时又不想花太多时间去开发网站,每次文章编写完成后也不希望还要花太多时间去部署。调研了一些框架后,最终选择了 VitePress + GitHub 存储 + Cloudflare Pages 的方案。

先简单介绍一下VitePress项目,VitePress可以针对markdown的文件内容生成静态HTML页面。并且VitePress 有默认的展示样式,遇到一些不满意想调整的,用户可以自己进行修改,而我当然是直接让 Codex 帮忙进行调整。安装和部署可以参考官方文档 VitePress 是什么? | VitePress

Cloudflare Pages 支持免费 host 网站,只要把代码提交到 GitHub并配置好Cloudflare Pages,Cloudflare 就会自动拉取更新并部署。这样如果有新增或者修改,直接 git push 后就可以了。过两分钟网站就会自动更新到最新内容。Cloudflare Pages操作起来有些操作步骤比较难找,有必要具体说明一下:

  1. 进入后端管理界面,点击"Works & Pages";

  2. 点击 "Create Application";

  3. 点击下方的"Get started"链接;

  4. 选择"Import an existing Git repository"后选择对应的代码仓库就可以了。

  5. 设置编译的命令和输出路径等 Build command:npx vitepress build docs Build output:docs/.vitepress/dist

    配置好以后Cloudflare会提供一个默认的域名,也允许我们使用自己的域名

由于我现在习惯使用Obsidian来写markdown格式的文章,单独在Obsidian中建了一个Vault,配置到对应的git项目中的docs/posts目录。也就是说文章目录统一放在 docs/posts。一篇文章一个目录,正文文件固定叫 index.md,图片放到同一个目录的 assets 里。这里的docs目录是对应在vitepress初始化时选择存放markdown文件的目录

我每篇文章开头会写 title 和 created:

复制代码
---
title: 文章标题
created: '2026-07-15 19:58:53'
---

因为我使用了Obsidian的一个插件:Custom file explorer sorting

通过这个插件我就可以配置Obsidian中的文章目录使用文章创建时间来进行排序了。

Obsidian 只负责写,不负责发布

我直接把 docs/posts 作为 Obsidian 的 vault 打开,这样左侧看到的就是文章目录。

为了让图片跟着文章走,在 .obsidian/app.json 里设置了:

复制代码
{
"attachmentFolderPath": "assets",
"newLinkFormat": "relative",
"useMarkdownLinks": true
}

第一个配置让粘贴的图片放到当前文章目录的 assets 里。第二个和第三个配置比较重要,默认的 Obsidian 图片链接长这样:

复制代码
![[1cdce648ded9035c5c4314d25ef6f79c.jpg]]

在 Obsidian 里当然能显示,不过我最后要交给 VitePress。改成 Markdown 链接后,新粘贴的图片会变成:

复制代码
![](assets/1cdce648ded9035c5c4314d25ef6f79c.jpg)

文件名还是一串哈希值,先这样吧。真想改成好看的名字,直接在 Obsidian 里重命名图片就行,它会更新引用。不要在资源管理器里偷偷改,Markdown 里的路径不会自己变。

新建文章时我装了 Templater。输入一次标题,自动创建文章目录、index.mdassets,再给 index.md 写好 title、created 和一级标题。这里有个小技巧,对于Obsidian的使用配置可以直接在codex中让GPT给出意见甚至直接配置。

由于我对VitePress并不了解,第一次部署后对于默认的展示样式有些不满意,都是通过codex让GPT5.6帮我调整优化。经过几轮调整上线后,现在发布流程比较顺畅了。不过整个网站的功能还比较单薄,比如没有设计标签和分类,也没有搜索功能。这些后续打算让 GPT 再优化一下。

相关推荐
kuroomi17 小时前
Docker 与容器基础
linux·运维·docker
_itgo1 天前
意图识别落地方案
运维·docker·容器
mengge.cloud1 天前
0909华为云计算类综合服务小白实验教程
linux·运维·服务器·网络·华为云·云计算
fpcc1 天前
c++编程实践—统一初始化
服务器·c++
QYR-分析1 天前
蓝海赛道高速扩容!全球小型观察ROV市场格局、细分场景与发展趋势分析
大数据·运维·云计算
陈皮糖..1 天前
从零搭建一个简易 AI 运维问答机器人(RAG + LangChain + Streamlit)
运维·人工智能·ai·langchain·机器人
制造业的搬运工1 天前
AI服务器背板与传统背板差异:三大设计升级解析
运维·服务器·人工智能·科技·制造·pcb工艺
zhengqweasd1 天前
Linux网络(一):服务器数据包从网卡到应用程序,完整收包流程详解
linux·服务器·网络
顶点多余1 天前
仿muduo库实现高并发服务器项目
运维·服务器
脚踏实地,坚持不懈!1 天前
Linux 6.18.7 内存分配与回收 —— 代码梳理
linux·运维·网络