The Road to Building a Website

Preface#

Looking back to my university days, I wanted to have my own website. At that time, I used a method of internal network penetration and found an HTML template online, which seemed somewhat decent, but in reality, it was completely unsustainable for development or maintenance.

Since starting work, I have never settled down, constantly moving, and no longer having a fixed IP. Internal network penetration is impossible now. Seeing personal blogs from big names like Ruan Yifeng and Pi Zi Heng made me very eager. Living in various forums is ultimately not good ~~after all, posting meaningless content every day~~.

Recently, I saw a very beautiful personal blog, which is the template project of this site. It features front-end and back-end separation, independent management, and writing articles on the back end is very convenient. I decided to fork it heavily.

This big name is

Innei (Innei) (github.com)

Undergraduate graduation project

Graduation Project

The open-source Mix-Space blog developed can be said to be super beautiful and very convenient for plagiarism.

[!NOTE]

My plan is to use Tencent Cloud platform. Compared to the official documentation and a few community documents, non-professional aspects are much stronger. Since I am not an internet-related engineer, I tried for a long time in a virtual machine. The official or community documentation always has many things I don't quite understand. Combining various articles, I finally explored my own way of building a website.

Other references:

Official Documentation Docker Deployment | Mix Space (mx-space.js.org)

Community Documentation https://www.miaoer.net/posts/blog/mx-install

So, the following preparations are needed:

A computer that can access GitHub (recommended steam++ for acceleration)
About 800 yuan at most (for purchasing servers, domain names, SSL services, and other network services that are difficult to manage)

The domain name and server that need to be purchased in this article are placed at the very beginning because many points in the deployment process require binding these contents. Additionally, applying for actual issuance takes some time—ranging from a few hours to several days. 😒

Preparatory Work#

1. First, explain the overall idea#

This website framework is packaged using Docker technology and exists in container form deployed on a server (or your own local Linux).

At the same time, the framework is front-end and back-end separated, so what is ultimately presented in the system is two containers. These two container applications occupy the back-end port 2333 and the front-end port 2323 of 127.0.0.1, facilitating local front-end and back-end interaction.

To access the blog using a URL similar to www.yono233.cn, it is necessary to bind the URL with the DNS provider (cost involved), allowing them to link the URL with your server's public IP, and then redirect this access request to the local front-end port 2323 of 127.0.0.1. As far as I know, directly entering the URL will almost certainly lead to a website starting with https://. I won't elaborate on the differences between https and http here; in any case, https is considered secure, and this security certification and service need to be handled by oneself (cost involved). Similarly, the back-end management URL also needs to be bound in this way.

ps: 127.0.0.1 is the local loopback IP.

2. Websites and tools needed#

Here are the websites that need to register accounts. It is recommended to register in advance or open another browser for backup, as some involve foreign websites, and it is uncertain whether registration or access will go smoothly.

Well-known same-sex dating site https://github.com/

~~Third-party account login verification https://dashboard.clerk.com/~~ Deprecated in the latest version

Cloud server provider https://cloud.tencent.com/

The famous MS image hosting Image Upload - SM.MS - Simple Free Image Hosting

3. Confirm that you have a brain capable of analogical reasoning#

First, at least be clear about how to type commands in the command line and copy-paste;

Secondly, you should be able to take error messages to Baidu or GPT;

There will ultimately be many problems during the deployment process. Your plan or the network environment at that time may also differ, and you need to solve them yourself.

Purchase a Domain Name#

Find the domain registration page in Tencent Cloud, buy a satisfactory domain name, and it is recommended to purchase DNS resolution services at the same time; otherwise, there is a certain probability that the website will not go up, and you still need to pay a protection fee to the DNS provider.

Find the SSL certificate page. Currently, there are still free certificates available for application. Apply for both the top-level domain itself and the commonly accessed page with www..

My plan is to use the non-www. version as the blog back-end and the www. version as the blog front-end.

