Forem: Yongkang Cheng

How to Build Your Own Website with a Raspberry Pi: An Entertaining Guide

Yongkang Cheng — Sat, 09 Nov 2024 09:02:08 +0000

Introduction
Preparation
Setting Up the Raspberry Pi
- 3.1 Installing the Operating System
- 3.2 Updating and Upgrading the System
Installing the Nginx Web Server
Configuring the Firewall (UFW)
Setting Up Dynamic DNS (DDNS)
- 6.1 Registering a Cloudflare Account and Adding Your Domain
- 6.2 Obtaining an API Token and Zone ID
- 6.3 Adding a DNS Record
- 6.4 Writing a Script to Automatically Update Your IP
Configuring Port Forwarding on Your Router
Deploying Your Static Website
- 8.1 Creating a Simple HTML Page
- 8.2 Configuring Nginx to Serve Your Website
Installing Certbot and Setting Up HTTPS Certificates
Testing and Troubleshooting
Conclusion

1. Introduction

So, you've decided to host your own website from your basement using a Raspberry Pi? Excellent choice! Not only will you save money on hosting fees, but you'll also become the tech wizard among your friends. In this guide, we'll walk you through every step—from setting up your Raspberry Pi to having a shiny, secure website that says "Hello, I'm Ken/Jacky/Allie..." to the world.

Note: While I personally love using the React framework for building websites, we'll keep things simple here with a basic static HTML page. Trust me, your Pi will thank you.

2. Preparation

What You'll Need:

A Raspberry Pi (preferably a Raspberry Pi 5 for extra oomph)
A microSD card (at least 16GB)
Network connection (Ethernet or Wi-Fi)
A computer (to prepare the SD card and remotely control the Pi)
A domain name (so people can find your masterpiece)

Software You'll Need:

Raspberry Pi Imager (the official tool for burning the OS)
SSH client (most Windows/MacOS/Linux system have pre-installed SSH on Terminal)

3. Setting Up the Raspberry Pi

3.1 Installing the Operating System

Step 1: Download Raspberry Pi Imager

Visit the official Raspberry Pi website and download Raspberry Pi Imager suitable for your operating system.

Step 2: Install Raspberry Pi Imager

Run the installer and follow the on-screen instructions.

Step 3: Prepare the microSD Card

Insert the microSD card into your computer's card reader.

Step 4: Burn the OS to the SD Card

Open Raspberry Pi Imager.
Click on "Choose OS" and select "Raspberry Pi OS" or another version you prefered.

Click on "Choose Storage" and select your microSD card.

Optional but Highly Recommended: Enable SSH and Set Wi-Fi

Click on the Custom Settings to access advanced settings.
Set a username and password (make sure to remember them).
If you're using Wi-Fi, enter your SSID and password.
Enable SSH by checking the box "Enable SSH".

Step 5: Write the OS

Click on "Write" and confirm that you want to erase the card.
Wait patiently as the OS is written to the card.

Step 6: Safely Eject the SD Card

Once the process is complete, eject the card from your computer.

3.2 Updating and Upgrading the System

Step 1: Power Up Your Pi

Insert the microSD card into your Raspberry Pi.
Connect the Pi to your router via Ethernet for a stable connection.
Plug in the power supply.

Step 2: Find Your Pi's IP Address

Access your router's admin page (usually at 192.168.x.1).
Look for connected devices and find raspberrypi. Note its IP address (e.g., 192.168.68.130).

Finding Your Router's IP Address

If you're unsure of your router's IP address, you can find it using the command line:

Windows:

ipconfig

Look for the "Default Gateway" under your network adapter.

macOS/Linux:

route -n

netstat -nr

Find the default gateway address. (Hmmm ChatGPT wrote the route -n and netstat -nr but I didn't test it. But anyways you can always find the IP address on your router's webpage.)

Step 3: Connect via SSH

Open your PC Terminal and input:

ssh your_username@your_pi_ip_address

Host Name: your_username@your_pi_ip_address (e.g., ken@192.168.68.130)
Port: default 22

