【教程】使用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 Pages

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

  workflow_dispatch:

jobs:
  deploy-and-sync:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4
        with:
          ref: 'master'

      - name: Install yarn
        run: corepack enable

      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install

      - name: Build Site
        run: npm run docs:build

      # 将文档产物提交到gh-pages分支
      - name: Deploy for Github 🚀
        uses: JamesIves/github-pages-deploy-action@v4.4.1
        with:
          branch: gh-pages
          folder: docs/.vitepress/dist
          # enable single-commit to reduce the repo size
          single-commit: true
          clean: 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/',
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/568574.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

jvm知识点总结(一)

JVM的跨平台 java程序一次编写到处运行。java文件编译生成字节码,jvm将字节码翻译成不同平台的机器码。 JVM的语言无关性 JVM只是识别字节码,和语言是解耦的,很多语言只要编译成字节码,符合规范,就能在JVM里运行&am…

信息系统项目管理师0066:过程管理(5信息系统工程—5.1软件工程—5.1.6过程管理)

点击查看专栏目录 文章目录 5.1.6过程管理1.成熟度模型2.成熟度等级5.1.6过程管理 软件过程能力是组织基于软件过程、技术、资源和人员能力达成业务目标的综合能力。包括治理能力、开发与交付能力、管理与支持能力、组织管理能力等方面。软件过程能力成熟度是指组织在提升软件产…

[Qt的学习日常]--初识Qt

前言 作者:小蜗牛向前冲 名言:我可以接受失败,但我不能接受放弃 如果觉的博主的文章还不错的话,还请点赞,收藏,关注👀支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、Qt的基本…

docker容器技术篇:容器集群管理实战mesos+zookeeper+marathon(一)

容器集群管理实战mesoszookeepermarathon(一) mesos概述 1.1 Mesos是什么 Apache Mesos 是一个基于多资源调度的集群管理软件,提供了有效的、跨分布式应用或框架的资源隔离和共享,可以运行 Hadoop、Spark以及docker等。 1.2 为…

C++中的list类模拟实现

目录 list类模拟实现 list类节点结构设计 list类非const迭代器结构设计 迭代器基本结构设计 迭代器构造函数 operator()函数 operator*()函数 operator!()函数 operator(int)函数 operator--()函数 operator--(int)函数 operator()函数 operator->()函数 list…

鸿蒙OpenHarmony【LED外设控制】 (基于Hi3861开发板)

概述 OpenHarmony WLAN模组基于Hi3861平台提供了丰富的外设操作能力,包含I2C、I2S、ADC、UART、SPI、SDIO、GPIO、PWM、FLASH等。本文介绍如何通过调用OpenHarmony的NDK接口,实现对GPIO控制,达到LED闪烁的效果。其他的IOT外设控制&#xff0…

C++ | Leetcode C++题解之第45题跳跃游戏II

题目&#xff1a; 题解&#xff1a; class Solution { public:int jump(vector<int>& nums) {int maxPos 0, n nums.size(), end 0, step 0;for (int i 0; i < n - 1; i) {if (maxPos > i) {maxPos max(maxPos, i nums[i]);if (i end) {end maxPos;s…

Opencv_10_自带颜色表操作

void color_style(Mat& image); Opencv_10_自带颜色表操作&#xff1a; void ColorInvert::color_style(Mat& image) { int colormap[] { COLORMAP_AUTUMN, COLORMAP_BONE , COLORMAP_JET , COLORMAP_WINTER, COLORMAP_RAINBOW , COLOR…

parallels desktop19.3最新版本软件新功能详细介绍

Parallels Desktop是一款运行在Mac电脑上的虚拟机软件&#xff0c;它允许用户在Mac系统上同时运行多个操作系统&#xff0c;比如Windows、Linux等。通过这款软件&#xff0c;Mac用户可以轻松地在同一台电脑上体验不同操作系统的功能和应用程序&#xff0c;而无需额外的硬件设备…

40. UE5 RPG给火球术增加特效和音效

