豆包 MarsCode IDE 搭建 VitePress 博客并使用 GitHub 部署
![豆包MarsCode IDE 搭建 VitePress 博客并使用 GitHub 部署](https://static001.geekbang.org/infoq/ea/eaa6ae620b9161fdbd9d7dc1df14577e.webp)
以下是「 豆包MarsCode 体验官」优秀文章,作者粥里有勺糖。
创建豆包 MarsCode 项目
还没有注册登录的可以访问 www.marscode.cn/introductio… 登录并进入 IDE 界面
![](https://static001.geekbang.org/infoq/9a/9a2652d1ca588ef3ed198a67e9b88aec.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
在左上角和右上角都有创建项目的入口。
![](https://static001.geekbang.org/infoq/30/3048eacaafb808f37edd31d55fdf6d84.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
选择 Node.js 项目进行创建。
![](https://static001.geekbang.org/infoq/c8/c808fa8303f48ddc1eb49d578f9c733a.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
创建后可以看到项目列表里只是一个基础的 node.js 项目。
![](https://static001.geekbang.org/infoq/3e/3ea9310ddc18839f598639f048361d8f.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
接下来就可以导入我们的 VitePress 项目。
拉取 VItePress 博客项目模板
使用终端操作,删除原来的项目文件。
![](https://static001.geekbang.org/infoq/db/dba6f1db1a780e660357d0e13a13a87f.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
接下来需要创建一个同名的 VitePress
项目。
VitePress 博客模板可以使用笔者的主题 @sugarat/theme
![](https://static001.geekbang.org/infoq/6b/6babb7a2075cbc2f850b7adc8c872648.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
![](https://static001.geekbang.org/infoq/84/848262452f021adad7b0e996b44f6841.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
根据操作提示,完成前三步就可以启动。
![](https://static001.geekbang.org/infoq/d9/d9aec1365b5f85c5f7b4dc4825cb3ddf.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
点击右侧工具栏中的 Webview
就可以预览看到效果。
![](https://static001.geekbang.org/infoq/73/736fcc6125573ff863be877079fc718d.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
所有文章内容默认都在 docs
目录下。
开发模式(npm run dev
)下,修改会立即生效,自动热更新到页面上。
生产模式使用 npm run build
打包。
如果你没有自己的服务器,又想部署一个站点供其它人访问,就可以使用 GitHub Pages
,当然弊端就是访问速度不稳定,下面演示一下。
部署到 GitHub Pages
创建 GitHub 仓库
GitHub 地址:github.com
![](https://static001.geekbang.org/infoq/e2/e269d59e84d3f02facc068b03c19c354.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
修改配置
可以参考示例项目 README.md
中内容,轻松搞定。
![](https://static001.geekbang.org/infoq/5d/5d102f673aa09598e5e311ecb367ee0c.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
修改 GitHub 配置
将 GitHub Pages 部署调整为 GitHub Actions
![](https://static001.geekbang.org/infoq/81/81fb674651f45a916cf44483dd91de91.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
修改 VitePress 配置
修改 docs/.vitepress/config.mts
里的构建配置
base
改为 "/仓库名/"
即可
![](https://static001.geekbang.org/infoq/fd/fd9bc5968f10e4650d36f53ae590876b.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
推送代码
只差最后一步了,将代码推送到 GitHub 仓库就完成了。
创建并提交至本地仓库
按顺序执行下面 3 条命令即可。
![](https://static001.geekbang.org/infoq/32/3257cfbde6b67d454e413126bb464229.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
GitHub 授权
生成 SSH 密钥对(一路回车就行)
将自动生成id_rsa
和id_rsa.pub
复制生成的公钥内容
![](https://static001.geekbang.org/infoq/36/36c4b9dea3edd39236f239d4ba43d10e.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
将其添加到 GitHub 个人设置的 SSH 秘钥中。
![](https://static001.geekbang.org/infoq/05/055d5c7dd3c0594caf91ce36106a336a.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
关联并推送到 GitHub
你可以在空仓库页面看到如下的提示,咱们按顺序执行即可。
![](https://static001.geekbang.org/infoq/7b/7b8893c375495ef2a9b684c058be1e9e.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
切换为 ssh 地址视图,截图是 https 地址
![](https://static001.geekbang.org/infoq/bb/bba282b040dcc847c205148475251c19.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
访问仓库的 Actions 查看结果(示例项目 > Action 执行结果)。
![](https://static001.geekbang.org/infoq/b3/b3392ca236bf4a99bed0d3999b9bf11b.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
访问 atqq.github.io/marscode-bl… 即可查看到部署后的博客。
更新内容
只需修改/创建 markdown
文档内容即可,然后通过 git 进行推送即可,会自动触发 GitHub Actions 自动部署。
下面也演示一下:
先修改一点内容,
![](https://static001.geekbang.org/infoq/04/04f128fa9e07be3b9615645b98d9a75a.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
再提交推送。
![](https://static001.geekbang.org/infoq/50/50f88bb1f3a9bbf53837db583600f10d.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
推送后触发日志。
![](https://static001.geekbang.org/infoq/c7/c738d938d305237aee7dbb7d7eb03e17.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
再次访问页面就是新的内容了。
![](https://static001.geekbang.org/infoq/fa/faef7f489a7791a38251a504360c9385.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
评论