Of course, if you want to use another domain as the blog back-end, you can do so; just replace all the blog back-end URLs with your desired ones in the subsequent configuration.

Start the Cloud Server#

Tencent Cloud, this lightweight application server is probably the cheapest type; just buy the cheapest one, which is sufficient for a personal blog.

If you still have student status or student friends, you can look for student discounts.

It is best to choose a system with a certain UI. I use the Baota Linux panel, which is probably the most foolproof website deployment.

Lightweight Application Server Lighthouse_Hong Kong Lightweight Server_Overseas Lightweight Server - Tencent Cloud (tencent.com)

Go to the firewall page below and open ports 2323, 2333, 8888, 80, and 443 one by one; otherwise, you won't be able to access the internally deployed website on the server later.

Go to the cloud server management page, follow the prompts, "log in," and copy the command it provides, paste it into the terminal to obtain the initial account password, and save these account passwords for later use.

Enter the address I have masked; that is the server management page. The masked part is your own public IP, and the "panel port" defaults to 8888; just replace those four words with 8888. The management page should look like the following image.

Then click on the Docker page to install Docker support.

Click on the Software Store page to install PM2 Manager and Nginx (the free version). Wait for the installation to complete, and then find PM2 Manager in "Installed," click in, and switch the Node version to the latest version.

Points not mentioned in other documents#

There is a file at the following address that is used to write the Docker proxy URL. Not setting a proxy address accessible from mainland China will lead to many Docker pull failures. Especially for our blog back-end, this caused significant trouble during my deployment process. Common proxies in China cannot be pulled; it is necessary to use proxies from Russian brothers. If the internet environment in mainland China changes and policies tighten again, other solutions will need to be considered.

Edit this file to the following content, setting some proxies for both domestic and Russia, preparing for subsequent Docker pulls.

{
  "registry-mirrors": [
    "https://docker.rainbond.cc",
    "https://do.jiuy.eu.org",
    "https://docker.mirrors.ustc.edu.cn",
    "https://dockerproxy.com",
    "https://docker.nju.edu.cn",
    "https://docker.m.daocloud.io",
    "https://huecker.io",
    "https://registry.docker-cn.com",
    "https://hub-mirror.c.163.com",
    "https://mirror.baidubce.com",
    "https://dockerhub.timeweb.cloud",
    "https://noohub.ru"
  ]
}

Deploy the Blog Back-end#

[!NOTE]

In the Terminal page, type commands. It is recommended to open another management page, as some files are easier to edit in the File page; editing in the command line is too painful.

1. Check Docker Installation#

Type the following command. If Docker is installed correctly, it will return two version numbers.

docker -v

docker compose version

2. Pull Configuration Files#

Type the following command to pull the back-end Docker configuration template.

cd && mkdir -p mx-space/core && cd $_

# Pull docker-compose.yml file
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

The pulled configuration file is located at the following position and needs to be edited later. At this time, the terminal should also be in this folder. The terminal needs to run commands in this folder later. If you accidentally close the current terminal, you need to CD back to this folder to type commands.

You might use the following commands to cd

cd
cd mx-space
cd core

3. Edit the Pulled Configuration File#

The following image shows the parts that need to be modified. Note, note, note, you need to open another management panel webpage to edit the file. Avoiding the hassle of going back to the original folder if our terminal is closed, which can be cumbersome and error-prone.

Below is my editing for this part, which you can refer to and edit and save.

[!CAUTION]

JWT Secret: JWT_SECRET needs to be filled with a string of length no less than 16 characters and no more than 32 characters, used for encrypting the user's JWT. Be sure to keep your secret safe and do not disclose it to others. In fact, for those who just want to create a personal blog to log, you can fill it in randomly here.

Allowed Domains: ALLOWED_ORIGINS needs to be filled with the allowed domains, usually the front-end domain. If multiple domains are allowed to access, separate them with commas. If you haven't bought a domain yet, you can only fill it in randomly here, but after purchasing the domain later, this back-end needs to modify the configuration file and rebuild the container, which is quite troublesome. It is recommended to buy the domain first and fill it in here.