Enter your password when prompted (the password won't be visible as you type).

Example using SSH on Windows Terminal:

Step 4: Update the System

Run the following command to update and upgrade packages:

sudo apt update && sudo apt upgrade -y

This updates the package lists and upgrades installed packages.

Optional but Recommended: Set Up SSH Keys

Setting up SSH keys allows you to connect to your Pi without entering a password each time.

On your PC terminal:

ssh-keygen -t rsa

Press Enter three times to accept the default settings.

Locate the .ssh folder in your home directory (e.g., C:\Users\YourUsername\.ssh) and find the id_rsa.pub file.

Open id_rsa.pub with a text editor and copy its content.
On your Raspberry Pi terminal, create the .ssh directory and the authorized_keys file:

mkdir ~/.ssh
nano ~/.ssh/authorized_keys

Paste the copied public key into the file.
Press Ctrl + X, then Y, then Enter to save and exit.

Now, you can connect to your Raspberry Pi via SSH without entering a password.

4. Installing the Nginx Web Server

Let's install Nginx so your Pi can serve web pages.

Step 1: Install Nginx

sudo apt install nginx -y

Step 2: Start and Enable Nginx

Start Nginx:

sudo systemctl start nginx

Enable Nginx to start on boot:

sudo systemctl enable nginx

Step 3: Test Nginx

Open a web browser on your computer and enter your Pi's IP address.
You should see the default "Welcome to Nginx!" page.

5. Configuring the Firewall (UFW)

Protect your Raspberry Pi from unauthorized access.

Step 1: Install UFW

sudo apt install ufw -y

Step 2: Allow SSH and Web Traffic

Allow SSH:

sudo ufw allow ssh

Allow HTTP and HTTPS traffic:

sudo ufw allow 'Nginx Full'

Step 3: Set Default Rules and Enable the Firewall

Deny all incoming traffic (except allowed):

sudo ufw default deny incoming

Enable the firewall:

sudo ufw enable

Type y when prompted.

Step 4: Check the Status

sudo ufw status verbose

You should see rules for OpenSSH and Nginx.

6. Setting Up Dynamic DNS (DDNS)

Your ISP might change your public IP address periodically. Setting up DDNS ensures your domain always points to your Pi. What is DDNS, Why do we need to do so many things?

⚠️ Attention: This is the most challenging part of the guide. You may encounter various issues—perhaps difficulties using the Cloudflare API, trouble retrieving your public IP, firewall blocks, or even missed steps like configuring the optical modem. Please approach this with patience and persistence. If you run into any problems, try searching online or asking ChatGPT for assistance. Good luck!

Imagine you want to reach your Raspberry Pi at home from anywhere. Here’s how it works:

Your PC asks the internet, “Where’s chengyongkang.me?”

Cloudflare (your domain manager) and the DNS Server respond, saying, “Go to IP 123.123.123.1”—which is your Router’s public IP.

Your Router gets the request, recognizes you want the Raspberry Pi, and forwards it through a “secret gate” to the Pi’s private IP inside your network.

And boom! You’re connected. Cloudflare keeps your domain linked to your router, even if the IP changes. It’s like a guided tour, directing your PC all the way to your Raspberry Pi!

6.1 Registering a Cloudflare Account and Adding Your Domain

Step 1: Sign Up for Cloudflare

Go to Cloudflare's website and create a free account.

Step 2: Add Your Domain

In the Account Home, click "Add site".
Enter your domain name (e.g., example.com).

Step 3: Select a Plan

Choose the Free plan.

Step 4: Update Your Nameservers

Cloudflare will provide nameservers (e.g., bob.ns.cloudflare.com and lisa.ns.cloudflare.com).
Log in to your domain registrar (where you bought the domain).
Replace the existing nameservers with the ones provided by Cloudflare.

Step 5: Wait for DNS Propagation

This can take up to 24 hours but usually is faster.
Use What's My DNS to check the status.

6.2 Obtaining an API Token and Zone ID

An API token allows your Pi to communicate with Cloudflare to update DNS records, and the Zone ID uniquely identifies your domain.

Step 1: Create an API Token

In Cloudflare, click on your profile icon and select "My Profile".

Go to the "API Tokens" tab.
Click "Create Token".

Step 2: Configure the Token

Choose "Create Custom Token".

Token Name: DDNS Update Token
Permissions:
- Zone - DNS - Edit
- Zone - Zone - Read
Zone Resources: Include -> Specific Zone -> Your domain (e.g., example.com)

Step 3: Create and Copy the Token

Click "Continue to summary", then "Create Token".
Copy the token and store it securely.

Step 4: Obtain the Zone ID

In your Cloudflare Account Home, click on your domain name (e.g., example.com).
Scroll down; at the bottom right, you'll find your Zone ID.

6.3 Adding a DNS Record

Click "Add Record", and then configure as below:

Type: A
Name: @ (for the root domain)
IPv4 Address, Proxy Status, and TTL: Enter any value for now; our script will update it later.

6.4 Writing a Script to Automatically Update Your IP

Let's automate the IP update process.

Step 1: Create a Directory for Your Script

mkdir ~/Documents/DDNS
cd ~/Documents/DDNS
nano update_dns.py

Step 2: Write the Python Script

#!/usr/bin/env python3

import requests
import json
import os

# Cloudflare API credentials
auth_key = "your_api_token_here"   # Replace with your actual API token
record_name = "your_domain.com"    # Replace with your domain
zone_id = "your_zone_id_here"      # Replace with your Zone ID
ip_file = "/path/to/your/ip.txt"   # replace with a place you prefer to store the ip address

headers = {
    "Authorization": f"Bearer {auth_key}",
    "Content-Type": "application/json"
}

def get_record_id():
    url = f"https://api.cloudflare.com/client/v4/zones/{zone_id}/dns_records?name={record_name}"
    response = requests.get(url, headers=headers)
    response_data = response.json()

    if response_data.get("success"):
        return response_data["result"][0]["id"]
    else:
        print("Failed to fetch record ID")
        return None

def get_current_ip():
    response = requests.get("http://ipv4.icanhazip.com")
    return response.text.strip()

def update_dns_record(record_id, ip):
    url = f"https://api.cloudflare.com/client/v4/zones/{zone_id}/dns_records/{record_id}"
    data = {
        "type": "A",
        "name": record_name,
        "content": ip,
        "ttl": 120,
        "proxied": False
    }
    response = requests.put(url, headers=headers, json=data)
    return response.json()

def main():
    current_ip = get_current_ip()
    if os.path.exists(ip_file):
        with open(ip_file, "r") as file:
            last_ip = file.read().strip()
    else:
        last_ip = None

    if last_ip == current_ip:
        print("IP has not changed")
    else:
        print("IP has changed, updating DNS record...")
        record_id = get_record_id()
        if not record_id:
            print("Error: Could not retrieve the DNS record ID.")
            return

        result = update_dns_record(record_id, current_ip)
        if result.get("success"):
            print(f"DNS record updated successfully to IP: {current_ip}")
            with open(ip_file, "w") as file:
                file.write(current_ip)
        else:
            print("Failed to update DNS record")
            print(result)

if __name__ == "__main__":
    main()

Replace:
- auth_key with your API token.
- record_name with your domain.
- zone_id with your Zone ID.
- ip_file with a place you would like to store the ip address.

Step 3: Save and Exit

Press Ctrl + O, then Enter to save.
Press Ctrl + X to exit.

Step 4: Make the Script Executable

chmod +x update_dns.py

Step 5: Test the Script

./update_dns.py

Check if the DNS record is updated on Cloudflare.

Step 6: Schedule the Script

If you're in a hurry, you can skip this step for now. This helps you set up a timer which runs your program periodically.

Open crontab:

crontab -e

If prompted, select nano as the editor.
Add the following line at the end:

*/5 * * * * /home/pi/Documents/DDNS/update_dns.py >/dev/null 2>&1

Make sure the file path is correct.
This schedules the script to run every 5 minutes.

Step 7: Save and Exit

Press Ctrl + O, then Enter to save.
Press Ctrl + X to exit.

7. Configuring Port Forwarding on Your Router

Set up port forwarding to allow external access to your Raspberry Pi.

Step 1: Access Your Router's Settings

Open a web browser and enter your router's IP address (e.g., 192.168.1.1).
Log in with your router's username and password.

Finding Your Router's IP Address

If you're unsure of your router's IP address, you can find it using the command line:

Windows:

ipconfig

Look for the "Default Gateway" under your network adapter.

macOS/Linux:

route -n

netstat -nr

Find the default gateway address.

Step 2: Reserve an IP Address for Your Raspberry Pi

Navigate to the "DHCP" or "LAN" settings.
Look for "Address Reservation" or "Static IP Assignment".
Assign a fixed IP address to your Raspberry Pi.

Step 3: Locate Port Forwarding Settings

Go to the "Port Forwarding", "NAT", or "Virtual Servers" section.

Step 4: Set Up Port Forwarding Rules

Forward the necessary ports to your Raspberry Pi's IP address.
- HTTP (Port 80)
- HTTPS (Port 443)
Configure:
- External Port: 80 and 443
- Internal Port: 80 and 443
- Internal IP: Your Raspberry Pi's fixed IP
- Protocol: TCP

Step 5: Save and Reboot if Necessary

Save the changes.
Reboot the router if required.

Step 6: Verify Connectivity

Ping Your Raspberry Pi's Internal IP:

ping 192.168.X.X

Find Your Public IP Address:
- Visit https://ipv4.icanhazip.com/.
Ping Your Public IP:

ping your_public_ip_address

Ping Your Domain:

ping your_domain.com

Access Your Domain in a Browser:
- Navigate to http://your_domain.com.
- You should see the Nginx default page.

If everything works, congratulations! You've passed the hardest part.

8. Deploying Your Static Website

Let's replace the default Nginx page with your own content.

8.1 Creating a Simple HTML Page

Create a simple webpage that says "Hello, I'm Ken".

Step 1: Create an HTML File

Create a new directory:

sudo mkdir /var/www/ken

Create the index.html file:

sudo nano /var/www/ken/index.html

Paste the following content:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, I'm Ken</title>
</head>
<body>
    <h1>Hello, I'm Ken</h1>
    <p>Welcome to my awesome Raspberry Pi hosted website!</p>
</body>
</html>

Step 2: Save and Exit

Press Ctrl + O, then Enter to save.
Press Ctrl + X to exit.

8.2 Configuring Nginx to Serve Your Website

Step 1: Create a New Nginx Server Block

Create a new configuration file:

sudo nano /etc/nginx/sites-available/ken

Paste the following content (replace www.example.com with your domain):

server {
    listen 80;
    server_name www.example.com;

    root /var/www/ken;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Step 2: Enable the Server Block

Create a symbolic link to sites-enabled:

sudo ln -s /etc/nginx/sites-available/ken /etc/nginx/sites-enabled/

Step 3: Test Nginx Configuration

Run:

sudo nginx -t

Ensure there are no errors.

Step 4: Reload Nginx

Run:

sudo systemctl reload nginx

Step 5: Test Your Website

Navigate to http://www.example.com in your browser.
You should see your "Hello, I'm Ken" page.

If you are still seeing the Nginx page but not your own page, maybe you forgot to modify the www.example.com to be your own domain in Step 1.

9. Installing Certbot and Setting Up HTTPS Certificates

Secure your website with HTTPS.

Step 1: Install Certbot

sudo apt install certbot python3-certbot-nginx -y

Step 2: Obtain and Install the SSL Certificate

sudo certbot --nginx -d www.example.com

Follow the prompts:
- Enter your email address.
- Agree to the terms of service.
- Decide whether to share your email.
Certbot will obtain and install the certificate automatically.

Step 3: Test HTTPS Access

Navigate to https://www.example.com.
You should see a secure lock icon in your browser.

Step 4: Auto-Renewal

Certbot installs a cron job for automatic renewal.
Test the renewal process:

sudo certbot renew --dry-run

10. Testing and Troubleshooting

Common Issues:

Can't Access the Website:
- Ensure your domain points to your IP address.
- Verify port forwarding settings.
- Check that UFW allows HTTP and HTTPS traffic.
SSL Certificate Issues:
- Make sure your domain is accessible over HTTP before running Certbot.
- Double-check Nginx configurations for errors.
DDNS Not Updating:
- Confirm that the API token has the correct permissions.
- Manually run the update script to check for errors.

Useful Commands:

Monitor Nginx errors:

sudo tail -f /var/log/nginx/error.log

Check firewall rules:

sudo ufw status verbose

11. Conclusion

Congratulations! You've successfully transformed your Raspberry Pi into a web server hosting your very own website. Not only did you avoid hosting fees, but you've also earned some serious geek cred.

Next Steps:

Enhance Your Website: Add more content or explore frameworks like React.
Continue Learning: Dive deeper into Linux, Nginx, and web development.
Share Your Success: Tell your friends about your new website.

Disclaimer: No Raspberry Pis were harmed in the making of this guide. Remember to keep your Pi cool and well-ventilated.

If you have any questions or run into any issues, feel free to ask. Happy Pi hosting!

React DOM简单介绍 & Hello World

Yongkang Cheng — Wed, 07 Aug 2024 09:53:07 +0000

传说，html有DOM，（Document Object Model），是一个树状结构，便于浏览器绘制界面。但是DOM刷新很慢，所以react使用虚拟DOM和面向组件方法能够找到被改变的部分，并且只重新绘制被改变的部分而不刷新整个DOM。

第一个hello world代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"> </div>
<script type="text/babel">
    // 这里相当于是自定义组件
    class HelloComponent extends React.Component {
        render () {
            return React.createElement('h1', null, 'Hello World');
        }
    }
    // 这里是在调用render函数进行渲染
    ReactDOM.render (
        React.createElement(HelloComponent, null),
        document.getElementById('root')
    );
</script>
</body>
</html>

然后React.createElement('h1', null, 'Hello World')这一句应该是等价于<h1>Hello World</h1>；然后这一句React.createElement(HelloComponent, null)也可以被改写成这样：<HelloComponent />
改后的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"> </div>
<script type="text/babel">
    // 这里相当于是自定义组件
    class HelloComponent extends React.Component {
        render () {
            return <h1>Hello World</h1>;
        }
    }
    // 这里是在调用render函数进行渲染
    ReactDOM.render (
        <HelloComponent />,
        document.getElementById('root')
    );
</script>
</body>
</html>

这是因为react.js代码和JSX是互通的，都可以相互转换。
据说啊，JSX转义器会在小小的里面挖呀挖呀挖，遇到了<之后就会开始转义。如果<后面是小写，那么将其转译成html代码，如果是大写，则转译成自定义组件（这意味着react的自定义组件名称一定要是大写的）。
例如刚才的<HelloComponent />就是会被转译成React.createElement(HelloComponent, null)真是太神奇了……

React: useEffect

Yongkang Cheng — Fri, 12 Jul 2024 04:12:31 +0000

Today's topic is to learn useEffect in React.

In my point of view, the useEffect helps you call a function in a proper time, so that you don't need to write an infinite loop to monitor...
Since the useEffect also calls the function when the component is first time rendered and also call another function when the component is being removed, we can do a lot based on it. It is very useful in anyways.
Before start, make sure that you are familiar with the useState component.

Import Package

import { useEffect } from 'React';

Syntax

useEffect(function, [dependency array]);

The first param is a function which would be automatically called, and the function should return the "uninstall" function to clean up the memory if neccessary.
The second param is an array that contain the variables you want to monitor. Once the parameter is changed, the function (first param) will be automatically called. An empty array means it does not monitor any variable.

A brief example:

useEffect(() => {
    do_something;
    return uninstall_function;
}, [variable_to_be_monitored]);

Example

First we make a simple click button screen without the useEffect:

import React, { useState, useEffect } from 'react';
import './App.css';


function MyButton({ updateFunc }) {
    return (
    <div>
        <button onClick={updateFunc} className='button'> Click Me </button>
    </div>
    );
}

function App() {
    const [count, setCount] = useState(0);

    return (
    <div className="App">
        <p>This is a counter</p>
        <p>Currently the count is {count}</p>
        <MyButton updateFunc={() => { setCount(count + 1); }}/>
        <MyButton updateFunc={() => { setCount(count - 1); }}/>
    </div>
    );
}

export default App;

And here is what the screen looks like:

Then we add the useEffect to log to the console each time we click the button:

import React, { useState, useEffect } from 'react';
import './App.css';


function MyButton({ updateFunc }) {
    return (
    <div>
        <button onClick={updateFunc} className='button'> Click Me </button>
    </div>
    );
}

function App() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log(`button clicked. count: ${count}`);
    }, [count]);

    return (
    <div className="App">
        <p>This is a counter</p>
        <p>Currently the count is {count}</p>
        <MyButton updateFunc={() => { setCount(count + 1); }}/>
        <MyButton updateFunc={() => { setCount(count - 1); }}/>
    </div>
    );
}

