豆包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 init

git 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 [email protected]: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

推送后触发日志。

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

相关推荐
魔尔助理顾问10 分钟前
Flask如何读取配置信息
python·flask·bootstrap
康谋自动驾驶14 分钟前
康谋分享 | 自动驾驶仿真进入“标准时代”:aiSim全面对接ASAM OpenX
人工智能·科技·算法·机器学习·自动驾驶·汽车
jc_hook1 小时前
Python 接入DeepSeek
python·大模型·deepseek
深蓝学院1 小时前
密西根大学新作——LightEMMA:自动驾驶中轻量级端到端多模态模型
人工智能·机器学习·自动驾驶
chicpopoo1 小时前
Python打卡DAY25
开发语言·python
归去_来兮2 小时前
人工神经网络(ANN)模型
人工智能·机器学习·人工神经网络
2201_754918412 小时前
深入理解卷积神经网络:从基础原理到实战应用
人工智能·神经网络·cnn
强盛小灵通专卖员2 小时前
DL00219-基于深度学习的水稻病害检测系统含源码
人工智能·深度学习·水稻病害
crazyme_62 小时前
深入掌握 Python 切片操作:解锁数据处理的高效密码
开发语言·python
Luke Ewin2 小时前
CentOS7.9部署FunASR实时语音识别接口 | 部署商用级别实时语音识别接口FunASR
人工智能·语音识别·实时语音识别·商用级别实时语音识别