当前位置：首页 > news >正文

Claude Code配合Astro + GitHub Pages：为 sharelatex-ce 打造现代化的开源项目宣传页

news 2026/3/31 5:02:26

效果

开源项目宣传页: https://xuhe2.github.io/sharelatex-ce/

因为自建协作环境不该比写论文本身还难，所以我做了 sharelatex-ce 来实现真正的“一键式” Overleaf 私有化部署体验。

实现效果:

为什么需要一个好看的宣传页？

说实话，程序员眼里的“美”往往很纯粹：代码整洁、架构优雅、README 文档清晰。但现实是残酷的——如果你的开源项目只有一堆冷冰冰的代码和长篇累牍的 Markdown 说明，那它就像是一个穿着睡衣去参加晚宴的天才，即便满腹经纶，也很难在第一时间抓住别人的眼球。

在这个“颜值即正义”的 GitHub 时代，宣传页（Landing Page）就是项目的脸面。它不仅能让用户在 3 秒钟内明白你的项目是干什么的，更像是一种“专业背书”。一个精致的页面在无声地告诉访问者：“看，开发者连这种细枝末节都打磨得这么认真，代码质量肯定差不了。” 毕竟，大家都很忙，比起啃文档，谁不希望能一眼看到那个闪闪发光的 Docker-compose up 按钮呢？

技术选型: 后端人+AI 干前端

作为一名后端程序员，让我手写 CSS 布局简直是某种程度上的“酷刑”。但在 2026 年，如果你还觉得做网页得从

开始一行行抠代码，那可能真的错过了这个时代的红利。

我的选型逻辑非常直接：AI擅长什么框架, 我选什么框架, 让专业的人干专业的事，让 AI 干累人的事

Astro 框架：为什么不选 React 或 Vue？因为我不需要一个沉重的单页应用。Astro 是为内容驱动型网站而生的，它极快、极简，生成的静态页面干净得像刚刚洗过的代码。最重要的是，它对 SEO 极其友好，且支持各种组件混合，“学术范儿”十足。
Claude Code：这才是本次部署的秘密武器。作为一个非前端程序员，我只需要把我的需求、项目定位、甚至是喜欢的配色方案(其实我压根没有审美, AI看着来就好了, AI味? 我会受着)丢给 Claude。它不仅帮我写出了像模像样的 UI，甚至连那些弯弯绕绕的 GitHub Actions 部署逻辑都安排得明明白白。
AI 时代的开发范式, 现在的开发逻辑已经变了吗? 我压根不了解 Tailwind 类名，我只需要扮演好“产品经理”的角色，通过简短的提示词（Prompt）指挥 AI 进行构建(实现细节? 相信AI的审美, 反正肯定比我好)。“不是前端写不起，而是 Claude 更有性价比。”

开启Github Pages功能

进入设置：在项目仓库顶栏点击 Settings。
定位功能：左侧侧边栏找到并点击 Pages 选项。
配置来源：在 Build and deployment -> Source 中选择 Deploy from a branch。
选定路径：在 Branch 下拉菜单选择目标分支（如 gh-pages），路径保持 / (root)。
生效访问：点击 Save。稍等片刻，页面顶部会出现绿色的访问 URL。

点击Settings

部署的宣传页出现了资源无法加载的问题

原因

GitHub Pages 默认使用 Jekyll 来构建网页。在 Jekyll 的规则中，任何以下划线 _ 开头的文件夹（例如 _astro/）都会被视为内部私有文件夹，不会被发布到服务器上。

由于 Astro 默认将所有的 CSS 和 JS 文件放在 _astro/ 目录下，GitHub Pages 实际上并没有把这些文件部署出去，所以你的浏览器请求时会报 404。

解决方案1

核心解决方法：添加 .nojekyll 文件

你需要告诉 GitHub：“不要用 Jekyll 运行我的网站，直接把我的文件原样发出去”。

操作步骤：

在你的 gh-pages 分支的根目录下，创建一个名为 .nojekyll 的空文件（注意前面有一个点）。
提交并推送。

解决方案2

修改代码, 配置静态资源所在的位置, 修改astro.config.mjs文件内容:

diff --git a/landing-page/astro.config.mjs b/landing-page/astro.config.mjs
index 1ae7417..b1f04c3 100644
--- a/landing-page/astro.config.mjs
+++ b/landing-page/astro.config.mjs
@@ -7,5 +7,6 @@ export default defineConfig({site: 'https://xuhe2.github.io/sharelatex-ce/',build: {format: 'directory',
+    assets: 'assets',},});