豆包MarsCode IDE 搭建 VitePress 博客并使用 GitHub 部署

以下是「 豆包MarsCode 体验官」优秀文章,作者粥里有勺糖。

创建豆包MarsCode 项目

还没有注册登录的可以访问 www.marscode.cn/introductio… 登录并进入IDE界面 

在左上角和右上角都有创建项目的入口。

选择 Node.js 项目进行创建。

创建后可以看到项目列表里只是一个基础的 node.js 项目。

接下来就可以导入我们的 VitePress 项目。

拉取 VItePress 博客项目模板

使用终端操作,删除原来的项目文件。

# 查看当前项目 目录
pwd# 移动到上一级目录
cd ../# 删除原来的项目文件
rm -rf VitePress-boke

接下来需要创建一个同名的 VitePress 项目。

VitePress 博客模板可以使用笔者的主题 @sugarat/theme

# 一键创建
npm create @sugarat/theme VitePress-boke

根据操作提示,完成前三步就可以启动。

点击右侧工具栏中的 Webview 就可以预览看到效果。

所有文章内容默认都在 docs 目录下。

开发模式(npm run dev)下,修改会立即生效,自动热更新到页面上。

生产模式使用 npm run build 打包。

如果你没有自己的服务器,又想部署一个站点供其它人访问,就可以使用 GitHub Pages,当然弊端就是访问速度不稳定,下面演示一下。

部署到GitHub Pages

创建 GitHub 仓库

GitHub 地址:github.com

ATQQ/marscode-blog-preview

修改配置

可以参考示例项目 README.md 中内容,轻松搞定。

  1. 修改 GitHub 配置

将 GitHub Pages 部署调整为 GitHub Actions

  1. 修改 VitePress 配置

修改 docs/.vitepress/config.mts 里的构建配置

base 改为 "/仓库名/" 即可

推送代码

只差最后一步了,将代码推送到 GitHub 仓库就完成了。

1.创建并提交至本地仓库

按顺序执行下面 3 条命令即可。

git initgit add .git commit -m "first commit"

2.GitHub 授权

生成SSH密钥对(一路回车就行)

ssh-keygen -t rsa -b 4096 -C "你的github邮箱"

将自动生成id_rsaid_rsa.pub

复制生成的公钥内容

将其添加到 GitHub 个人设置的 SSH 秘钥中。

  1. 关联并推送到 GitHub

你可以在空仓库页面看到如下的提示,咱们按顺序执行即可。

切换为 ssh 地址视图,截图是 https 地址

# 添加远程仓库地址
git remote add origin git@github.com:ATQQ/marscode-blog-preview.git
# 修改分支名
git branch -M main
# 推送分支 main 到远程仓库
git push -u origin main

访问仓库的 Actions 查看结果(示例项目 > Action 执行结果)。

访问 atqq.github.io/marscode-bl… 即可查看到部署后的博客。

更新内容

只需修改/创建 markdown 文档内容即可,然后通过 git 进行推送即可,会自动触发 GitHub Actions 自动部署。

下面也演示一下:

先修改一点内容,

再提交推送。

git add .
git commit -m "docs: update index.md"
git push

 

推送后触发日志。

再次访问页面就是新的内容了。

 

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

monaco editor 在react中的使用

1. 首先先导入monaco editor npm install monaco-editor// npm install monaco-editor --force // 版本冲突? 强行安装 2. 在react中使用 期望效果如下 3. 我遇到的问题 : 输入json数据后 未格式化 , json数据仍然一行展示 我遇到的问题 : 直接输入json数据会白屏报错…

安卓 uniapp跨端开发

HBuilder X 4.24 本地插件方式使用原生插件 例如 MT-TTS 地址PS: 播放 speek({text: ‘test’}) 应为 播放 speak({text: ‘test’})MT-TTS下载下来之后,将 nativeplugins 文件夹拷贝到 uniapp 项目根目录中manifest.json ---- App原生插件配置 运行 语音引擎测试文字转语音播…

基于CNN的10种物体识别项目

一:数据导入和处理 1.导入相关包: import numpy as np import pandas as pd import matplotlib.pyplot as plt import tensorflow as tf2.下载数据 (x_train_all, y_train_all), (x_test, y_test) tf.keras.datasets.cifar10.load_data()# x_valid:测…

基于springboot的智慧社区微信小程序

文未可获取一份本项目的java源码和数据库参考。 本课题研究目标 本文主要对小区生活服务平台的功能和非功能需求进行了分析,系统除了提供物业保修、小区资讯、投诉留言、常用电话等基础功能外,为了满足用户的多样化需求,还提供邻里圈子和有…

sheng的学习笔记-AI-归纳逻辑程序设计(ILP)

AI目录:sheng的学习笔记-AI目录-CSDN博客 规则学习(rule learning): sheng的学习笔记-AI-规则学习(rule learning)-CSDN博客 一阶规则学习: sheng的学习笔记-AI-FOIL(First-Order Inductive Learner)-CSD…

Tiny-universe学习笔记1:Qwen-blog

本文是参与Datawhale Tiny-universe组队学习的第一篇学习笔记,参考链接:https://github.com/datawhalechina/tiny-universe Tiny-universe学习笔记1:Qwen-blog Qwen整体架构与Llama2类似,具体如下图所示: 其中&#…

