【教程】使用vitepress搭配githubPages构建自己的在线笔记

1. 创建VitePress项目

确保自己已经安装好了node，我这个笔记用的是node 18.16.0,
怎么安装nvm这个可以csdn或者掘金，再或者等我有空了我就更新一下

1. 使用nvm安装node

# 查看可用版本
nvm list avaliable
# 安装node
nvm install 18.16.0
# 切换node
nvm use 18.16.0 
1
2
3
4
5
6

2. 创建vitepress项目

# 首先全局安装vitepress
npm install -D vitepress 
# 创建一个项目文件夹
mkdir notes
cd notes
# 使用vitepress自带的npx初始化
npx vitepress init
1
2
3
4
5
6
7

3. 配置vitepress

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  notes（你的项目名称）
│
◇  Site description:
│  后端仔的笔记（你的项目介绍）
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4. 运行

npm run docs:dev
1

2. 推送项目到github

1. 在GitHub创建一个项目
2. 给当前文件夹配置远程仓库

# 在项目的根目录初始化git
git init
# 添加远程仓库地址
git remote add origin git@github.com:youname/notes.git
1
2
3
4

3. 在项目根目录创建.gitignore文件

/node_modules/
/.idea/
1
2

4. 提交代码到远程仓库

# 检查文件状态
git status
# 添加文件被git管理
git add *
# 提交
git commit -m 初始化提交
# 推送远程
git push origin
1
2
3
4
5
6
7
8

3. 创建github部署脚本

最终要在GitHub的Pages展示的所以创建一个部署脚本，参考十分钟使用vitepress+github action+gitee pages 搭建你的专属文档

1. 在项目根目录创建 .github/workflows文件夹,然后在这个文件夹下创建deploy.yml
   因为我不需要gitee的Pages所以下边的配置就被我删除了

name: Deploy VitePress site to Pages

on:
  push:
    # 推送任意tags或者master分支推送的时候触发任务
    tags:
      - '*'
    branches:
      - master

  workflow_dispatch:

jobs:
  deploy-and-sync:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】