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

以下是「 豆包MarsCode 体验官」优秀文章，作者粥里有勺糖。
  创建豆包MarsCode 项目

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

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

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

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

接下来就可以导入我们的 VitePress 项目。
拉取 VItePress 博客项目模板

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

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

复制代码

接下来需要创建一个同名的 VitePress 项目。
VitePress 博客模板可以使用笔者的主题 @sugarat/theme

1. # 一键创建
2. 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 中内容，轻松搞定。

• 修改 GitHub 配置
  

将 GitHub Pages 部署调整为 GitHub Actions

• 修改 VitePress 配置
  

修改 docs/.vitepress/config.mts 里的构建配置
base 改为 "/仓库名/" 即可

推送代码

只差最后一步了，将代码推送到 GitHub 仓库就完成了。
1.创建并提交至本地仓库
按顺序实验下面 3 条下令即可。

1. git init
3. git add .
5. git commit -m "first commit"

复制代码

2.GitHub 授权
生成SSH密钥对(一路回车就行)

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

复制代码

将自动生成id_rsa和id_rsa.pub
复制生成的公钥内容

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

• 关联并推送到 GitHub
  

你可以在空仓库页面看到如下的提示，咱们按顺序实验即可。

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

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

复制代码

访问仓库的 Actions 查看效果（示例项目 > Action 实验效果）。

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

只需修改/创建 markdown 文档内容即可，然后通过 git 进行推送即可，会自动触发 GitHub Actions 自动部署。
下面也演示一下：
先修改一点内容，

再提交推送。

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

复制代码

 
推送后触发日志。

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

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。