Enable Encryption: ENCRYPT_ENABLE If you are sure you want to enable encryption, change false to true. After enabling encryption, you need to fill in the encryption key below. Just leave it as false.

Encryption Key: ENCRYPT_KEY If you don't know what this is, it is not recommended to enable this feature. For specific content, refer to https://mx-space.js.org/usage/security.html. It is recommended not to fill this in.

    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      - JWT_SECRET=xxxxxxxx_xxx_xxxxxx_xxxx
      - ALLOWED_ORIGINS=www.yono233.cn
      - ENCRYPT_ENABLE=false
      - ENCRYPT_KEY=

4. Start Core#

Again, note, note, note, at this time the terminal should be running in the folder mentioned in step 2, pulling the configuration files. The command line display before the terminal should look like this.

[root@VM-20-5-opencloudos core]#

If not, you might use the following command to CD here.

cd 
cd mx-space
cd core

Type the following command to start Core.

docker compose pull
docker compose up -d

Due to the wall issue, many times it may fail to start. You can use the following restart command and then try the above Core start command again.

If it still doesn't work, you can restart the server and try starting Core again.

sudo systemctl daemon-reload
sudo systemctl restart docker

Bind the Blog Back-end#

1. Add Back-end Site#

In the Website page, add a site. Here, the domain name is filled in without the "www." version, as the back-end domain name.

The "Remarks" field can be filled in arbitrarily; I filled it in as "Blog Back-end."

2. Set Up Back-end Reverse Proxy#

After creating the site, go to Settings - Reverse Proxy - Add Reverse Proxy.

Set the proxy name here for easy management as Back-end.

Target URL: http://127.0.0.1:2333 Sending Domain: $host

Here, it is essentially bridging to the local loopback IP.

3. Modify the Back-end Configuration File#

After saving, click on Configuration File and copy the configuration file text below into it, remembering to select all and delete the previous configuration.

#PROXY-START/
location /socket.io {
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:2333/socket.io;
}