export default App;

And you can see the console of the webpage. It is like this:

Another Example

Here is the example updating the "online time" every second using a timer (if you don't know a timer, please search for setInterval...). In this time, the useEffect will help clear the timer when the component is removed.

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [sec, setSec] = useState(0);

    useEffect(() => {
        // define the timer
        const timer = setInterval(() => {
            // insert a function into the `setSec` to avoid name space issues
            // setSec(sec + 1);
            setSec(prevSec => prevSec + 1);
        }, 1000);
        // return the cleaning function
        return () => {
            clearInterval(timer);
        }
        // the empty array below makes it only call the 
        // function once when the component is loaded
    }, []);

    return (
    <div className="App">
        <p>You stayed alive for {sec} seconds.</p>
    </div>
    );
}

export default App;

And the result is like the image below, and it is continuously updating with a minimum CPU workload.

React: useState

Yongkang Cheng — Thu, 11 Jul 2024 07:58:44 +0000

To use useState, first import it with import React, { useState } from 'react';

Basic Syntax

const [varName, setVar] = useState(initial value);

Why do we write like this? Because useState as a function returns two variables. the first one is the var_name, and the second one is the function to change the variable.

"Advanced" Usage

we can get the initial value from a function:

const [varName, setVar] = useState(() => {
  return 1+2-3+4;
});

