VuePress指南：动手构建、部署站点，开启PWA

1. 创建VuePress项目

步骤一：安装VuePress

在终端中输入命令npm install -g vuepress安装VuePress。

步骤二：初始化项目

导航到您要创建项目的目录，输入vuepress init my-vuepress-blog，创建一个名为my-vuepress-blog的新项目。

2. 创建内容

步骤一：添加页面

在项目目录下的docs文件夹中，创建一个新的文件home.md，这是您的首页。您可以使用Markdown编写内容。

步骤二：添加导航栏

在项目根目录下的.vuepress/config.js文件中，找到themeConfig对象，添加以下代码：

  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '关于', link: '/about/' },
      { text: '联系', link: '/contact/' }
    ]
  }

3. 预览和构建

步骤一：预览项目

在终端中输入vuepress dev，启动本地服务器并预览项目。

步骤二：构建项目

在终端中输入vuepress build，构建项目。

4. 部署项目

步骤一：使用GitHub Pages部署

在项目根目录下，创建一个名为.github的文件夹，在其中创建一个名为workflows的文件夹，然后在workflows文件夹中创建一个名为main.yml的文件。将以下代码复制到main.yml文件中：

name: Deploy VuePress to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: '${{ secrets.GITHUB_TOKEN }}'
          publish_dir: './dist'

步骤二：使用Coding Pages部署

在项目根目录下，创建一个名为.coding的文件夹，在其中创建一个名为workflows的文件夹，然后在workflows文件夹中创建一个名为main.yml的文件。将以下代码复制到main.yml文件中：

name: Deploy VuePress to Coding Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: cycjimmy/action-gh-pages@v2
        with:
          repo_token: '${{ secrets.CODING_TOKEN }}'
          publish_dir: ./dist

5. 开启PWA

步骤一：安装插件

在终端中输入npm install -D vuepress-plugin-pwa，安装VuePress PWA插件。

步骤二：配置插件

在项目根目录下的.vuepress/config.js文件中，找到plugins数组，添加以下代码：

  plugins: [
    ['vuepress-plugin-pwa', {
      serviceWorker: true
    }]
  ]

6. 自动部署

步骤一：配置Netlify

在Netlify网站上创建一个账户，并连接您的GitHub或Coding仓库。

步骤二：配置自动部署

在Netlify网站上，导航到您的项目页面，点击“Build & Deploy”选项卡，然后选择“Continuous Deployment”。选择您要部署的分支，并点击“Save”按钮。

7. 总结

按照本指南，您已经成功创建、部署并启用了PWA的VuePress站点。无论您是开发人员、博主或技术文档作者，VuePress都能为您提供强大的平台。通过本文，您掌握了搭建VuePress站点的技能，并了解了如何部署和启用PWA。期待您使用VuePress创建出精彩的内容，与世界分享您的知识和经验。