Table of contents
1. Inis blog website construction
1.1. Download and installation of Inis blog website
1.3 Installation and registration of cpolar
2.1 Cpolar temporary data tunnel
2.2 Cpolar Stable Tunnel (Cloud Settings)
2.3.Cpolar stable tunnel (local settings)
Preface
Internet technology is always improving, and new technologies and new software will bring more functions. The most common personal blog system is also constantly innovating to discover more functions and features. From a small amount of customization and editing functions in the early days, it has now developed to support various custom modules and appearances, as well as more and more comprehensive support for software adaptation (including PHP programs, database programs, etc.). Today, the author will introduce to you how to deploy the new version of the Inis blog system on the Ubuntu system, and use the intranet penetration data tunnel created by cpolar to publish the Inis blog website to the public Internet.
recommend
A few days ago I discovered a giant artificial intelligence learning website. It is easy to understand and humorous. I couldn’t help but share it with everyone. Click to jump to the website
1. Inis blog website construction
As a newer personal blog website program, the Inis blog system naturally uses the newer PHP program. It can also support the Web, APP and small programs, and has built-in rich APIs (which can be understood as the data interface of the software, allowing Developers can develop extended functions more conveniently), and for users, it means more diverse appearance choices and functional expansion.
1.1. Download and installation of Inis blog website
Like common software, Inis also has its own official website (inis.cc). We can find installation guides, problem solving, new appearance previews and other content on the Inis official website.
In the installation instructions on the Inis official website, we can find that Inis supports version 8.0 of php, and the database is version MySQL 5.5. Therefore, we need to install the corresponding versions of Apache, MySQL, and PHP on the Pagoda panel (the so-called LAMP, if Nginx, MySQL, and PHP are installed under Linux, it is called LNMP). Usually when you log in to the Pagoda Panel for the first time, as long as Apache, MySQL, and PHP are not installed on the local hardware device, the Pagoda Panel will automatically pop up asking you to choose which web page running programs to install.
Of course, you can also find the "Software Store" button on the left side of the Pagoda Panel's homepage (you can enter the local address in the browser: Pagoda Panel output port number) and click to enter the Software Store page. On this page, we can find commonly used website running support programs, including Nginx, Apache, MySQL, PHP, phpMyadmin, Tomcat, Docker manager, Redis, etc. We find the required software and click "Install" on the right side of the software entry to install it on the Ubuntu system.
After completing the installation of Apache, MySQL, and PHP software, we can click the "Installed" button at the top of the software store page to view the installed software. At the same time, you can also switch the version of each software here.
In the next step, you can deploy the Inis blog website. Usually the step of website deployment is to place the downloaded website source code under the wwwroot folder of the Pagoda Panel. Fortunately, the Pagoda Panel provides the "one-click deployment" mode of the Inis blog website, which greatly eases the website deployment for novice users. Difficulty.
Click "Software Store" on the left side of the main interface of the Pagoda panel. After entering the software store, find the "One-click deployment" button at the top of the page, enter the website page that can be deployed with one click, select the "hadsky" entry, and click the "One-click deployment" button on the right side of the entry.
Next, the Pagoda panel will pop up the website basic settings window, where we can specify the basic information of the website. This information includes:
Domain name (and output port number) – In the "Domain name" field, set it in the form of "Domain name to be used: Port to be used";
Root directory – This field can be changed or not, but the content of this root directory will be linked to the “domain name” field. To prevent confusion, the author still changed it to inis;
Database – just fill in the database information you plan to set up here; for easy identification, the author sets it to inis;
PHP version – Some websites may require the use of a specific version of PHP. We can modify it in the PHP version field (provided that the corresponding version of PHP software has been installed). For example, inis requires the use of php8.0 and above, so here Select php8.0 version;
After completing these settings, you can click the "Submit" button at the bottom of the window to create a local inis blog website.
After the creation of the Inis website is completed (that is, downloading the inis source code and establishing the database), the Pagoda panel will pop up the address of the created website and important website information (which may be database information, or website background login information).
Then open the Pagoda panel on the ubuntu system, click the "Website" button on the left side of the software's main interface, enter the website list page, and you will see the inis blog website just installed and online.
At this time, enter the set inis blog website address in the address bar of Ubuntu's browser, and you will see the haddsky settings page. We continue to carry out specific website settings according to the prompts on the website display page.
The first is the database setting for the inis blog website. In this step, we need to fill in the database name and password set when creating the website. If you forget the set database information, you can find the set related information on the "Database" page on the left side of the Pagoda panel.
After filling in the database information, you can click "Next". Inis will perform a self-check on the website's installation environment (mainly PHP extensions). Only after all plug-ins pass the self-check can the next step of installation be continued.
The third step is to set the information of the inis blog website itself, including the blogger's name, account number, password and email information.
After completing this last step of setting, you can click "Start Installation" at the bottom of the page to deploy the inis blog website. Just wait a short time for the inis blog to be installed locally. The Inis blog website will redirect to the login page after the installation is completed.
We can make various settings for the inis blog website here.
Although the inis blog website has been installed at this time, we have not installed the front end for the inis blog (that is, the theme of the inis website), so when we access the local inis blog address, we will automatically jump to the backend login page. If we want our inis blog website to receive visitors with a beautiful theme (a blog appearance that anyone can see), we need to create a new front-end site for the inis blog website.
To create a new front-end site for the inis blog, we can click "Website" on the left side of the pagoda panel, click the "Add Site" button on the "Website" page, and create a new front-end site for the inis blog website. Since the inis blog front-end is developed using vue3, it can be set to purely static, and there is no need to set the PHP version. Just set the website domain name (the default website output port of the Pagoda panel is 80, but the author's 80 port is already occupied, so I can add: 87 mode, set the inis blog website front end to port 87).
After completing the establishment of the front-end website of the inis blog website, we go to the homepage of the inis blog website to download a theme (inis.cc/index/themes/page/2).
Unzip all the files from this theme file and paste them into the root directory of the front-end site in inis. In this example, the author pastes the front-end file of the inis blog into the "www.inisweb.com" folder of the "wwwroot" folder under the "www" folder.
It should be noted that due to the permission restrictions of the Ubuntu system, we cannot directly copy (or cut) these files to the wwwroot folder, so you can enter the command "sudo nautilus" in the Ubuntu terminal to open a file manager with permissions. Here we can move the inis front-end files to the inis front-end site root directory under the wwwroot folder (in this example, the inis front-end site root directory is the www.inisweb.com folder, and do not close it until the file move is completed. ubuntu terminal window).
Finally, we find the "static" folder in the front-end root directory of the inis blog website, and find the file named config.js in this folder
Double-click this file to open it for editing. The main modification is the "API Address" column. Change the original api value to the path of the config.js file being modified. In this example, the path of the config.js file is www/wwwroot/inisweb/static, so "https://www/wwwroot/inisweb/static/config.js" must be filled in.
Then change the value of the "route_hash" line to "fales".
After modifications are completed, save and exit.
1.2 Inis blog website test
Finally, we enter the front-end address of the inis blog website in the browser address bar (in this example, 192.168.157.131:87), and we can see the main page of the inis blog displayed to visitors (note: for the front and back of the Inis blog If the terminal website settings are not clear, you can visit the installation tutorial on the inis official website (docs.inis.cc/#/start/install-inis-theme).
Firefox browser problem solving
When modifying the contents of the config.js file in the static folder, you may encounter a problem that cannot be modified due to insufficient permissions. At this time, we can open the terminal interface of ubuntu and enter the command "su root". After entering the correct password , enter root permissions to modify the contents of the config.js file;
If you have not set root permissions, you can enter the command "sudo passwd root" to set and modify the root user password.
After completion, do not close the terminal window for the moment, but close the file management window, and then reopen and edit the config.js file, you will find that it can be edited.
Solve the problem of modifying file permissions in ubuntu
When the author used the Firefox browser that comes with the ubuntu system and tried to access the local inis blog front-end website, the browser page displayed "This URL uses a port usually used for purposes other than web browsing. For security reasons, Firefox canceled This request", resulting in the inability to access the inis blog website front-end. To solve this problem, you can enter "about:config" in the browser address bar to open the browser's underlying settings page.
In the preference field (which looks like a search box), enter "network.security.ports.banned.override". In the second half of the search results that appear, click "String", and then click on the right side of the column. The "+" on the side, fill in the output port of the inis front end, and close the Firefox browser.
Finally, reopen Firefox, enter the address of the inis front-end website, and you can access it normally.
1.3 Installation and registration of cpolar
After completing the deployment of the inis blog website, you can then move to the installation of cpolar. To install cpolar on an ubuntu system, you can install it using a simple one-click installation script. As long as you enter the following command on the command line interface of Ubuntu, you can automatically execute the installation program (it should be noted that some Ubuntu versions may not have the curl tool installed, so it is best to execute the command "sudo aptinstall curl" to install the curl tool first).
Cpolar one-click installation script:
"curl -L
https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash"
After the Cpolar installation is completed, you can enter the command "systemctl start cpolar" to start cpolar.
At this time, the ubuntu system will pop up the authentication box for starting the service. We can enter the password of the ubuntu system.
Of course, we can also enter "cpolar version" to query the local cpolar version number instead of using the systemctl level command. As long as the version information can be displayed, the cpolar installation is complete.
In order to ensure that cpolar can run on the Ubuntu system for a long time and ensure the stable existence of the data tunnel, it is best to add cpolar to the Ubuntu boot auto-start list. As long as you enter the command "sudo systemctl status cpolar" in the Ubuntu command line interface, you can add cpolar to the self-starting list.
In order to ensure the data security of each user and create a separate data tunnel for each customer, cpolar uses user password and token code for user verification, so we need to register the user before using cpolar. The registration process is very simple. Just click "User Registration" in the upper right corner of the cpolar homepage and fill in the necessary information on the registration page to complete the registration.
After completing the cpolar user registration, we can use each user's unique token code to activate the cpolar client. As long as you log in to the cpolar official website, you can find the user's unique token code on the "Verification" page (or the "Connect Your Account" window).
Copy and paste this token code into the Ubuntu command line interface, and the cpolar client will write the token code into the local cpolar.yml file (token code activation only needs to be done once), as an identification of the user data tunnel. information. The specific command format is "cpolar authtoken user's unique token code".
2. Local web page publishing
At this point, we have installed the web page on the local device and also installed the cpolar intranet penetration program. Next, we can use cpolar to create a safe and efficient data tunnel for the local web page, so that our local web page can be accessed on the public Internet. Visited.
2.1 Cpolar temporary data tunnel
In order to meet the temporary testing function of web pages required by some customers, cpolar can create a temporary data tunnel directly on the cpolar client (the public Internet address is reset every 24 hours). To create a temporary data tunnel, we directly log in to the cpolar client on the local device (enter localhost:9200 in the browser address bar), and click the "Create Tunnel" button under the "Tunnel Management" item on the cpolar client main interface to enter Create tunnel settings page.
On the "Create Tunnel" page, we need to set several information settings, which include:
Tunnel name - can be regarded as the tunnel information comment of the cpolar client, as long as it is convenient for us to distinguish;
Protocol – Both the inis front-end and the back-end are web programs, so choose the http protocol;
Local address – The local address is the output port number of the local website. The front-end output port of the inis blog website is 87, so fill in 87 here.
Domain name type – Here we can distinguish whether the data tunnel is for temporary use or long-term. Since we are only conducting a temporary test first, we choose "random domain name" (the second-level subdomain name and custom domain name are both long-term stable tunnels and need to reserve a public Internet address in the cpolar cloud).
Region – that is, the location of the server, we can fill it in according to the actual place of use;
After completing these settings, you can click the "Create" button at the bottom of the page to create a temporary data tunnel. After the temporary data tunnel is created, the cpolar client will automatically jump to the "Tunnel List" page under the "Tunnel Management" item, where we can see all cpolar's local data tunnels (whether temporary or long-term). We can also manage the data tunnel here, including opening, closing or deleting this tunnel. We can also click the "Edit" button to modify the information of this data tunnel.
The temporary public Internet address we created that can connect to the local website can be found in the "Online Tunnel List" under the "Status" item.
Paste the public Internet address shown here into your browser address bar to access your local inis blog website page.
The data tunnel at this time is a temporary data tunnel and will be reset every 24 hours. After the data tunnel is reset, the public Internet address generated by cpolar will change. If you plan to visit this web page again, you need to use the newly generated address.
2.2 Cpolar Stable Tunnel (Cloud Settings)
If we want to set up a long-term stable data tunnel for the local website, we need to upgrade cpolar to the VIP version first.
After Cpolar is upgraded to the paid version, you can log in to the cpolar official website (as long as you are a registered cpolar user, you can log in to the cpolar official website regardless of whether you are a paid user, but here we need to log in to the cpolar official website as a paid user to reserve the data tunnel operate).
Find the "Reserve" button on the left side of the user's home page, click to enter cpolar's data tunnel reservation page, and generate a public Internet address (or entrance to the data tunnel) here. At this time, this address is not connected to the local software output port, so it can be regarded as a blank data tunnel.
On the reservation page, we can reserve data tunnels using multiple protocols. Here we select the "Reserve second-level subdomain name" field.
In the "Reserved second-level subdomain name" field, you need to make several simple settings of information, namely "region" (the area where the server is located, just select the nearest one), "second-level domain name" (which will eventually appear in the generated public Internet address , as one of the identifiers of the network address) and "description" (which can be regarded as a description of this data tunnel, as long as it can be distinguished from other tunnels). After completing these settings, you can click the "Reserve" button on the right to retain this data tunnel.
Of course, if you no longer plan to use this data tunnel, you can click the "x" on the right to easily delete it and save valuable tunnel quota.
2.3.Cpolar stable tunnel (local settings)
After completing the settings of the cpolar cloud and retaining the blank data tunnel, we returned to the local cpolar client and connected the blank data tunnel generated by the cloud with the local test page.
Open and log in to the cpolar client on the local device (you can enter localhost:9200 in the browser to access directly). Click the "Tunnel List" button under the "Tunnel Management" item on the left side of the client's main interface to enter the local tunnel page, and then click the "Edit" button of the corresponding tunnel.
On the "Edit" page of the local tunnel (the same as the page for creating a local temporary tunnel), we only need to modify the "Domain Name Type" to connect the public Internet address reserved by cpolar cloud to the Imagewheel data tunnel created by local cpolar. stand up.
We have reserved the data tunnel of the second-level subdomain name in the cpolar cloud, so we changed it to "Second-level subdomain name" (if you reserved a custom domain name, check the custom domain name), and in the next line "Sub Domain" Fill in the reserved second-level subdomain name in the column. Here we fill in "inisweb".
After completing the change of "Domain Name Type", you can click the "Update" button at the bottom of the page to connect the blank data tunnel on the cpolar cloud with the local inis blog front-end website, thus generating an inis blog front-end website data tunnel that can exist stably for a long time. .
3. Public network access test
Finally, we enter the "Online Tunnel List" page again. At this time we will find that the public Internet address of the inis blog front-end website has changed. Paste the updated address into the browser and you will see that you can access it using the new address. inis blog front-end website.
Of course, if you want the back-end website of the inis blog (that is, the inis backend) to be accessible on the public Internet, just repeat the above steps and change it to the web page port number of the back-end of the inis blog website.
Summarize
For the author, this is the first time that a website uses a front-end website and a back-end website to display the public page and back-end page of the website respectively. Although such a website installation mode is not common, I have not encountered it when deploying the website. Too difficult, and the flexibility of cpolar is perfectly demonstrated at this time. If you do not want the backend of the inis blog website to be accessed, you can only create a front-end website tunnel for the inis blog website, which ensures the backend security of the inis blog website to the greatest extent.