vercel是我用过的最好用的网站托管服务。
vercel类似于github page,但远比github page强大,速度也快得多得多,而且将Github授权给vercel后,可以达到最优雅的发布体验,只需将代码轻轻一推,项目就自动更新部署了。
vercel还支持部署serverless接口。那代表着,其不仅仅可以部署静态网站,甚至可以部署动态网站,而这些功能,统统都是免费的,简直是白嫖党的福利啊!!!!!
vercel还支持自动配置https,不用自己去FreeSSL申请证书,更是省去了一大堆证书的配置,简直是懒人的福利啊啊啊有木有!
vercel目前的部署模板有31种之多,我没有全部用过。接下来,我将介绍其中的两种。
关于hexo的怎么用可以前往hexo官网了解
首先,我们需要申请一个自己的域名,本网站的域名i-tech.tech是在万网上购买的,其他人可以自行选择域名提供商
点击卡片上的粗黑色的标题(上图中的"my-story")进入配置界面,该界面,有4个菜单,我们点击Settings->Domains,并在输入框中填入想设置的域名,点击Add按钮
Add之后,可能会看到下图中的样子,别着急,还需要配置一下我们的域名,设置一下解析
接下来就可以通过我们设置的域名(如https://case.i-tech.tech)访问我们的网站了,一个简单的Hexo项目就部署完成了!
需要更新网站,只需要往github上提交新的commit,vercel就会自动重新构建了!完美!!!!
有人可能会问了。能部署api还不行啊,没有数据库啊。身为一个混迹江湖多年的白嫖党,请跟我继续往下走~
a title=https://cloud.mongodb.com提供512M免费的MongoDB存储额度,作为个人网站使用足够了,当然还有其他的免费数据库,如db4free.net、mlab.com等各位各取所需。了解更多可以访问[免费在线 MySQL/PostgreSQL/MongoDB/Redis 数据库云服务合集]https://wivwiv.com/post/free-online-resource[/a]了解
我是觉得https://cloud.mongodb.com最好用,所以,本文中我只介绍它的使用方式。
万事具备,只差Api,开启Serverless Api开发之旅
使用npm init给当前目录添加一个package.json文件
登录vercel,在终端输入以下命令,回车之后会让你输入邮箱,填完邮箱后,vercel会向该邮箱发送一个链接,点击该链接确认登录
vercel login
vercel
{
"routes": [
{
"handle": "filesystem"
},
{
"src": "/(.*)",
"status": 404,
"dest": "/welcome.html"
}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热烈欢迎!</title>
</head>
<body>
<h1>大写的欢迎!</h1>
</body>
</html>
vercel
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
{
"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
}
TZ='asia/shanghai'
import { NowRequest, NowResponse } from '@vercel/node';
module.exports = async (req: NowRequest, res: NowResponse) => {
var data = {
msg: "hello world!"
}
res.status(200).json(data);
}
npm i mongodb
npm i @types/mongodb -D
import { NowRequest, NowResponse } from '@vercel/node';
import { MongoClient } from 'mongodb'
const CONNECTION_STRING = "mongodb+srv://huangkemeng:[yourpassword]@clusterblog.engmb.azure.mongodb.net/admin";
module.exports = async (req: NowRequest, res: NowResponse) => {
const client = await MongoClient.connect(CONNECTION_STRING, { useNewUrlParser: true, useUnifiedTopology: true });
const db = await client.db('[hkm-story]');
var result = await db.collection("[northwind]").find().toArray();
res.status(200).json(result);
}
关于更多关于vercel的介绍了,可以邮件联系我,比如该serverless的调试等,篇幅太长,这里就不再赘述!。End!