1 elasticsearch安装

【0】官网参考 https://www.elastic.co/guide/en/elasticsearch/reference/7.11/targz.html 【1】Centos7 下载安装 【1.1】下载 官网:Download Elasticsearch | Elastic 选择好自己想要的相关版本即可; 【2】Centos7.X 前置环境配置(uli…

C# 访问Access存取图片

图片存入ole字段,看有的代码是获取图片的字节数组转换为base64字符串,存入数据库;显示图片是把base64字符串转换为字节数组再显示;直接存字节数组可能还好一点; 插入的时候用带参数的sql写法比较好;用拼接…

汽车应用生态系统的飞跃

在过去的几年里,汽车系统经历了前所未有的变革,驾驶员和乘客对于车内体验的期待已远远超越了传统的驾驶范畴。随着技术的不断进步,基于Android Automotive OS(AAOS)和Google Automotive Services(GAS&#…

毕业设计选题:基于ssm+vue+uniapp的农产品自主供销小程序

开发语言:Java框架:ssmuniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:M…

力扣 167.两数之和||—输入为有序数组

文章目录 题目介绍解法 题目介绍 解法 利用相向双指针&#xff0c;初始时l在最用左边&#xff0c;r在最右边 1.numbers[l] numbers[r] < target 则 l 2.numbers[l] numbers[r] < target 则 r 3.numbers[l] numbers[r] target 说明找到了答案 class Solution {publi…

WPF DataGrid 单元格居中,头部居中,点击行改变背景色。

我得全局样式都写在了App.XAML文件下的ResourceDictionary里&#xff0c;方便全局引用 DataGrid样式和点击改变行背景色的触发器(BasedOn继承的是UI框架的样式&#xff0c;若无则删除&#xff0c;触发器还有鼠标移动事件等&#xff0c;按需自行修改添加) <Style x:Key&quo…

联想正式在印度生产AI服务器!致力于在印度开发世界“尖端”技术真的能实现吗?|AI日报

文章推荐 OpenAI以1500亿美元公司估值向投资者筹集65亿美元&#xff01;安卓版谷歌Gemini Live免费上线&#xff5c;AI日报 今日热点 联想集团将在印度生产AI服务器 联想集团周二宣布&#xff0c;将开始在其位于印度南部的工厂生产AI服务器&#xff0c;并在班加罗尔的科技中…

Vue3(一) Vite创建Vue3工程,选项式API与组合式API;setup的使用;Vue中的响应式ref,reactive

文章目录 一、创建Vue3工程1. vue-cli方式2. vite方式3. 项目小说明4. 安装插件&#xff1a;(1) Prettier--整理格式(2) Vue-official 二、 OptionsAPI 与 CompositionAPI1 选项式API的弊端2 组合式API的优势 三、setup1. 基本使用2 setup与组合式API3 setup语法糖 四、Vue中的…

[Redis][String][上]详细讲解

目录 0.前言1.常见命令1.SET2.GET3.MSET && MGET4.SETNX && SETXX 2.计数命令1.INCR2.INCRBY3.DECR4.DECYBY5.INCRBYFLOAT6.注意 0.前言 字符串类型是Redis最基础的数据类型&#xff0c;关于字符串需要特别注意&#xff1a; Redis中所有的键的类型都是字符串类…

【南方科技大学】CS315 Computer Security 【Lab3 Format String Vulnerability】

目录 Lab OverviewLab TasksTask 1: The Vulnerable ProgramTask 2: Understanding the Layout of the StackTask 3: Crash the ProgramTask 4: Print Out the Server Program’s MemoryTask 5: Change the Server Program’s MemoryTask 6: Inject Malicious Code into the Se…

Vue2学习笔记(02条件渲染 、监视数据的原理)

1、v-if和v-show的区别 2、Vue监视数据的原理

gcc升级(含命令行升级、手动升级两种方式)

gcc升级 1.yum源替换1.1 备份原始repo配置文件1.2 重新配置CentOS-Base.reporepo文件1.3 清除缓存并重新创建 2. gcc安装3.命令行升级gcc4.手动升级4.1 安装包下载4.2 解压4.3 gcc升级4.3.1 依赖拉取4.3.2 gmp安装4.3.3 mpfr安装4.3.4 mpc安装4.3.5 gcc编译、安装 4.4 gcc命令配…

springsecurity+jwt实现前后端分离认证授权

文章目录 1.简介2.快速入门3.认证3.1登录校验流程3.2原理初探3.3认证详流程详解3.4 分析UsernamePasswordAuthenticationFilter 4.案例实战4.1 思路分析4.2准备工作4.3实战1.数据库校验用户2.核心代码1.创建UserDetailsService实现类2.创建UserDetails实现类3.密码加密存储模式…

前端界面搜索部分,第一个选择框的值,影响第二个选择框的值

1.字段声明 {title: 单位名称,dataIndex: departmentId,align: center,width: 100,hideInTable: true,renderFormItem: (item, { defaultRender, ...rest }) > (<ProFormSelectname"departmentId"// label"单位名称"options{hospitaltData}onChange…