preface

Having previously deployed a Hexo blog with Serverless’s Website component, I recently decided to redeploy the blog for a variety of reasons. Sorted out some problems with existing blogs:

  1. Manual construction and release are tedious and easy to misoperate
  2. Relying on local devices and not being able to blog while switching computers
  3. The deployment tool used at the time was Serverless Component V1, which is no longer officially maintained
  4. There is something wrong with domain name resolution. Every time, IT is redirected to cos bucket address. This domain name will be blocked in wechat and cannot be opened, and the sharing mechanism is very unfriendly.

Based on the above problems, I finally decided to migrate my blog. The current plan and progress are as follows:

  • Solve problem 4 by enabling the new domain name blog.tinafang.com
  • Upgrade to Component V2 to solve problem 3
  • Add some friendly sites, such as Yuga, only
  • Compatible with previous blog addresses, including COS and custom domain names
  • Upload it to the Github Repo and solve problem 2
  • Build your own chart bed, optimize the size and size of the picture.
  • Access the Github Actions automated CI process to solve problem 1

Migration steps

1. Submit the local code to the github remote

  1. Create a new library on gitHubhttps://github.com/tinafangkunding/tina-blog
  2. Terminal CD Project file directory,
  3. git init
  4. git add -A(Enter the file to add the file, -a means to add all files)
  5. Git commit -m
  6. git remote add origin url(This URL is the URL of your library)
  7. git push -u origin master(Submit local warehouse to github account)

After refreshing, you can see the code github.com/tinafangkun…

2. Upgrade to Component V2 deployment mode

  1. Put the old in the local environmentserverless.ymlChange the name and rebuild a new oneserverless.yml
  2. And change the configuration to the V2 specification: the v2 version configuration reference for Website Component, as well as the configuration below.
  3. To apply for the certificate for the new domain blog.tinafang.com, I applied for the free 1-year DV certificate on Tencent Cloud. Half an hour later the application and verification were completed.
  4. inserverless.ymlTo configure the new domain name and certificate ID, specify the original cos-bucket (overwrite deployment), and manually deploy it successfully.
  5. Add a Cname record to DNS. Wait 1-2 minutes for the effect to take effect

At this point, execute the following command again to update to the Github repository

git add -A
git commit -m "v2"
git push
Copy the code

For ease of reference, the configuration of serverless.yml is posted here, along with some considerations.

# serverless.yml
component: website # (required) references the name of Component, currently used in the Tencent -website component
name: tinablog # (Required) Name of the instance created by the Website component
app: tinablogApp # (Optional) Name of the website application
stage: prod # (Optional) Used to distinguish environment information. The default is dev

inputs:
  src:
    #src: ./public
    index: index.html
    error: index.html
    dist: ./public   Dist hook: Dist hook: dist hook: dist hook
    hook: npm run build
  region: ap-guangzhou
  bucketName: my-hexo-bucket
  protocol: https
  #cdn
  hosts:
    - host: blog.tinafang.com
      async: false # false automatically refreshes, not true
      area: mainland
      autoRefresh: true
      onlyRefresh: true CDN does only refresh when #true
      https:
        switch: on
        http2: on
        certInfo:
          certId: 'haMhGlIc'
Copy the code
  • Problem: After several discovery deployments, the content of cos domain name was updated quickly every time the article was updated, but the content of self-defined domain name blog.tinafang.com was updated very slowly. Later, it was found that CDN had a cache problem.
  • Solution: Set async to false, auteRefresh to true, and onlyRefresh to true after the first deployment. Edit the content again and deploy it, and you can see it working quickly!
  1. Async parameter: whether to wait for CDN configuration synchronously. When the parameter is set to false, the autoRefresh parameter takes effect automatically. If multiple domain names are associated, you are advised to set the parameter to true to prevent timeout.
  2. AutoRefresh parameter: enables automatic CDN refresh to quickly update and synchronize site content displayed in domain names. (This capability can also be refreshed manually on the CDN console, but the website component has nicely integrated it. Cool)
  3. OnlyRefresh parameter: you are advised to set this parameter to true after the first deployment. That is, you can ignore other CDN configurations and onlyRefresh CDN configurations

3. Github Actions configuration (to be continued)

The plan was to configure Github Actions to automatically build and deploy every Git push. However, the theme I’m currently using for Next has an empty style in the Github repository, so it fails every time I run the CICD process.

This problem is still to be solved. Zhihu and other forums also have some discussions for reference.

Hexo + Git CICD reference documentation (Hexo cli here are used to do, and I don’t demand) www.jianshu.com/p/21dbc53a4… Zhuanlan.zhihu.com/p/133764310 sanonz. Making. IO / 2020 / deploy…

Making Actions + Serverless reference documentation cloud.tencent.com/document/pr… Blog.tinafang.com/2020/09/30/…

If you create the workflow main.yml file on the remote end, remember to pull the latest git code. Git push 2, Github Actions: Sudo is required to install serverless Framework, otherwise it will report insufficient permission error

Summary and outlook

The deployment process and visitor experience improved before and after the blog moved.

  • Deployment process: Needed beforehexo gaftersls --debugNow that hook is configured, only one step is requiredsls deploy. But because CICD didn’t get through, you still need to manually synchronize to the Github Repo
  • Access experience: The problem of wechat blocking is solved mainly through HTTPS’s self-defined domain name
  • Picture storage: Use your own chart bed (also based on Serverless) to store pictures, which is good for SEO and more stable and controllable.
  • Configuration update: added some links, classification modules in the blog.





Project address: github.com/tinafangkun…

New address: blog.tinafang.com/

Build blog with Serverless is just the primary gameplay, about Serverless more interesting applications, you can refer to Serverless 100 kinds of gameplay this project, welcome to contribute!

🏆 issue 7 | all things can be Serverless technology projects