How the official website of Serverless Devs is deployed through Serverless Devs

Author | Jiang Yu
Source | Alibaba Cloud Native Public
​
Only if you eat your own dog food, what you make is not "🐶". It has been several months since Serverless Devs developed to the present. In these months, Serverless Devs has grown rapidly. A large part of the reason is that "we are eating our own dog food." I believe that if you use things that you don’t like, it will be difficult for everyone to use them.
​
Today's article is about the construction of Serverless Devs official website. The article is very simple and interesting.

What is Serverless Devs?

​
"Serverless Devs" is a serverless developer platform open sourced by Alibaba Cloud, dedicated to providing developers with a powerful tool chain system. Through this platform, developers can experience multi-cloud serverless products with one click, and deploy serverless projects quickly. Serverless Devs allows developers to experience serverless products from multiple mainstream cloud vendors in a shorter path, create and deploy serverless applications at a faster speed, and perform project management and operation and maintenance in a simpler and more automated way. After the platform is fully automated, it can save 99.9% of management costs.
​

• Github address : https://github.com/serverless-devs
• Gitee address : https://gitee.com/organizations/serverless-devs/projects
• Serverless Devs official website : https://www.serverless-devs.com

Serverless Devs and Docusaurus

​
As we all know, the official website of an open source project should not be too complicated. In fact, it is simple and simple. So after a long period of comparison, we finally chose Docusaurus as the official website's framework. So the question is, how do we build the official website after our selection is over?
​
After some simple research, we decided to use Serverless Devs to build the official website of Serverless Devs and deploy it to the Serverless architecture. It's pretty confusing, right? However, this process is really "classic":
​
We initialized Docusaurus through Serverless devs: s init devsapp/website-docusaurus, this part can refer to the document: https://github.com/devsapp/website-example .
​
To be honest, although it is just a line of code, the entire initialization is quite "pleasing to the eye". As a tool for the full life cycle of a Serverless application, Serverless Devs has done a lot of work on the scaffolding and guidance level:
​

As you can see, during initialization, the system guided us to fill in the project name, bucket name, and key information needed, and after the completion, it also told us:
​

You could [cd /Users/jiangyu/Desktop/start-fc/website/serverless-website] and enjoy your serverless journey!

​
It still feels very intimate.
​
Next, follow the instructions:

You can see the help document:
​

After executing s website-starter -h, the help information is run for the first time, which may involve the component loading process. After a while, you can see the help information:
​

At this point, if we want to deploy the project online, we only need to execute s deploy.
​
Of course, we also need to configure the project and build our official website.
​
For website construction, you can refer to the official website of Docusaurus. For the configuration of the website components of Serverless Devs, you can refer to the figure above to give us 🧭 More information: https://github.com/devsapp/website:
​

You can learn more about the configuration content in the document, and finally generate our s.yaml:

edition: 1.0.0
access: website_access

services:
  website:
    component: devsapp/website
    actions:
      pre-deploy:
        - run: npm install
          path: ./
        - run: npm run build
          path: ./
    props:
      bucket: serverless-devs-website
      src:
        codeUri: ./
        publishDir: ./build
        index: index.html
        subDir:
          type: index
      region: cn-hongkong

CD and Serverless Devs

​
When we have established the website page, it can also run normally locally, and can be deployed smoothly through the local s deploy. At this time, we face a new problem: how do I update my website? Do I have to manually publish it locally every time? Is it possible to use Github Action to access automation capabilities?
​
and so:
​

• We created a warehouse: _ https://github.com/Serverless-Devs/website_
• After we pushed the code to the warehouse, we created a Github Action configuration:

name: Website Publish

on:
  push:
    branches: [ master ]

jobs:
  publish-website:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - run: npm install
      - run: npm install -g @serverless-devs/s
      - run: s config add --AccountID ${{secrets.ALIYUN_ACCOUNT_ID}} --AccessKeyID ${{secrets.ALIYUN_ACCESS_KEY_ID}} --AccessKeySecret ${{secrets.ALIYUN_ACCESS_KEY_SECRET}} -a website_access
      - run: s deploy

At this point, I push the code again to automatically publish the website.

The core points here are as follows:
​

1. Install Serverless Devs: run: npm install -g @serverless-devs/s
2. Configure key information: run: s config add --AccountID ${{secrets.ALIYUN_ACCOUNT_ID}} --AccessKeyID ${{secrets.ALIYUN_ACCESS_KEY_ID}} --AccessKeySecret ${{secrets.ALIYUN_ACCESS_KEY_SECRET}} -a website_access
3. Deployment: run: s deploy

The whole effect:
​

Page after deployment:
​

It should be explained here that the key information configured here uses the Secrets function of Github. This function is still relatively basic, so I won't go into details. The main thing is to configure the key information required for the release into Secrets.

to sum up

​
In fact, at present, many people's blogs and some official websites are deployed through static websites, etc. It is more convenient to use Serverless Devs:
​

• Thanks to the behavior description of Serverless Devs, we can more easily integrate instructions such as npm install and npm run build into the project.
• Thanks to the guidance capabilities of Serverless Devs, including creation, entry, and access to key configuration, Serverless Devs is indeed constantly starting from the details and working hard for convenience.
• Thanks to the flexibility of Serverless Devs, only two or three lines of code are needed to configure Github's CD capabilities and continue to publish the website. Personally, this is quite cool.

Of course, at present, there are still some questions waiting to be done:

• The scene of Serverless Devs still needs to be enriched.
• The official website of this community only has CD. Without CI, there is still a certain risk, and it needs to be gradually improved.