在使用 dumi 开发时，发现 dumi 可以将构建后的代码一键部署到 github.io。

这是因为有了 GitHub Pages 支持，它为开发者提供了服务器和域名，我们不用关心如何部署与运维，只需要简单配置，就能拥有一个个人网站，是不是很酷？！

部署新仓库

可以同过创建一个新的仓库，仓库名字必须为 <username>.github.io ，过程中 Github 也会非常贴心的提示仓库名是否可用。然后勾选 添加 README 文件

点击创建后，会立即生成站点，域名即仓库名：<username>.github.io

你可以在仓库中添加 index.html，将会优先渲染 html，其次是 index.md，如果两者都没有则会使用 README.md。后续对仓库（main 分支）的更新也会自动构建部署。

部署已有仓库

GitHub Pages 中已有仓库的部署是非域名根路径部署

手动部署

借助 gh-pages 可以轻松帮助我们部署文档到 Github Page

npm install gh-pages --save-dev
# or
yarn add gh-pages -D

编译生成 dist 目录

npm run build

package.json 中添加

"scripts": {  "deploy": "gh-pages -d dist"}

一键发布

npm run deploy

自动部署

利用 Github Action 在每次更新 main 分支后自动部署。新建 .github/workflows/gh-pages.yml 文件

name: github pages

on:
  push:
    branches:
      - main # default branch

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run docs:build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs-dist

总结

除了 GitHub，Vercel 也提供了类似的一键部署的服务，拥有个人网站的成本将变得非常低。这会对我们的生活和工作有什么影响？