location /
{
    proxy_pass http://127.0.0.1:2333/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache


    set $static_fileJsNv8TWb 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileJsNv8TWb 1;
        expires 12h;
        }
    if ( $static_fileJsNv8TWb = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

4. Configure Back-end SSL Certificate#

Do you remember applying for the SSL when buying the domain? Go back to the SSL page. If the application has been completed, you can download the SSL certificate.

When downloading, select Nginx to download the SSL certificate. Open the compressed package and copy the text of the .key and .pem files (the key and certificate files) into Website Page (where the site was previously added) - Site Settings - SSL - Other Certificates.

Make sure to check if there are any extra blank lines at the end of the two files and delete them.

When saving here, you can choose to enable forced HTTPS; it is recommended to enable it.

5. Initialize the Blog Back-end#

If your back-end address is test.cn, and the front-end address is planned to be www.test.cn (the front-end has not been built yet),

Access the back-end address https://test.cn/proxy/qaqdmin for initialization.

If a page similar to the one below appears, it has been successful. The image is taken from someone else's blog, and the information filled in should not be taken seriously.

Please note the following points:

Front-end Address: Fill in the planned front-end address, noting the prefix https://
API Address: Note that we only authenticated two URLs test.cn and www.test.cn, so here we use the back-end URL. Fill in https://test.cn/api/v2, where the api/v2 field is determined by the configuration file and does not need to be modified if you don't understand it.
Back-end Address: Fill in according to the back-end address as https://test.cn/qaqdmin, where the /qaqdmin field is determined by the source code file and should not be modified.
Gateway Address: Fill in according to the back-end address as https://test.cn directly.

When you reach the Owner Information section, it is recommended to fill everything out.

Please note that the email refers to the address for receiving friend link and comment notifications, which will be set up later in the back-end panel.

The password here is the password for the back-end panel; confirm the password.

For avatar settings and all other images, it is recommended to find an image hosting service. Otherwise, if the server crashes, it will be quite troublesome to restore the images for these blogs. (Later, I still disliked the external image hosting being too slow and switched to internal image hosting on the server.)

You can use this image hosting service

The famous MS image hosting https://sm.ms/Image Upload - SM.MS - Simple Free Image Hosting

Deploy the Blog Front-end#

The tools needed for the front-end website are more, so it is recommended to go to the previous section Preparatory Work - 2. Websites and tools needed and register on each website.

1. Clerk Create Project This part has been deprecated in the latest version of the blog#

~~The following is excerpted from the official documentation. No videos or images have been uploaded to the image hosting service; if the original author's server crashes, there will be no images.~~

Open Clerk Dashboard (opens in a new tab) and click the Add application button, fill in your blog name, configure the information, and click the Create application button to complete the configuration.

~~Please be sure to remember your Clerk page's public key and secret key, as they will be used later.~~

2. Set Theme Configuration#

Also from the official documentation, just a supplement.

Enter the Mix Space back-end (which is the back-end address set during the last initialization of the blog back-end), go to the "Configuration and Cloud Functions" page, click the add button in the upper right corner, and fill in the following settings:

Name: shiro
Reference: theme
Data Type: JSON
Data: (click the button below to copy)

Please note that you need to modify this configuration to meet your needs. Directly using the configuration below may cause your blog to not run as expected. (Do not modify the initial configuration; you can slowly modify the items after you can access the front end.)

The following configuration may not be complete; for more configuration item information, please refer to Configuration Items.

Additionally, the configuration can also be written in YAML format; in this case, the data type should be selected as YAML.

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20236136 号",
        "link": "https://icp.gov.moe/?keyword=20236136"
      }
    },
    "linkSections": [
      {
        "name": "About",
        "links": [
          {
            "name": "About this site",
            "href": "/about-site"
          },
          {
            "name": "About me",
            "href": "/about"
          },
          {
            "name": "About this project",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "More",
        "links": [
          {
            "name": "Timeline",
            "href": "/timeline"
          },
          {
            "name": "Friend Links",
            "href": "/friends"
          },
          {
            "name": "Monitoring",
            "href": "https://status.innei.in/status/main",
            "external": true
          }
        ]
      },
      {
        "name": "Contact",
        "links": [
          {
            "name": "Leave a message",
            "href": "/message"
          },
          {
            "name": "Send an email",
            "href": "mailto:[email protected]",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/innei",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "color": {
      "light": [
        "#33A6B8",
        "#FF6666",
        "#26A69A",
        "#fb7287",
        "#69a6cc",
        "#F11A7B",
        "#78C1F3",
        "#FF6666",
        "#7ACDF6"
      ],
      "dark": [
        "#F596AA",
        "#A0A7D4",
        "#ff7b7b",
        "#99D8CF",
        "#838BC6",
        "#FFE5AD",
        "#9BE8D8",
        "#A1CCD1",
        "#EAAEBA"
      ]
    },
 
    "bg": [
      "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
      "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
    ],
    "custom": {
      "css": [],
      "styles": [],
      "js": [],
      "scripts": []
    },
    "site": {
      "favicon": "/innei.svg",
      "faviconDark": "/innei-dark.svg"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "Innei",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "👋。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "A NodeJS Full Stack ",
            "class": "font-light text-4xl"
          },
          {
            "type": "code",
            "text": "<Developer />",
            "class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
          },
          {
            "type": "span",
            "class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
          }
        ]
      },
      "description": "An independent developer coding with love."
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": true,
        "link": "https://afdian.net/@Innei",
        "qrcode": [
          "https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png",
          "https://cdn.innei.ren/bed/2023/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 1434499
      }
    }
  }
}

Click the button to save the configuration, and then continue with the following steps.

3. Fork the Project on GitHub#

The front-end project address is as follows, also from the big name Innei.

Innei/Shiro: 📜 A minimalist personal website embodying the purity of paper and freshness of snow. (github.com)

