使用VuePress生成静态网站并部署到github-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用VuePress生成静态网站并部署到github。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用VuePress生成静态网站并部署到github

第一步安装VuePress

VuePress是一个基于Vue驱动的静态网站生成器

相关资料

文档：https://v1.vuepress.vuejs.org/zh/
github: https://github.com/vuejs/vuepress
vuepress-deploy: https://github.com/jenkey2011/vuepress-deploy/

安装

pnpm i vuepress

目录结构

$ tree -I node_modules -a
.
├── .github
│   └── workflows
│       └── vuepress-deploy.yml     # 自动部署到github
├── README.md
├── docs                            # 博客目录
│   ├── .vuepress        
│   │   └── config.js               # 配置文件
│   └── README.md                   # 博客首页 
├── package.json
└── pnpm-lock.yaml

依赖配置 package.json

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "dependencies": {
    "vuepress": "^1.9.9"
  }
}

站点配置config.js

module.exports = {
  // 此处填写部署路径 https://mouday.github.io/hello-vuepress
  base: "/hello-vuepress/",
  title: "VuePress 示例",
  description: "这是一个使用VuePress搭建的示例站点",
};

启动

# 安装依赖
pnpm i

# 运行开发环境
npm run dev

# 运行打包
npm run build

第二步书写博客

使用markdown语法书写博客文章

第二步部署到github

自动部署 vuepress-deploy.yml

# doc https://github.com/jenkey2011/vuepress-deploy/

name: Build and Deploy
on: [push]

permissions:
  pull-requests: write
  issues: write
  repository-projects: write

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: vuepress-deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        TARGET_REPO: ${{ env.GITHUB_REPOSITORY }}
        TARGET_BRANCH: dist
        BUILD_SCRIPT: yarn && yarn build
        BUILD_DIR: docs/.vuepress/dist