✨如何0元成本从开发到建站✨建议收藏✨

已于 2024-07-24 16:45:29 修改
阅读量658 收藏 8
点赞数 9
文章标签： 前端 后端
于 2024-07-24 16:39:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaovie/article/details/140666410
版权

Hello，小伙伴大家好，我是小VIE，一名为了搭建个人博客而入坑前端的后端。〒▽〒
自从前几天上线部署了自己的博客后，就一直在总结这段时间的开发经历，既有自己的学习心得，也有实践过程。
如果你对学习方法和博客开发经历也有兴趣，欢迎了解：

这次的分享则是我在开发到搭建博客的过程中，是如何用最低成本建站的，其中包括了对各项服务设施产品的使用对比，踩了很多坑也交过学费！如果你也有打算在建站初期无成本过渡，那这篇文章一定可以给你帮助，建议收藏！也可以顺便给个免费的赞！

一、服务设施

开门见山，直接给小伙伴们看看我的博客都是基于什么服务设施建立的。

  • 服务器：Serverless
  • MySQL 数据库：SQLPub
  • Redis 数据库：Vercel KV
  • 对象存储：Vercel Blob
  • 后端部署平台：阿里云 SAE
  • 前端部署平台：Vercel
  • 域名：阿里云
  • DNS：Cloudflare、阿里云
  • SSL/TLS证书、Cloudflare、阿里云

二、服务器 or Serverless？

Serverless？是什么？很多小伙伴没听过 Serverless，不知道是干嘛的，就比如一群友跟我的对话：

群友：你有服务器吗🤔
我：用的serverless🤭
群友：这是什么🤔
我：就是无服务器部署的😊
群友：就是本地呗🤔
我：…😓

image.png

Serverless，翻译过来叫“无服务器”，但是，它不是说真的没有服务器，更不可能是本地部署。(lll￢ω￢)
本质上 Serverless 也是需要服务器的，只是对于用户和开发者来讲无需关心服务器的管理和运维工作，只需要部署程序就可以运行。
那 Serverless 的费用如何？实际上如果同样是 “2核2G” 的配置，Serverless 一年的费用可能都要上百甚至上千。那还要用 Serverless ？因为目前可以白嫖 3 个月。

三、MySQL 数据库：SQLPub

SQLPub 是一个免费的 MySQL 数据库，能够提供最大 36000 次/小时的请求、同时 30 个连接和 500 M存储空间。当然 SQLPub 主要还是建议用于测试，毕竟数据是很重要的财产，生产环境慎用第三方的数据库。

3.1 免费申请

访问：https://www.sqlpub.com/
SQLPub 无需注册，填写信息即可免费申请。

image.png

3.2 Web 数据库管理

SQLPub 申请成功后，可以直接通过 Web 版数据库管理快捷连接数据库和操作。不过管理界面比较简单，提供的功能也比较少。
在这里插入图片描述

3.3 对比其他数据库

Supabase Postgres

Supabase 是一个开源的后端服务平台，它实际上不只提供 Postgres，还有 Authentication、Storage、Edge Function、Realtime。不过由于某科学原因，Supabase 有时候无法访问，即使服务能访问，在国内的速度也一般。

SQLPub

SQLPub 不是一开始就选定好的，最开始找了一圈数据库发现基本上免费的都是 PostgresSQL，导致我一度想学 PostgresSQL，因为我更熟悉 MySQL。后面找到只有 SQLPub 是 MySQL 才决定用这个。而且 SQLPub 是在国内的所以连接速度很快。

Vercel Postgres

Vercel 是一个云服务平台，主要为前端开发和部署 Web 应用程序提供服务。Vercel 是一个更强大更全面的平台，还提供了 Edge Config、Blob、Postgres、KV，甚至能够扩展集成第三方的服务设施。Vercel 在国内的访问速度还算可以，几乎没遇到无法访问的情况，而且服务很稳定速度也不慢。往后有可能考虑将数据迁移到 Vercel。

四、Redis 数据库：Vercel KV

