What you will Learn from reading this article:
- Understand the raspberry PI web server process framework
- Use Hexo to generate static web pages
- Use raspberry PI as a server to deploy static web pages
- Access the deployed web pages from the Internet through the Intranet
Raspberry PI makes the server run the Hexo blog page
I have a piece of Raspberry PI 4B in hand, and to keep the raspberry PI busy, I use it as a web server to mount my own personal web page and share my deployment process
1. Server framework
Raspberry PI Web server configuration before the first to understand the overall framework, and then according to the content of the framework server configuration, here I have made a block diagram to facilitate you to understand the steps required to build raspberry PI web server
The specific framework is mainly the following parts:
-
Local PC:
Start by setting up a Git repository on your local PC, installing hexo-related dependencies, using Hexo to generate static web code, and then uploading it to the remote repository via Git
-
Hexo is a nodeJs-based static blog site builder that allows users to quickly generate web pages
-
Git is a distributed version management system, created by Linus, the creator of Linux. Git can help us do many things, such as code version control, branch management, and so on. The main features of Git include remote repository, clone, local repository, branch, commit, pull, merge, push, and so on.
-
-
Raspberry Pie:
A Git remote repository needs to be set up on the raspberry PI side to receive web page data, and Nginx needs to be installed on the Raspberry PI to map local web pages to the Intranet IP address
Nginx is a high-performance HTTP server/reverse proxy server and email (IMAP/POP3) proxy server. It can be used as an HTTP server for web site publishing and as a reverse proxy for load balancing
-
Internet access:
If only mapped to the IP network, the server can only be trying to access, this is obviously not what we expected, so the back of the steps is to the network IP port mapping, mapping to the IP network, then the other users of the Internet can IP access the server through the network, but access to the browser or through address access, security is lower, Therefore, we are adding a domain name resolution to resolve the domain name to the Internet IP and install SSL certificate for encryption protection!
The differences between Intranet (LAN) and Extranet (WAN) are as follows:
-
Range size A local area network (LAN), as opposed to a wide area network (WAN), is primarily a network of computers connected over a small area. This “niche” could be a family, a school, a company, or a government department. BT is often mentioned in the public network, external network, that is, wide area network (WAN); BT often refers to the private network, Intranet, namely the Local area network (LAN).
-
IP address Each computer (or other network device) on a WAN has one or more WAN IP addresses (or public or external IP addresses). Wan IP addresses can be obtained only after you pay a fee to an ISP. Wan IP addresses cannot be the same. Each computer (or its device) on the Local area network (LAN) has one or more LAN IP addresses (or private or internal IP addresses). LAN IP addresses are assigned within the LAN. IP addresses on different Lans can be repeated and do not affect each other
The SSL protocol:
Secure Sockets Layer Protocol (SSL) and its successor Transport Layer Security (TLS) are Security protocols that provide Security and data integrity for network communications. TLS and SSL encrypt network connections between the transport layer and the application layer. Simply put, the S in HTTPS stands for SSL
-
2. Local Hexo Settings
The local Hexo setup is to download the dependencies required for Hexo development. After downloading the configuration, use Hexo to generate a static web page. The steps are as follows:
2.1 install GIT
Go to the official website to install the Git tool and then install it. The installation method is the same as that of ordinary software. Open the installation package and press enter until the installation is complete.
After the installation is complete, right-click on the desktop to bring up the GitBash console, indicating that the installation is successful
2.2 installation NodeJs
The Hexo framework is written based on NodeJS, so before you install Hexo, you need to install NodeJS, download nodeJS from the web page: Node.js, and download the LTS version
After the installation, we opened the Git command line, right click on the blank space on the desktop to open GitBash, and enter the following commands to view the version of Hexo and NPM
node -v
npm -v
Copy the code
If the version information is returned, the installation is successful:
2.3 installation Hexo
Install Hexo using nodejs’ NPM package management tool
- Installation instructions
npm install -g hexo-cli
Copy the code
- Check whether the installation is successful
hexo -v
Copy the code
- If the version information is displayed, the installation is successful
2.4 Hexo generates web pages
With two tools in place we started to generate static web pages:
Let’s start by creating a folder to hold our web page data
Right-click inside the folder to open Gitbash and enter the initialization directive web_blog_name defined by the user
hexo init web_blog_name
Copy the code
After input, Git will pull down the initialization code from the remote. After pulling down, Git displays as follows
Then the folder will have the source code for Hexo
To change the location of the current directory in Git, go to that folder with the following code
cd web_blog_name/
Copy the code
Use Hexo to generate code directives
hexo g
Copy the code
Then enable local port access
hexo server
Copy the code
To access the hexo-generated web code locally, type the following in your browser:
localhost:4000
Copy the code
To this page generation is complete!
In addition to web page generation, we also need to locally generate an SSH public key for later submission of web page source code to the Raspberry PI remote repository. Git command is as follows
Ssh-keygen -t rsa -c Email AddressCopy the code
Then press enter all the way until the following pattern appears, indicating that the public key has been generated,
The public key (.pub) is usually at the bottom of C:\Users\ username \.ssh. I have written the function of the public key at the end
The local Settings are basically complete
3. Set the Raspberry PI server
Now that we have the static web page, our next step is to configure the raspberry PI. First, we use VSCode’s remote-SSH tool to connect to the raspberry PI. The tool is installed inside VSCode with git:
After the installation, we log in to raspberry PI through the IP address of raspberry PI (Raspberry PI needs to connect to the network and obtain the corresponding IP address).
For more information on how to get an IP address, see this article: Several ways to See the RASPberry PI IP Address
After obtaining the IP address, log in through Remote (raspberry PI and PC must be in the same LAN) : Open Remote in VSCode
To add a remote connection, enter the login IP address and account password in the following format:
SSH + Raspberry PI username @Raspberry PI IP addressCopy the code
Enter the position as follows:
After input, you will be prompted to enter the login password to log in to raspberry PI. After connection, open the terminal, as shown in the figure below
After that, we can enter shell commands to control the raspberry PI, let’s officially configure the Raspberry PI server!
Configuration procedure:
- Update the raspberry PI source
Open the raspberry PI mirror source list (here with vim editor, specific operations can baidu! You can replace Gedit with Vim if you are not used to it.
sudo vim /etc/apt/sources.list
Copy the code
Replace the content with tsinghua University source
deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi
deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi
Copy the code
Update the source
sudo apt-get update
Copy the code
Update complete
- Install git
Install command, sudo command to enter the password
sudo apt-get install git
Copy the code
Check the version
git --version
Copy the code
Installation completed: the phenomenon is different from the first download, but as long as the version appears, there is no problem
- Install nginx
Download instructions
sudo apt-get install nginx
Copy the code
Viewing the current version
nginx -v
Copy the code
Here I have downloaded well, because has downloaded, so the phenomenon and the first download is not the same, but as long as the version appears basically ok
- Establish a remote Git repository
After installing Git on the Raspberry end, we set up a remote repository with Git to serve as an intermediate station for submitting the source code of the web page to the local PC. In this way, if we want to update the web page, we do not need to log in to raspberry PI and then transfer the files. The specific steps are as follows:
- Create a new folder
Sudo chown -r $USER:$USER /var/repo/ sudo chmod -r 755 /var/repo/ sudo chmod -r 755 /var/repo/Copy the code
- After the folder is created, change the current path to the folder and enter the following command to create a Git repository (web_blog is a custom name)
cd /var/repo/
git init --bare web_blog.git
Copy the code
- Map the repository to another folder
After the Git repository is created, we need to create another folder that will be used as the root directory of Nginx
sudo mkdir -p /var/www/hexo
Copy the code
And modify the directory permission
sudo chown -R $USER:$USER /var/www/hexo
sudo chmod -R 755 /var/www/hexo
Copy the code
Then create a hook in the repository web_blog and transfer the static HTML file to the root directory of the Raspberry PI server, under /var/www/hexo. The hook code is as follows:
#Use Vim to create a new hook file under the repository
sudo vim /var/repo/web_blog.git/hooks/post-receive
Copy the code
Add the following shell script file in the file (because the use of Vim editor, the specific operation mode needs to baidu to understand!)
#! /bin/bash
git --work-tree=/var/www/hexo --git-dir=/var/repo/web_blog.git checkout -f
Copy the code
After saving and exiting the file, change the file permission to make the file executable.
sudo chmod +x /var/repo/web_blog.git/hooks/post-receive
Copy the code
- Nginx page root directory Settings
In the previous step, we have created the root directory of the web page and made the file transfer hook. In this step, we configure the Nginx configuration file, open Nginx and map the root directory to the directory we created
Open the default Nginx configuration options
sudo vim /etc/nginx/sites-available/default
Copy the code
Then go to the following location and change the value of root to the root folder that we set
Save and exit, and restart Nginx
sudo service nginx restart
Copy the code
Access the IP address of raspberry PI on the same local area network as that of Raspberry PI. If the following information is displayed, the Nginx configuration is complete
- Add local public keys to a remote Git repository
Adding a public key to raspberry PI is actually adding the local PC to the whitelist of Git. We have generated the public key locally before, and the next step is to upload the public key. The method is very simple, open Gitbash under the public key directory, and enter the following shell command in the format
Ssh-copy-id -p Generally, the port number is 22+ raspberry PI username@raspberry PI IP addressCopy the code
When the installation is complete, there will be a prompt, and this is the one that has been installed
- Configure local Hexo Settings and upload the web code
In the above configuration is complete, we are in the configuration of the local web page transmission code, you can upload a static page generated at the beginning!
Modify the _config.yml file in the source location of the web page
First, modify the push address path and push mode
Deploy: type: git repo: pi@Ip address :/var/repo/web_blog branch: masterCopy the code
The modification is as follows:
In addition, modify the source address of the web page, according to the format shown in the following figure, add your own IP
When the modifications are complete, use GitBash in the source directory
Hexo generates static web page code:
hexo g
Copy the code
Commit remote code
hexo d
Copy the code
- Access the blog page from the Intranet
When the code is successfully submitted, it will appear in the root directory of Nginx. At this time, we can access the web page just now from the Nginx port on the Intranet
4. Intranet penetration
Through the above steps, we can now access the web page deployed on the Raspberry PI server through the Intranet. Some friends may not be satisfied with this, and want to access the web page through the Internet. Now I will share how to do Intranet penetration and access the Intranet server through the Internet!
First, you need to prepare some content:
- One cloud server (mine is Tencent cloud server, 100 yuan a year)
- One domain name (20 yuan per year purchased from Aliyun)
The cloud server will assign a public IP address, through the IP port mapping to the internal IP port to penetrate the Intranet, and the domain name is the url we often say, for example: https://www.csdn.net is a domain name, we prepare a domain name and resolve it to the server IP address, you can access the web page through the url
We use FRP to penetrate the Intranet. For a detailed tutorial, refer to this CSDN article: Configuring FRP for Intranet Penetration in 10 minutes
After penetrating, we can access the web page from the Internet through the public IP address (pay attention to use the public IP address of the server to do penetrating, remember to set the firewall, let the specified port pass). Here I penetrate to the port 8080 of the public IP address, which can be accessed from the Internet
In order to make the web page access address more compliance, after the secondary domain name of the purchased domain name is resolved to port 80, Nginx is used to forward the port to 8080. The Nginx configuration file is modified as follows :(mainly the red box, the code above is the web page I deployed on the server by myself, not the content of this section)
Here we can go through the web page after the second level domain name resolution for access
5. Conclusion
This is the raspberry PI server content, the article roughly describes the deployment of web pages to the Raspberry PI server content, you can have questions in the comment area or private message to me, I hope you give a concern, later will continue to update raspberry PI related DIY