vercel是什么神仙网站? | I’M COOPER | NICE TO MEET YOU

标签: | 发表时间:2022-04-08 11:54 | 作者:
出处:https://i-tech.tech

Vercel?

vercel是我用过的最好用的网站托管服务。 本网站就是基于 hexo引擎模板开发,托管在 vercel上的。

vercel类似于github page,但远比github page强大,速度也快得多得多,而且将Github授权给vercel后,可以达到最优雅的发布体验,只需将代码轻轻一推,项目就自动更新部署了。

vercel还支持部署serverless接口。那代表着,其不仅仅可以部署静态网站,甚至可以部署动态网站,而这些功能,统统都是免费的,简直是白嫖党的福利啊!!!!!

vercel还支持自动配置https,不用自己去FreeSSL申请证书,更是省去了一大堆证书的配置,简直是懒人的福利啊啊啊有木有!

vercel目前的部署模板有31种之多,我没有全部用过。接下来,我将介绍其中的两种。

vercel支持的模板
vercel支持的模板

用Vercel部署Hexo

新建一个vercel项目

关于hexo的怎么用可以前往 hexo官网了解

  • 将hexo上传至github上,如果是个人博客啥的,最好使用私有方式存储,不出意外的话。整个hexo项目的结构类似于下图
image-20210128194843676
image-20210128194843676
  • 访问并登陆 vercel网站,推荐使用github登陆
image-20210129093313304
image-20210129093313304
  • 在vercel的Overview菜单下,点击按钮 New Project
  • 在Import Git Repository选项下,选择需要导入的项目,Import
image-20210129093413893
image-20210129093413893
  • 继续,点击Deploy按钮,vercel就开始构建了
image-20210129093555701
image-20210129093555701
  • 构建完之后,可以在Overview菜单下,看到新建的项目,至此项目已经创建完成,可以通过vercel自动配置的子域名访问了
image-20210129094120077
image-20210129094120077

设置自定义域名

  • 首先,我们需要申请一个自己的域名,本网站的域名i-tech.tech是在万网上购买的,其他人可以自行选择域名提供商
  • 点击卡片上的粗黑色的标题(上图中的”my-story”)进入配置界面,该界面,有4个菜单,我们点击Settings->Domains,并在输入框中填入想设置的域名,点击Add按钮

    image-20210129095458198
    image-20210129095458198

  • Add之后,可能会看到下图中的样子,别着急,还需要配置一下我们的域名,设置一下解析

image-20210129095610042
image-20210129095610042
  • 打开域名控制台,添加一条如下图的解析记录
image-20210129100136724
image-20210129100136724
  • 添加完之后,卡片会变成如图的样子
image-20210129100321509
image-20210129100321509

