前言
?作者：TuNan
?個(gè)人主頁(yè)：圖南的個(gè)人主頁(yè)
??歡迎關(guān)注??點(diǎn)贊??收藏?留言??
1.新建一個(gè)blog文件夾
先決條件
- Node.js 版本 16 或更高版本。
- 用于通過(guò)命令行界面（CLI）訪問(wèn) VitePress 的終端。
- 具有 Markdown 語(yǔ)法支持的文本編輯器。推薦使用 VSCode) 以及官方 Vue 擴(kuò)展。
VitePress 可以單獨(dú)使用，也可以安裝到現(xiàn)有項(xiàng)目中。在這兩種情況下，你都可以使用以下命令安裝它：
2.安裝vitePress
在命令行輸入以下命令
npm install -D vitepress
3.設(shè)置向?qū)?/h3>
執(zhí)行以下命令
第一個(gè)是讓你選你文檔存放的目錄
第二個(gè)是文檔的名稱(chēng)
第三個(gè)是文檔的描述
第四個(gè)是文檔的主題
npx vitepress init
執(zhí)行完以上步驟后就會(huì)得到以下一個(gè)目錄結(jié)構(gòu)
如果你正在構(gòu)建獨(dú)立的 VitePress 站點(diǎn)，你可以在當(dāng)前目錄（./）中搭建該站點(diǎn)。但是，如果你在現(xiàn)有項(xiàng)目中與其他源代碼一起安裝 VitePress，建議將站點(diǎn)搭建在嵌套目錄中（例如 ./docs），以便與項(xiàng)目的其余部分分開(kāi)。
假設(shè)你選擇在 ./docs 中搭建 VitePress 項(xiàng)目，生成的文件結(jié)構(gòu)應(yīng)如下所示：
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ api-examples.md
│ ├─ markdown-examples.md
│ └─ index.md
└─ package.json
4.修改路徑
使用vscode或者webstorm打開(kāi)我們剛創(chuàng)建的項(xiàng)目，在我們的代碼里加上base: “/你的文件名/”
我這里就是blog
base:'/blog/',
5.推送至github
打開(kāi)我們的倉(cāng)庫(kù)選擇github pages選擇github Actions
選擇以下內(nèi)容
6.替換yml配置
將文件名改為deploy再將以下內(nèi)容替換為：
如果你是從github創(chuàng)建的倉(cāng)庫(kù)那么倉(cāng)庫(kù)的分支為main就需要修改以下內(nèi)容的master為main
如果你是跟我上面的一樣操作就不需要修改
name: Deploy
on:
workflow_dispatch: {}
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: actions/setup-node@v3
with:
node-version: 16
cache: npm
- run: npm ci
- name: Build
run: npm run docs:build
- uses: actions/configure-pages@v2
- uses: actions/upload-pages-artifact@v1
with:
path: docs/.vitepress/dist
- name: Deploy
id: deployment
uses: actions/deploy-pages@v1
7.查看項(xiàng)目是否部署成功
回到我們的頁(yè)面點(diǎn)擊下面鏈接就可以看到我們的項(xiàng)目部署成功了
后記
你好，我是博主
圖南，有問(wèn)題可以留言評(píng)論或者私信我，大家一起交流學(xué)習(xí)！后面更新詳細(xì)的配置教程
不過(guò)都看到這里啦，點(diǎn)個(gè)贊吧?????文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-760694.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-760694.html
到了這里，關(guān)于5分鐘使用VitePress + GithubAction搭建個(gè)人博客的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
