Preface

In fact, there are two considerations for making this navigation page:

1. Regular inspection of record keeping

I registered with Tencent Cloud, and Tencent Cloud will regularly check the content of the site corresponding to the www host of my registered domain name. First, it checks whether the site is online, second, it checks whether the site name is consistent with the one filled in when registering, and third, it checks whether the registration number is filled in normally. The second and third points are both very annoying for me. Because when registering, the site name was randomly filled in with a name that could pass the initial review of the registration (it was rejected several times because I was not allowed to use a name with the word "blog" in it), and I was not allowed to change this name, which resulted in my blog name being neither fish nor fowl (I used to directly point www to my blog), and the registration number at the bottom of the blog also reduced the style of my blog a lot. . . So I thought why not just create a static page associated with the www host, hang the registered site name and registration number on this static page, and free up my blog. .

2. Application category navigation

I do have too many types of applications, and I really need a navigation page. When someone visits my www host, they can directly see my main applications through this navigation page, which will be much clearer. And those personal navigation pages on the Internet (see my article:Docker series uses Docker to build its own exclusive navigation page based on Heimdall) are actually only suitable for personal use, not for public access, so after some searching, I found this icloud-style navigation page:

Does it feel good? So this article will briefly introduce the static page construction.

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

First download the source code file. If GitHub is not accessible, you can also visit the following link to download:Unrivaled file sharing, the access password is: "blog.tangwudi.com", and download the "NAS-Nav-iCloud-master.zip" file.

In addition: Actually, this page was originally used as a navigation page for NAS, so it has the function of switching between internal and external network links. However, I use it as a www page, so some modifications are needed.

Deploy using the pagoda linux panel

Install nginx

In the application search box on the right side of the "Software Store", enter "nginx" and press Enter, then select Nginx below and click "Install" in the red box on the right:

Keep the default fast installation option. Compile and install, but it will take more installation time. Then click "Submit" in the lower right red box to install:

Install PHP

On the right side of "Software Store", select "Runtime Environment", enter "PHP" in the search box and press Enter, then select a PHP version to install below. For example, I selected PHP-7.4, and then click "Install" in the red box on the right:

Both edit installation and express installation are available. Express installation is the default. Click "Submit" in the red box below to install.

Get access to your domain name

There are no requirements for this domain name. If it is mainly for domestic access, it is best to have a registered domain name, so that you can achieve a better access experience through many domestic CDN providers. If you don't have too high requirements for the access experience, it doesn't matter if you don't have a registered domain name. Building a website through cloudflare is not completely inaccessible. It can still be opened basically, but it's a little slow.

Assume the example 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:

In the red box below, enter the correct domain name. 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 your site. Only if they match will it be processed. Select a PHP version that you have installed, and finally click "Submit" in the red box in the lower right corner to complete the site creation:

(Optional) Configure an SSL certificate

For those with a public IP, although this is optional, it is still recommended as it is mandatory, after all, HTTPS has become the standard now. There are generally two ways to manually import the certificate or use Let's Encrypt to automatically apply for it.

To import the certificate manually:
If you want to import the certificate manually, you need to have a certificate first. Clouds like Tencent Cloud and Alibaba Cloud can provide it for free (if the domain name is purchased from Tencent Cloud or Alibaba Cloud). Generally, you can directly download the certificate in nginx format. The file content with the .key extension corresponds to the key, and the file content 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 bottom.

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

The DNS interface is to select your domain name provider. You have the following options:

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

---

In addition: If you don’t have a public IP address and want to use https to access the website, the easiest way is to use cloudflare’s tunnel method to build a website. For detailed steps, see my other article:A series of tricks to quickly build a website using domestic cloud hosts or home devices to use CloudFlare for freeThe biggest advantage of this method is that you only need to provide intranet http access, and cloudflare will automatically convert it to https for external use.

---

Deploy source code

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

Right-click the zip file you just uploaded and select "Extract":


Enter the unzipped directory "/www/wwwroot/www.example.com/NAS-Nav-iCloud-master/web" and copy all the contents to the site directory "/www/wwwroot/www.example.com":


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

To be honest, if the network access policy is set up properly and the domain name resolution is normal, thenhttps://www.example.comThe default interface is accessed by address, and the effect is as follows:

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

Modify the icon and actual link

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

Open "index.html" and you can actually see very detailed comments directly:

The definition of specific icons and links starts from line 187:

Each red box in the above picture represents an icon and the corresponding link after clicking the icon.
Take the first red box "My Blog" as an example to demonstrate how to modify it:

Change the "#" in the first red box to a real link, for example, my blog domain name is:https://blog.tangwudi.com, fill this in here.
The second red boxclass="disabled-link"Just delete it. If it exists, it means this icon is disabled.
The third red boximg/png/AppStore.pngSpecifies the image corresponding to the icon. The default icon images are as follows:

If you are not satisfied with the default icon images, you can use an image tool to generate 128×128 png images. I basically generate them myself, but this step is the most time-consuming. The generated images are still uploaded to the img/png folder, and then usedimg/png/xxx.pngMethod to call.
The fourth red box is the text corresponding to this icon, such as "My Blog". The final result is as follows:

Processing each icon and link in turn is the final effect. You can see my actual effect:Invincible sample page

Modify the toggle button

As we mentioned before, this page was originally a navigation page for NAS, so there will be a switch button between OFFICE and HOME in the upper right corner. The original intention is to access the corresponding office page from the external network. The links on this page are all external links. Click it and switch to the home page, which corresponds to the link of the internal network address.

But I don't need that here, because I'm going to put it on the public web as a navigation page for quick access. So I need to modify the text of the two buttons to "Next Page" and "Previous Page" respectively. This modification is still in line 182 of "index.html":

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

Response to record inspection

[vip]

There are two places to check for filing: 1. The name of the tab 2. Whether there is a filing number in the middle of the bottom and whether you can click on the filing number to go directly to the MIIT website

1. Modify the tab name
Simply modify the content in the red box on line 16:

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

The red box on the left is changed to the Ministry of Industry and Information Technology link, and the red box on the right is changed to the filing number. Take mine as an example:

Lines 327 and 328 can be deleted if not needed.

3. The registration number is centered
The default filing number is in the lower right corner of the page, which does not meet the MIIT's requirement of centering. This requires modifying the style file. The file path is css/style.css:

Double-click to open, click the search button above, enter footer and press Enter, customize to line 3394, and change "right" to "center":

Then click Save at the top:

Finally, refresh the page.

[/vip]

Docker build via nginx

In fact, the reason why we use the Baota Linux panel is that it is the easiest to understand and the most convenient way for beginners to deploy source code. For experienced people, using Docker is the most efficient way. However, using Docker will face a problem, that is, the way to cooperate with nginx and php two containers, because it involves fastcgi, so 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 complete, you only need to throw 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. I did this for another www page for foreign domain names.