Many people want to have their own personal blog, but also look beautiful and cool.Especially for developers, not only can they share their technological insights, but they can also add points during interviews.Here are two useful artifacts. They can be done in 3 minutes without having to be busy at the front (front) and back (back). This article is free to share with you.

Tool introduction

• Serverless Framework : Serverless Framework is a very popular Server-Free application framework in the industry. Developers can deploy a complete and available Serverless application architecture without concern for underlying resources.
• Hexo : Hexo is a fast, concise and efficient blog framework.Hexo uses Markdown (or another rendering engine) to parse the article, and within seconds, it can generate static pages with beautiful themes.

Deploying a Hexo Web site using the Serverless Framework takes only three steps: installation and initialization configuration of yml files deployment

Installation and Initialization

In three simple steps, you can quickly build a Serverless Hexo site using the Serverless Website component.

First, make sure the system contains the following environments:

• Node.js (Node.js version needs to be no less than 8.6, Node.js version 10.0 and above is recommended)
• Git

If the above application is not installed, you can refer to Installation instructions.

1. Install Serverless Framework

$ npm install -g serverless

2. Install Hexo

$ npm install -g hexo-cli

3. Initialize the project

$ hexo init hexo   # Generate hexo directory
$ cd hexo
$ npm install

After initialization, the directory of the hexo folder is as follows:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

4. Generate local blog pages

hexo g   # generate

You can generate static pages using the hexo g command, or run the following command to view page effects locally by accessing http://localhost:4000 through a browser.

hexo s   # server

Configure yml file

Under the project directory, create the serverless.yml file

cd.> serverless.yml

Write the following into the yml file above:

# serverless.yml

myWebsite:
  component: '@serverless/tencent-website'
  inputs:
    code:
      src: ./localhexo/public # Upload static files generated by HEXO
      index: index.html
      error: index.html
    region: ap-guangzhou
    bucketName: my-bucket-hexo

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

.
├── .serverless
├── hexo
|   ├── public
|   ├── ...
|   ├── _config.yml
|   ├── ...
|   └── source
└── serverless.yml

deploy

Deploy with the sls command and add the--debug parameter to view information during deployment

If your account is not Land or register Tencent Cloud, you can authorize landing and registration directly through the two-dimensional code in the WeChat scan command line.

PS serverless --debug

  DEBUG ─ Resolving the template's static variables.
  DEBUG ─ Collecting components from the template.
  DEBUG ─ Downloading any NPM components found in the template.
  DEBUG ─ Analyzing the template's components dependencies.
  DEBUG ─ Creating the template's components graph.
  DEBUG ─ Syncing template state.
  DEBUG ─ Executing the template's components graph.
  DEBUG ─ Starting Website Component.

Please scan QR code login from wechat
Wait login...
Login successful for TencentCloud
  DEBUG ─ Preparing website Tencent COS bucket my-bucket-1250000000.
  DEBUG ─ Deploying "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ "my-bucket-1250000000" bucket was successfully deployed to the "ap-guangzhou" region.
  DEBUG ─ Setting ACL for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ Ensuring no CORS are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ Ensuring no Tags are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ Configuring bucket my-bucket-1250000000 for website hosting.
  DEBUG ─ Uploading website files from D:\hexotina\localhexo\public to bucket my-bucket-1250000000.
  DEBUG ─ Starting upload to bucket my-bucket-1250000000 in region ap-guangzhou
  DEBUG ─ Uploading directory D:\hexotina\localhexo\public to bucket my-bucket-1250000000
  DEBUG ─ Website deployed successfully to URL: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com.

  myWebsite:
    url: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com
    env:

  13s » myWebsite » done

By accessing the website url of the command line output, you can view your own Serverless Hexo site.

If you need to update articles in the hexo site, just rerun hexo g locally to update the local page, and then run sls to update the Hexo site directly~

• Specific code can refer to the full template repository

Summary

This article shows how to take advantage of Tencent's cloud Server-Free framework Serverless Framework To create a personal blog, Hexo has a rich plug-in system that allows you to develop more personalized features based on the Serverless Framework and hexo, such as customizing Themes, posting at the top, adding small icons, and so on.Using these two tools together, they are easy to deploy and are ideal for developers who want to quickly build static websites.

Welcome to: Serverless Chinese Network , you can Best Practices Experience more development of Serverless apps here!