首页 > 其他分享 >使用VitePress+Github Pages搭建VitePress网站(亲测有效)

使用VitePress+Github Pages搭建VitePress网站(亲测有效)

时间:2024-10-27 11:18:50浏览次数:5  
标签:git name docs github Github VitePress 2.5 亲测

1.安装Termux

请自行到Github Releases下载地址下载。
此处提供加速链接地址:gh.llkk.cc加速服务

2.安装软件包

执行命令换源

termux-change-repo

选择第一项回车–>第三项回车

安装软件

pkg i git nodejs vim openssh

2.5 配置ssh连接秘钥(可选)

为了方便之后上传MarkDown文件,我们可以配置秘钥来直接连接Github(前提:Git执行的仓库为[email protected])。当然,不配置也是可行的,但使用HTTPS和HTTP连接需要配置私人令牌作为密码。

2.5.1 查看令牌是否存在
cd ~
ls ./.ssh
# 如果ls的结果中id_rsa和id_rsa.pub,跳过2.5.2步骤
2.5.2 生成令牌

执行命令

ssh-keygen -t rsa
# 一路回车即可
2.5.3 查看令牌

执行命令

cat ./.ssh/id_rsa.pub

复制框内内容
复制红框内容

2.5.4 安装令牌

请在Github个人设置中,找到SSH and GPG keys,New SSH Key,并将复制的文字粘贴到Key字段。
随后执行命令

ssh -T [email protected]

(2.5步骤参考了博主的教程)

3.初始化VitePress

执行命令

cd ~
npm config set registry https://registry.npmmirror.com 
# 国内用户建议换源,国外用户可不换
npm install vitepress -g
mkdir docs
cd docs
vitepress init

随后会让你输入配置文件目录,如果无特殊需求,建议直接设为默认路径。如果设置了其他的,请务必记住此路径。

4.上传

在Github中建立 用户名.github.io 仓库,若已被占用可以用其他名称代替:

Github仓库名称                网站地址
username.github.io          username.github.io
docs                        username.github.io/docs

如果你设置了如同第2项的仓库名称,请将.vitepress/config.mts中base选项设为仓库名称。

4.1 写deploy.yml

执行命令

mkdir .github&&cd .github
mkdir workflows&&cd workflows
touch deploy.yml

此处可以使用第三方软件打开deploy.yml进行编辑,将以下内容粘贴至deploy.yml

# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
#
name: Deploy VitePress site to Pages
  
on:  # 在针对 `main` 分支的推送上运行。如果你  # 使用 `master` 分支作为默认分支,请将其更改为 `master`  
  push:    
    branches: [main]  # 允许你从 Actions 选项卡手动运行此工作流程  
  workflow_dispatch:
permissions:  
  contents: read  
  pages: write  
  id-token: write# 只允许同时进行一次部署,跳过正在运行和最新队列之间的运行队列# 但是,不要取消正在进行的运行,因为我们希望允许这些生产部署完成
concurrency:  
  group: pages  
  cancel-in-progress: false

jobs:  # 构建工作  
  build:    
    runs-on: ubuntu-latest    
    steps:
      - name: Checkout        
        uses: actions/checkout@v4                
        with:          
          fetch-depth: 0 # 如果未启用 lastUpdated,则不需要      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm,请取消此区域注释      #   with:      #     version: 9      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun,请取消注释      
      - name: Setup Node        
        uses: actions/setup-node@v4        
        with:         
          node-version: 20              
          cache: npm # 或 pnpm / yarn      
      - name: Setup Pages       
        uses: actions/configure-pages@v4      
      - name: Install dependencies       
        run: npm install # 或 pnpm install / yarn install / bun install      
      - name: Build with VitePress      
        run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build     
      - name: Upload artifact       
        uses: actions/upload-pages-artifact@v3      
        with:     
           path: .vitepress/dist  # 部署工作  
  deploy:    
    environment:      
      name: github-pages     
      url: ${{ steps.deployment.outputs.page_url }}    
    needs: build   
    runs-on: ubuntu-latest 
    name: Deploy  
    steps:  
      - name: Deploy to GitHub Pages        
        id: deployment     
        uses: actions/deploy-pages@v4

如果你的配置目录为自定义,请自行更改deploy前path的目录。例:
./ – .vitepress/dist
./docs – docs/.vitepress/dist

4.2 上传文件

执行命令

cd docs
git init
git set config --global user.name "yourusername"
git set config --global user.email "[email protected]"
# 请自行替换user.name与user.email
git branch -m "main"
git add .
git commit -m "xxxxxxxxxx"
# commit名称可自定义
git remote add origin [email protected]
# 请自行替换[email protected],必须为ssh形式
git push -u origin "main"