接下来就可以通过我们设置的域名(如 https://case.i-tech.tech)访问我们的网站了,一个简单的Hexo项目就部署完成了!

需要更新网站,只需要往github上提交新的commit,vercel就会自动重新构建了!完美!!!!

用vercel部署Serverless Api,不购买云服务器也能拥有自己的动态网站,酷!!!!

有人可能会问了。能部署api还不行啊,没有数据库啊。身为一个混迹江湖多年的白嫖党,请跟我继续往下走~

https://cloud.mongodb.com上白嫖一个数据库如何?

https://cloud.mongodb.com提供512M免费的MongoDB存储额度,作为个人网站使用足够了,当然还有其他的免费数据库,如 db4free.netmlab.com等各位各取所需。了解更多可以访问 免费在线 MySQL/PostgreSQL/MongoDB/Redis 数据库云服务合集了解

我是觉得 https://cloud.mongodb.com最好用,所以,本文中我只介绍它的使用方式。

  • 依次点击Atlas->Clusters
image-20210129102544049
image-20210129102544049
  • 大家可以看到有个Create a New Cluster的按钮,点击它
image-20210129102640412
image-20210129102640412
  • 选择如下图的配置,如果需要设置密码的话,设置并记住密码,点击Create Cluster即可
image-20210129102949701
image-20210129102949701
  • 至此我们已经有了一个属于我们自己的数据库的,可以在Atlas->Clusters页面看到刚创建好的MongoDB数据库,接下来,我们要通过Navicat数据库可视化管理工具连接一下吧

通过Navicat连接MondDb数据库

  • 按照上文的操作,我们可以看到如下图的界面,点击CONNECT
image-20210129103712446
image-20210129103712446
  • 接下来,选择Connect Using MongoDB Compass
image-20210129104311381
image-20210129104311381
  • 接下来,点击I have MongDB Compass,可以看到一串连接字符串,如下图红线框起来的地方
image-20210129104512665
image-20210129104512665
  • 参照上图中红线框起来的连接字符串,我们按照下图填下我们的Navicat连接配置信息,密码处填写创建数据库时设置的密码
image-20210129104740510
image-20210129104740510
  • 点击测试连接,我会发现,连接成功,随后点击确定即可
image-20210129104824746
image-20210129104824746

万事具备,只差Api,开启Serverless Api开发之旅

基于noodejs的Serverless Api

  • 第一次使用首先需要安装vercel
image-20210129132921187
image-20210129132921187
  • 使用npm init给当前目录添加一个package.json文件

  • 登录vercel,在终端输入以下命令,回车之后会让你输入邮箱,填完邮箱后,vercel会向该邮箱发送一个链接,点击该链接确认登录

1            
vercel login            
  • 登录完毕之后,输入以下命令,将当前目录初始化为vercel项目目录。回车之后,vercel会询问你一些信息,一路回车就好
1            
vercel            
  • 给vercel配置路由信息,在根目录新建vercel的配置文件vercel.json,并填入下面的配置,下面的意思是,当访问的路径返回状态是404时,就访问welcome.html页面
1            
2
3
4
5
6
7
8
9
10
11
12
{            
"routes": [
{
"handle":"filesystem"
},
{
"src":"/(.*)",
"status":404,
"dest":"/welcome.html"
}
]
}
  • 当前我们还没有welcome.html页面,我们在根目录新建welcome.html,并填入下面的内容
1            
2
3
4
5
6
7
8
9
10
11
<!DOCTYPEhtml>            
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>热烈欢迎!</title>
</head>
<body>
<h1>大写的欢迎!</h1>
</body>
</html>
  • 现在,启动一下我们的vercel项目,查看一下效果,直接在控制台输入下面的命令即可,点击控制台输出的Preview后面的链接即可预览
1            
vercel            
image-20210129142716094
image-20210129142716094
  • 访问链接后我们可以看到
image-20210129142745377
image-20210129142745377
  • 这还只是最简单的页面,到这里,我们的项目目录结构应该长这样子的
image-20210129142924324
image-20210129142924324
  • 为了让我们的项目更强大,引入node相关的依赖。为了开发更便捷,我们使用typescript。执行以下命令
1            
2
3
4
5
npm i typescript            
npm i express
npm i @vercel/node-D
npm i babel-register-D
npm i babel-plugin-transform-es2015-modules-commonjs-D
  • 在根目录新建typescript的配置文件tsconfig.json,输入以下内容
1            
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{            
"compilerOptions": {
"target":"es6",
"module":"commonjs",
"emitDecoratorMetadata":true,
"experimentalDecorators":true,
"sourceMap":true,
"noEmitHelpers":false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts",
"typings/browser",
"typings/browser.d.ts"
],
"compileOnSave":true
}
  • 为了使我们的时区设置正确,我们新建一个文件.env。写入以下内容
1            
TZ='asia/shanghai'            
  • 接下来开始准备api。在根目录下添加一个新目录,命名为api,我们后面新建的api将会放在里面
  • 在api目录下,新建文件helloworld.ts,并写入下面的内容,作为测试简单地输出hello world!
1            
2
3
4
5
6
7
import{ NowRequest, NowResponse }from'@vercel/node';            
module.exports =async(req: NowRequest, res: NowResponse) => {
vardata = {
msg:"hello world!"
}
res.status(200).json(data);
}
  • 至此,我们一个简单的返回helloworld的serverless接口已经开发完毕了,我们预览一下效果,输入命令vercel,并访问Preview链接查看效果
image-20210129151736608
image-20210129151736608

Serverless连接MongoDB数据库

  • 通过以下命令安装依赖,我们就可以在nodejs中操作MongoDB数据库了
1            
2
npm i mongodb            
npm i @types/mongodb-D
  • 为了方便我们测试,我们先用Navicat往MongoDB添加一条数据,添加后的数据长这样,集合的名字叫做northwind,document为{name:”huangkemeng”}
image-20210129153828521
image-20210129153828521
  • 接下来,我们用接口返回这条数据。我们在api目录下创建名为getUsername.ts的文件,文件内容如下, 注意:将方括号内的信息更换成你自己的!!!
1            
2
3
4
5
6
7
8
9
import{ NowRequest, NowResponse }from'@vercel/node';            
import{ MongoClient }from'mongodb'
constCONNECTION_STRING ="mongodb+srv://huangkemeng:[yourpassword]@clusterblog.engmb.azure.mongodb.net/admin";
module.exports =async(req: NowRequest, res: NowResponse) => {
constclient =awaitMongoClient.connect(CONNECTION_STRING, { useNewUrlParser:true, useUnifiedTopology:true});
constdb =awaitclient.db('[hkm-story]');
varresult =awaitdb.collection("[northwind]").find().toArray();
res.status(200).json(result);
}
  • 关于上图中提到的CONNECTION_STRING变量的值,我们很轻而易举得地找到,请看下图
image-20210129161709172
image-20210129161709172
image-20210129161810441
image-20210129161810441
  • 至此,一个通过MongoDB返回数据的serverless接口开发完毕,请看效果
image-20210129162053681
image-20210129162053681
  • 通过运行vercel –prod命令即可将其发布。

关于更多关于vercel的介绍了,可以邮件联系我,比如该serverless的调试等,篇幅太长,这里就不再赘述!。End!

相关 [vercel 神仙 网站] 推荐:

vercel是什么神仙网站? | I’M COOPER | NICE TO MEET YOU

- -
vercel是我用过的最好用的网站托管服务. vercel类似于github page,但远比github page强大,速度也快得多得多,而且将Github授权给vercel后,可以达到最优雅的发布体验,只需将代码轻轻一推,项目就自动更新部署了. vercel还支持部署serverless接口. 那代表着,其不仅仅可以部署静态网站,甚至可以部署动态网站,而这些功能,统统都是免费的,简直是白嫖党的福利啊.

Vercel 部署 Node 服务

- - 掘金 前端
之前在写 面试常客:HTTP 缓存时,曾经就强缓存和协商缓存写过两个demo,但缓存要在服务端做,只能贴上代码,不能在网页上感受(虽然我贴了gif). 笔者的所有 demo 例子都放在 github page 上,其特点是不需要服务器即可部署静态资源,但它不具备部署服务端应用能力. 最近笔者在了解 CI/CD 方面的知识点,想起了 Vercel,就想着能否将服务端应用架在 vercel 上呢.

Vercel 与 Next.js:开源全明星团队背后的商业逻辑 - 掘金

- -
Vercel 是由 Guillermo Rauch 创立的云服务公司,以拥有数个知名开源项目为大众所知,随着 2021 年在融资、招聘、产品等方面的高调亮相,Vercel 的商业逻辑也愈发清晰. 现代前端框架的代表之一 React 于 2013 年开源,与同期其他前端框架一起推动前后端分离的开发模式直至现在.

潘石屹因质疑"神仙标"被威胁

- hhx - Solidot
bonnae1982 写道 "据新华网引述的新京报报道,北京知名地产商、SOHO中国董事长潘石屹因为质疑之前7月6日的北京中央商务区(CBD)土地卖牌招标中的内定疑云,他受到了不明身份者的威胁.

快来拜"神仙"!拥有所有美版PS2游戏的收藏家

- 金鑫 - cnBeta全文版
感谢No.77 疯人院的投递. 美国玩家Ahans76是一个PlayStation收藏夹,他的PS系列游戏收藏看上去应该比大部分人都多,因为他选成自己拥有北美市场发售的所有PS2游戏. 而且更重要的是,这些游戏都是全新未拆封的……. 收藏游戏和主机,应该是所有正常玩家的爱好之一,看着自己的游戏收藏,回忆起自己玩游戏的美好时光,是生活过的鉴证之一.

网站推荐:IFTTT(if this then that)

- 小皮球香蕉梨 - 有意思吧
这是一个神奇的网站,比某电视上天天放的那个广告要神奇许多. 就像它的域名 ifttt.com 一样,虽然丑却十分个性. 昨天晚上,ifttt.com 在 Twitter 被瞬间引爆,每个被邀请的人都会再拥有5个邀请名额,源源不断的邀请让 Geek 很兴奋. 那么,ifttt 到底是什么呢. 这是一个条件触发网站,当 A 条件触发时,自动激发 B 条件发生.

Facebook 网站架构

- - idea's blog
我收集到一些文章和视频, 可以带你窥探 Facebook 的架构. Facebook 承载了几十亿的用户, 它的架构(包括思想和实现)是非常值得参考的. 当然, 你要小心不要照搬 Facebook 的每一字一句, 因为任何思想和实现都是有自己的应用场景的.. Google Talk 界面开发分析. 使用Python POST任意的HTTP数据以及使用Cookie.

用BrowserID注册网站

- ashuai - Solidot
Mozilla宣布了一个实验项目BrowserID,提供了一种注册网站的新方法. 注册网站通常的方法是电子邮件验证,造成用户时间的浪费,要求用户登录另一个网站,记住另一个密码. BrowserID(源代码发布在github上)提供了一种更简单的方法,消除了电子邮件验证. 它是Verified Email Protocol实现,基于公钥系统和Mozilla的认证服务器,以确保用户身份的真实性.

ifttt、GGG与网站图谱

- babyone - cnBeta全文版
尽管伯纳斯・李(Tim Berners-Lee)在发明WWW之初,心中就有一个GGG(Giant Global Graph)的宏大梦想,但是直到Google的网页图谱、尤其是Facebook的社交图谱、Twitter的兴趣图谱之后,人们才真正意识到图谱的网络效应魔力. 不过这仍然未及伯纳斯・李的预期,他理想中的GGG是一张数据的图谱、服务的图谱,而不仅仅是网页、人或兴趣.

苹果网站的特点

- fei - 所有文章 - UCD大社区
以前听同行讲过一次apple.com,在他眼里apple.com就是丰碑,基本没有不好. 任何哲学的理论和术语都可以往它身上套,简直就是成就与完美的化身. 这问题我觉得需要拆解分层次的看,任何有特点的设计必然有其优势,也有其局限性. 我认为讲apple.com很有特点可能更合适,因为“特点”只是个中性词.