第一步 安裝VuePress
VuePress是一個(gè)基于Vue驅(qū)動(dòng)的靜態(tài)網(wǎng)站生成器
相關(guān)資料
- 文檔：https://v1.vuepress.vuejs.org/zh/
- github: https://github.com/vuejs/vuepress
- vuepress-deploy: https://github.com/jenkey2011/vuepress-deploy/
安裝
pnpm i vuepress
目錄結(jié)構(gòu)
$ tree -I node_modules -a
.
├── .github
│ └── workflows
│ └── vuepress-deploy.yml # 自動(dòng)部署到github
├── README.md
├── docs # 博客目錄
│ ├── .vuepress
│ │ └── config.js # 配置文件
│ └── README.md # 博客首頁(yè)
├── package.json
└── pnpm-lock.yaml
依賴配置 package.json
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
"dependencies": {
"vuepress": "^1.9.9"
}
}
站點(diǎn)配置config.js
module.exports = {
// 此處填寫部署路徑 https://mouday.github.io/hello-vuepress
base: "/hello-vuepress/",
title: "VuePress 示例",
description: "這是一個(gè)使用VuePress搭建的示例站點(diǎn)",
};
啟動(dòng)
# 安裝依賴
pnpm i
# 運(yùn)行開發(fā)環(huán)境
npm run dev
# 運(yùn)行打包
npm run build
第二步 書寫博客
使用markdown語(yǔ)法書寫博客文章
第二步 部署到github
自動(dòng)部署 vuepress-deploy.yml文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-514030.html
# 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
完整代碼地址：https://github.com/mouday/hello-vuepress
預(yù)覽地址：https://mouday.github.io/hello-vuepress文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-514030.html
到了這里，關(guān)于使用VuePress生成靜態(tài)網(wǎng)站并部署到github的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
