免费的个人网站托管-Surge篇

前情

对于前端开发来说,拥有一个自己的个人网站是一种执着也是一种排面,但是大部分前端也都对服务端这一块的东西都停留在了解阶段,但是如果正儿八经的上线一个网站或多或少需要懂一些服务端知识,需要购买服务器,注册域名,申请证书等等,那对于前端er有没有什么方式可以免费托管自己的个人网站了?

Surge ?

Surge 是荷兰的一家静态网站托管服务提供商,提供免费的静态网页托管服务。与大多数静态网页托管提供商不同,Surge 几乎完全基于命令行操作,从注册到删号的全过程(除了激活账户外)都无需图形界面。在其官网的"价格"页面上,只提供两种套餐------"免费"套餐和每月 $30 的"专业"套餐。这两种套餐在流量、存储空间和域名绑定方面都是无限制的,且都可以使用surge.sh后缀的二级域名并支持 https。区别在于"专业"套餐可以为自定义的第三方域名设置 SSL 证书,还支持重定向、跨域设置和密码保护功能,套餐对比详见下图:

对于我们的小小访问量的个人静态站点来说撸免费套餐就足够用了

使用步骤

注:此处是在window11系统上使用测试

STEP1:安装Surge

按位win+r打开运行窗口,输入cmd启动命令提示符,在命令提示符窗口中输入npm i surge -g全局安装surge,如果你用的是Yarn,那就通过yarn add surge,如果你用的pnpm那就用pnpm add surge,再通过输入surge -V确认是否成功

csharp 复制代码
// 下面命令三选一
// npm
npm i surge -g
// yarn
yarn add surge
// pnpm
pnpm add surge

STEP2:上传文件或者目录

用资料管理器打开你要上传的目录,并在地址栏中输入cmd

在当前目录下启动window下的命令行工具cmd(命令提示符),如下图

在当前命令行中输入surge命令,耐心等待一段时间就会把当前目录上传上去,我的测试项目比较小,上传过程大概10S左右。

如果你要修改上传的目录,你输入目录名即可,不可上传文件,只能上传目录,默认它会提供一个域名,推荐的做法是自定义一个二给域名,我测试中发现用它默认分配的域名出现了上传失败的问题

STEP3:链接测试

上传成功后,在界面底部能看到预览域名和你真正的上线域名,我的地址是:xw168.surge.sh

如果你上传的目录中有多个html,你想访问非index.html页面内容的话你只要带上完整文件名即可,我这里是特意上传了index0.html用于测试多文件上传:xw168.surge.sh/index0.html

至此大功告成

小结

Surge没有像前面介绍的PinMe那样提供GUI界面,是全命令行的,我大致看了下它的官网文挡,Surge还提供很多有用的用于部署网站的高级功能,比PinMe要强一些,期待各位的深入探索

个人的知识和能力是有限的,天外有天山外有山,如果你有更好的免费服务器或者别的可以部署静态网站的方法非常期待你的分享,一起学习一起进步

相关推荐
陈随易3 小时前
bm2,Node.js 与 Bun 项目部署新选择
前端·后端·程序员
福兮说4 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
huainingning5 小时前
RJ SW Console口忘记密码处理方法
linux·运维·服务器
布裘5 小时前
【银河麒麟】桌面系统循环登录,无法进入桌面?
linux·运维·服务器
慧都小项5 小时前
程序到了Linux才出错?用CLion把调试接到目标环境
linux·运维·服务器
传人once5 小时前
多图片上传预览功能如何写
前端·css·html·jquery·html5
Eric.466 小时前
Wan‑Animate+MiniMax-H3 本地部署 AI 漫剧流水线:8G 显存动作迁移与动态分镜工程实战
前端·人工智能·comfyui·ai漫剧
Ruiery7 小时前
Linux 6.6内核内存管理深度解析(一):物理内存初始化 — memblock 怎么把内存交给 buddy
linux·运维·服务器
2401_868534787 小时前
无线网络规划设计
服务器·网络
库拉镜像AI牛牛7 小时前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别