One 、 Introduce to you vercel

vercel Is a site hosting platform , Provide CDN Speed up , Similar platforms include Netlify and Github Pages, by comparison ,vercel Domestic visits are faster , And to provide Production The environment and development Environmental Science , Very useful for project development , And support continuous integration , once push Or once PR Will automate build release , Published in the development Environmental Science , Will generate different links for preview .

however vercel It is only free for individual users ,teams Is the charge

First vercel Zero configuration deployment , Second, the access speed is faster than github-page Much better , And build quickly , It's free to use , For deploying personal front-end projects 、 Interface service is very convenient

• vercel Be similar to github page, But far more than github page Powerful , And much faster , and take Github Authorized to vercel after , Can achieve the most elegant publishing experience , Just push the code , The project automatically updates the deployment .
• vercel It also supports deployment serverless Interface . That means , It can not only deploy static websites , You can even deploy dynamic websites , And these functions , It's all free
• vercel It also supports automatic configuration https, Don't go on your own FreeSSL Apply for a certificate , It also saves a lot of certificate configuration
• vercel The current deployment templates are 31 There are so many kinds

vercel template

Two 、 start

open vercel Home page https://vercel.com/signup

Use GitHub Account number disassociation vercel, Subsequent code is submitted to vercel Deployment can be triggered automatically

The authorization page appears , Click on Authorize Vercel.

3、 ... and 、 Deploy Hexo Blog

vercel Is the best static site hosting platform , With the help of vercel platform , We can deploy blog static files to vercel On , Not in use GitHub pages trusteeship ,vercel Than GitHub pages It's much faster .

Select a vercel Template deployment provided , Of course, you can also submit the code to GitHub On , Go again vercel Choice you

Create a GitHub project , The code will automatically be in GitHub Create... On the account

After creation , wait for vercel structure

Automatically jump to the home page after successful creation

Click on visit You can access the created service https://hexo-seven-blush.vercel.app ,vercel Will assign us a default domain name , Of course, you can also customize it .

We can view the packaging log , If something goes wrong with the build process , Just look here

Click on view domain Bind custom domain name

Then we go to the domain name resolution processing CNAME To cname.vercel-dns.com

Finally, the parsing is completed , visit hexo.poetries.com You can customize the domain name . Here we put the blog hexo Project deployment to vercel On , Later when you are GitHub Submitting code automatically triggers vercel Pack to build

You can also Github Select the code to create the project

Import GitHub Items on the account

Deploy vue、react The front-end project process is similar , No more demonstrations here

Four 、 Deploy Serverless Api

use vercel Deploy Serverless Api, You can have your own dynamic website without buying a cloud server

Simple demo deployment api Interface services

To configure vercel.json, More configuration in vercel Check on the official website https://vercel.com/docs

{
"headers": [{
"source": "/(.*)",
"headers" : [
{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
},
{
"key" : "Access-Control-Allow-Headers",
"value" : "content-type"
},
{
"key" : "Access-Control-Allow-Methods",
"value" : "DELETE,PUT,POST,GET,OPTIONS"
}
]
}],
"rewrites": [
{
"source": "/", // Redirection configuration visit / The root path is redirected to /api/query-all-users
"destination": "/api/query-all-users"
}
]
}

Create an interface ,vercel It's on api Create interface path under , In the end, we can go through domain name /api/json domain name /api/query-all-users To access interface services , We have created two interfaces here

// api/json.js
// req Receive all request information ,res It's a response message
// adopt module.exports Expose
module.exports = (req, res) => {
res.send('test')
}

We use Tencent cloud database here , Save some data to the cloud database

// utils/db.js
// Operating cloud database packages
const cloudbase = require('@cloudbase/node-sdk')
const app = cloudbase.init({
env: " Fill environment ID", // Create an environment in the background of Tencent cloud ID
// Visit this link to get secretId、secretKey Just fill in https://console.cloud.tencent.com/cam/capi
secretId: "",
secretKey: ""
});
// 1. Get database references
module.exports = app.database();

Visit this link to get secretId、secretKey Just fill in https://console.cloud.tencent.com/cam/capi

Come to Tencent cloud console , Create environment get environment ID

choice database - Create a new collection users

// api/query-all-users.js
// Query Tencent cloud database user records
const db = require('../utils/db')
const _ = db.command
module.exports = async (req, response) => {
let {name, pwd, size = 50} = req.query
// Just check the Tencent cloud database document for more syntax https://cloud.tencent.com/document/product/876/46897
let { total } = await db.collection("users").count()
let pickField = {
'_id': false,
createAt: true,
userName: true,
address: true
}
let { data } = await db.collection("users")
.field(pickField)
.orderBy('createAt', 'desc')
.limit(parseInt(size))
.get()
response.json({
total,
count: data.length,
list: data
})
}

So we have written two interface services , Submit code to GitHub On , And then in vercel Create project import on GitHub Just deploy the code on , Finally, the deployed service passes https:// domain name /api/query-all-users?name= Xiaoyue &size=100 Just visit

The authors introduce ： Xiaoyue , Focus on sharing advanced skills and technical dry goods in the front-end field .