Vercel KV 是一个持久化 Redis 数据库，能够存储和检索 KV 数据和 JSON 数据。因为 Vercel 本身在访问和服务连接上就足够稳定，所以目前只有 Vercel KV 是最优选择，作为 Redis 服务设施。
Vercel KV 提供免费的 256 MB 的存储和数据流量，限制 30000/day 次的请求用量。
在这里插入图片描述

4.1 创建 Vercel KV

Vercel KV 是 Vercel Storage 的一项存储服务，在 Storage 中点击 “Create Database” 选择 “KV” 即可创建 Redis 数据库。
在这里插入图片描述
image.png

五、对象存储：Vercel Blob

Vercel Blob 是一个对象存储服务，用于存储静态资源如图片、视频、音频等文件。
Vercel Blob 提供了基础版的免费额度，有 250MB 的存储空间和每月 5GB 的数据流量。
在这里插入图片描述

5.1 创建 Vercel Blob

Vercel Blob 同样是 Vercel Storage 的一项存储服务，在 Storage 中点击 “Create Database” 选择 “Blob” 即可创建对象存储。

5.2 对比其他对象存储

PICUI图床

这是我最开始使用的一个免费的图床，一开始也只是简单用用作为图片的存储服务设施。但是后面由于操作很不友好，并且虽然是国内的网站但是图片服务却不稳定，速度很一般。搞笑的是今天上去一看居然还跑路了hhh，所以一定要擦亮眼睛，慎重选择这些免费图床！

image.png

Supabase Storage

由于 PICUI 很不友好，所以我转向 Supabase，但是前面也提到过 Supabase 在国内的访问不稳定。在 Supabase 简单试用了一下感觉图片加载速度太慢了，一张 49KB 的图片要 1.06s 加载，实在接受不能。
在这里插入图片描述

LeanCloud File

LeanCloud 也是一个 Serverless 云服务平台，提供数据存储、云引擎、即时通讯、推送、短信等服务。LeanCloud 是一个国内的平台，所以访问很稳定。在 pass 掉 PICUI 和 Supabase Storage，转向了 LeanCloud 文件存储，而且它还提供充足的免费额度。
在这里插入图片描述

同样的一张 49KB 的图片 259ms 加载完成，这个速度就好接受多了。那最后为什么还是不用 LeanCloud File 呢？因为 HTTPS 流量会计费。
在这里插入图片描述

Vercel Blob

Vercel Blob 是我最后找到的方案，就是从 Vercel Blob 我才决定用 Vercel 提供的服务设施，包括前端部署和 Redis 数据库。
同样的一张 49KB 的图片 744ms 加载完毕，这个速度介于 LeanCloud 和 Supabase 之间，所以我选择了 Vercel Blob 作为折中。
在这里插入图片描述

六、后端部署平台：阿里云 SAE

后端服务部署在阿里云 Serverless App Engine。
阿里云 SAE 2.0 中的 Web 应用实现了百毫秒级弹性伸缩，可以根据流量自适应调整资源使用；并且 Web 应用提供闲置计费能力，无请求时 CPU 不计费，部分场景支持缩容到 0。
阿里云 SAE 虽然很强，但是费用其实会很高，因为服务器维护和应用运维都是阿里云 Serverless 做了，所谓羊毛出在羊身上，你以为只需要部署应用就可以了，实际上有很多隐形的费用。
假设你的应用实例是 “1核1GB”，一天用 12 小时，一年至少也在 300 百左右，这其中最主要的费用并不是 CPU 时，而是内存时。
在这里插入图片描述
目前用阿里云 SAE 主要是可以先试用 3 个月的免费额度，在起步阶段可以作为过渡，至于后续可能要考虑其他的部署方式或平台了。
image.png

七、前端部署平台：Vercel

我的博客 Web 和博客 CMS 都是部署在 Vercel 上，只需授权导入 Github 仓库就能自动构建和部署应用程序。在完成部署后 Vercel 会免费提供可以访问的域名，但是因为某科学原因，在国内是无法访问的，需要绑定自定义域名才行。
具体部署可以参考：AI最佳实践全栈式从0到1开发个人博客系统#项目部署

7.1 对比其他部署平台

Github Pages

