羊圈能搭起来完全离不开各位友友的鼓励还有fedi感觉人手一个博客的氛围影响www就是还欠缺了一点时机，我好像22年还是21年就存了塔塔的搭博客教程，但直到去年也就是25年5月才搭起来，期间可能是不知道开了大博客写什么，怕自己半途而废；也有可能是技术上不知道的太多，有些畏难心理，毕竟我是个受挫就很容易放弃的人……不过大家都一直在鼓励我，当嘟嘟写，几条嘟嘟拼起来就成文了，不要有心理压力。加上研修和工作会接触到前端代码，觉得自己应该遇到问题能解决，就算不能也可以问问AI，于是羊圈就这么诞生了！

这篇博文虽然放在教程tag里，但是比起教程或者经验分享，更像是单纯的经历分享……？毕竟静态博客搭建已经有塔塔的博文Hugo | 一起动手搭建个人博客吧珠玉在前了！印象里还有些友友也都写过搭建或者装修教程，大家可以参考看看！这篇只是凭模糊的记忆介绍我是这么搭的（并且有大量犯蠢摇AI老师的记录），可以参考但不推荐照搬（很有可能卡在我忘记说明的哪一步），可能会有大量基础知识错误还请放过……

在正式开始经历分享之前，可能需要事先说一下我的情况（或许相熟的友友也或多或少猜到一部分）：

• 在日本，所以不会有翻墙爬梯的问题（也不太清楚国内友按照我的步骤来的话，会具体因为没梯子在哪一步卡住
• 工作/研修/自学过HTML/css/javascript，HTML和css比较熟，javascript一般，用过React。还了解过一点Git，不过只有最基础的，在我核桃仁的知识范围外的还得查资料和问AI。
• Markdown语法会一点，但也不多，最近才知道图片应该怎么插入（擦汗
• 辗转在ChatGPT/Gemini/Claude之间，哪个免费额度用完了就奔向另一个，用最质朴的语言向它们发问，毫无效率和技巧可言

羊圈由 Astro 驱动，部署在 Netlify 平台上。开发环境最初构建于 Windows 10，最近迁移到 macOS 开发，并选用了 Milky Way主题来呈现内容（后面魔改了不少）。

当年卷毛羊的第一步就是选择了离我最近的chatGPT老师（以下简称查老师），然后向它真诚地提问：我想要搭建一个静态博客！我需要怎么做？从哪里开始？

查老师就开始哐哐给我吐出来步骤了，从最开始的确定目标和技术栈，一直讲到后面的优化运营

• 确定目标与技术栈（写作内容/想投入多少时间）
• 选择静态站点生成器（Astro/Hugo/Next.js静态导出/Eleventy / Hexo）
• 准备开发环境（安装 Git 与 GitHub 账号/安装 Node.js LTS/编辑器：VS Code + Markdown 插件）
• 创建项目并本地预览
• 个性化定制（主题/功能/性能）
• 部署到线上（GitHub Pages/Cloudflare Pages / Netlify / Vercel）
• 绑定独立域名 & HTTPS
• 优化与运营

可以看到光是静态站点生成器就给我报了包括Astro/Hugo等好几个。我看着有点选择困难，于是再次发出质朴的疑问，说不知道该如何选择静态站点生成器，让它帮我分析分析，需要的话可以向我提问以获得必要的信息。下面是查老师给出的问卷：

• 您主要会什么前端技术？纯 HTML/CSS/JS / React / Vue / Svelte / Go 等
• 您愿意在本地安装 Node.js 并写一点命令行吗？✅愿意 / ❌不太想
• 预估未来一年文章数量？≤50 / 50–500 / 500+
• 构建速度是否特别在意？
• 您想多大程度自定义主题/布局？“套用现成主题即可” / “想自己改 CSS、组件” / “最好能写前端交互”
• 计划集成哪些功能？评论 / 搜索 / 多语言 / 仅文章展示
• 打算用什么托管？GitHub Pages / Vercel / Netlify / Cloudflare Pages / 其他
• 是否需要服务器端能力（如表单、SSR、实时数据）？✅需要 / ❌纯静态即可

我一通回答之后，查老师给我推荐了Astro 和 Eleventy，想到工作里也刚开始用React，查老师又说和Astro 语法比较像，又可以在Markdown里直接引入React组件，就选中了Astro（笑死但后来根本没用，或许将来会用吧）。于是利用黄金周的时间简单看了下Astro的教程，不懂的地方就直接复制代码问查老师，但后面其实看的东西也都忘光光了，一般都是遇到问题再摇AI老师问，疑似根本没有用到之前学的知识……

