前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >快速上线一个高质量导航加博客网站教程

快速上线一个高质量导航加博客网站教程

作者头像
轩源
发布2024-09-29 20:45:21
发布2024-09-29 20:45:21
910
举报
文章被收录于专栏:轩源的网络日志

最近正在研究导航加博客网站,今天就看到 @哥飞 推送了自己的开源项目 GitBase,推荐给大家。 如果你不会 Next.js ,如果你不知道怎么配置数据库,却想部署一套自己的网站,那么今天大佬 @哥飞 开源的这套代码,绝对值得你拥有。

前言

这个网站目前具有资源导航和博客两大功能。

如果仅仅只有这些功能,其实这个网站一点儿也不稀奇,很多网站都有类似功能。

不过 @哥飞 做的这个网站有些不太一样的地方,那就是这个网站完全不需要数据库。

很多朋友都会有这样的困扰,我就想快速上线个网站走完全流程,结果又要配置各种接口,又要配置各种数据库,还得去配置数据库,好麻烦啊,好多卡点啊。

能不能开源一套网站代码,可以一键部署到 Vercel ,不用数据库,不用复杂的配置,就让大家快速上线一个导航加博客网站。

这套代码的潜力仅仅只是不需要数据库吗?

当然不是! 基于这个框架,甚至可以实现接入 AI 之后,让 AI 自己修改代码,让 AI 自己增加新功能,让 AI 自己增加网站内容。

这一切,都得益于 @哥飞 设计了一套在线数据更新和网站代码自动部署机制。

当然,要做到这些,离不开 Github 提供的方便的 API,以及 Vercel 提供的自动检测代码变化自动部署机制。

下面哥飞给大家介绍一下这套代码的运行机制。

网站前台

网站前台可以简单理解为纯静态的,打开看下下面的性能测试报告,100分,说明性能还是很不错的,打开速度特别快。

网站有两种数据,一是资源导航列表,二是文章列表,前者数据来自于代码里的 json 文件,后者数据暂时来自于后端代码扫描出来的 markdown 文章列表,后面也可以修改成直接读取 json 文件,进一步加快打开速度。

因为完全没有读取数据库的操作,所以读取数据的速度就特别快,网站打开也就特别快。

下面是在一个隐私窗口首次打开时的加载速度,可以说做到了秒开。

网站后台

没错,虽然这套代码没有数据看,但却提供一个在线管理后台,你可以在这个后台里编辑资源导航列表,查看、修改、创建文章。

下图是资源列表管理后台,可以查看资源列表,修改资源信息,添加新的资源。

说资源大家可能不好理解,说成导航就好理解了。你可以用这套代码轻松上线一个导航网站。

刚才说了,你甚至可以接入 AI,达到 AI 来自动挖掘新的需要收录的导航数据,实现完全由 AI 驱动的自我更新的导航网站。

下面是文章管理后台,你可以查看文章列表,修改旧的文章,或者添加新的文章。

同样的,文章你也可以在接入AI之后,让AI帮你去写,不过暂时今天周日发布的第一版,还没有接入AI。

那么要如何基于这套代码,快速上线,部署一个网站呢?

安装部署

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

第一步:我们打开 GitBase 的 Github 仓库页面

点个 Star:https://github.com/qiayue/GitBase

第二步:找到一键部署按钮,点它

第三步:设置你的 Github 仓库名称

如这里 @哥飞 演示部署一个 @哥飞博客,所以输入 blog ,点击 “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项目设置页面

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

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

填完之后,应该是下面这样的:

第九步:重新去 Vercel 再部署一次

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

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

第十步:现在可以打开我们自己网站的后台了

先点击导航栏右侧的登录按钮,进入登录页面。

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

你可以在这个页面管理资源列表,也即是导航列表。

还可以点击“Mange Articles”按钮,进入文章管理列表。

如果在文章列表,你没有看到文章,那么需要手动点击同步按钮,一会儿就能看到文章列表了。

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

好了,以上就是今天的全部教程了。

参考来源

开源代码:https://github.com/qiayue/GitBase 演示网站:https://gitbase.app/ 我是哥飞公众号:https://mp.weixin.qq.com/s/m_A26ApCdwHMAnvMlI7v_A

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 网站前台
  • 网站后台
  • 安装部署
    • 第一步:我们打开 GitBase 的 Github 仓库页面
      • 第二步:找到一键部署按钮,点它
        • 第三步:设置你的 Github 仓库名称
          • 第四步:请点击右上角的“Continue to Dashboard”按钮
            • 第五步:你需要去获取你的 Github 的个人 Token
              • 第六步:输入 token 名称
                • 第七步:复制 token 备用
                  • 第八步:打开Vercel项目设置页面
                    • 第九步:重新去 Vercel 再部署一次
                    • 参考来源
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档