GitHub Pages 是一个静态站点托管服务，它能直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，然后通过构建部署网站。正是因为 GitHub Pages 更侧重于简单的静态网站托管，所以并不适用于部署我的博客。

Vercel

Vercel 就不一样了，Vercel 支持更多的前端框架和技术，并且对于动态内容、服务器端渲染和无服务器函数有更好的支持。而且部署项目也很方便，通过导入 Github 仓库也可以快速部署，并且使用 GitHub Actions（CI/CD）平台，可以实现自动化构建、测试和部署工作流程。因此 Vercel 是部署博客的最佳选择。

八、其他

  1. 主域名：viespace.top

在阿里云购买，新用户可以 1 元购买.top或者.cn域名一年。你要说这 1 元不是有成本嘛，可是四舍五入不就等于 0 元嘛！实际上如果单纯用 Vercel 提供的域名也可以不用购买域名。

  1. 子域名：service.viespace.top

在主域名的 DNS 服务商添加子域名记录就行。

  1. 主域名DNS：Cloudflare

就是使用 Cloudflare 作为 DNS 服务器。为什么是用 Cloudflare？因为据官网它是这样介绍的：Cloudflare DNS 是一个权威 DNS 服务，提供显著高于 Google Cloud DNS 的查询响应性能。这一性能，加上强大的安全性和无与伦比的冗余，Cloudflare DNS 是大多数组织的更佳选择。我实际使用下来也确实感觉不错域名访问很稳定。

  1. 子域名DNS：阿里云

因为后端服务在阿里云，阿里云 SAE 虽然会分配一个公网地址，但是对于 IP 做了 ACL，关联自定义域名就不会有 IP 限制。而关联自定义域名需要阿里云 DNS 解析，所以需要将子域名指向阿里云 DNS。

  1. SSL/TLS证书

主域名的 SSL/TLS 证书由 Cloudflare 免费提供；子域名的 SSL/TLS 证书通过阿里云免费申请。

最后

最后，如果文章对于你有帮助，不要忘了给个赞/收藏/评论。
努力创作，值得肯定●゜ⅴ゜)ﾉ