前面&#xff0c;我们将火球的转向和人物的转向问题解决了&#xff0c;火球术可以按照我们的想法朝向目标发射。现在&#xff0c;我们解决接下来的问题&#xff0c;在角色释放火球术时&#xff0c;会产生释放音效&#xff0c;火球也会产生对应的音效&#xff0c;在火球击中目标…

如何进行制造设备数据汇集,发挥数据的价值?

数字化转型正深刻推动制造企业实现远程监控、提高生产效率、降低生产成本、优化产品质量及明晰精细化方向。并且工业互联网的发展离不开工业数据的应用&#xff0c;而制造设备数据汇集正是应用的基础。但制造设备数据汇集存在以下难点及痛点&#xff1a; 1、安全把控难 关键的…

Python 面向对象——5.多态

本章学习链接如下&#xff1a; Python 面向对象——1.基本概念 Python 面向对象——2.类与对象实例属性补充解释&#xff0c;self的作用等 Python 面向对象——3.实例方法&#xff0c;类方法与静态方法 Python 面向对象——4.继承 1.基本概念 多态是面向对象编程&#x…

2024,2025(专家期)

2024&#xff0c;2025&#xff08;专家期&#xff09; 目录概述需求&#xff1a; 设计思路实现思路分析1.另一种的方式&#xff1a; 2.按照自己的职业规划进行发展 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,ful…

安全小课堂丨什么是暴力破解?如何防止暴力破解

什么是暴力破解&#xff1f; 暴力破解也可称为穷举法、枚举法&#xff0c;是一种比较流行的密码破译方法&#xff0c;也就是将密码进行一一推算直到找出正确的密码为止。比如一个6位并且全部由数字组成的密码&#xff0c;可能有100万种组合&#xff0c;也就是说最多需要尝试10…

学习配置文件

1.yml的语法格式问题&#xff1a; 2.配置文件获取数据&#xff1a; Value方式&#xff1a; Environment&#xff1a; 获取自定义对象的方式&#xff1a; 设置get和set方法&#xff0c;还有toString方法。 3. 日志配置&#xff1a; logo的配置&#xff1a; 日志插件&#xff…

SpringBoot xxl-job 任务调度

首先官网下载xxl-job的源代码&#xff0c;然后切换到jdk8&#xff0c;等Maven下载依赖 执行mysql的脚本&#xff0c;修改连接配置&#xff0c;启动admin站点 默认地址 http://localhost:8080/xxl-job-admin/ 先新增一个任务执行器&#xff0c;指向未来任务代码的站点 然后在…

[论文笔记] EcomGPT:COT扩充数据的电商大模型

社区供稿 | EcomGPT:基于任务链数据的电商大模型(附魔搭推理实践) - 知乎 https://arxiv.org/pdf/2312.15696.pdf EcomInstruct指令数据集构建 数据集组成 COT方式构造垂域训练数据:把原本的垂域任务分解成了原子任务,构造了基于解决原子任务的数据。这样能用类似…

OpenTelemetry-2.Go接入Jaeger(grpc,gin-http)

目录 1.什么是OpenTelemetry 2.搭建jaeger 3.链路追踪 本地调用 远程调用 GRPC proto server端 client端 Gin-HTTP 调用流程 api1 api2 grpc 4.完整代码 1.什么是OpenTelemetry 参考&#xff1a;OpenTelemetry-1.介绍-CSDN博客 2.搭建jaeger 参考&#xff1a;…

Rest微服务案例

Rest 父工程构建microservicecloud-api公共子模块Modulemicroservicecloud-provider-dept-8001部门微服务提供者Modulemicroservicecloud-consumer-dept-80部门微服务消费者Module 以Dept部门模块做一个微服务通用案例 Consumer消费者&#xff08;Client&#xff09;通过REST调…

阿里开源黑白图片上色算法DDColor的部署与测试并将模型转onnx后用c++推理

阿里开源黑白图片上色算法DDColor的部署与测试并将模型转onnx后用c推理 文章目录 阿里开源黑白图片上色算法DDColor的部署与测试并将模型转onnx后用c推理简介环境部署下载源码安装环境下载模型 测试一下看看效果模型转onnx测试一下生成的onnx模型看看效果C 推理 简介 DDColor是…
最新文章