如何选定目标关键词及网站栏目名称的确定,云商城是合法的吗,设计网名姓氏,杭州设计网站的公司从零开始-VitePress 构建个人博客上传GitHub自动构建访问
序言 VitePress 官网#xff1a;VitePress 中文版 1. 什么是 VitePress VitePress 是一个静态站点生成器 (SSG)#xff0c;专为构建快速、以内容为中心的站点而设计。简而言之#xff0c;VitePress 获取用 Markdown…从零开始-VitePress 构建个人博客上传GitHub自动构建访问
序言 VitePress 官网VitePress 中文版 1. 什么是 VitePress VitePress 是一个静态站点生成器 (SSG)专为构建快速、以内容为中心的站点而设计。简而言之VitePress 获取用 Markdown 编写的内容对其应用主题并生成可以轻松部署到任何地方的静态 HTML 页面。 2、性能 快速的初始加载加载完成后可以快速切换高效的交互 一、项目构建
1、新建GitHub博客项目 2、将项目clone到本地
3、cd到项目目录
二、安装依赖配置
1、安装pnpm 推荐使用 pnpm安装pnpm npm install -g pnpm2、安装vitepress
pnpm add vitepress -D
# or
yarn add vitepress -D3、初始化 VitePress
pnpm vitepress init初始化之后会有对应的项目问题需要进行填写示例如下 建议在第一项改成.docs目录以便它与项目的其余部分分开。
4、初步项目目录
├─ blog
│ ├——─ .vitepress //当前目录所在的位置就是文档的根目录 最核心的目录|--
│ │ └─ config.mjs //项目的配置文件,最重要
│ ├─ api-examples.md
│ ├─ markdown-examples.md
│ └─ index.md
└─ package.json.vitepress最核心的目录theme目录。自定义主题配置css样式等config.mjs。最核心的文件各种配置导航栏、侧边栏、标题什么的都是在这里node_modules。安装的依赖api-exampl es.md和markdown-examples.md。官方给的两个示例index.md。主页相关package.json包管理工具需要用的
5、启动项目
pnpm run docs:dev项目启动后会允许根目录下的index.md,在项目里面所有的md文档均会被编译为html,这里项目的根目录被设置为了./docs,因此会先运行/docs/index.md以下所有介绍的根目录均代表./docs目录下 GitHub自动化构建发布
1、添加.gitignore忽略文件 防止node_module等文件被上传到GitHub上 .idea
.DS_Store
node_modules
dist2、部署到GitHub
git add .git commit -m feat: create init -ngit push origin master3、进入GitHub项目- Action 选择构建流-一般直接选默认的Simple workflow 构建流 4、修改构建配置文件 初次进入是默认的构建文件我们可以进入vitepress官网找到官方提供的配置文件 copy官方提供的配置文件到github中修改名称deploy.yml 5、‼️非常关键的一步修改构建流程命令 官网提供的构建指令是基于npm而我们选择了pnpm因此要将构建指令根据具体的项目更改 # 官方的默认指令- name: Setup Pagesuses: actions/configure-pagesv4- name: Install dependenciesrun: npm ci # 或 pnpm install / yarn install / bun install- name: Build with VitePressrun: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build# 基于pnpm修改后- name: Setup Pagesuses: actions/configure-pagesv4- name: pnpm install- run: npm i -g pnpm- name: Install dependenciesrun: pnpm install # 或 pnpm install / yarn install / bun install- name: Build with VitePressrun: pnpm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run 提交配置文件 6、进入Action 开始自动化构建