学完教程后我也没有按照教程的搭建方法去建，而是快乐地去淘起了Astro的博客主题，毕竟从零开始建太麻烦了……总之选了一个免费且符合自己审美的，心想有什么问题后期再改吧，然后就去作者的github页面，把模板用的clone网址复制了一下，再新建个空文件夹当作博客目录，把这个文件夹拖到VS Code里面，再打开VS Code的终端用 git clone 刚刚复制的网址` 把模板下了下来（对我当时电脑为了做私底下的研修课题已经装了Git）。

Node.js的话忘了是不是这时候安装的了，就当它是吧，总之装完继续在终端执行npm install的指令安装依赖，装完再跑一下npm run dev，跳出来的链接点进去预览一下是不是没什么问题。然后就这样打开实时预览（应该还有VS Code的自动保存），把模板里面那些不需要的文字和页面都删除，换成自己想发布的文章，删得差不多了，也保证页面显示没有问题，自己想发布的文章也正常显示之后，就准备扔到自己的Github仓库里。

……说实话，当时的记忆已经有些模糊了，跟Gemini老师简单回忆了一下，当时的操作流程可能是这样的：

1. 在 GitHub 上新建仓库： 先在Github网页端点个 Create New Repository，创建新的远程仓库。
2. 建立关联： 在本地终端用 git remote add origin <仓库地址> 把本地项目和远端仓库“牵线搭桥”。依稀记得期间好像还输了用户名和密码，遇到不懂的可以像我一样随时摇AI。
3. push到远程 敲下 git add .、git commit -m "first commit" 和 git push -u origin main。VS Code的源代码管理好像可以直接输入commit的文字然后同步到远程。

过程大概率伴随着报错，然后我又是对着报错信息疯狂摇 AI 老师。总之，这部分有惊无险地忙完之后，我大概是跑去注册了一个Netlify账号，点击了“Add new site”，然后选了 “Import an existing project”。接着跳出授权 GitHub 权限的请求，选中了刚才那个放着代码的“羊圈”仓库，然后设置好像全都是默认，边问边点，忘了是这期间还是后面手动点了“Deploy site”，Netlify就会自动拉取刚刚上传到GitHub里的代码，基本上满屏绿色就成功了，可以找一找，域名的话好像netlify就自带了那个，我也一直没想要改过，点进去能显示网页的话就算是成功了。像这样跑通了之后，后面如果再想修改博客代码的话，只要在编辑器里修改，然后先在终端跑一遍npm run build确保没有报错后push到Github远程仓库就行，后面的Netlify会自动完成。

模板总是还有很多不尽如人意的地方，看了一下我的装修日志，后面大概又陆陆续续做了这些修改，或许将来会单独抽出来写教程吧，不过感觉有些模板考虑得比较周全的话会预装一些功能和模块，所以或许也可以对着下面的列表看看有没有想要的功能，按照这个去找模板，会比较省力：

• 友情链接版块（一开始图省事用的是a标签，纯文字链接，最近才改成卡片式设计）
• rss订阅
• 博文底部的上一篇/下一篇按钮
• waline评论区
• 装修历史界面
• favicon（就是标签页显示的那个小图标）
• 博文总览界面的分页按钮
• 单篇博文阅读界面的目录卡片，单击目录克跳转到对应段落
• 单篇博文底部的点赞功能
• 回到首页按钮
• 顶部菜单栏下滑隐藏，上滑显示，方便前往其他页面
• 网站内搜索功能
• 图片放大功能
• 首页抓取近期嘟文并随机显示其中一条
• 网站底部显示博客总字数和博客搭建距今的总天数
• 切换到别的标签页时，博客标签页文字会有变化
• 压缩已上传图片，把网络字体下载到本地，努力提升加载速度

有很多是建站之初和最近热情恢复后才装上的，最近有快一年我也没怎么动过代码，只是猛猛更新博文……装修和维护这个事情的话因人而异吧，图省事可以选个万能模板然后稍微改改用到天荒地老，喜欢折腾的话就怎么弄都行，我是属于在这两者之间横跳，偶尔玩心上来了会把自己的博客翻来翻去，抓出来一大堆bug或者看不顺眼的地方，再一个个修过去。又或者想玩但找不到bug的时候，就会逼问AI老师，看看他们有没有什么新点子，或者去友链拜访一下，看有没有什么可以借鉴的……搭建博客也就初期稍微折腾一点，后面想不折腾也可以偷懒，反正能跑起来能看就行……唔……

越写越觉得不知道自己知识匮乏不知道在说什么！就是，也有像我这样混乱且迷糊地搭起来了的，不用等捋到很清楚想得很明白才开始建站！可以像我一样先从跟AI提问开始，慢慢的就有思路了（草全文像AI硬广