分享 · 学习 · 记录

你好，这里是我的
个人技术站点

记录和分享互联网技术学习过程中的经验， 内容包括 Linux、Docker、Nginx、Git、REST API、 Web 开发以及一些实用的服务器运维技巧。

查看技术教程

技术教程

一些简单、实用、可以直接跟着操作的互联网技术教程。

🐧
Linux

Linux 常用命令入门

从 cd、ls、cp、mv、grep 到 chmod， 整理服务器管理过程中最常使用的 Linux 命令。

阅读教程 →
🐳
Docker

使用 Docker 部署 Web 项目

学习镜像、容器、端口映射和日志查看， 并用 Nginx 镜像完成一个最简单的容器部署。

阅读教程 →
🌐
Nginx

Nginx 反向代理配置

从安装 Nginx 到配置反向代理， 把域名请求转发到 Node.js、Java 或 Python 服务。

阅读教程 →
🔀
Git

Git 与 GitHub 基础使用

掌握 init、add、commit、push、pull 和 branch， 快速入门代码版本管理。

阅读教程 →
⚡
API

REST API 是什么？

使用简单案例理解 GET、POST、PUT、DELETE， 以及前后端通过 HTTP API 进行数据交互的基本原理。

阅读教程 →
💻
Web

HTML + CSS 制作个人网站

从 HTML 页面结构到 CSS 样式， 一步步制作一个最基础的个人网页。

阅读教程 →

关于这个网站

这是我的个人技术记录站点。我会把学习和使用过程中遇到的问题、 解决方法以及一些实用的互联网技术整理成文章。 希望这些内容也能帮助到正在学习技术的你。

HTML CSS JavaScript Linux Docker Nginx Git Node.js Python MySQL
← 返回教程列表
Linux

Linux 常用命令入门

入门教程 · 阅读约 8 分钟

Linux 是服务器领域最常见的操作系统之一。 无论是部署网站、配置 Docker，还是管理云服务器， 基本都离不开 Linux 命令。

💡 建议准备一台 Ubuntu、Debian、CentOS 虚拟机或云服务器跟着实际操作。

1. 查看当前位置

使用 pwd 查看当前所在目录：

pwd

例如可能输出：

/home/user

2. 查看目录文件

查看当前目录：

ls

查看详细信息：

ls -l

查看隐藏文件：

ls -a

常见组合：

ls -lah

3. 切换目录

cd /var/www

返回上一级：

cd ..

返回当前用户主目录：

cd ~

4. 创建文件和目录

创建文件：

touch test.txt

创建目录：

mkdir website

5. 复制、移动和重命名

复制文件：

cp test.txt backup.txt

移动文件：

mv test.txt /home/user/

重命名文件：

mv old.txt new.txt

6. 删除文件

rm test.txt

删除目录：

rm -rf test
⚠️ 使用 rm -rf 前一定确认路径是否正确。 Linux 删除文件后通常没有类似 Windows 的回收站。

7. 查看文件内容

cat test.txt

查看较大的文件：

less app.log

8. 搜索内容

grep "error" app.log

忽略大小写：

grep -i "error" app.log

9. 修改权限

chmod 755 script.sh

增加执行权限：

chmod +x script.sh

10. 查看进程和网络

ps aux
ps aux | grep nginx
ping www.baidu.com
curl https://example.com
ss -lntp
← 返回教程列表 下一篇：Docker →
← 返回教程列表
Docker

使用 Docker 部署 Web 项目

Docker · 阅读约 9 分钟

Docker 可以把应用程序和运行环境一起打包， 很适合网站部署、测试环境搭建以及服务迁移。

1. 检查 Docker 是否安装

docker --version

如果已经安装，会看到类似：

Docker version 27.x.x

2. 下载 Nginx 镜像

docker pull nginx

查看本地镜像：

docker images

3. 创建并运行容器

docker run -d \
  --name my-nginx \
  -p 8080:80 \
  nginx

这里的 8080:80 表示把服务器的 8080 端口映射到容器中的 80 端口。

然后访问：

http://服务器IP:8080

4. 查看容器

查看正在运行的容器：

docker ps

查看全部容器：

docker ps -a

5. 查看容器日志

docker logs my-nginx

持续查看：

docker logs -f my-nginx

6. 停止和启动

docker stop my-nginx
docker start my-nginx

7. 删除容器

