Skip to content
歆棠随笔集

免费制作个人网站……

免费制作个人网站经验分享

我的个人网站“歆棠随笔集”上线啦～

但是社交平台应该是不会允许我展示引流的。

那就写个经验分享吧！

首先，我的网站定位于“随笔”文字类博客，属于典型的静态页面，因此经过一番调研查证，我拟定了技术路线：

Astro 框架 + Starlight 模板 + Cloudflare 托管 + GLM-5 智谱清言 进行全程代码指导。

  1. 遵循 VSCode 官网指导下载安装 VSCode 代码编辑器，具有轻量、便捷、可读性好等特点；

  2. 遵循 Astro 官网指导下载 Astro 框架，并在 VSCode 中安装好 Astro 扩展；

  3. 根据 Astro 指引建立首个项目的时候直接选择 Starlight 模板（Astro 官方推荐的文章类网站模板）；或者遵循 Starlight 官网指导从头建立模板；

  4. 指示的最后一步是在 VSCode 终端里运行“npm run build”，无报错后就可在它给出的本机地址上通过浏览器预览自建网站的真实呈现状况；

  5. 将我个人的百余篇随笔整理好（平时用手机备忘录写，然后存成 .docx），批量转换为 Markdown 格式的 .md 文件。这个转换的脚本同样可让 AI 代劳～

  6. 根据你的需求对模板进行相应的改动、增删。不要害怕，有不懂的地方尽管问 AI，问的时候尽量说清楚当前的需求、当前的疑问困惑、具体报错代码，都能得到很好的解决！大胆尝试吧，如今有 AI 辅助对普通人建站是个前所未有美好的时代～

  7. 具体到我的经验，我在首页通过修改模板放了两个卡片组：“置顶精选”和“近期上传”。让读者能直接点击我的得意之作以及最近新写的。

  8. 我还希望引入一个模板本身没有的功能：点击首页“读一篇”按钮，读者就能被随机跳转到一篇文章，每一次点都完全随机。于是我让 AI 帮我实现了这个功能，新建了一个“RandomButton.astro”组件插到首页里。除此之外还有些“作者名靠右对齐”“引入第三方社交账号图标”等需求，都能实现。

  9. 经过与 AI、编辑器、浏览器一通酣畅淋漓高山流水的斗智斗勇辩法辩经（后续维护已改用 OpenCode），我们终于完成网站的制作！接下来开始部署上线。

  10. 注册或登录已有的 Github 账号并新建仓库，注册或登录已有的 Cloudflare 账号。遵循指示将你本地的网站工程文件“git add”“git comment”“git push”推到你新建的 Github 仓库里。在 Cloudflare Pages 中关联该仓库，项目名称涉及域名！免费部署上线！

歆棠

2026