我喺小VIE
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Cloudreve自建云盘实站：容量和速度自己来决定
wdjnb的博客
05-14 874
一、前言 为啥要用自建网盘，市面上的云盘不香了？ 每一个用户需求的背后都是因为有场景存在，而这些差异化的场景也都是因为不同的用户类型产生的。 就像我作为技术号主想分享一些自己总结的资料，放到一些云盘以后有时候会被其他不知道从哪冒出来的小伙伴给举报，举报链接就取消了，取消了链接也就影响了我的资料分享。同时我可能还希望我的分享内容能被记录到下载次数、允许几次下载、下载时是否要做一些引流动作等等。 所以类似这样的特殊场景下就需要自建网盘来维护个人需要的资料，与之类似的还有一些公司或者组织都会建相对私域的网
Shopify自建独立站完整流程，新手零基础也能学会！
dongdonglin77的博客
04-24 3005
Shopify平台虽然时常更新试用与优惠策略，但其基本设置和操作流程大体就是这样的一个流程，核心部分变化不大。用Shopify搭建电商网站并不复杂，真正的挑战在于后期运营。不过，对于想要自建跨境电商独立站的朋友，Shopify仍是首选。所以，如果你对此感兴趣，建议尽早动手实践吧。
【建站教程】Ubuntu结合宝塔面板本地部署Inis博客并发布公网
檀越的博客
06-06 1万+
本文主要和大家分享一下，如何在 Ubuntu 系统上部署新版 Inis 博客系统，并使用 cpolar 创建的内网穿透数据隧道，将 Inis 博客网站发布到公共互联网上。互联网技术总在不断进步，新技术和新软件也会来带更多功能，就以最常见的个人博客系统，也在不断推陈出新，发掘出更多功能和特色。从早期少量自定义和编辑功能，发展到现在的支持各种自定义模块和外观，以及更多更全的支持软件适配（包括 php 程序、数据库程序等）。
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 6万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
20230708_WordPress从0到1建站_个人网页_君崽的世界，带给更多人一点光_阿里云 + WordPress + 宝塔 + Elementor
qq_60955261的博客
07-08 99
20230708_WordPress从0到1建站_个人网页_君崽的世界，带给更多人一点光_阿里云 + WordPress + 宝塔 + Elementor
内网穿透建站案例-python-flask应用
Zwq的博客
07-21 1370
通过内网穿透既快速又简单的让互联网上的其他用户访问到自己电脑上写好的网站应用！无需公网IP、不用机房托管、虚拟主机的价格，独立服务器的配置！
程序猿之梦 星辰大海的前端建站之路「第一周」
郊眠寺
08-25 1011
好家伙，这个题目就像是一个工作汇报，像极了每周写周报的各位～最近两周的周末，基本都会加班，如果内容较少请见谅（最后我这周末来了一天半的公司...vue3vitenestjsgraphqlg6…话说大家好不好奇，我引入的是 sass，为什么最后用的确是 scss，两者之间究竟有什么关系？
基于hexo和aws云搭建个人博客，0基础0费用，有点豪横（2W字超详细图文教程）
编程是一门实践技术
06-05 1584
0基本0费用不玩虚的，基于node、hexo、buffterfly主题框架、aws云、阿里云搭建专业的个人/公司级技术博客网站。2W+字保姆级教学全部内容实操验证，从零开始一步步深入。只需占用您3小时就会收获一个专业的博客网站并掌握一项很专业的知识技能，个人建站只这一篇文章就够了。
开源亮点：自建Hugging Face镜像站，加速你的AI之旅
gitblog_00024的博客
06-21 403
???? 开源亮点：自建Hugging Face镜像站，加速你的AI之旅 项目地址:https://gitcode.com/padeoe/hf-mirror-site 在深度学习与自然语言处理领域，Hugging Face 已成为不可或缺的资源库，提供大量的预训练模型与数据集。然而，由于地理位置或网络限制，直接访问Hugging Face可能会遇到速度缓慢的问题。为了改善这一状况，hf-mirror 应...
DiscordTerminal✨一个可扩展的Discord终端客户端
08-10
**DiscordTerminal✨一个可扩展的Discord终端客户端** Discord Terminal 是一款创新的命令行工具，专为那些喜欢在终端环境下工作的开发者和用户设计。它允许用户通过命令行界面与Discord服务器进行交互，无需打开...
Node.js-✨Puppeteer中文文档
08-10
**Node.js Puppeteer中文文档详解** Puppeteer是Node.js中的一个强大库，它允许开发者通过DevTools协议来远程控制Chromium或Google ...配合中文文档的学习，可以更高效地利用Puppeteer解决实际问题，提升开发效率。
quirk,✨
10-11
项目名后缀的"✨"符号可能表示项目具有亮点或者充满活力，暗示这是一款有趣且引人入胜的软件。 在IT行业中，开源项目是指那些源代码对公众开放，允许用户自由使用、修改和分发的软件项目。这样的项目通常由全球各地...
swift-ExpandableCell✨采用Swift3编写可扩展可折叠的tableview单元格
08-15
在iOS应用开发中，Swift语言提供了丰富的功能和灵活性，使得开发者可以创建出各种复杂的用户界面。本项目"swift-ExpandableCell✨采用Swift3编写可扩展可折叠的tableview单元格"聚焦于一个特定的UI组件——可扩展可...
swift-Twinkle-✨一个Swift和简单的方法能让任何UIView产生闪烁效果
08-15
作为一个动画库，Twinkle提供了封装好的API，使得开发者能够快速集成和自定义闪烁动画，而不必从零开始编写动画代码。 在压缩包"Twinkle-master"中，我们可以期待找到项目的主要源代码、示例应用、文档以及可能的...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 469
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 79
【代码】TS如何处理js模块的类型？
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 992
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 853
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
Python 学习路线图：Linux 命令基础 ➔ Python 语言入门 ✨
除了基本的Python编程技能以外，学习者还将学习如何使用Python进行数据分析、机器学习和Web开发等方面的应用。这些内容将帮助学习者更好地应用Python解决实际问题，并丰富自己的编程技能。同时，学习者还将学习如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我喺小VIE

努力创作，值得肯定●゜ⅴ゜)ﾉ

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值