docker stop my-nginx
docker rm my-nginx

8. 常用命令总结

docker pull nginx
docker images
docker ps
docker ps -a
docker logs my-nginx
docker stop my-nginx
docker start my-nginx
docker rm my-nginx
← 上一篇：Linux 下一篇：Nginx →
← 返回教程列表
Nginx

Nginx 反向代理配置

服务器运维 · 阅读约 8 分钟

Nginx 经常用于静态网站托管、HTTPS 配置以及反向代理。 下面用一个运行在 3000 端口的后端服务作为例子。

1. 安装 Nginx

sudo apt update
sudo apt install nginx

2. 查看 Nginx 状态

systemctl status nginx

启动、停止和重启：

sudo systemctl start nginx
sudo systemctl stop nginx
sudo systemctl restart nginx

3. 配置反向代理

假设你的 Node.js、Java 或 Python 服务运行在： 

127.0.0.1:3000

Nginx 可以配置为：

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://127.0.0.1:3000;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

4. 检查配置是否正确

sudo nginx -t

如果出现类似下面的提示，说明语法通常没有问题：

syntax is ok
test is successful

5. 重新加载 Nginx

sudo systemctl reload nginx
💡 修改 Nginx 配置后，建议先执行 nginx -t， 确认语法无误后再 reload。
← 上一篇：Docker 下一篇：Git →
← 返回教程列表
Git

Git 与 GitHub 基础使用

版本管理 · 阅读约 7 分钟

Git 是非常常用的版本管理工具。 掌握下面这些命令，就可以完成大多数个人项目的日常代码管理。

1. 初始化仓库

git init

2. 查看当前状态

git status

3. 添加文件到暂存区

git add .

只添加单个文件：

git add index.html

4. 提交代码

git commit -m "第一次提交"

5. 添加远程仓库

git remote add origin 你的仓库地址

6. 上传代码

git branch -M main
git push -u origin main

7. 拉取最新代码

git pull

8. 创建和切换分支

git switch -c dev

切回 main：

git switch main

9. 查看提交记录

git log --oneline
← 上一篇：Nginx 下一篇：REST API →
← 返回教程列表
API

REST API 是什么？

Web 基础 · 阅读约 8 分钟

API 可以简单理解为不同程序之间进行数据交流的一套接口。 Web 项目里，前端经常通过 HTTP 请求调用后端 API。

1. GET：获取数据

GET /api/users

例如返回：

[
  {
    "id": 1,
    "name": "Tom"
  },
  {
    "id": 2,
    "name": "Jerry"
  }
]

2. POST：创建数据

POST /api/users

{
  "name": "Tom",
  "age": 20
}

3. PUT：更新数据

PUT /api/users/1

{
  "name": "Tom",
  "age": 21
}

4. DELETE：删除数据

DELETE /api/users/1

5. JavaScript 调用 API

fetch("/api/users")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

6. async / await 写法

async function loadUsers() {
  const response = await fetch("/api/users");
  const data = await response.json();

  console.log(data);
}

loadUsers();
💡 实际项目中还会涉及状态码、鉴权、跨域、分页以及异常处理等内容。
← 上一篇：Git 下一篇：Web →
← 返回教程列表
Web

HTML + CSS 制作个人网站

前端入门 · 阅读约 9 分钟

HTML 负责网页结构，CSS 负责样式。 下面用一个简单页面快速理解它们之间的关系。

1. 新建 index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">

  <title>我的网站</title>
</head>

<body>

  <h1>Hello World</h1>
  <p>这是我的第一个网页。</p>

</body>

</html>

2. 添加 CSS

可以直接在 <head> 中加入：

<style>
body {
  background: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  color: #2563eb;
}
</style>

3. 创建一个按钮

<a href="#" class="btn">
  查看教程
</a>

对应的 CSS：

.btn {
  display: inline-block;
  background: #2563eb;
  color: white;

  padding: 12px 20px;
  border-radius: 8px;

  text-decoration: none;
}

4. 做一个简单卡片

<div class="card">
  <h2>Linux 教程</h2>
  <p>学习 Linux 常用命令。</p>
</div>
.card {
  background: white;
  padding: 24px;

  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

5. 手机端适配

@media (max-width: 700px) {
  .card {
    padding: 18px;
  }

  h1 {
    font-size: 30px;
  }
}
← 上一篇：REST API 返回教程列表 →