前提条件

电脑已经装了node.js(16以上版本)、编译器vscode

一、开始搭建

在不包含中文的文件夹下创建一个 vuepressblog （自定义文件夹名称）

然后进入vuepressblog文件夹，执行下面的命令：

pnpm create vuepress-theme-hope@next docs

注意：pnpm命令刚开始是没有装的需要安装

二、了解目录结构

├── .github (可选的) → GitHub 配置文件存放路径
·     └── workflow → GitHub 工作流配置
│         └── docs-deploy.yml → 自动部署文档的工作流
|── dist (默认的) → 构建输出目录
|
├── docs → 由你指定的项目文件夹
│    │
│    ├── .vuepress (可选的) → VuePress 配置文件夹
│    │    │
│    │    ├── dist (默认的) → 构建输出目录
│    │    │
│    │    ├── public (可选的) → 静态资源目录
│    │    │
│    │    ├── styles (可选的) → 用于存放样式相关的文件
│    │    │
│    │    ├── config.{js,ts} (可选的) → 配置文件的入口文件
│    │    │
│    │    └── client.{js,ts} (可选的) → 客户端文件
│    │
│    ├── ... → 其他项目文档
│    │
│    └── README.md → 项目主页
│
└── package.json → Nodejs 配置文件
└── pnpm-lock.yaml

然后可以自定义目录结构：

导航栏和左边框目录

对于导航栏部分：

这一部分需要了解导航栏结构，下拉，点击页面是如何跳转的，才能修改相应配置

左边目录导航：

开发启动测试

三、熟悉相应的

可以直接看官网

vuepress-theme-hope.github.io/v2/zh/cookb…

//构建项目 
pnpm run docs:build

//开发 启动项目
npm run docs:dev

部署方式

部署到github上，在github仓库打开githubPage

本地ssh绑定github和启用githubPage

在部署之前，需要修改分支的名称，默认是master分支

1、拉取仓代码

//随便找到一个文件夹，将代码克隆下来
git clone git@github.com:abc/abc.github.io.git

//然后进入该文件夹
//cd 命令
cd abc.github.io

即可将你需要的代码复制到该文件夹下

提交代码

git add .
//提交代码
git commit -m "提交代码"
//上传代码
git push

即可提交代码成功！

2、手动一键部署

deploy.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
pnpm run docs:build

# 进入生成的静态文件的文件夹中
cd ./dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
git push -f git@github.com:abc/abc.github.io.git main

# 如果发布到 https://<USERNAME>.github.io/<REPO>
#git push -f git@github.com:abc/abc.github.io.git main:gh-pages

cd -

使用命令

即可执行：

sh deploy.sh

Vuepress博客搭建