we can set the indirectly customize the setVar function. For this example, we made the setVar function can only accept the values which are smaller than 10.

const [var, dummy] = useState(0);
const setVar = (value) => {
  if (value > 10) {
    dummy(10);
    return;
  }
  dummy(value);
}

An Example

import React, { useState } from 'react';
import './App.css';


function MyButton({ updateFunc }) {
    return (
    <div>
        <button onClick={updateFunc} className='button'> Click Me</button>
    </div>
    );
}

function App() {
    const [count, setCount] = useState(0);

    return (
    <div className="App">
        <p>This is a counter</p>
        <p>Currently the count is {count}</p>
        <MyButton updateFunc={() => { setCount(count + 1); }}/>
        <MyButton updateFunc={() => { setCount(count - 1); }}/>
    </div>
    );
}

export default App;

Learn React: Linux Env Setup

Yongkang Cheng — Thu, 11 Jul 2024 05:15:38 +0000

Note: I will write the blog in both Chinese Mandarin and English. The Chinese version would be my own words, while I may use ChatGPT to translate them into English.

哈喽。我打算从今天开始有计划地学习React框架。其原因是早在暑假刚开始时就打算学习React来着，结果因为这件事情的优先级比较低，就总是拖拖拉拉没有完成。好，不说废话了，我们开始。。。

