Building a Website Journey

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, found an HTML template online, and it seemed somewhat okay, but in fact, it was completely impossible to continue developing or maintaining it.

Since starting work, I have never settled down, always moving, moving, moving, and no longer having a fixed IP. Internal network penetration is no longer possible. Seeing the personal blogs of big names like Ruan Yifeng and Pi Zi Heng makes me very eager. Living in various forums is ultimately not good ~~after all, posting nonsense every day~~.

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

It's this big name

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 to plagiarize.

[!NOTE]

My plan is to use the Tencent Cloud platform. Compared to the official documentation and other scarce community documents, non-professional will be much stronger. Since I am not an internet-related engineer, I tried for a long time in the virtual machine, and there are always many things in the official or community documentation that I don't quite understand. Finally, I explored my own way of building a site by combining various articles.

Other references:

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

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

So, a total of these 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 hard to manage)

The domains and servers that need to be purchased in this article are placed at the forefront because many points in the deployment process need to bind these contents. At the same time, applying for actual issuance takes some time—ranging from a few hours to a few days. 😒

Preparatory Work#

1. First, explain the overall idea#

This website framework is packaged using Docker technology and exists on the server (or your own Linux local) in the form of containers.

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, conducting 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 (paying money) to let them 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. Moreover, as far as I know, directly entering the URL will almost certainly lead to a site starting with https://. I won't elaborate on the difference between https and http here; anyway, https is considered secure, and this security certification and service need to be done by yourself (paying money). 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 to keep it handy, as some foreign websites may have uncertain registration or access.

Well-known same-sex dating website 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 that can think critically#

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

Secondly, you should have the ability to take error messages to Baidu or GPT;

There will ultimately be many problems during the deployment process, and your plan or the network environment at that time may also differ, which needs to be solved by yourself.

Buy 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 the DNS provider protection fees.

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, but in the subsequent configuration, just replace all the blog back-end URLs with what you want.

Start the Cloud Server#

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

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

It’s 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 below, follow the prompts, "log in," and copy the command it gives you to the terminal to obtain the initial account password. Save these account passwords for later use.

Enter the address that 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 the Docker page to install Docker support.

Click the Software Store page to install PM2 Manager and Nginx (the free one). 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, it caused a lot of trouble during my deployment process; common proxies in China couldn't pull, and I had to use proxies from Russian brothers. If the internet environment in mainland China changes and policies tighten again, other methods will need to be considered.

Edit this file to the following content, setting some proxies for both China and Russia to prepare 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 configuration template for the back-end docker.

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 in the following position, which 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 may use the following commands to cd

cd
cd mx-space
cd core

3. Edit the Pulled Configuration File#

The part that needs to be modified is shown in the following image. Note, note, note, you need to open another management panel webpage to edit the file. Avoid the hassle of having to CD back to the original folder if our terminal is closed, which can be cumbersome and error-prone.

The following 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 to encrypt the user's JWT. Be sure to keep your secret safe and do not disclose it to others. In fact, for just wanting 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 buying 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 keep it false.

Encryption Key: ENCRYPT_KEY If you don't know what this is, it is not recommended to enable this feature. For specific content, you can refer to https://mx-space.js.org/usage/security.html. It is recommended not to fill it 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, the terminal should be running in the folder mentioned in step 2, "Pull Configuration Files." The display before the command line in the terminal should look like this.

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

If it is not, you may use the following commands 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 command to start Core again.

If it still doesn't work, you can restart the server and try to start 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" item can be filled in casually; 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 Send Domain: $host

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

3. Modify Back-end Configuration File#

After saving, click Configuration File and copy the following configuration file text 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 key and certificate files into Website Page (where the site was added earlier) - Site Settings - SSL - Other Certificates.

Check whether the two files have an extra blank line at the end and be sure to delete it.

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

5. Initialize 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 following appears, it is successful. The image is taken from someone else's blog, and the filled information 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 there is no need to modify it if you don't understand.
Back-end Address: Fill in https://test.cn/qaqdmin according to the back-end address, where the /qaqdmin field is determined by the source code file and should not be modified.
Gateway Address: Fill in https://test.cn according to the back-end address.

When you reach the Owner Information, 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 these blog images. (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 Blog Front-end#

There are more website tools needed for the front end. It is recommended to first register on each website listed in Preparatory Work - 2. Websites and Tools Needed.

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

~~The following is excerpted from the official documentation; videos or images have not been uploaded to the image hosting service, and 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 private key, as they will be used later.~~

2. Set Theme Configuration#

Also from the official documentation, just for supplementation.

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 change the initial configuration; after you can access the front end, you can slowly modify the items.)

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

In addition, 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": "Moe ICP No. 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 also the big name Innei's project.

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; it can be found 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 can mislead you into thinking you haven't entered anything. (If it does display, 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 its content 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: Private key from the Clerk website

5. Deploy the Container#

The following command line needs to be run in the root/mx-space/Shiro folder terminal; 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, then 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 minor details modified.

1. Add Front-end Site#

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

The "Remarks" item can be filled in casually; 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 Send Domain: $host

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

3. Modify Front-end Configuration File#

After saving, click Configuration File and copy the following configuration file text 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.

Check whether the two files have an extra blank line at the end and be sure to delete it.

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 the record for our front-end URL, but the overall framework has been built. The computer should be able to access www.xxxx.xx.

Note that there is a filing document that needs to be stamped and photographed for upload; you can stamp multiple times. I stamped a large area before passing, requiring at least one clear and complete fingerprint. 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
Back-end Additional 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 them one by 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