Preface

Actually, there are the following 2 considerations for making this navigation page:

Coping with regular ICP filing inspections

My ICP filing is with Tencent Cloud, and Tencent Cloud regularly checks the content of the site corresponding to the www host of my filed domain name. First, they check if the site is online; second, they check if the site name matches the one filled in during the filing process; third, they check if the ICP filing number is correctly displayed. The second and third points are quite annoying for me. Because during the filing process, the site name was just a random name filled in to pass the initial review (it was rejected several times because I wasn't allowed to use names containing the word "blog"), and I am not allowed to change this name, making my blog name look awkward (I used to point www directly to my blog). Also, putting an ICP filing number at the very bottom of the blog really lowers its aesthetic appeal... So I thought, why not just set up a static page associated with the www host, put the filed site name and ICP filing number on this static page, and free my blog...

Application classification navigation

I indeed have too many types of applications, and I really need a navigation page. When someone accesses my www host, they can intuitively see my main applications through this navigation page, which will be much clearer. However, those personal navigation pages on the internet (see my article:Docker Series: Using Docker to Build Your Own Exclusive Navigation Page Based on Heimdall) are actually only suitable for personal use and not suitable as a publicly accessible navigation page. So after some searching, I found this iCloud-style navigation page:

Doesn't it look pretty good? So this article will briefly introduce the setup of this static page.

The GitHub project address is as follows:https://github.com/asundust/NAS-Nav-iCloud

First, download the source code files. If GitHub is inaccessible, you can also visit the following link to download:Invincible File Sharing, and the access password is: ”blog.tangwudi.com”. Just download the ”NAS-Nav-iCloud-master.zip” file from it.

Note: Actually, this page was originally intended as a navigation page for NAS, so it comes with a built-in function to toggle between internal and external network links. However, since I am using it as a www page, some modifications are needed.

Deploying using Baota Linux Panel

Install Nginx

Enter ”nginx” in the application search box on the right side of the ”App Store” and press Enter, then select Nginx below, and click ”Install” in the red box on the right:

Keep the default fast installation option. Compiled installation is also fine, but it will take more installation time. Then click ”Submit” in the red box at the bottom right to install:

Install PHP

Select ”Runtime Environment” on the right side of the ”App Store”, enter ”PHP” in the search box and press Enter, then select a PHP version below to install (for example, I chose PHP-7.4), and click ”Install” in the red box on the right:

Both compiled installation and fast installation are fine. The default is fast installation. Click ”Submit” in the red box below to install.

Prepare the access domain name

There are no special requirements for this domain name. If it is mainly for domestic access in China, it is best to have an ICP filing, so that you can achieve a better access experience through many domestic CDN providers. If you do not have high requirements for the access experience, it doesn't matter if it is not filed. Building a site through Cloudflare is not completely inaccessible; it can still basically be opened, just a bit slower~.

Assuming the demonstration domain name is:www.example.com。

Create a new site

Log in to the Baota Linux Panel. As shown in the red box, click ”Add Site” on the right side of the ”Website” interface:

Fill in the correct domain name in the domain name section of the red box in the figure below. When the final access request reaches Nginx, Nginx will compare the domain name contained in the host field of the HTTP request with the domain name configured for its own site, and will only process it if they match. Select a version you have already installed for the PHP version, and finally click ”Submit” in the red box at the bottom right to complete the creation of the site:

(Optional) Configure SSL Certificate

For friends with a public IP, although it is optional, it is still recommended as a must-have, as HTTPS has basically become standard now. Generally, there are two methods: manually importing certificates and automatically applying using Let's Encrypt.

Manually importing certificates:
To manually import a certificate, you first need to have a certificate. You can get them for free from Tencent Cloud or Alibaba Cloud (if your domain name happens to be purchased from Tencent Cloud or Alibaba Cloud). Generally, you directly download the Nginx-format certificate. The content of the file with the .key extension corresponds to the private key, and the content of the file with the .crt extension corresponds to the certificate. Paste them into the corresponding red boxes respectively, and then click the ”Save and Enable Certificate” button in the red box at the very bottom.

Automatically applying for certificates:
It is generally recommended to directly use Let's Encrypt to apply for certificates, provided that the domain name resolution has been correctly configured, because Let's Encrypt will first query whether this domain name can be correctly resolved when applying for a certificate:

The DNS interface is to select your domain name provider, with the following options:

If your domain name provider happens to be among these four, you can use it directly (you need to correctly set the ID and API key); otherwise, you can only choose manual resolution.

---

Note: If you do not have a public IP address but want to use HTTPS for external access, the easiest way is to build a site using Cloudflare's Tunnel method. For detailed steps, see my other article:Tips and Tricks Series: Using Domestic Cloud Hosts or Home Devices to Get Free Cloudflare for Fast Website Building, the biggest advantage of this method is that you only need to provide internal HTTP access, and Cloudflare will automatically convert it to HTTPS externally.

---

Deploy source code

Upload the previously downloaded source code (NAS-Nav-iCloud-master.zip) to the directory ”/www/wwwroot/www.example.com” through the ”Files” interface of the Baota Panel:

Right-click directly on the zip file you just uploaded, and then select ”Unzip”:


Enter the extracted ”/www/wwwroot/www.example.com/NAS-Nav-iCloud-master/web” directory, and cut all the contents inside to the site directory ”/www/wwwroot/www.example.com”:


Delete redundant files, and the final result is as follows:

Honestly, if the network access policy is set normally and the domain name resolution is also normal, you can already access it via thehttps://www.example.comaddress to access the default interface. The effect is as follows:

Next, we need to modify each icon on this default interface and the link redirected to after clicking the icon to meet our actual needs.

Modify icons and actual links

Still in the file function menu, directly double-click to open the ”index.html” file on the right. Of course, you can also directly download it to your local computer and edit it with other text editors, this depends on your habit:

Opening ”index.html”, you can actually directly see very detailed comments:

The specific definitions of icons and links start from line 187:

Each red box in the image above represents an icon and the corresponding link after clicking this icon.
Taking the first red box ”My Blog” as an example to demonstrate how to modify it:

Change the ”#” in the first red box to the real link, for example, my blog domain name is:https://blog.tangwudi.com, fill this in here.
In the second red boxclass="disabled-link"Delete it directly; having this means this icon is disabled.
In the third red boximg/png/AppStore.pngis to specify the image corresponding to the icon. The default icon images are as follows:

If you are not satisfied with these default icon images, you can use an image tool to generate 128×128 png images yourself. I basically generate them myself, and this step actually takes the most time. The generated images are still uploaded to this img/png folder, and then used byimg/png/xxx.pngmethod to call them.
The fourth red box is the text corresponding to this icon, such as ”My Blog”, and the final result is as follows:

Process each icon and link in turn to get the final effect. You can see my actual effect:Invincible example page

Modify the toggle button

As we mentioned earlier, this page was originally a navigation page for NAS, so there will be an OFFICE and HOME toggle button in the upper right corner. The original intention was to access the corresponding office page from the external network. The links on this page are all external network links. After clicking, it switches to the home page, which corresponds to the links of internal network addresses.

But I don't need it here, because I originally intended to put it on the public network as a navigation page for quick access. So I need to modify the text of these two buttons to ”Next Page” and ”Previous Page” respectively. This modification is still on line 182 of ”index.html”:

After modifying, refresh the page, and the effect is as follows:

Cope with ICP filing inspections

[VIP]

ICP filing check in 2 places: 1. Tab page name 2. Whether there is an ICP filing number in the bottom center and whether you can click the ICP filing number to directly reach the Ministry of Industry and Information Technology website

Modify the tab page name
Just directly modify the content in the red box on line 16:

Modify the bottom ICP filing number
Directly modify the content of line 326:

Change the left red box to the Ministry of Industry and Information Technology link, and the right red box to the ICP filing number, taking mine as an example:

Lines 327 and 328 can be deleted if not needed.

Center the ICP filing number
The default ICP filing number is at the bottom right of the page, which does not meet the centering requirement of the Ministry of Industry and Information Technology. This requires modifying the style file, and the file path is css/style.css:

Directly double-click to open, click search above, enter footer and press Enter, locate line 3394, and change ”right” to ”center”:

Then click save above:

Finally, just refresh the page.

[/vip]

Build via Nginx using Docker

Actually, the reason for building it using the Pagoda Linux panel method is that for the source code deployment method, this is the easiest to understand and the most convenient method for beginners. For skilled people, using the Docker method is actually the most efficient method. However, using the Docker method means facing a problem, which is the cooperation method of the two containers Nginx and PHP. Because it involves FastCGI, the initial deployment will take time (see my other article:Docker Series: Single-container Nginx, Single-container PHP (one version) Multi-site Sharing). However, if the setup is already completed, you only need to drop the unzipped web folder into the corresponding directory, copy the existing .conf file, and then modify the server_name parameter. If you are interested, you can try it. This is how I did it for my other www page specifically for foreign domain names.