Publish a React website mannually

1. Introduction

We have a website https://yingjinglab.com/, which is using these techniques to make alive:

1. React: single page application

2. Nginx: server software to serve the front-end

3. NameCheap: domain name, DNS and HTTPS certificate

4. Aliyun: cloud server to setup nginx and deploy the code

5. GitHub: code repository:

The website has no database. Updating the site requires changing the code, build front-end, and re-deploy on the cloud server.

2. Change Code

Make sure you have the permission to push to the repo. The easiest way is to update the content on GitHub webpage, for example, https://github.com/HsiaoKaiFan/jingyinglab/edit/main/src/data/publication.json:

Here we simply add a period for demonstration purpose. Click the button "Commit Changes ..." after you have done the modifications.

3. Deployment

The site is hosted on an Aliyun cloud server. Login to it, choose "轻量服务器" -> “JingLab". Remember to choose "中国香港" as the server location:

Click “远程连接" to login to the server through web SSH:

Run these commands line by line on the terminal:

What these commands do is:

1. Pull the latest code from GitHub

2. Build the front-end

3. Copy the built files to the nginx server

4. Restart the nginx server

Take note that our front-end source code is at /home/admin/jingyinglab, the compiled code (to be deployed) is at /var/www/html/.

In case you need to change nginx configurations, the configuration file is /etc/nginx/sites-enabled/default.

Finally, refresh https://yingjinglab.com/publication and you should be able to see the changes applied.