【保姆级教程】10分钟快速上线一个导航加博客网站

点击关注获取更多网站搭建教程和技术变现手段

我们在之前的文章里提到了快速上手独立开发的一些技术栈【独立开发白皮书】出海独立开发 技术栈总结 使用Nextjs + tailwind CSS + Vercel 这一套，上手简单，成本低，可以快速迭代Web产品上线并试错。

今天给大家带来博主【哥飞】的GitBase部署教程，这是一个开源的导航+博客项目，使用Github存储文章，避免了引入数据库，新手友好，可以作为自己的第一个练手项目，帮助你熟悉Web开发中的各种概念。这个项目结构简单，方便按照你自己的需求进行二次开发。

功能介绍

演示网址：https://gitbase.app

开源项目网址：https://github.com/qiayue/gitbase

GitBase使用Github作为存储，无需引入数据库，原生具备的功能有导航，博客，顶部/底部menu，截图如下：

同时还有一个后台管理系统，方便你去编写文章，无需与Github的文件进行交互：

搭建教程

在安装部署之前，大家需要提前准备好 Vercel 账号和 Github 账号。

第一步，我们打开 GitBase 的 Github 仓库：https://github.com/qiayue/GitBase

第二步，找到一键部署按钮，点击"Deploy"：

第三步，设置你的Github仓库名称 ，点击右下角的"Create"按钮

之后会显示部署过程：

等待1分钟左右，如果你看到了撒花特效，那么恭喜你部署成功。

第四步，点击右上角的"Continue to Dashboard"按钮，进入你的Vercel项目管理后台，可以看到Vercel给你分配的子域名。

这时候你如果打开你的 Github 账号，是可以看到你刚刚部署好的这套代码对应的仓库的，仓库名称就是之前填写的 blog 。

用浏览器打开 Vercel 分配的子域名，就可以看到我们刚刚部署完成的网站了

恭喜你，现在有了人生中的第一个网站，但是你会看到网站上面的内容暂时还是内置好的，如果你想去修改，要怎么改呢？

第五步，你需要去获取你的 Github 的个人 Token ，你需要打开 https://github.com/settings/tokens ，创建个人 classic token 。

第六步，输入 token 名称，选择失效时间，勾选 repo ，然后点击页面底部的"Generate token"绿色按钮。

第七步，复制 token 备用，这个token万万不可以放在公开场合

第八步，打开Vercel项目"Setting"页面。

按照下面这篇教程的要求配置 Vercel 环境变量(Environments)。
https://gitbase.app/posts/environment-variables

注意这6个环境变量一个都不能少，其中 DOMAIN 因为我们目前还用的是 Vercel 的子域名，所以就填子域名，如果后面你改成用自己的域名，就需要填自己域名。

填完之后，应该是下面这样的：

第九步，因为我们刚才配置了环境变量，所以需要重新去 Vercel 再部署一次，环境变量才会生效。

在弹出的浮层里点击一下"main"，然后点击"Create Deployment"按钮就会触发重新部署，等待部署完成。

第十步，现在可以打开我们自己网站的后台了，先点击导航栏右侧的登录按钮，进入登录页面

如果你看到了下面这个界面，那么就是成功登录到管理后台了。

你可以在这个页面管理资源列表，也即是导航列表；还可以点击"Mange Articles"按钮，进入文章管理列表。如果在文章列表，你没有看到文章，那么需要手动点击同步按钮，一会儿就能看到文章列表了。

之后你可以修改文章，可以写新文章。

扩展阅读

关于网站如何变现，导航站收益情况如何，有哪些变现方式，我在之前的文章都有所介绍欢迎阅读。

【独立开发白皮书】从产品到流量：独立开发的完整变现路径 详细介绍了独立开发中的变现手段，流量来源，产品形态

下面的AI导航站系列，对AI导航站的搭建，变现，案例都进行了详细的介绍：

Gitbase由之前推荐过的博主【哥飞】开发并开源，这篇文章也转载自他的公众号，感谢哥飞的分享，推荐阅读他的养站防老系列文章，可以帮助你更快的上手独立开发与出海，欢迎大家关注：

也欢迎大家关注我，将会高频更新独立开发，建站教程，技术变现，SEO相关的知识：