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

ops/2024/11/12 20:38:07/

以下是「 豆包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.ppmy.cn/ops/113281.html

相关文章

6年前倒闭的机器人独角兽,再次杀入AGV市场

导语 大家好,我是社长,老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 在科技创新的浪潮中,一个曾经辉煌又迅速陨落的企业正悄然重生,引发业界广泛关注。 曾经的协作机器人鼻祖Rethink Robotic…

分类预测|基于改进的灰狼IGWO优化支持向量机SVM的数据分类预测matlab程序 改进策略:Cat混沌与高斯变异

分类预测|基于改进的灰狼IGWO优化支持向量机SVM的数据分类预测matlab程序 改进策略:Cat混沌与高斯变异 文章目录 一、基本原理原理流程1. **定义目标函数**2. **初始化GWO**3. **评估适应度**4. **更新狼的位置**5. **更新狼的等级**6. **重复迭代**7. **选择最佳解…

Spring Boot-Swagger相关问题

Spring Boot 与 Swagger 相关问题探讨 Swagger 是当前开发 RESTful API 的常用工具之一,它提供了一套完整的 API 文档生成和测试解决方案。通过与 Spring Boot 集成,开发者能够快速自动生成基于 REST API 的文档,并方便地进行接口调试。然而…

视频格式转为mp4(使用ffmpeg)

1、首先安装ffmpeg,下载链接如下 https://www.gyan.dev/ffmpeg/builds/packages/ffmpeg-6.1.1-full_build.7z 安装后确保ffmpeg程序加到PATH路径里,cmd执行ffmpeg -version出现下图内容表示安装成功。 2、粘贴下面的脚本到文本文件中,文件后缀…

在Word中,用VBA比较两段文本的相似度

效果1: 去掉字符串中回车,进行改进后效果: 代码: Function LevenshteinDistance(s As String, t As String) As IntegerDim d() As IntegerDim i As IntegerDim j As IntegerDim cost As IntegerDim sLen As IntegerDim tLen As IntegersLen…

html知识点框架

一、HTML基础 HTML简介 HTML是一种超文本标记语言&#xff0c;用于创建网页和网页应用。HTML5是公认的下一代Web语言&#xff0c;极大地提升了Web在富媒体、富内容和富应用等方面的能力。HTML基本结构 基本的HTML文档结构包括<!DOCTYPE html>, <html>, <head&g…

flink 批量压缩redis集群 sink

idea maven依赖 <dependency> <groupId>org.apache.bahir</groupId> <artifactId>flink-connector-redis_2.11</artifactId> <version>1.0</version> </dependency> <dependency> <groupId>redis.clients</gr…

【重学 MySQL】二十九、函数的理解

【重学 MySQL】二十九、函数的理解 什么是函数不同 DBMS 函数的差异函数名称和参数功能实现数据类型支持性能和优化兼容性和可移植性 MySQL 的内置函数及分类单行函数多行函数&#xff08;聚合函数&#xff09;使用注意事项 什么是函数 函数&#xff08;Function&#xff09;在…