Alibaba Cloud deploys a static website

0. Preface

• Belongs to the last step of the note-taking trilogy:
  • The first step: Take notes through Markdown and choose the Markdown editor that suits you.
  • Step 2: Convert the Markdown file to a website, that is, select an appropriate static website generator.
  • Step 3: Deploy the generated static website and set the domain name.
• A more convenient way is to deploy the website in Github Pages. General static website generators have tools for this.
• This article describes deploying a static website on your own cloud server (Alibaba Cloud) and setting your own domain name.
  • Advantages: high degree of freedom, access speed is much faster than Github Pages.
  • Disadvantages: very troublesome, really troublesome.
  • step:
    • Step 1: Purchase a cloud server and domain name.
    • The second step: website registration.
      • If the server is a domestic server, if you want to bind a domain name, you need to file.
      • Because Github is deployed abroad, you can directly specify the domain name without filing.
    • Step 3: Deploy the blog and static website generator to the cloud server.
    • Step 4: Configure nginx/apache/tomcat, etc. on the cloud server to display the static website.
• This article focuses on the second step (Alibaba Cloud website filing) and the fourth step (nginx deployment of static website).

1. Website filing

• Alibaba Cloud provides website filing services and introduces the procedures for filing.
  • 
  • 
• You can spend money to ask someone to help, but I don’t think it is necessary...
• Steps for filing a personal website
  • The first step: preparations.
    • Prepare the domain name and server ip
    • Keep your ID card by your side (seems like you can’t use the pictures you took before, take them now)
    • To choose a name for your website, there are some requirements, such as at least three Chinese characters, no overlapping characters, and no words "blog".
  • The second step: enter Alibaba Cloud and submit for record review, which is divided into four steps.
    • Basic information: write your own address, name, ID number, and domain name.
    • Sponsor information: In fact, it's your own information.
    • Website information: It is actually the name of the website.
    • Uploading information: The facade is written very mysteriously. In fact, it is to take a photo with an ID card and take a short video of it. In addition, this part is done on the Alibaba Cloud mobile app.
      
  • Step 3: Wait for Alibaba Cloud's review. In fact, Alibaba Cloud will call us to confirm the information, and if there are any errors, it will be brought forward.
    • Fun fact, my suffocation amplifier with the customer service lady (background: I named the website "Qinghuan Personal Blog" before):
      • Customer Service Sister: The word blog cannot appear.
      • Me: It's called "Qinghuan".
      • Customer Service Sister: No less than three words.
      • Me: It's called "Qing Huanhuan".
      • Customer Service Sister: Redundancy is not allowed.
      • Me: Sister I was wrong, let me think about it. . (Inner mind: The customer service sister does not know how many times I met me in a day)
  • Step 4: SMS verification by the filing bureau. Just follow the SMS reminder.
  • Step 5: Wait patiently.

2. Alibaba Cloud deploys a static website

• Tools used:
  • Static website generation tool: vuepress (in fact, all tools are the same)
    • The so-called static website generator is to generate a static website...
    • The command used in vuepress is npm run docs:dev
    • The so-called "generated website" is actually a folder with a bunch of js/html/css.
  • Web server: nginx
• The essence of Alibaba Cloud's deployment of static websites is to configure nginx.

2.1. Nginx installation and common commands

• Installation: I use Ubuntu, so directly through the sudo apt install nginxinstallation.
• Commonly used commands:
  • Turn on/off/restart:service nginx start/stop/restart
  • Check the nginx version:nginx -v
  • View the configuration file path:nginx -t
    • 
  • help:nginx -h

2.2. nginx configuration

• View the configuration file path:
  • The default is in /etc/nginx/nginx.confthe
  • You can nginx -tview the current profile path command.
  • Also can be nginx -hseen -cto review the default value of the option.
• Focus on the include command in the http block to see where the custom configuration file is
  • If not, you can add a sentence yourself.
  • For example, in my profile, there is one include /etc/nginx/conf.d/*.conf;, that is, custom configuration file can be placed /etc/nginx/conf.dunder the folder name is already .confending.
• There are several main contents of writing a configuration file by yourself:
  • Set the port, ielisten
  • The ip and domain name that need to be mapped are server_namerelated. If there are more than one, use a space to separate
  • The path where the generated website is located, which is spliced rootwith the locationpost-relative path
  • The entry file, that is index, the following file, has multiple spaces separated by spaces

    server {
        listen       80;
        server_name  47.92.88.222 yeahflash.com;
        location / {
            root /root/deploy_blogs/docs/.vuepress/dist;
            index index.html;
        }
    }

2.3. Mining pit

• phenomenon:
  • Use the default configuration to see the page normally.
  • Static website into the /usr/share/nginx/htmldirectory can be displayed properly.
  • Local Path setting ~/path/to/distis 404.
• the reason:
  • Permissions issue……
  • Ali cloud on ubuntu 18.04, the user name is root, ~the path is the /rootpath
  • The permission of this path is 700, and nginx does not seem to be started by the administrator, so there is no rootpermission to read and write ...