Feast 官网Astro 静态站点本地开发、构建与博客发布工作流全解【免费下载链接】feastThe Open Source Feature Store for AI/ML项目地址: https://gitcode.com/GitHub_Trending/fe/feast本篇基于 Feast 仓库中 infra/website/README.md 展开说明 Feast 官方站点feast.dev的本地运行方式npm installnpm run dev与博客文章发布流程向docs/blog/目录添加 Markdown。结合仓库中 Astro 项目的实际源码——路由、静态生成、frontmatter 解析与 SEO 布局——你会掌握从零本地起站、编写一篇可被正确渲染并进入博客列表的完整文章以及理解整站构建管线的工作方式。一、网站子项目定位与目录结构infra/website/是 Feast 仓库中独立的前端子项目用 Astro 构建 Feast 官方站点官网首页 博客。infra/website/package.json 中声明的项目名为feast-websiteprivate: true表明它不会发布到 npm仅作为站点源码存在。从目录结构看该项目遵循 Astro 的标准约定infra/website/docs/blog/博客文章的 Markdown 源文件即 README 中 Add blog posts 一节所指的位置当前包含 29 篇博文例如 feature-view-versioning.md、rag-with-feast.mdinfra/website/src/pages/路由页面含首页 index.astro 与博客路由 blog/index.astro、blog/[slug].astroinfra/website/src/layouts/BaseLayout.astro全站统一的 HTML 骨架与 SEO 布局infra/website/src/components/Navigation.astro导航组件infra/website/src/scripts/ridgeline.js首页动态图基于 d3脚本infra/website/public/静态资源博文配图位于public/images/blog/站点 Logo 与 Favicon 位于public/images/下其中的 public/CNAME 文件表明站点通过 GitHub Pages 形式部署到feast.dev域名。二、技术栈与 Astro 构建配置infra/website/package.json 中的依赖非常精简核心只有三个astro^5.16.10站点框架负责 Markdown 渲染、静态生成与内容管道shiki^1.29.2代码高亮用于首页Get Started代码块d3^7.9.0首页 hero 区下方的 ridgeline 动态图。npm scripts 定义如下package.json#L5-L11scripts: { dev: astro dev, start: astro dev, build: astro build, preview: astro preview, astro: astro }其中dev与start等价均为启动本地开发服务器build执行静态构建产出纯 HTMLpreview用于在本地预览构建产物astro是直通脚本可调用任意 Astro 子命令如npm run astro check、npm run astro sync。全局配置在 infra/website/astro.config.mjs 中完整内容如下import { defineConfig } from astro/config; export default defineConfig({ site: https://feast.dev, integrations: [], markdown: { shikiConfig: { theme: github-dark, langs: [python], wrap: true } }, });逐项说明各配置的作用配置项值作用sitehttps://feast.dev声明站点绝对 URL。Astro 用它生成 canonical URL并与博文页面里toAbsoluteUrl拼接 Open Graph 图片地址时保持一致integrations[]未引入任何 Astro 集成Markdown 渲染全部走内置管道markdown.shikiConfig.themegithub-dark代码块高亮主题深色markdown.shikiConfig.langs[python]仅预加载 Python 语言包控制构建体积markdown.shikiConfig.wraptrue开启代码换行避免长行撑破容器需要注意的是shiki 的langs只显式声明了python如果博文代码块使用其他语言如 bash、yamlAstro 会按代码块 fence 中的语言标识按需处理但 Python 是唯一被预置进配置的语言。三、本地运行从安装到开发服务器infra/website/README.md 给出的本地运行步骤只有两条命令对应如下操作cd infra/website npm install npm run devnpm install安装astro、shiki、d3三个依赖仓库中已提交 package-lock.json可锁定版本复现环境npm run dev实际执行astro dev启动 Astro 开发服务器。由于没有自定义server配置Astro 会使用默认端口4321终端会输出本地访问地址。开发模式下对docs/blog/下任意 Markdown 或src/下任意.astro文件的修改都会触发即时重建可直接在浏览器中验证渲染效果。完整的生产构建与预览流程为npm run build # 静态构建产出 dist/ npm run preview # 本地预览构建产物验证生成结果从源码结构看该项目没有任何需要构建期环境变量或外部数据源的特性integrations为空页面数据全部来自仓库内 Markdown 与 frontmatter因此本地构建是完全自包含的——这也是它作为官网子项目可以直接在仓库内开发的原因。四、添加博客文章文件即路由的内容管线README 的 Add blog posts 一节只提示 Seedocs/blog/for examples。结合源码实际发布一篇博文的完整规则如下4.1 文章文件与 slug 约定在 infra/website/docs/blog/ 下新建一个.md文件即可文件名即 URL slug去掉.md后缀。博文详情页 src/pages/blog/[slug].astro#L24-L35 的getStaticPaths展示了这一映射export async function getStaticPaths() { const posts await Astro.glob(../../../docs/blog/*.md); return posts.map(post ({ params: { slug: post.file.split(/).pop().replace(.md, ) }, props: { post } })); }即docs/blog/feature-view-versioning.md会生成/blog/feature-view-versioning/页面。博客列表页 blog/index.astro#L37 与首页 index.astro#L286 的跳转链接也采用同样的规则拼接三者必须一致——这意味着重命名文件会直接改变线上 URL。4.2 frontmatter 字段规范参考 feature-view-versioning.md 的实际写法frontmatter 约定为--- title: Feast Introduces Experimental Feature View Versioning description: Feast now supports experimental feature view versioning ... date: 2026-03-31 authors: [Francisco Javier Arceo] ---各字段在源码中的消费方式字段消费位置说明title[slug].astro#L38页面title与 hero 大标题渲染为大写description[slug].astro#L45页面 meta description 与 hero 副标题date排序与时间显示列表页与首页按date倒序排序缺失时回退到2000-01-01并格式化为英文长日期authors[slug].astro#L64-L68字符串数组渲染为 By A, Bhero_image/heroImage/image[slug].astro#L40-L42可选用于 Open Graph 社交分享图4.3 hero 图与社交分享图除了 frontmatter渲染层还支持一种内联 hero 图约定在 Markdown 正文中写div classhero-imageimg src/images/blog/xxx.png .../div。extractHeroImage 函数会先匹配hero-image容器、再抽取其中img的srcfunction extractHeroImage(markdown: string): string | undefined { const heroContainerMatch markdown.match( /div[^]*class[][^]*\bhero-image\b[^]*[][^]*([\s\S]*?)\/div/i); ... }其取值优先级为frontmatter 的hero_image或heroImage、image别名→ 正文内联hero-image块。取到的相对路径再经 toAbsoluteUrl 与站点地址https://feast.dev拼接为绝对 URL写入og:image与twitter:image若未取到图片则回退到 BaseLayout.astro#L11 中的默认社交图。因此博文的配图应放在 infra/website/public/images/blog/ 下以/images/blog/xxx.png的绝对路径引用——public/目录的内容会在构建时原样复制到站点根路径。4.4 博文正文的排版约定sr/pages/blog/[slug].astro 的样式块L82-L343定义了对 Markdown 元素的完整排版规则包括标题层级、代码块pre/code使用--color-surface背景、表格、引用块与图片。值得注意的交互细节正文中所有img都接入了一个原生 lightboxL345-L376点击放大、点击遮罩或按 Esc 关闭.hero-image类容器会被特殊排版为超出正文栏宽的通栏大图width: calc(140% 40px)这正是上文内联 hero 约定生效的视觉来源正文宽度锁定为 768px移动端≤768px下标题字号、间距均有响应式降级。五、静态生成机制Astro.glob 与双端消费整个博客系统的核心是 Astro 的内容管道两个页面以相同方式消费同一批 Markdown博客列表页blog/index.astro#L5-L10const posts await Astro.glob(../../../docs/blog/*.md); const sortedPosts posts.sort((a, b) { const dateA new Date(a.frontmatter.date || 2000-01-01); const dateB new Date(b.frontmatter.date || 2000-01-01); return dateB.getTime() - dateA.getTime(); });首页index.astro#L6-L11使用同样的 glob 与排序逻辑只是额外.slice(0, 3)取最近三篇渲染到 [BLOG POSTS] 区块的卡片网格中卡片仅展示title与description。这带来几条实操结论date字段驱动排序缺少 date 的文章会沉底按 2000-01-01 处理Astro.glob在构建期执行新增/删除 Markdown 文件后必须重新npm run build才会反映到产物中开发模式下则由 dev server 增量感知首页除了博客卡片还在 frontmatter 区index.astro#L13-L48内嵌了一段 Feast Python SDK 示例代码FeatureStore初始化、get_historical_features、get_online_features、retrieve_online_documents四个调用通过shiki的Code组件以github-dark主题渲染与 astro.config.mjs 中的配置相互印证首页 hero 区下方的动态 ridgeline 图由 src/scripts/ridgeline.js 在DOMContentLoaded时初始化并做了 250ms 防抖的窗口 resize 重绘与astro:before-swap清理index.astro#L317-L342这解释了d3依赖的用途。六、SEO 布局BaseLayout 的 meta 约定所有页面统一包裹在 BaseLayout.astro 中接收title、description、socialImage、ogUrl四个 propsL4-L17并在head中输出基础 metadescription、robotsindex, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1Open Graph 全套og:title、og:description、og:url、og:site_name固定为Feast、og:image及其宽高1201×630Twitter Cardsummary_large_imagetwitter:image字体IBM Plex Mono / IBM Plex Sans与 favicon/images/feast_icon-black.png。此外还有一段内联脚本L55-L64读取localStorage中的theme否则跟随系统prefers-color-scheme设置data-theme属性实现深色/浅色主题的无闪烁初始化主题变量--color-background等定义在 src/styles/global.css 中被各页面的style块引用。对写博客的人而言实际含义是frontmatter 里的description会直接决定搜索引擎摘要与社交分享文案写清楚它比标题之外更重要的位置几乎没有。七、小结一篇博文从文件到页面的完整链路综合以上源码证据向 Feast 官网发布一篇博文的可验证流程为在 infra/website/docs/blog/ 新建your-post-title.md写入title/description/date/authorsfrontmatter参考 feature-view-versioning.md配图放入 infra/website/public/images/blog/正文用hero-image容器或 frontmatterhero_image指定分享图cd infra/website npm install npm run dev本地验证渲染、排序与 lightboxnpm run build生成静态产物[slug].astro的getStaticPaths会为新文件自动产出/blog/your-post-title/路由无需任何路由注册首页与博客列表自动将其纳入首页仅展示最新 3 篇SEO meta 由BaseLayout自动填充。整站没有数据库、没有构建期 API 依赖Markdown 文件 frontmatter 即全部内容模型这使得任何熟悉 Markdown 的贡献者都能低门槛地为 Feast 官网补充博客内容。【免费下载链接】feastThe Open Source Feature Store for AI/ML项目地址: https://gitcode.com/GitHub_Trending/fe/feast创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考