Fork this project into your own code repository; otherwise, it may not be pulled down on the server later.

4. Pull the Front-end#

This part is also my original workflow.

Return to the cloud server management backend, open a new terminal.

Enter the following command, replacing the [email protected]:stbanana/Shiro.git part with your own git address, which you can find in your GitHub project in the Shiro section. You can find it in the Code section at the top right, similar to mine.

cd
cd mx-space

git clone [email protected]:stbanana/Shiro.git --depth=1

During the clone process, you may need to enter your GitHub account and password. I remember that when entering the password, the terminal does not display it, which may lead one to mistakenly think they haven't entered it. (If it displays, then I remembered incorrectly.)

After a successful clone, check the files in the corresponding address; it should look like mine.

In the Shiro folder, there is a .env.template file. Copy it in place, rename it to .env, and edit the contents as follows, remembering to save:

NEXT_PUBLIC_API_URL: Set to your back-end domain's API address
NEXT_PUBLIC_GATEWAY_URL: Set to your back-end domain's GATEWAY address
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: Public key from the Clerk website
CLERK_SECRET_KEY: Secret key from the Clerk website

5. Deploy the Container#

The following command line needs to be run in the root/mx-space/Shiro folder. Let's integrate the cd command as well.

cd
cd mx-space
cd Shiro

docker compose pull && docker compose up -d

If there are no errors, the deployment is successful.

Bind the Blog Front-end#

The process is similar to binding the blog back-end, so I will paste it here with only a few minor details modified.

1. Add Front-end Site#

In the Website page, add a site. Here, the domain name is filled with the "www." version www.****, as the front-end domain.

The "Remarks" field can be filled in arbitrarily; I filled it in as "Blog Front-end."

2. Set Up Front-end Reverse Proxy#

After creating the site, go to Settings - Reverse Proxy - Add Reverse Proxy.

Set the proxy name here for easy management as Front-end.

Target URL: http://127.0.0.1:2323 Sending Domain: $host

Unlike the back-end, here you need to fill in port 2323.

3. Modify the Front-end Configuration File#

After saving, click on Configuration File and copy the configuration file text below into it, remembering to select all and delete the previous configuration.

The content here is different from the back-end content!!!

#PROXY-START/

location ~* \/(feed|sitemap|atom.xml)
{
    proxy_pass http://127.0.0.1:2333/$1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
     
    add_header Cache-Control max-age=60;
} 

location /
{
    proxy_pass http://127.0.0.1:2323;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache


    set $static_fileSw1Jy3nG 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileSw1Jy3nG 1;
        expires 12h;
    }
    if ( $static_fileSw1Jy3nG = 0 )
    {
    add_header Cache-Control no-cache;
    }
}
#PROXY-END/

4. Deploy the Container#

Do you remember applying for the SSL when buying the domain? Go back to the SSL page. If the application has been completed, you can download the SSL certificate.

Make sure to check if there are any extra blank lines at the end of the two files and delete them.

When saving here, you can choose to enable forced HTTPS; it is recommended to enable it.

Postscript#

You still need to wait at least 24 hours to file for our front-end URL, but the overall framework has been completed, and www.xxxx.xx should be accessible from the computer.

Note that there is a filing document that needs to be stamped and photographed for upload; you can stamp several times. I stamped a whole bunch before passing, and at least one clear and complete fingerprint is required. All filing processes can be done online, which is a blessing for socially anxious and lazy people.

In the back-end panel under Settings - System, there are:

Website Settings
SEO Optimization
Additional Back-end Settings
Text Settings
Email Notification Settings
Comment Settings
Bark Notification Settings
Friend Link Settings
Backup
Baidu Push Settings
Algolia Search
Terminal Settings

I won't explain each one here.

Please refer to the content in the Getting Started Guide | Mix Space documentation.

This article is synchronized and updated to xLog by Mix Space. The original link is https://www.yono233.cn/posts/novel/24_7_12_jjzl