/lucas

静态博客部署指南

·3 分钟阅读

这个博客构建产物是纯静态 HTML（dist/ 目录），可以免费部署到任何静态托管服务。本文记录三种主流方案。

前置：准备构建产物

npm run build          # 生成 dist/
npm run preview        # 本地验证构建产物

方案一：GitHub Pages

适合把仓库托管在 GitHub 的场景。

  1. 在仓库的 Settings → Pages 中，Source 选择 GitHub Actions；
  2. 仓库里添加 .github/workflows/deploy.yml：
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: withastro/action@v3
  1. 推送到 main 分支，Action 会自动构建并部署。

注意：如果部署在 https://<user>.github.io/<repo>/ 子路径下，需要在 astro.config.mjs 中设置 base: '/<repo>/'，并同步修改 consts.ts 里的 SITE.url。

方案二：Vercel

零配置，速度最快。

  1. 把仓库导入 vercel.com；
  2. Framework Preset 选择 Astro（通常会自动识别）；
  3. Build Command 保持 npm run build，Output Directory 保持 dist；
  4. 点击 Deploy。

之后每次推送到主分支都会自动部署，并为每个 PR 生成预览环境。

方案三：Netlify

  1. 把仓库导入 netlify.com；
  2. Build command 填 npm run build，Publish directory 填 dist；
  3. Deploy。

三个平台的共同点：把「构建」交给 CI，本地只需要写 Markdown。提交一篇文章，几分钟后线上就更新了。

部署后别忘了

  • 在 src/consts.ts 中把 SITE.url 改成真实域名（影响 RSS 与 sitemap）；
  • 给域名配置 HTTPS（三大平台均自带证书）；
  • 用 /sitemap.xml 在搜索引擎后台提交收录。