[Build personal blog notes on the cloud based on OSS]

Build a personal blog on the cloud based on OSS

和ECS前面一样

---

foreword

1. Install Git

(1) On the right side of the lab page, click the icon to switch to Web Terminal.
(2) Execute the following command to install Git:

yum install git -y

(3) After the installation is complete, you can execute the following command to verify the version of Git:

git --version

2. Install Node.js

(1) In the terminal, install Node.js by executing the following command:

curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash - && sudo yum clean all && sudo yum makecache  && sudo yum install -y gcc-c++ make && sudo yum install -y nodejs

After the installation is complete, you can verify the version information of node and npm.

(2) Verify the version information of node:

node -v

(3) Verify the version information of npm:

npm -v

If the version information of both can be successfully displayed, it means that Node.js has been successfully installed.

---

3. Install Hexo

(1) In the terminal, you can install the Hexo client globally by executing the following command:

npm install -g hexo-cli

(2) After the installation is complete, you can execute the following command to verify the Hexo version and its dependencies:

hexo -v

If the Hexo version and its dependency information can be successfully displayed, it means that hexo has been successfully installed.

2. Use Hexo to generate a static blog

Initialize the blog project
Execute the following command in the terminal to initialize the blog project, and at the same time, the dependency packages required by the blog project will be installed:

cd ~ && hexo init blog --no-clone

The successfully initialized terminal is displayed as follows:

Install the hexo-deployer-cos plug-
in In the terminal, run the following command to download and install the hexo-deployer-cos plug-in:

cd ~/blog && npm install hexo-deployer-ali-oss --save
# 可以用npm audit fix 来修复漏洞

Automatically generate blog static files
Execute the following command in the terminal to generate static files:

hexo g

4. Start a Blog

Execute the following command to enter the blog project folder and start the blog project:

cd ~/blog/ && hexo s

Verify that the blog started successfully

IP+4000

5. Deploy a static blog based on Alibaba Cloud OSS

Connect to the ECS server
(1) On the right side of the lab page, switch to the desktop interface.
First understand your own bucket

(3) Click Next in the RAM user login box, copy and paste the sub-user password in the upper left corner of the page to the user password input box, and click Login.

2. Enter the OSS console

(1) Copy the address below, open a new tab in the Chromium web browser, paste it and access the OSS console.

https://oss.console.aliyun.com/

(2) In the left navigation bar of the OSS management console, click the Bucket list.

On the Bucket list page, click the Bucket name.

Note: You can check the bucket name of your OSS in the cloud product resource list.

Modify bucket configuration

Enter the Bucket permission control and change the Bucket permission to public read and write

---

Enter Bucket file management and add authorization

Authorize the user to: all accounts, set the permission to read/write, set the access method to HTTP, click OK.

Among them, your oss region code refers to the official documentation of Alibaba Cloud Region . For example: the value corresponding to East China 2 (Shanghai) displayed in my Bucket overview is: oss-cn-shanghai

Note: The colon must use an English colon. There must be no space before the colon, and there must be a space after the colon. This is the fixed way of writing yml.

After finishing editing, press esc to enter: wq, save and exit.

Execute the following command to regenerate the static files.

hexo g -d

6. Create articles

Create an article markdown template
Execute the following command to enter the blog project directory and create a new article

cd ~/blog && hexo new first

The example picture is as follows:

After the command is executed, a markdown file will be generated in source/_posts, and this command will generate a "first.md" file.

Write a markdown file
(1) Open the first.md file and write the generated article template:

vi source/_posts/first.md

(1) After entering the writing interface, the automatically generated markdown file is shown in the figure:

(2) Edit the content you want to edit below, support markdown syntax, the example is shown in the figure:

Press esc to enter: wq, save and exit.

(3) Regenerate static files and deploy to Alibaba Cloud OSS

Execute the command to regenerate the static files and deploy to Alibaba Cloud OSS:

cd ~/blog && hexo g -d

The execution result is shown in the figure:

verify whether the upload of Alibaba Cloud OSS is successful,
return to the browser interface just now, click [File List] in the list on the left side of the storage bucket, if the file list contains static files generated by static blogs, it means static The file is automatically uploaded to Alibaba Cloud OSS through the plug-in successfully. The example picture is as follows: