开发者LT的博客
0%

博客网站从0到1

发表于 更新于 分类于
本文字数： 28k 阅读时长 ≈ 26 分钟
我是如何搭建这个这个博客网站，并且给它加上炫酷的科技感的

《软件开发工具实践》实验手册

写在最前面

注意：搭建博客网站只需要实验二、三、四、八，剩下的和虚拟机、linux相关的部分是额外的内容

目录

实验二 Web软件开发环境 …………………… 5

实验三 代码编辑器 ……………………………. 10

实验四 Web站点构建 ………………………….. 15

实验五 虚拟机安装与使用 …………………. 17

实验六 Linux环境配置 ………………………. 21

实验七 远程登录管理 ………………………… 25

实验八 软件部署 ……………………………….. 29

附录一 省流版搭建博客（不含虚拟机 / Linux） ……… 32

附录二 怎么把博客做成科技感暗夜 ……………. 35

实验二 Web软件开发环境

一、实验目标

  1. 安装并运行一个Web博客软件（本实验选用 Hexo 静态博客框架）；
  2. 了解和掌握Web开发环境的基础安装与配置（Node.js、npm、Git）；
  3. 理解Web软件的B/S架构特点以及静态站点与动态站点的区别。

二、背景知识

2.1 静态博客 vs 动态博客

类型 原理 特点 典型代表
静态博客 在本地将Markdown等源文件预编译为纯HTML页面 加载速度快、安全性高、无需数据库 Hexo、Hugo、VuePress、Jekyll
动态博客 每次用户访问时由服务器端程序动态生成页面 功能丰富、有后台管理界面、需要数据库 WordPress、Typecho、Halo

2.2 Web开发环境的核心组件

组件 作用 本实验对应的工具
运行时环境 执行编程语言代码 Node.js（运行JavaScript/Hexo）
包管理器 管理项目依赖库 npm（Node Package Manager）
版本控制 代码管理与协作 Git
构建工具 将源文件转换为可部署的网站 Hexo CLI
本地服务器 在开发时预览网站效果 Hexo自带的server模块

三、实验环境

  • 操作系统：Windows 10/11
  • 网络：需要互联网连接以下载软件和安装依赖包
  • 所需软件：
    • Node.js（LTS版本，含npm）
    • Git for Windows
    • Hexo CLI
    • 一个文本编辑器（VS Code或Notepad++等）

四、详细操作步骤

步骤一：安装Node.js与npm

  1. 打开浏览器，访问 Node.js 官网：https://nodejs.org/
  2. 下载 LTS（长期支持）版本 的Windows安装包。
  3. 双击下载的安装包，启动安装向导。
  4. 在安装过程中，务必勾选“Automatically install the necessary tools”，并确保 “Add to PATH” 选项被选中。
  5. 其余步骤保持默认，点击“Next”直至安装完成。
  6. 安装完成后，打开命令提示符，输入以下命令验证安装是否成功：
    1
    2
    node -v
    npm -v

步骤二：配置npm镜像源（可选但推荐）

在命令提示符中执行：

1
npm config set registry https://registry.npmmirror.com

验证配置是否生效：

1
npm config get registry

步骤三：安装Git for Windows

  1. 打开浏览器，访问Git官网：https://git-scm.com/download/win
  2. 下载适合你系统的安装包。
  3. 双击安装包，启动安装向导。
  4. 在安装过程中，当出现 “Select Components” 页面时，建议勾选 “Git Bash Here” 和 “Git GUI Here” 。
  5. 在 “Choosing the default editor” 页面，可以选择VS Code（如果已安装）或其他编辑器。
  6. 在 “Adjusting your PATH environment” 页面，选择 “Git from the command line and also from 3rd-party software” 。
  7. 其余步骤保持默认，点击“Next”直至安装完成。
  8. 安装完成后，重启命令提示符，输入以下命令验证：
    1
    git --version
  9. 配置Git的全局用户信息：
    1
    2
    git config --global user.name "你的姓名"
    git config --global user.email "你的邮箱@example.com"

步骤四：安装Hexo CLI

在命令提示符中执行：

1
npm install -g hexo-cli

验证安装：

1
hexo -v

步骤五：初始化博客项目

  1. 选择一个你希望存放博客源码的目录，进入该目录：
    1
    cd D:\Blog
  2. 执行初始化命令创建博客项目：
    1
    hexo init my-blog
  3. 进入项目目录：
    1
    cd my-blog
  4. 安装项目依赖（如果初始化时未自动完成）：
    1
    npm install

初始化完成后，项目目录结构如下：

1
2
3
4
5
6
7
my-blog/
├── _config.yml      # 站点主配置文件
├── package.json     # 项目依赖清单
├── scaffolds/       # 文章模板
├── source/          # 内容源文件
│   └── _posts/      # 文章存放目录
└── themes/          # 主题目录

步骤六：本地预览博客

  1. 在项目目录下，启动本地预览服务：
    1
    hexo server
  2. 看到如下提示表示服务启动成功：
    1
    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
  3. 打开浏览器，访问 http://localhost:4000 ，即可看到默认的Hexo博客首页。

步骤七：创建并发布一篇博客文章

  1. 在项目目录下，使用以下命令创建一篇新文章：
    1
    hexo new "我的第一篇博客"
  2. 用文本编辑器打开生成的Markdown文件，修改Front-matter信息和正文内容。
  3. 保存文件后，重新生成静态页面：
    1
    hexo generate
  4. 再次启动本地预览服务查看效果：
    1
    hexo server

步骤八：更换主题（可选）

以安装流行的NexT主题为例：

  1. 在项目目录下，克隆NexT主题：
    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next
  2. 打开项目根目录下的 _config.yml 文件，找到 theme 字段，将其修改为：
    1
    theme: next
  3. 重新生成并预览。

五、常见问题与排错

问题现象 可能原因 解决方法
'node' 不是内部或外部命令 Node.js未正确安装或未添加到PATH 重新安装Node.js，确保勾选“Add to PATH”
npm install 速度极慢 默认使用国外镜像源 切换为国内镜像源
hexo -v 报错 Hexo CLI未全局安装 执行 npm install -g hexo-cli
hexo server 启动后浏览器无法访问 端口4000被占用 更换端口：hexo server -p 4001
问题现象 可能原因 解决方法
安装VS Code后无法在命令行使用code命令 安装时未勾选“添加到PATH” 重新运行安装程序，勾选“添加到PATH”；或手动将VS Code安装目录添加到系统环境变量
扩展面板搜索不到插件 网络问题或搜索关键词不准确 检查网络连接；尝试使用准确的插件全名（如“Markdown All in One”）搜索
预览窗口不显示或显示异常 插件未正确安装或未启用 检查扩展面板中插件是否已启用；重启VS Code
预览中图片无法显示 图片路径错误 检查图片路径是否正确，建议使用相对路径
[TOC]不生成目录 未安装Markdown All in One插件 安装并启用Markdown All in One插件

六、拓展与进阶

完成基础实验后，可尝试以下进阶操作：

  1. 自定义代码片段（Snippets） ：在VS Code中配置自定义代码片段，快速插入常用的Markdown结构（如表格、引用块等）
  2. 导出为PDF：使用Markdown Preview Enhanced插件，将Markdown文档导出为PDF格式
  3. 配置自定义CSS：在Markdown Preview Enhanced中加载自定义CSS，实现个性化排版风格
  4. 使用Mermaid绘制流程图：在Markdown中嵌入Mermaid代码，绘制流程图和时序图
  5. 连接Git版本管理：将Markdown文档纳入Git版本控制，追踪修改历史

实验三 代码编辑器

一、实验目标

  1. 安装Visual Studio Code（VS Code）文本代码编辑器；
  2. 安装和配置Markdown相关插件，掌握代码编辑器插件的基本概念；
  3. 学习Markdown基础语法，使用VS Code完成Markdown文档的编辑和渲染任务。

二、背景知识

2.1 代码编辑器 vs 集成开发环境（IDE）

类型 特点 典型代表
代码编辑器 轻量级、启动快、以编辑为核心功能、通过插件扩展能力 VS Code、Sublime Text、Notepad++
集成开发环境（IDE） 功能全面、集成了编译/调试/构建/版本控制等全套工具链 IntelliJ IDEA、PyCharm、Eclipse

2.2 插件（Extension）的概念

插件是VS Code最核心的扩展机制。通过安装不同的插件，可以为编辑器增加语法高亮、代码补全、格式化、预览、调试等新功能。

2.3 Markdown简介

Markdown是一种轻量级标记语言，通过简单的纯文本语法实现结构化文档的编写，并支持转换为HTML、PDF等格式。

Markdown的核心特点：

  • 简洁性：仅需少量符号（如#、*、-）即可完成排版
  • 可读性：未渲染的纯文本仍然清晰易读
  • 兼容性：支持GitHub、各大博客平台、笔记工具等场景

三、实验环境

  • 操作系统：Windows 10/11
  • 网络：需要互联网连接以下载软件和插件
  • 所需软件：
    • Visual Studio Code
    • VS Code插件：Markdown All in One、Markdown Preview Enhanced等

四、详细操作步骤

步骤一：安装Visual Studio Code

  1. 打开浏览器，访问VS Code官网：https://code.visualstudio.com/
  2. 点击首页的 “Download for Windows” 按钮，下载最新版本的安装包。
  3. 双击下载的安装包，启动安装向导。
  4. 在 “选择附加任务” 页面，建议勾选以下选项：
    • ✅ 创建桌面快捷方式
    • ✅ 将“通过Code打开”操作添加到Windows资源管理器文件上下文菜单
    • ✅ 将“通过Code打开”操作添加到Windows资源管理器目录上下文菜单
    • ✅ 将Code注册为受支持的文件类型的编辑器
    • ✅ 添加到PATH（必须勾选）
  5. 点击 “安装” 开始安装。

步骤二：首次运行与界面熟悉

  1. 双击桌面上的VS Code快捷方式图标启动。
  2. 熟悉VS Code的主界面布局：
    • 活动栏（左侧最窄的竖条）：包含资源管理器、搜索、源代码管理、运行和调试、扩展等图标
    • 侧边栏（活动栏右侧）：显示当前活动栏工具的具体内容
    • 编辑器区域（中央）：用于编辑文件的主要区域
    • 面板（底部）：显示终端、输出、问题等
    • 状态栏（底部最下方）：显示当前文件信息、Git分支、编码格式等

步骤三：安装Markdown相关插件

3.1 打开扩展面板

  • 点击左侧活动栏中的 扩展图标（四个小方块组成的图标）
  • 或使用快捷键：**Ctrl + Shift + X**

3.2 安装核心插件

插件1：Markdown All in One

  • 在扩展面板中搜索 Markdown All in One
  • 点击 “安装” 按钮
  • 功能：目录生成、快捷键支持、自动完成、列表自动延续等

插件2：Markdown Preview Enhanced

  • 在扩展面板中搜索 Markdown Preview Enhanced
  • 点击 “安装” 按钮
  • 功能：数学公式（LaTeX）、流程图（Mermaid）、导出为PDF/HTML等

插件3（可选）：Paste Image

  • 在扩展面板中搜索 Paste Image
  • 点击 “安装” 按钮
  • 功能：直接粘贴剪贴板中的图片到Markdown文件

插件4（可选）：markdownlint

  • 用于检查Markdown语法错误和格式规范

步骤四：配置编辑器优化写作体验

  1. 开启自动保存：按 Ctrl + , 打开设置，搜索 files.autoSave，设置为 afterDelay
  2. 开启单词折行：搜索 editor.wordWrap，设置为 on
  3. 配置图片粘贴路径（如安装了Paste Image插件）：设置 Paste Image: Path Type 为 relative

步骤五：创建并编辑第一个Markdown文件

  1. 新建文件：Ctrl + N，保存为 test.md
  2. 输入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 我的第一个Markdown文档

## 什么是Markdown？

Markdown是一种**轻量级**的标记语言。

### Markdown的核心特点

- **简洁性**：仅需少量符号即可完成排版
- **可读性**：纯文本仍然清晰易读
- **兼容性**：支持GitHub、博客平台等多种场景

### 一个代码示例

​```javascript
function hello() {
    console.log("Hello, Markdown!");
}

实验四：Web站点构建——操作说明书

一、实验目标

  1. 使用静态站点构建工具（Hexo）构建一个静态Web博客站点；
  2. 了解和掌握Web应用开发的基本要素与流程：环境准备 → 项目初始化 → 内容编写 → 主题配置 → 本地预览 → 部署上线；
  3. 理解静态站点生成器（SSG）的工作原理及其与动态站点的区别。

二、背景知识

2.1 什么是静态站点生成器（SSG）？

静态站点生成器（Static Site Generator, SSG）是一类工具，它将Markdown等源文件和模板文件作为输入，预先编译成完整的HTML、CSS、JavaScript静态网页。它的核心理念是“提前做好”，而非“现场制作”。

静态站点 vs 动态站点：

对比维度 静态站点（SSG） 动态站点（如WordPress）
页面生成时机 构建时预先生成所有页面 用户访问时由服务器实时生成
数据库 不需要 通常需要
访问速度 极快（纯静态文件） 较慢（需执行后端代码+查数据库）
安全性 高（无后端攻击面） 需额外防护
部署方式 上传静态文件即可 需配置服务器环境和数据库
适用场景 博客、文档站、个人网站 电商、社交、CMS

2.2 为什么选择Hexo？

Hexo是一个基于Node.js的快速、简洁且高效的博客框架。它使用Markdown解析文章，在几秒内即可利用靓丽的主题生成静态网页。Hexo拥有400+主题和丰富的插件生态，适合技术博客和个人网站。

2.3 Web应用开发的基本流程

本次实验将完整覆盖Web应用开发的六个核心环节：

环境准备 → 项目初始化 → 内容编写 → 主题定制 → 本地预览 → 部署上线

三、实验环境

  • 操作系统：Windows 10/11（本说明书以Windows为例）
  • 网络：需要互联网连接
  • 前置条件：已完成实验二（Node.js、npm、Git已安装并配置）
  • 所需账号：GitHub账号（用于免费部署）

四、详细操作步骤

步骤一：环境准备（2分钟）

注意：如果你已完成实验二，Node.js、npm和Git应该已经安装好了。如未安装，请先参考实验二的操作说明书完成安装。

验证环境是否就绪：

打开命令提示符（CMD或PowerShell），依次执行以下命令验证：

1
2
3
node -v        # 应输出 v20.x.x 或更高版本
npm -v         # 应输出 10.x.x 或更高版本
git --version  # 应输出 git version 2.x.x

如果上述命令都能正常输出版本号，说明环境已准备就绪。

步骤二：安装Hexo CLI

在命令提示符中执行以下命令，全局安装Hexo命令行工具：

1
npm install -g hexo-cli

验证安装是否成功：

1
hexo -v

应输出Hexo的版本信息及依赖组件列表。

步骤三：初始化博客项目

  1. 选择一个存放博客的目录（例如 D:\Blog），进入该目录：

    1
    cd D:\Blog

  2. 执行初始化命令：

    1
    hexo init my-blog

    该命令会从GitHub克隆hexo-starter模板，并自动安装依赖。整个过程约需1-3分钟。

  3. 进入项目目录：

    1
    cd my-blog

  4. 手动安装依赖（如初始化时未自动完成）：

    1
    npm install

初始化完成后的目录结构：

1
2
3
4
5
6
7
8
my-blog/
├── _config.yml      # 站点主配置文件（核心配置文件）
├── package.json     # 项目依赖清单
├── scaffolds/       # 文章模板（新建文章时的默认格式）
├── source/          # 内容源文件目录
│   ├── _drafts/     # 草稿存放目录
│   └── _posts/      # 文章存放目录（Markdown文件放这里）
└── themes/          # 主题目录

各目录/文件的作用：

  • _config.yml：站点的全局配置文件，包含网站标题、作者、URL、主题等核心设置
  • source/：存放所有内容源文件（Markdown文章、图片等），_posts是主要的文章存放位置
  • themes/：存放主题，决定网站的外观和布局
  • public/：生成目录（运行hexo generate后自动产生），存放最终的静态HTML文件

步骤四：本地预览博客

在项目目录（my-blog）下，执行以下命令启动本地预览服务：

1
hexo server

或简写为：

1
hexo s

看到如下提示表示启动成功：

1
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打开浏览器，访问 http://localhost:4000，即可看到默认的Hexo博客首页。

提示：在服务器启动期间，Hexo会监视文件变动并自动更新，无需重启服务器。

步骤五：创建并编写博客文章

  1. 在项目目录下创建一篇新文章：

    1
    hexo new "我的第一篇博客"

    这会在 source/_posts/ 目录下生成一个名为 我的第一篇博客.md 的Markdown文件。

  2. 用VS Code打开该文件，其内容格式如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ---
    title: 我的第一篇博客
    date: 2026-07-05 10:00:00
    tags:
    ---

    ## 欢迎来到我的博客

    这是我的第一篇博客文章。通过Hexo，我可以用Markdown轻松写作。

    ### 为什么要写技术博客？

    - 记录学习和成长
    - 分享知识和经验
    - 打造个人技术品牌

  3. Front-matter说明：文件开头的 --- 之间的区域称为Front-matter，用于定义文章的元数据（标题、日期、标签、分类等）。

  4. 保存文件后，重新生成静态页面：

    1
    hexo generate

    或简写为：

    1
    hexo g

  5. 刷新浏览器 http://localhost:4000 即可看到新文章出现在博客首页。

步骤六：更换主题（以NexT为例）

Hexo拥有丰富的主题生态。更换主题只需两步：

  1. 下载主题：在项目目录下，克隆NexT主题到 themes/next 目录：

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next

  2. 修改配置：打开项目根目录下的 _config.yml 文件，找到 theme 字段，修改为：

    1
    theme: next

  3. 重新生成并预览：

    1
    2
    3
    hexo clean   # 清理缓存（可选）
    hexo generate
    hexo server

  4. 刷新浏览器，即可看到NexT主题的新样式。

步骤七：部署到GitHub Pages（免费上线）

将博客部署到互联网上，让全世界都能访问。

7.1 创建GitHub仓库

  1. 登录你的GitHub账号。
  2. 点击右上角的 “+” → “New repository” 。
  3. 仓库名称必须设置为：**你的GitHub用户名.github.io** （例如用户名为 zhangsan，则仓库名为 zhangsan.github.io）。
  4. 选择 “Public” （公开），不要勾选“Initialize this repository with a README”。
  5. 点击 “Create repository” 。

7.2 安装部署插件

在项目目录下安装Git部署插件：

1
npm install hexo-deployer-git --save

7.3 配置部署信息

打开项目根目录下的 _config.yml 文件，在文件末尾添加以下配置：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git
  branch: main

注意：如果你的默认分支是 master，则将 branch 改为 master。GitHub新仓库的默认分支通常为 main。

7.4 执行部署

执行以下命令将博客部署到GitHub Pages：

1
hexo clean && hexo generate && hexo deploy

或分步执行：

1
2
3
hexo clean    # 清理缓存
hexo generate # 生成静态文件
hexo deploy   # 部署到GitHub

部署过程中，系统会提示你输入GitHub的用户名和密码（或Personal Access Token）。

7.5 访问你的博客

部署完成后，在浏览器中访问：

https://你的GitHub用户名.github.io

即可看到你的博客正式上线！

五、常见问题与排错

问题现象 可能原因 解决方法
'hexo' 不是内部或外部命令 Hexo CLI未正确安装 执行 npm install -g hexo-cli 重新安装
hexo init 速度极慢或失败 网络问题，无法访问GitHub 配置代理，或使用Gitee镜像源；也可手动下载模板
hexo server 启动后浏览器无法访问 端口4000被占用 更换端口：hexo server -p 4001
部署后GitHub Pages显示404 仓库名称不是 用户名.github.io 检查仓库命名是否正确
部署后页面样式丢失 站点URL配置错误 检查 _config.yml 中的 url 字段是否设置为 https://用户名.github.io
部署时提示认证失败 未配置Git凭证 使用Personal Access Token代替密码，或在Git中配置凭证缓存

实验五 虚拟机安装与使用

一、实验目标

  1. 使用虚拟机工具（VirtualBox）安装Linux系统（Ubuntu Server）；
  2. 通过克隆技术构建一个多机虚拟化环境；
  3. 了解和掌握基于虚拟机的开发环境的基本构建方法和配置。

二、背景知识

2.1 什么是虚拟化技术？

虚拟化技术允许在一台物理计算机（宿主机）上同时运行多个独立的操作系统（虚拟机），每个虚拟机都拥有自己独立的CPU、内存、硬盘和网络资源。

2.2 虚拟机网络的三种核心模式

网络模式 特点 典型用途
NAT 虚拟机通过宿主机上网，外部不可直达 日常上网、安装软件
桥接（Bridged） 虚拟机直接接入宿主机所在局域网 需要被其他设备直接访问
仅主机（Host-Only） 宿主机与虚拟机形成隔离私网 搭建内网互通实验环境

本实验将采用 “NAT + 仅主机”双网卡方案。

三、实验环境

  • 操作系统：Windows 10/11
  • 网络：需要互联网连接
  • 硬件要求：CPU支持VT-x/AMD-V虚拟化技术；内存≥8GB；硬盘剩余空间≥50GB
  • 所需软件：
    • Oracle VirtualBox
    • Ubuntu Server 22.04 LTS ISO镜像

四、详细操作步骤

步骤一：下载与安装VirtualBox

  1. 访问VirtualBox官网：https://www.virtualbox.org/
  2. 下载Windows版本安装包并安装
  3. 安装完成后重启电脑

步骤二：下载Ubuntu Server ISO镜像

访问Ubuntu官网：https://ubuntu.com/download/server ，下载22.04 LTS版本。

步骤三：创建第一台虚拟机（模板机）

3.1 新建虚拟机

  • 名称：ubuntu-template
  • ISO映像：选择下载的Ubuntu Server ISO
  • 类型：Linux，版本：Ubuntu (64-bit)

3.2 分配硬件资源

  • 内存：2048 MB或以上
  • 硬盘：VDI格式，动态分配，20 GB或以上

3.3 配置虚拟机网络（双网卡）

适配器 连接方式 用途
适配器1 NAT 上网和下载软件
适配器2 仅主机（Host-Only）适配器 多机互联

步骤四：安装Ubuntu Server

  1. 启动虚拟机，选择 “Try or Install Ubuntu Server”
  2. 选择语言和键盘布局
  3. 网络配置保持默认DHCP
  4. 存储配置选择 “Use an entire disk”
  5. 设置用户名和密码
  6. 务必按空格键选中“Install OpenSSH server”
  7. 等待安装完成后重启

步骤五：配置静态IP地址

登录系统后，编辑Netplan配置文件：

1
sudo nano /etc/netplan/50-cloud-init.yaml

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
network:
  version: 2
  renderer: networkd
  ethernets:
    enp0s3:           # NAT网卡
      dhcp4: yes
    enp0s8:           # 仅主机网卡
      dhcp4: no
      addresses:
        - 192.168.56.101/24
      nameservers:
        addresses: [8.8.8.8, 114.114.114.114]

应用配置：

1
sudo netplan apply

步骤六：配置主机名与hosts解析

1
2
sudo hostnamectl set-hostname template
sudo nano /etc/hosts

添加：

1
2
3
4
192.168.56.101 template
192.168.56.102 node1
192.168.56.103 node2
192.168.56.104 node3

步骤七：克隆虚拟机

  1. 关闭模板机：sudo shutdown now
  2. 在VirtualBox中右键点击模板机 → “克隆”
  3. 选择 “完全克隆”
  4. 分别克隆出 node1、node2、node3

步骤八：修改克隆机的主机名和IP

对每台克隆机：

1
2
3
sudo hostnamectl set-hostname node1  # 分别改为node1/node2/node3
sudo nano /etc/netplan/50-cloud-init.yaml  # 修改IP为192.168.56.102/103/104
sudo netplan apply

步骤九：验证多机环境

在node1上测试：

1
2
3
4
ping -c 3 8.8.8.8      # 测试外网
ping -c 3 192.168.56.1 # 测试宿主机
ping -c 3 node2        # 测试其他虚拟机
ping -c 3 node3

五、常见问题与排错

问题现象 可能原因 解决方法
提示“VT-x/AMD-V未启用” BIOS中未开启硬件虚拟化 重启进入BIOS启用VT-x/AMD-V
虚拟机无法上网 NAT网卡配置错误 检查enp0s3是否配置为dhcp4: yes
虚拟机之间ping不通 仅主机网卡IP不在同一网段 检查IP是否都在192.168.56.x/24网段
克隆后网络无法使用 保留了原网卡的MAC地址 在VirtualBox中重新生成MAC地址

实验六 Linux环境配置

一、实验目标

  1. 使用命令行进行Linux系统的基础操作；
  2. 了解和简单管理常用系统配置文件（/etc/passwd、/etc/group、/etc/profile等）；
  3. 了解和简单管理用户配置文件（~/.bashrc、~/.profile等）；
  4. 掌握环境变量的查看、设置与管理方法。

二、背景知识

2.1 Linux命令行基础

  • 命令提示符：用户名@主机名:当前目录$（$表示普通用户，#表示root用户）
  • Tab补全：输入命令或路径时按Tab键自动补全
  • 快捷键：Ctrl+C终止当前命令，Ctrl+D退出终端

2.2 用户与权限

  • root用户：最高权限用户
  • 普通用户：受限权限用户，执行系统级操作时需要sudo提权
  • 用户组：将多个用户归类，方便统一管理权限

2.3 环境变量

  • PATH：指定可执行文件的搜索路径
  • HOME：当前用户的主目录路径
  • USER：当前用户名
  • SHELL：当前使用的Shell类型

三、实验环境

  • 操作系统：Ubuntu Server 22.04 LTS（在VirtualBox虚拟机中）
  • 前置条件：已完成实验五，至少有一台运行中的Ubuntu虚拟机

四、详细操作步骤

第一部分：系统基础操作

步骤一：登录与查看系统信息

1
2
3
4
5
whoami              # 查看当前用户
uname -a            # 查看内核与架构信息
lsb_release -a      # 查看Ubuntu版本
hostname            # 查看主机名
pwd                 # 查看当前工作目录

步骤二：文件与目录的基本操作

1
2
3
4
5
6
7
ls -lh              # 列出文件（详细信息，易读大小）
cd ~                # 切换到主目录
mkdir test_dir      # 创建目录
touch test.txt      # 创建空文件
cp test.txt test_copy.txt  # 复制文件
mv test.txt /tmp/   # 移动文件
rm -f test.txt      # 删除文件

⚠️ rm -rf命令会永久删除文件且不可恢复，请谨慎使用！

步骤三：查看系统资源状态

1
2
3
4
free -h             # 查看内存使用
df -h               # 查看磁盘使用
top                 # 查看进程和资源占用（按q退出）
du -sh *            # 查看当前目录下各子目录的大小

第二部分：用户管理

步骤四：查看用户与组配置文件

1
2
3
4
cat /etc/passwd     # 用户账户信息
sudo cat /etc/shadow # 加密密码信息（仅root可读）
cat /etc/group      # 用户组信息
id                  # 查看当前用户ID信息

/etc/passwd文件格式：

1
用户名:密码占位符:UID:GID:用户描述:主目录:登录Shell

步骤五：创建和管理用户

1
2
3
4
5
6
sudo adduser testuser           # 创建新用户
sudo passwd testuser            # 设置密码
sudo usermod -aG sudo testuser  # 赋予sudo权限
groups testuser                 # 查看用户所属组
su - testuser                   # 切换用户
sudo deluser -r testuser        # 删除用户

步骤六：文件权限管理

权限数字对照表：

数字 权限 含义
7 rwx 读+写+执行
6 rw- 读+写
5 r-x 读+执行
4 r– 只读
0 — 无权限 
1
2
3
4
5
chmod 755 test.txt              # 数字法修改权限
chmod u+x test.txt              # 符号法：所有者增加执行权限
chmod g-w test.txt              # 符号法：去掉组的写权限
sudo chown root:root test.txt   # 修改所有者和组
sudo chgrp www-data test.txt    # 仅修改所属组

第三部分：环境变量与配置文件

步骤七：查看环境变量

1
2
3
4
env                 # 查看所有环境变量
echo $PATH          # 查看PATH变量
echo $HOME          # 查看主目录
echo $USER          # 查看当前用户名

步骤八：临时设置环境变量

1
2
3
4
export PATH=$PATH:/home/dev/mybin   # 临时添加PATH
export MY_VAR="Hello World"          # 临时创建变量
echo $MY_VAR                         # 验证
unset MY_VAR                         # 删除变量

步骤九：永久设置环境变量（用户级）

配置文件 加载时机 作用范围
~/.bashrc 每次打开新终端时执行 当前用户
~/.profile 用户登录时执行一次 当前用户
~/.bash_profile 用户登录时执行（优先于.profile） 当前用户

编辑 ~/.bashrc：

1
2
3
4
5
6
7
nano ~/.bashrc
# 在末尾添加
export PATH=$PATH:/home/dev/mybin
export MY_CUSTOM_VAR="自定义变量"
alias ll='ls -alF'
# 保存后生效
source ~/.bashrc

步骤十：永久设置环境变量（系统级）

方法一：/etc/environment （所有用户生效，需要重启）：

1
2
3
sudo nano /etc/environment
# 添加（不使用export）
PATH="/usr/local/sbin:...:/my/custom/path"

方法二：/etc/profile （所有用户登录时执行）：

1
2
3
4
5
sudo nano /etc/profile
# 在末尾添加
export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64
export PATH=$PATH:$JAVA_HOME/bin
source /etc/profile

方法三（推荐）：/etc/profile.d/ ：

1
2
3
4
sudo nano /etc/profile.d/myenv.sh
# 添加
export MY_GLOBAL_VAR="全局变量"
source /etc/profile.d/myenv.sh

五、常见问题与排错

问题现象 可能原因 解决方法
sudo: command not found 用户不在sudo组中 以root用户登录或切换到root
Permission denied 权限不足 使用sudo提权
修改~/.bashrc后不生效 未执行source 执行source ~/.bashrc
修改/etc/environment后不生效 需要重启 重启系统

实验七 远程登录管理

一、实验目标

  1. 安装和配置OpenSSH服务，实现多机之间的远程登录管理；
  2. 配置SSH密钥认证，实现免密登录；
  3. 了解多机开发环境下的账户管理方法；
  4. 掌握使用SCP和rsync进行跨机文件传输与同步。

二、背景知识

2.1 什么是SSH？

SSH（Secure Shell）是一种加密网络协议，用于在不安全的网络中安全地远程登录和执行命令。SSH默认使用22端口。

2.2 SSH的两种认证方式

认证方式 原理 安全性 适用场景
密码认证 每次登录输入密码 较低 临时访问
密钥认证 使用公钥/私钥对验证身份 高 日常管理、自动化脚本

2.3 文件传输工具

工具 特点 适用场景
SCP 基于SSH的简单复制 一次性、少量文件传输
rsync 增量同步，只传输变化的部分 目录同步、定期备份

三、实验环境

  • 操作系统：Ubuntu Server 22.04 LTS
  • 网络：所有虚拟机处于同一Host-Only网络（192.168.56.0/24）
  • 前置条件：已完成实验五，拥有至少两台Ubuntu虚拟机（node1和node2）

四、详细操作步骤

第一部分：SSH服务安装与基础配置

步骤一：检查SSH服务状态

1
2
3
sudo systemctl status ssh        # 检查服务状态
sudo apt install openssh-server -y  # 如未安装
sudo systemctl enable ssh         # 设置开机自启

步骤二：配置SSH服务器

编辑 /etc/ssh/sshd_config：

1
sudo nano /etc/ssh/sshd_config

关键配置项：

1
2
3
4
# Port 22                    # 默认端口
PermitRootLogin no            # 禁止root直接登录
PubkeyAuthentication yes      # 允许公钥认证
PasswordAuthentication yes    # 允许密码认证

重启服务：

1
sudo systemctl restart ssh

第二部分：SSH密钥认证配置

步骤三：生成SSH密钥对（在node1上）

1
ssh-keygen -t ed25519 -C "你的邮箱@example.com"

生成后查看：

1
2
ls ~/.ssh/
# id_ed25519（私钥） 和 id_ed25519.pub（公钥）

步骤四：将公钥复制到远程服务器

方法一（推荐） ：

1
ssh-copy-id dev@192.168.56.102

方法二（手动） ：

1
2
3
4
5
cat ~/.ssh/id_ed25519.pub
# 复制内容，在node2上执行：
mkdir -p ~/.ssh
echo "粘贴公钥内容" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

步骤五：测试免密登录

1
2
ssh dev@192.168.56.102
# 应无需密码直接登录

第三部分：文件传输

步骤六：使用SCP传输文件

1
2
3
4
5
6
7
8
9
10
11
# 上传文件
scp /home/dev/test.txt dev@192.168.56.102:/home/dev/

# 上传目录
scp -r /home/dev/project/ dev@192.168.56.102:/home/dev/

# 下载文件
scp dev@192.168.56.102:/home/dev/log.txt ./

# 下载目录
scp -r dev@192.168.56.102:/home/dev/backup/ ./

步骤七：使用rsync同步文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 安装rsync
sudo apt install rsync -y

# 本地同步
rsync -avz /home/dev/source/ /home/dev/backup/

# 推送到远程
rsync -avz -e ssh /home/dev/project/ dev@192.168.56.102:/home/dev/project/

# 从远程拉取
rsync -avz -e ssh dev@192.168.56.102:/home/dev/logs/ ./logs/

# 保持完全一致（--delete会删除目标中多余的文件）
rsync -avz --delete -e ssh /home/dev/source/ dev@192.168.56.102:/home/dev/dest/

# 排除特定文件
rsync -avz --exclude='*.log' --exclude='tmp/' -e ssh /home/dev/ dev@192.168.56.102:/home/dev/

五、常见问题与排错

问题现象 可能原因 解决方法
ssh: command not found SSH客户端未安装 sudo apt install openssh-client
Connection refused SSH服务未运行 sudo systemctl start ssh
Permission denied 密码错误或密钥未配置 检查用户名密码；检查authorized_keys
配置免密后仍需密码 文件权限不对 chmod 600 ~/.ssh/authorized_keys
rsync: command not found 远程未安装rsync sudo apt install rsync -y

实验八 软件部署

一、实验目标

  1. 综合运用前七个实验所学的各类工具；
  2. 构建和模拟一个完整的网络环境；
  3. 完整体验和实现Web静态站点从开发到部署的全过程；
  4. 掌握自动化部署（CI/CD）的基本概念与实践方法。

二、背景知识

2.1 什么是CI/CD？

概念 含义 在本实验中的体现
持续集成（CI） 代码变更后自动进行构建和测试 推送代码后自动执行hexo generate
持续部署（CD） 构建通过后自动部署到生产环境 静态文件自动推送到GitHub Pages

2.2 本实验的整体架构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
┌─────────────────────────────────────────────────────────────────────────┐
│                         开发阶段（本地环境）                            │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐        │
│  │ VS Code  │───▶│ Markdown │───▶│  Hexo    │───▶│   Git    │        │
│  │ (编辑器) │    │ (写文章) │    │ (生成)   │    │ (推送)   │        │
│  └──────────┘    └──────────┘    └──────────┘    └────┬─────┘        │
└────────────────────────────────────────────────────────┼──────────────┘
                                                         ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                    GitHub Actions (CI/CD)                              │
│         检出代码 → 安装Node.js → 安装依赖 → hexo generate             │
└─────────────────────────────────────────────────────────┬──────────────┘
                                                         ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                    GitHub Pages (生产环境)                             │
│                      静态HTML文件托管                                   │
└─────────────────────────────────────────────────────────────────────────┘

三、实验环境

  • 操作系统：Windows 10/11 + Ubuntu Server 22.04（虚拟机）
  • 前置条件：已完成实验二、三、四、五、七
  • 所需账号：GitHub账号

四、详细操作步骤

第一部分：GitHub Pages自动化部署

步骤一：准备工作

确认Hexo博客正常运行：

1
2
cd ~/my-blog
hexo server

确认Git配置：

1
2
git config --global user.name
git config --global user.email

步骤二：创建两个GitHub仓库

仓库 名称 可见性 用途
源码仓库 my-blog Private 存放Hexo源码
部署仓库 用户名.github.io Public 托管静态页面

步骤三：将本地项目关联到源码仓库

1
2
3
cd ~/my-blog
git init
git remote add origin https://github.com/你的用户名/my-blog.git

创建.gitignore：

1
2
3
4
node_modules/
.DS_Store
public/
.deploy_git/

提交并推送：

1
2
3
4
git add .
git commit -m "初始化Hexo博客源码"
git branch -M main
git push -u origin main

步骤四：配置GitHub Actions

创建工作流目录和文件：

1
2
mkdir -p .github/workflows
nano .github/workflows/deploy.yml

配置文件内容（请修改用户名）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检出源码
        uses: actions/checkout@v5

      - name: 安装Node.js
        uses: actions/setup-node@v5
        with:
          node-version: '24'

      - name: 缓存依赖
        uses: actions/cache@v5
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

      - name: 安装依赖
        run: npm install

      - name: 生成静态文件
        run: npx hexo generate

      - name: 创建.nojekyll文件
        run: echo "" > public/.nojekyll

      - name: 部署到GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          publish_dir: ./public
          publish_branch: main
          external_repository: 你的用户名/你的用户名.github.io

提交并推送：

1
2
3
git add .github/workflows/deploy.yml
git commit -m "添加GitHub Actions自动部署"
git push

步骤五：生成并配置Personal Access Token

  1. GitHub → Settings → Developer settings → Personal access tokens
  2. Generate new token，勾选repo权限
  3. 复制Token
  4. 在源码仓库 → Settings → Secrets → Actions → New repository secret
    • Name: PERSONAL_TOKEN
    • Secret: 粘贴Token

步骤六：配置GitHub Pages

部署仓库 → Settings → Pages → Branch: main → Save

访问：https://你的用户名.github.io

第二部分：部署到云服务器（虚拟机）

步骤七：安装和配置Nginx

1
2
3
4
sudo apt update
sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

创建站点目录：

1
2
sudo mkdir -p /var/www/blog
sudo chown -R $USER:$USER /var/www/blog

创建Nginx配置：

1
sudo nano /etc/nginx/sites-available/blog
1
2
3
4
5
6
server {
    listen 80;
    server_name _;
    root /var/www/blog;
    index index.html;
}

启用站点：

1
2
3
sudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

步骤八：使用rsync部署

在本地生成静态文件：

1
2
cd ~/my-blog
hexo generate

同步到服务器：

1
rsync -avz -e ssh --delete public/ dev@192.168.56.101:/var/www/blog/

访问虚拟机IP查看部署结果。

五、常见问题与排错

问题现象 可能原因 解决方法
GitHub Actions失败 Token权限不足 检查Token是否勾选repo权限
GitHub Pages显示404 仓库命名错误 必须为用户名.github.io
部署后样式丢失 站点URL配置错误 检查_config.yml中url字段
rsync连接被拒绝 SSH服务未运行 sudo systemctl status ssh
Nginx显示默认页 站点配置未生效 检查sites-enabled链接

附录一：省流版搭建博客（不含虚拟机 / Linux）

如果你只是想把博客跑起来、上线，不用管实验五、六、七（虚拟机 / Linux / SSH）。
下面这条主线走完就够：装环境 → 建博客 → 写文章 → 换主题 → 上线。

你只需要装这 3 样软件

软件 作用 官网
Node.js (LTS) 运行 Hexo nodejs.org
Git 管理/推送代码 git-scm.com
VS Code 写 Markdown code.visualstudio.com

一条命令清单（在 Windows 的 CMD / PowerShell 里依次执行）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 1. 装好上面 3 个软件后，先验证环境
node -v
npm -v
git --version

# 2. 换成国内 npm 镜像（可选，但能明显提速）
npm config set registry https://registry.npmmirror.com

# 3. 全局安装 Hexo 命令行工具
npm install -g hexo-cli

# 4. 初始化博客项目（在 D 盘根目录执行）
cd D:\
hexo init my-blog
cd my-blog

# 5. 本地预览
hexo server
# 浏览器打开 http://localhost:4000 就能看到默认首页

# 6. 新建一篇文章，然后用 VS Code 打开去写正文
hexo new "我的第一篇博客"
# 编辑 source/_posts/我的第一篇博客.md

# 7. 重新生成 + 预览
hexo generate
hexo server

# 8. （强烈推荐）换成好看的 NexT 主题
git clone https://github.com/theme-next/hexo-theme-next themes/next
# 编辑根目录 _config.yml，把 theme 字段改成 next

# 9. 部署上线到 GitHub Pages
#    第一步：先在 GitHub 建一个【公开】仓库，名字必须是：你的用户名.github.io
npm install hexo-deployer-git --save
# 编辑根目录 _config.yml，追加：
#   deploy:
#     type: git
#     repo: git@github.com:你的用户名/你的用户名.github.io.git
#     branch: main
hexo clean && hexo generate && hexo deploy
# 打开 https://你的用户名.github.io

记住这 5 个命令

命令 作用 简写
hexo new "标题" 新建文章 —
hexo server 本地预览 hexo s
hexo generate 生成静态文件 hexo g
hexo clean 清理缓存（改主题后用它） —
hexo deploy 发布到 GitHub Pages hexo d

总结

装 Node + Git + VS Code → npm i -g hexo-cli → hexo init →
hexo s 预览 → hexo new 写文章 → 换 NexT 主题 → hexo d 上线。搞定。

附录二：怎么把博客做成科技感暗夜

效果：深空渐变背景 + 青色粒子连线 + 磨砂玻璃卡片 + 渐变色标题 + 点击涟漪特效 + 暗夜/亮色一键切换。
全程用 NexT 的自定义注入机制，不用改主题源码，想关随时能关。

第 0 步：前提

  • 已经装了 Hexo + NexT 主题（建议 7.x 以上）。
  • 会用 VS Code 打开项目，会敲 hexo clean && hexo generate。

第 1 步：认识 NexT 的”注入口”

NexT 允许你在项目目录里加自己的样式和脚本，而不动主题：

  1. 新建目录 source/_data/
  2. 在 themes/next/_config.yml 里找到 custom_file_path，去掉注释并填上：
1
2
3
4
custom_file_path:
  head: source/_data/head.swig            # 页面开头脚本（防闪白）
  bodyEnd: source/_data/body-end.swig     # 页面结尾脚本（粒子/切换）
  style: source/_data/styles.styl         # 样式

⚠️ 坑1：这里的键名（head / bodyEnd / style）千万别在前面加 #（写成 #head: xxx 就是YAML注释，等于没写，主题不会加载你的文件）。

第 2 步：加一个”总开关”

还是在 themes/next/_config.yml，末尾追加：

1
2
3
4
cyber:
  enable: true        # 科技主题总开关
  particle: true      # 粒子连线背景
  click_effect: true  # 点击涟漪特效

这样下面代码就能用 theme.cyber.enable / hexo-config('cyber.enable') 来判断，想整体关闭只需改成 false。

第 3 步：写样式 source/_data/styles.styl

它的作用顺序：先定一套 CSS 变量（深空色 + 青色 + 玻璃色）→ 再覆盖 NexT 的颜色变量，保证暗夜下文字/链接/按钮都清晰 → 最后给卡片、导航、标题套上玻璃和渐变。

把下面整段复制进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// 科技感暗夜主题 —— 由 custom_file_path.style 加载
if hexo-config('cyber.enable')

  // 深空暗夜配色（默认）
  :root {
    --cyber-bg-1      : #0a0e1a;   // 背景 上
    --cyber-bg-2      : #0f172a;   // 背景 中
    --cyber-bg-3      : #080b14;   // 背景 下
    --cyber-accent    : #00e5ff;   // 青色主强调
    --cyber-accent-2  : #8b5cf6;   // 紫色辅助
    --cyber-card      : rgba(16,22,40,0.55); // 卡片玻璃底色
  }

  // 亮色主题（切换时覆盖这些变量）
  html[data-theme='light'] {
    --cyber-bg-1      : #eef3fb;
    --cyber-bg-2      : #e6f0fa;
    --cyber-bg-3      : #f5f8fd;
    --cyber-accent    : #0891b2;
    --cyber-accent-2  : #7c3aed;
    --cyber-card      : rgba(255,255,255,0.62);
  }

  // 覆盖 NexT 颜色变量 → 暗夜下可读
  :root {
    --body-bg-color   : transparent;
    --content-bg-color: var(--cyber-card);
    --text-color      : #dbe4f2;
    --link-color      : #4cc9f0;
    --link-hover-color: #8be0ff;
    --brand-color     : #eaf2ff;
  }
  html[data-theme='light'] {
    --text-color      : #1f2a3d;
    --link-color      : #0b7285;
  }

  // 页面背景：深空渐变
  body {
    background: linear-gradient(135deg, var(--cyber-bg-1) 0%, var(--cyber-bg-2) 45%, var(--cyber-bg-3) 100%);
    overflow-x: hidden;
  }

  // 粒子画布（垫在内容底下）
  #cyber-bg {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; pointer-events: none;
  }
  @media (max-width: 767px) {
    #cyber-bg { display: none; }   // 移动端隐藏，省性能
  }

  // 磨砂玻璃卡片
  .post-block, .post-block + .post-block, .comments, .pagination, .sidebar-inner {
    background: var(--cyber-card) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid rgba(0,229,255,0.14);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 22px rgba(0,229,255,0.06);
  }

  // 顶部导航玻璃化
  .site-brand-container {
    background: rgba(12,18,34,0.55) !important;
    backdrop-filter: blur(12px) saturate(130%);
    border-bottom: 1px solid rgba(0,229,255,0.12);
  }

  // 标题渐变色
  .site-title {
    background: linear-gradient(90deg, var(--cyber-accent) 0%, var(--cyber-accent-2) 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
  }

  // 返回顶部按钮
  .back-to-top {
    background: rgba(16,22,40,0.7) !important;
    border: 1px solid rgba(0,229,255,0.3);
    border-radius: 10px;
    color: var(--cyber-accent);
  }

  // 点击涟漪特效
  .cyber-click-ripple {
    position: fixed; width: 0; height: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,229,255,0.55) 0%, rgba(139,92,246,0.3) 45%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 99999;
    animation: cyber-ripple .6s ease-out forwards;
  }
  @keyframes cyber-ripple {
    to { width: 150px; height: 150px; opacity: 0; }
  }

讲解关键几行：

  • backdrop-filter: blur(14px)：这就是”磨砂玻璃”——把卡片后面的粒子/背景模糊掉，前提是卡片背景是半透明的（var(--cyber-card) 里带 rgba）。
  • background-clip: text; -webkit-text-fill-color: transparent：把文字变成渐变透明镂空，显示的是背景的渐变色，这就是”渐变色标题”。
  • .post-block + .post-block：首页相邻两篇文章的兄弟选择器，主题自带的高优先级规则会覆盖圆角/阴影，所以要一起写进去，否则第二篇起会少了圆角。

第 4 步：写脚本 source/_data/body-end.swig

在页面结尾注入：粒子画布、点击涟漪、主题切换按钮。

⚠️ 坑2：这是 swig / nunjucks 模板，不能用 hexo-config(...)（会报
Unable to call config），必须用 theme.cyber.* 取主题配置。
只有 .styl 样式文件里才能用 hexo-config()。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{% if theme.cyber.enable %}
<script>
(function () {
  'use strict';

  // 主题切换（默认暗夜，存 localStorage 记住）
  var ROOT = document.documentElement, KEY = 'cyber-theme';
  var saved = ''; try { saved = localStorage.getItem(KEY) || ''; } catch (e) {}
  var theme = saved || 'dark';
  var btn = document.getElementById('cyber-theme-toggle');
  if (!btn) { btn = document.createElement('button'); btn.id = 'cyber-theme-toggle'; btn.type = 'button'; document.body.appendChild(btn); }
  function setTheme(t) {
    ROOT.setAttribute('data-theme', t);
    try { localStorage.setItem(KEY, t); } catch (e) {}
    if (btn) { btn.textContent = (t === 'dark') ? '🌙' : '☀️'; }
  }
  setTheme(theme);
  if (btn) btn.addEventListener('click', function () { setTheme(ROOT.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'); });

  // 点击涟漪
  {% if theme.cyber.click_effect %}
  document.addEventListener('click', function (e) {
    var r = document.createElement('span');
    r.className = 'cyber-click-ripple';
    r.style.left = e.clientX + 'px'; r.style.top = e.clientY + 'px';
    document.body.appendChild(r);
    r.addEventListener('animationend', function () { r.remove(); });
  });
  {% endif %}

  // 粒子连线背景
  {% if theme.cyber.particle %}
  (function () {
    if (window.innerWidth < 768) return;                       // 移动端跳过
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var canvas = document.createElement('canvas');
    canvas.id = 'cyber-bg';
    document.body.insertBefore(canvas, document.body.firstChild);
    var ctx = canvas.getContext('2d'), W = 0, H = 0, dots = [];
    var MAX = 110, LINK = 140;
    function resize() {
      W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight;
      var n = Math.min(Math.floor(W * H / 9500), MAX); dots = [];
      for (var i = 0; i < n; i++) dots.push({ x: Math.random()*W, y: Math.random()*H, vx: (Math.random()-0.5)*0.6, vy: (Math.random()-0.5)*0.6, r: Math.random()*1.6+0.6 });
    }
    function tick() {
      ctx.clearRect(0, 0, W, H);
      var i, j, a, b, dx, dy, d;
      for (i = 0; i < dots.length; i++) {
        a = dots[i]; a.x += a.vx; a.y += a.vy;
        if (a.x < 0 || a.x > W) a.vx *= -1;
        if (a.y < 0 || a.y > H) a.vy *= -1;
        ctx.beginPath(); ctx.arc(a.x, a.y, a.r, 0, Math.PI*2); ctx.fillStyle = 'rgba(34,211,238,0.85)'; ctx.fill();
      }
      for (i = 0; i < dots.length; i++) {
        a = dots[i];
        for (j = i+1; j < dots.length; j++) {
          b = dots[j]; dx = a.x-b.x; dy = a.y-b.y; d = Math.sqrt(dx*dx+dy*dy);
          if (d < LINK) { ctx.strokeStyle = 'rgba(0,229,255,' + ((1-d/LINK)*0.35) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke(); }
        }
      }
      requestAnimationFrame(tick);
    }
    resize(); tick();
    window.addEventListener('resize', resize);
  })();
  {% endif %}
})();
</script>
{% endif %}

讲解关键几行：

  • canvas.id = 'cyber-bg' + CSS 里 #cyber-bg { z-index:-1 }：让粒子画布垫在内容后面，而且 pointer-events:none 不挡点击。
  • 「距离小于 LINK 的两点连一条线、透明度随距离变淡」：这就是粒子网络的经典算法。
  • setAttribute('data-theme', t)：切主题，前端 CSS 用 html[data-theme='light'] 来做选择器覆盖。

第 5 步：写 source/_data/head.swig，防开屏闪白

如果不写这一步，浏览器会先画一帧默认白底，再被 JS 切成暗夜，会”白屏闪烁”。加个头部的立即设置脚本：

1
2
3
4
5
6
7
8
9
{% if theme.cyber.enable %}
<script>
(function () {
  var t = 'dark';
  try { t = localStorage.getItem('cyber-theme') || 'dark'; } catch (e) {}
  document.documentElement.setAttribute('data-theme', t);
})();
</script>
{% endif %}

第 6 步：生成看效果

1
2
3
hexo clean
hexo generate
hexo server    # 打开 http://localhost:4000

注意：NexT 的样式是编译进 public/css/main.css 的（不是实时读取 .styl），所以每次改了
styles.styl / head.swig / body-end.swig 或主题配置，都要重新 hexo clean && hexo generate。

常见问题速查

现象 原因 解决
样式 / 脚本完全不生效 custom_file_path 键名带了 # 去掉首行 #
模板报 Unable to call config 在 swig/njk 模板里用了 hexo-config() 改成 theme.cyber.*
改了样式没变化 没重新生成 跑 hexo clean && hexo generate
想整体关闭 cyber.enable 设为 false 重新生成
手机端没有粒子背景 移动端被 CSS/JS 隐藏 正常，桌面才有