学会运用Github actions和vitepress，搭建高性能SSG自动部署个人永久网站

为什么选择Github actions 和vitepress去搭建一个静态站点呢？

静态站点很明显就是指不包含任何动态内容的站点，整个站点的所有页面都是纯粹的html、css和js，因此这样静态站点的优势就十分明显：

• 静态站点部署非常简单，放置到web服务器的静态文件目录就可以了
• 静态站点支持缓存，这样访问速度就非常快
• 静态站点非常安全，由于其不包含任何可被攻击的动态内容，就很难受到攻击
• 静态站点成本低，由于其极小的服务器资源占用，因此即使是小型服务器也足以承载
• 静态站点易于维护，由于只有html、css和js文件，维护起来就非常方便

那么基于这些优势我们就需要针对静态站点的一些局限性去进行优化了，下面我们就要开始搭建了。

首先你需要一个GitHub账号，vitepress框架以及github actions。

VitePress是一个由Vue驱动的静态站点生成器，可以通过命令行将Markdown文件编译成静态站点。

GitHub Actions是一个持续集成和持续部署平台，可以让你在每次代码提交时自动构建、测试和部署你的项目。

接下来，你需要创建一个新的GitHub仓库，并安装VitePress。

git clone https://github.com/vuejs/vitepress.git
cd vitepress

然后，你需要创建一个新的VitePress项目。

npm init vitepress@latest

接下来，你需要配置你的VitePress项目。

cd .vitepress

编辑vitepress.config.js文件，如下所示：

module.exports = {
  lang: 'zh-CN',
  title: '我的网站',
  description: '这是一个使用VitePress构建的网站',
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }]
  ],
  themeConfig: {
    logo: '/logo.png',
    nav: [
      { text: '首页', link: '/' },
      { text: '关于', link: '/about' },
      { text: '联系', link: '/contact' }
    ],
    sidebar: [
      {
        text: '指南',
        items: [
          { text: '介绍', link: '/' },
          { text: '快速入门', link: '/getting-started' },
          { text: '进阶指南', link: '/advanced-guide' }
        ]
      },
      {
        text: '参考',
        items: [
          { text: 'API参考', link: '/api-reference' },
          { text: '命令行工具', link: '/cli' }
        ]
      }
    ]
  }
};

接下来，你需要编写你的Markdown文件。

cd ..
mkdir docs
cd docs

编辑index.md文件，如下所示：

# 我的网站

## 欢迎来到我的网站

这是一个使用VitePress构建的网站。

## 特点

* 快速
* 易用
* 强大

## 如何使用

1. 克隆仓库
2. 安装依赖
3. 运行开发服务器
4. 构建网站
5. 部署网站

## 了解更多

有关VitePress的更多信息，请访问[VitePress网站](https://vitepress.vuejs.org/)。

接下来，你需要构建你的网站。

cd ..
npm run build

接下来，你需要部署你的网站。

cd .github/workflows

编辑main.yml文件，如下所示：

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - run: npm install
      - run: npm run build
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: docs # The folder the action should deploy.

接下来，你需要提交你的代码。

git add .
git commit -m "Deploy to GitHub Pages"
git push origin main

接下来，你的网站就可以在GitHub Pages上访问了。

你的网站的URL是：<你的用户名>.github.io/<你的仓库名>

你也可以使用其他静态站点托管服务，如Vercel或Netlify。