Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the Vue Press static website based on Serverless". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to realize the Vue Press static website based on Serverless".

A brief introduction:

VuePress: consists of two parts, the first is a minimalist static site generator, and the other is a default theme optimized for writing technical documents. Every page generated by VuePress comes with a pre-rendered HTML, so it has very good loading performance and search engine optimization (SEO). At the same time, once the page is loaded, Vue will take over the static content and convert it into a complete single-page application (SPA), while other pages will be loaded on demand only when the user browses it.

Serverless Framework: with 30, 000 stars on GitHub, it is a very popular serverless application framework in the industry. Developers can deploy a fully available Serverless application architecture without paying attention to the underlying resources.

Next, we will do this in three steps: create the project → configuration yml file → deployment

▎ tool preparation

First, make sure that the system contains the following environments:

Node.js (Node.js version should be no less than 8.6, version 10.0 or above is recommended)

Git

1. Install Serverless Framework

$npm install-g serverless

two。 Install docsify

$npm install-g vuepress ▎ create a project # create a project directory mkdir vuepress-starter & & cd vuepress-starter# create a new markdown file echo'# Hello VuePresses class2'> README.md# start writing vuepress dev. # build a static file vuepress build.

At this point, you can see the README.md document created under the. / vuepress-starter directory, which will render as the home page content, and you can update the site content by editing docsify/README.md directly. At this point, you can preview locally by accessing http://localhost:8080/ through a browser.

▎ configuration yml file

Under the project directory, create the serverless.yml file:

$touch serverless.yml

Write the following to the yml file above:

# serverless.ymlmyvuepress: component: "@ serverless/tencent-website" inputs: code: src:. / dist # Upload static files index: index.html error: 404.html region: ap-guangzhou bucketName: my-bucket

After the configuration is complete, the file directory is as follows:

/ vuepress-starter ├── .vuepress | ├── dist | | ├── 404.html | | └── index.html | └── serverless.yml └── README.md ▎ deployment

Use the serverless command (you can use the command abbreviation sls) to deploy, and add-- debug parameter to view the deployment details:

$sls-debug

If your account is not logged in or registered with Tencent Cloud, you can log in and register by scanning the QR code on the command line directly through Wechat. This is also a place that I think is very convenient!

During deployment, the terminal displays information to indicate:

$sls (here is a QR code) Please scan QR code login from wechat. Wait login... Login successful for TencentCloud. Myvuepress: url: http://my-bucket-1256526400.cos-website.ap-guangzhou.myqcloud.com env: 59s > myvuepress > done

Visit the url output from the command line to view the VuePress website deployed using Serverless Framework ~

Thank you for your reading, the above is the content of "how to realize the static website of Vue Press based on Serverless". After the study of this article, I believe you have a deeper understanding of how to realize the static website of Vue Press based on Serverless. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.