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

    1. Hexo is a nodeJs-based static blog site builder that allows users to quickly generate web pages

    2. 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:

    1. 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).

    2. 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

  1. Installation instructions
npm install -g hexo-cli
Copy the code
  1. Check whether the installation is successful
hexo -v
Copy the code
  1. 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:

  1. 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
  1. 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:

  1. One cloud server (mine is Tencent cloud server, 100 yuan a year)
  2. 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