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

2024-04-23 15:12

本文主要是介绍【教程】使用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. 创建vitepress项目
# 首先全局安装vitepress
npm install -D vitepress 
# 创建一个项目文件夹
mkdir notes
cd notes
# 使用vitepress自带的npx初始化
npx vitepress init
  1. 配置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. 运行
npm run docs:dev

2. 推送项目到github

  1. 在GitHub创建一个项目
  2. 给当前文件夹配置远程仓库
# 在项目的根目录初始化git
git init
# 添加远程仓库地址
git remote add origin git@github.com:youname/notes.git
  1. 在项目根目录创建.gitignore文件
/node_modules/
/.idea/
  1. 提交代码到远程仓库
# 检查文件状态
git status
# 添加文件被git管理
git add *
# 提交
git commit -m 初始化提交
# 推送远程
git push origin

3. 创建github部署脚本

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

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

name: Deploy VitePress site to Pageson:push:# 推送任意tags或者master分支推送的时候触发任务tags:- '*'branches:- masterworkflow_dispatch:jobs:deploy-and-sync:runs-on: ubuntu-lateststeps:- name: Checkout 🛎️uses: actions/checkout@v4with:ref: 'master'- name: Install yarnrun: corepack enable- uses: actions/setup-node@v3with:node-version: '18'cache: 'yarn'- name: Install dependenciesrun: yarn install- name: Build Siterun: npm run docs:build# 将文档产物提交到gh-pages分支- name: Deploy for Github 🚀uses: JamesIves/github-pages-deploy-action@v4.4.1with:branch: gh-pagesfolder: docs/.vitepress/dist# enable single-commit to reduce the repo sizesingle-commit: trueclean: true#      - name: Sync to Gitee
#        uses: wearerequired/git-mirror-action@v1.2.0
#        env:
#          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
#        with:
#          # GitHub 仓库地址
#          source-repo: git@github.com:chargeduck/notes.git
#          # Gitee 仓库地址
#          destination-repo: git@gitee.com:chargeduck/notes.git
#
#      - name: Build Gitee Pages
#        uses: yanglbme/gitee-pages-action@main
#        with:
#          # 替换为你的 Gitee 用户名
#          gitee-username: chargeduck
#          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
#          gitee-password: ${{ secrets.GITEE_PASSWORD }}
#          # 注意替换为你的 Gitee 仓库,仓库名严格区分大小写,请准确填写,否则会出错
#          gitee-repo: chargeduck/notes
#          # 要部署的分支,默认是 master,若是其他分支,则需要指定(指定的分支必须存在)
#          branch: gh-pages
  1. 按照上边的步骤把这个文件提交到github上

4. Pages配置

  1. 打开github的仓库地址,找到Settings,选择Pages
  2. 在右侧的 Build and deployment下边的Source选择Deploy form a branch
  3. 在下边的Branch中选择gh-pages分支 /(root)默认然后保存即可

5. 遇到的问题

1. 提交之后没有生成gh-pages分支

第一次是因为 deploy.yml没有放到.github/workflow文件夹下

2. 工作流执行错误记录

修改了deploy.yml位置正确后还是没有创建gh-pages分支
点击仓库的Actions选项,在页面上的All Workflows中找到失败的job

1. Dependencies lock file is not found in /home/runner/work/notes/notes. Supported file patterns: yarn.lock

deploy.yml中执行了yarn来打包和管理依赖,但是项目里边没有yarn.lock文件

  1. 执行命令
yarn install

这个时候我的node版本还是16.0.0,他报错vite@5.0.10: The engine "node" is incompatible with this module. Expected version "^18.0.0 || >=20.0.0". Got "16.20.0"
再执行

nvm list available
nvm install 18.16.0
nvm use 18.16.0
# 再次执行项目出现 yarn.lock 
yarn install
# 把yarn.lock提交到github上

2. The deploy step encountered an error: The process ‘/usr/bin/git’ failed with exit code 128

提示我没有权限,按照上边csdn老哥的步骤。

在 GitHub 项目的Settings -> Actions -> General路径下配置Fork pull request workflows from outside collaboratorsRequire approval for first-time contributors who are new to GitHub

Workflow permissions配置为Read and write permissions

3.本地正常上传到github上之后没有样式

config.mts中忘记添加base

export default defineConfig({// 这个要和自己的仓库地址一致base: '/notes/',
})

这篇关于【教程】使用vitepress搭配githubPages构建自己的在线笔记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/929143

相关文章

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码,有一段代码涉及到Cursor,感觉写法挺有意思的。注意是Cursor,而不是Consumer

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

MySQL zip安装包配置教程

《MySQLzip安装包配置教程》这篇文章详细介绍了如何使用zip安装包在Windows11上安装MySQL8.0,包括下载、解压、配置环境变量、初始化数据库、安装服务以及更改密码等步骤,感兴趣的朋... 目录mysql zip安装包配置教程1、下载zip安装包:2、安装2.1 解压zip包到安装目录2.2

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例:行注释2. 块注释示例:块注释3. 文档注释示例:文档注释4. 综合示例总结Rust 中的注释

Linux使用cut进行文本提取的操作方法

《Linux使用cut进行文本提取的操作方法》Linux中的cut命令是一个命令行实用程序,用于从文件或标准输入中提取文本行的部分,本文给大家介绍了Linux使用cut进行文本提取的操作方法,文中有详... 目录简介基础语法常用选项范围选择示例用法-f:字段选择-d:分隔符-c:字符选择-b:字节选择--c

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

springboot的调度服务与异步服务使用详解

《springboot的调度服务与异步服务使用详解》本文主要介绍了Java的ScheduledExecutorService接口和SpringBoot中如何使用调度线程池,包括核心参数、创建方式、自定... 目录1.调度服务1.1.JDK之ScheduledExecutorService1.2.spring

Java使用Tesseract-OCR实战教程

《Java使用Tesseract-OCR实战教程》本文介绍了如何在Java中使用Tesseract-OCR进行文本提取,包括Tesseract-OCR的安装、中文训练库的配置、依赖库的引入以及具体的代... 目录Java使用Tesseract-OCRTesseract-OCR安装配置中文训练库引入依赖代码实

Python使用Pandas对比两列数据取最大值的五种方法

《Python使用Pandas对比两列数据取最大值的五种方法》本文主要介绍使用Pandas对比两列数据取最大值的五种方法,包括使用max方法、apply方法结合lambda函数、函数、clip方法、w... 目录引言一、使用max方法二、使用apply方法结合lambda函数三、使用np.maximum函数