全栈攻城狮

Appearance

实战：从开发到部署全流程 ​

把前面学的构建、GitHub Pages、Netlify、Docker、自定义配置串成一条完整链路：从本地开发开始，构建静态产物，最终上线到公开可访问的地址。

项目背景 ​

将「Slidev 部署指南」演示文稿正式发布到线上，供团队随时访问。目标：一条命令构建，两条部署通道（GitHub Pages 归档 + Netlify 演示站点）。

第一步：本地开发与配置 ​

项目 slides.md 顶部统一配置：

yaml
---
title: Slidev 部署指南
theme: seriph
lineNumbers: true
exportFilename: slidev-deploy-guide
recordrtc:
  type: video
---

本地启动：

bash
npm run dev

浏览器访问 http://localhost:3030 检查页面，确认公式、代码高亮、动画正常。

第二步：静态构建 ​

执行构建命令：

bash
npm run build

产物输出到 dist/，用静态服务器验证：

bash
npx serve dist

确认：

  • 首页与各页跳转正常
  • 代码高亮与图片资源完整
  • 刷新页面不 404（SPA 路由回退）

第三步：GitHub Pages 部署 ​

仓库配置 .github/workflows/deploy.yml（推 main 自动构建发布）：

yaml
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run build -- --base /repo/
      - uses: actions/upload-pages-artifact@v3
        with: { path: dist }
  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment: { name: github-pages }
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

仓库 Settings → Pages → Source 选 GitHub Actions。

推送代码后等待 Actions 完成，访问：

https://用户名.github.io/仓库名/

第四步：Netlify 部署 ​

登录 Netlify 导入仓库，配置 netlify.toml：

toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Netlify 生成 https://xxx.netlify.app 访问地址，可绑定公司域名。

第五步：Docker 私有化（可选） ​

内网团队需要私有部署时，用多阶段 Dockerfile 构建镜像：

dockerfile
FROM node:20-alpine AS build
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
bash
docker build -t slides-deploy .
docker run -d -p 8080:80 slides-deploy

全链路回顾 ​

环节工具产出
本地开发slidev 开发服务器即时预览
静态构建slidev builddist/ 静态产物
自动发布GitHub ActionsPages 线上地址
演示站点Netlify独立 URL + 域名
私有部署Docker + Nginx内网服务

验证与发布 ​

  • 三个地址（本地预览、Pages、Netlify）逐一访问核对
  • 检查移动端与小屏显示
  • 更新版本后推送代码，等待自动部署完成

至此，一份 Slidev 演示文稿完成了从本地开发 → 静态构建 → 多平台自动部署 → 私有化托管的完整旅程，后续更新只需改源码推代码，部署全自动。