首先介绍一下环境：我在网上租了一个云主机（京东云主机50块钱一年，香得很），并将自己的域名挂到了这个主机上。没有云主机或者域名没关系，这并不影响配置和使用。

安装Node.js和NPM

nodejs在这里获取下载链接：https://nodejs.org/en/download/package-manager/current
有的人可能习惯使用apt安装，但是nodejs不支持……没关系，这时候选使用nvm安装就行了，总而言之就是运行以下命令。运行完第一行之后记得重启一下终端。

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 22

运行完成后输入以下代码检查是否安装成功……

# verifies the right Node.js version is in the environment
node -v # should print `v22.4.1`

# verifies the right NPM version is in the environment
npm -v # should print `10.8.1`

初始化react框架

在终端输入以下代码新建项目

npx create-react-app 项目名称

npx是啥？全称是"Node Package Execute"，可以简化执行npm包中的可执行文件。

接下来cd到项目文件夹下，然后npm start就可以启动了。启动之后命令行里会显示主机的ip地址——有可能是192.168.xx.xx，也有可能是别的。这个时候随便一个与服务器连接到同一网络下的设备打开浏览器，输入网址http://192.168.xx.xx:3000就能看到界面了。

Hello. I plan to start learning the React framework systematically from today. The reason is that I had intended to learn React since the beginning of the summer vacation, but it was always delayed due to its low priority. Alright, let's get started without further ado...

First, let me introduce the environment: I rented a cloud server online (JD Cloud server, ~$7 USD per year, which is a great deal), and I have linked my domain name to this host. It's okay if you don't have a cloud server or a domain name, as this does not affect the configuration and use.

Installing Node.js and NPM

You can get the download link for nodejs here: https://nodejs.org/en/download/package-manager/current
Some might prefer using apt to install, but nodejs does not support it... No worries, at this point you should choose to install using nvm, simply run the following commands. Remember to restart the terminal after running the first line.

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 22

After running, enter the following code to check if the installation was successful...

# verifies the right Node.js version is in the environment
node -v # should print `v22.4.1`

# verifies the right NPM version is in the environment
npm -v # should print `10.8.1`

Initializing the React framework

Enter the following code in the terminal to create a new project

npx create-react-app project-name

What is npx? It stands for "Node Package Execute," which simplifies the execution of executable files in npm packages.

Next, cd into the project folder, then npm start to launch it. After launching, the command line will display the host's IP address—it might be 192.168.xx.xx or something else. At this point, any device connected to the same network as the server can open a browser and enter the URL http://192.168.xx.xx:3000 to see the interface.