Table of contents
The first step is to install VuePress
VuePress is a Vue-driven static website generator
Relevant information
- Documentation: https://v1.vuepress.vuejs.org/zh/
- github: https://github.com/vuejs/vuepress
- vuepress-deploy: https://github.com/jenkey2011/vuepress-deploy/
Install
pnpm i vuepress
Directory Structure
$ tree -I node_modules -a
.
├── .github
│ └── workflows
│ └── vuepress-deploy.yml # 自动部署到github
├── README.md
├── docs # 博客目录
│ ├── .vuepress
│ │ └── config.js # 配置文件
│ └── README.md # 博客首页
├── package.json
└── pnpm-lock.yaml
Dependency configuration package.json
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
"dependencies": {
"vuepress": "^1.9.9"
}
}
Site configuration config.js
module.exports = {
// 此处填写部署路径 https://mouday.github.io/hello-vuepress
base: "/hello-vuepress/",
title: "VuePress 示例",
description: "这是一个使用VuePress搭建的示例站点",
};
start up
# 安装依赖
pnpm i
# 运行开发环境
npm run dev
# 运行打包
npm run build
The second step is to write a blog
Write blog posts using markdown syntax
The second step is to deploy to github
Automatically deploy 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
Complete code address: https://github.com/mouday/hello-vuepress
Preview address: https://mouday.github.io/hello-vuepress