随后打开仓库Actions界面,发现已经部署完成了。
之后想要更改网页,可以直接在网页Github更改md文件,也可以在本地更改再推送上去。如果无问题,请不要乱动Pages设置。

可以看看我的成功案例:点击打开

标签:git,name,docs,github,Github,VitePress,2.5,亲测
From: https://blog.csdn.net/2401_86574164/article/details/143261337

相关文章

  • 如何下载GitHub的文件
    下载GitHub上的文件或项目步骤:1.直接下载ZIP文件;2.使用Git克隆;3.GitHubDesktop;4.下载单个文件;5.使用第三方工具或平台。​​GitHub作为一个全球最大的开源及私有软件项目的托管平台,经常成为技术人员搜索和下载代码的首选之地。1.直接下载ZIP文件GitHub提供了直接下载仓......
  • 解决国内 github.com 打不开的最最最准确方法
    解决国内github.com打不开的最最最准确方法我们编程的有时候打不开github.com,很烦恼,也很气愤,我有一个方法,试了,可以。如果有谁也打不开也可以试试。1、打开网站 https://tool.chinaz.com/dns/,在A类型填写github.com,点击按钮【立即检测】。2、下拉,看到如下界面。3、随便复......
  • 小北在GitHub上克隆项目(超详细的图文并解)之用 Python 对图片和视频进行高清修复
    前言    估计友友们应该在网上看过很多用AI修复的高清视频,最近我也有相关需求,需要修复几张图片。于是便去GitHub上寻找相关开源项目,结果还真找到一个,效果还很不错,小北这里特意分享出来给友友们~Real-ESRGAN对于算法小白的上手还是比较容易的,即便不懂算法知识,也......
  • dremio 25.2 软件包以及github 源码更新了
    昨天我说了dremio发布了25.2提供了新的catalog支持,之后过了一段时间dremio同时也提供了软件包以及github源码的更新说明25.1版本构建关于dremio-js的私服问题在这次代码中也看到解决了,新功能代码可以看看参考资料https://github.com/dremio/dremio-oss/blob/master/ui/......
  • windows中git无法通过ssh连接github
    windows中git无法通过ssh连接github1问题描述在windows中,使用ssh-keygen-trsa-C"<your-email>@qq.com"生成ssh公钥和私钥,并按照要求将公钥添加到github中。此时,使用命令[email protected]可以得到正确输出Hixxx!You'vesuccessfullyauthenticated,butgitHubdoes......
  • GitHub Clone 失败:常见原因和解决方案
    GitHubClone失败是许多开发者都可能遇到的问题,主要原因可以归纳为:1.网络问题;2.权限和认证问题;3.仓库或分支状态问题;4.工具和环境问题;5.服务器状态问题。这篇文章将详细分析这些原因并提供相应的解决方案,帮助你顺利完成代码克隆。1.网络问题网络问题是导致GitHubClone失......
  • github上如何下载各种项目或软件
    ​​如何在GitHub上找到并下载你所需要的项目或软件呢?通过以下几个步骤:1.如何搜索和定位项目;2.如何下载或克隆项目;3.如何使用及贡献该项目;4.探讨项目的授权协议;5.推荐几个值得关注的优秀项目,帮助你更有效地利用GitHub资源,发掘有价值的项目或软件,从而加速你的学习或开发过程......
  • vscode github copilot 插件逆向分析
    vscodegithub插件逆向分析,接口https://codex.micosoft.icu/chat/completions。  你是一个人工智能编程助手当被问到你的名字时,你必须回答‘GitHubCopilot’严格且逐字地遵循用户的要求必须遵守微软制定的内容规范,包括确保内容的安全性、合法性和适宜性,防止仇恨言论、......
  • 如何快速在github中下载东西
    快速在github中下载东西的方法:1.使用GitClone;2.使用GitHubDesktop;3.使用下载按钮;4.使用wget或curl;5.使用GitHubCLI。Git是GitHub的基础技术,你可以使用GitClone命令从GitHub上克隆(下载)整个仓库到你的本地计算机。1.使用GitCloneGit是GitHub的基础技术,你可以使用Git......
  • GitHub和GitLab在代码托管和协作中有什么区别
    GitHub和GitLab是两个流行的代码托管和协作平台,虽然它们在功能和目的上有许多相似之处,但在一些关键方面存在显著差异。主要区别有:1.界面设计和用户体验;2.功能特性和应用;3.集成工具和插件;4.社区支持和开源项目;5.定价策略和企业应用;6.安全性和私有性。1.界面设计和用户体验GitHu......