个人网站搭建教程

前言

动态网站（PHP+数据库）：WordPress 静态网站： Hugo：GO语言，非常快，体积小，上手难度大 Hexo：js友好，中文社区活跃，慢

Hugo

借鉴的中文博客

一、安装Hugo

官网下载 安装extended版本，功能更多 官方文档：Quick start

放到e:\hugo\bin下
在此文件夹中打开git bash
hugo version：出现版本号安装成功
hugo new site 'document'：我的项目在e:\hugo\document下 ![[picture/hugo_document.png]]
cd document
git init
https://themes.gohugo.io/：安装主题
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod：我用的PaperMod主题。国内用https下载很慢，记得开加速。或者使用浏览器的gitzip插件，下载zip文件，解压缩到themes\PaperMod

网站配置文件：建议删除hugo.toml，config.toml。新建hugo.yml 官方配置文件

echo 'theme: "PaperMod"' >> hugo.yml：将主题配置写入Hugo的网站配置文件
hugo new posts/my-first-post.md：在content\posts文件下新建一个
hugo server -D：启动Hugo的本地开发服务器，实时预览你的网站，-D表示显示draft

二、部署到GitHub作为代码托管

官方文档：Host on GitHub Pages

1.新建仓库

在Gihub中新建一个repositories，以用户名.github.io命名，这是静态网站托管仓库。注意仓库大小写，全部改成小写！ 😭
修改hugo.yml中的，baseURL: 'https://用户名.github.io/'
在项目根目录下e:\hugo\document

mkdir -p .github/workflows
touch .github/workflows/hugo.yaml    # GitHub Actions 工作流定义文件，脚本自动部署网站

2.工作流配置

复制官方文档中的标准工作流配置 注意修改

修改时区：
将第25行的 TZ: Europe/Oslo 改为 TZ: Asia/Shanghai，这样生成的文章时间戳会更符合本地时间。
确认主题子模块：
这个工作流在第29行设置了 submodules: recursive，这能确保你的PaperMod主题被正确拉取。必须是使用 git submodule add 方式安装的。如果是zip下载，直接注释掉这一行（避免弹出报错）。

托管仓库基本不手动操作。所有更改通过Actions自动推送。 坑：单仓管理就行，笨蛋AI推荐双仓管理，结果配置出错了

3.推送到仓库

3.1. 检查

首先检查是否有.gitignore，在git提交时忽略的项目。不忽略会导致项目很大

# 由Hugo生成的网站文件夹
/public/
/resources/_gen/
# Hugo的模块缓存
/_vendor/
# 操作系统产生的临时文件
.DS_Store
Thumbs.db
# 编辑器/IDE的配置文件
.vscode/
.idea/
*.swp
*.swo
# 环境变量或本地配置文件
.env
.env.local

如果已经commit过，建议及时清理

# 从Git暂存区移除public/目录（不会删除本地文件）
git rm --cached -r public/
git add . #重新添加
git status # 检查一下

3.2. 绑定（如果没有）

git config --global user.name "你的用户名"
git config --global user.email "你的GitHub主邮箱地址"
git config --global user.name user.email

设置分支，和GitHub平台同步，Git默认是master，GitHub默认是main，这在推送时会导致错误。

git config --global init.defaultBranch #如果为空就
git config --global init.defaultBranch main
git config --global init.defaultBranch # 检查一下

3.3. 修改Actions

在GitHub左侧边栏找到并点击 “Pages”。
在右侧的 “Build and deployment”（构建和部署）部分，将 “Source” 下拉菜单从 None 或 Deploy from a branch 更改为 “GitHub Actions”

3.4.推送

# 确保在项目根目录 
cd /e/hugo/document 
# 初始化Git（如果还没做） 
git init 
# 添加所有文件（包含主题和刚创建的 .github/workflows/hugo.yaml） 
git add . 
# 提交 
git commit -m “初始提交：包含Hugo源码和Actions工作流” 
# 关联远程仓库（替换下面的URL） 
git remote add origin url 
# 推送 
git branch -M main 
git push -u origin main

三、提交更改

git add .     # 将所有更改提交到暂存区
git add <文件名>  # 或者这种方法
git status   # 暂存区有哪些文件
git diff --cached # 查看暂存区的修改
git commit -m “描述”
git push origin main # 推送到远程仓库

四、配置问题

官方配置文件

启用profileMode模式：副标题sutitle为md语法，可以在/themes/PaperMod/layouts/partials/index_profile.html，改成html语法

# ctrl+h 搜索subtitle
# <span>{{ .subtitle | markdownify }}</span>
# 替换成
<span>{{ .subtitle | safeHTML }}</span>

在末尾增加

caches:
  images:
    dir: :cacheDir/images

Hexo

一、环境准备

1. 安装node.js

【基础篇】hexo博客搭建教程 - huanhao - 博客园

2. 安装Git

【基础篇】hexo博客搭建教程 - huanhao - 博客园

3. 安装cnpm

这是npm的国内镜像，包管理工具，类似于pip。

3.1 修改目录（可选）

由于默认安装位置在C:\Users\用户\AppData\Roaming\npm，可能会误删，比如在清理C盘时，经常会直接删除Roming这个文件夹

# 设置新的全局安装目录到 E:\npm
npm config set prefix "E:\npm"

# 设置新的缓存目录
npm config set cache "E:\npm-cache"

# cnpm 也使用同样的配置
cnpm config set prefix "E:\npm"
cnpm config set cache "E:\npm-cache"

验证配置

# 查看配置是否生效
npm config get prefix    # 应该显示 E:\npm
npm config get cache     # 应该显示 E:\npm-cache

cnpm config get prefix   # 应该显示 E:\npm
cnpm config get cache    # 应该显示 E:\npm-cache

3.2 安装

# 使用阿里云安装
npm install -g cnpm --registry=https://registry.npmmirror.com

3.3 设置环境变量

在设置里搜索编辑系统环境变量`
点击环境变量
双击系统环境变量下的PATH
新建并编辑E:\npm
重启Git Bash

3.4 检查

检查是否安装成功，以及对应位置 cnpm -v 如若不成功，可重启电脑重试（更新环境变量配置）。

4. 安装hexo

4.1 安装

cnpm install hexo-cli -g

4.2. 初始化

在资源管理器中新建一个文件夹E:\hexo-blog 进入文件夹，右击打开GitBash

hexo init

![[picture/hexo init.png]]

cnpm install    # 等待完成

$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

二、主题选择

Themes | Hexo 这里面有很多主题可以进入项目文档，也可以预览

在hexo-blog文件夹中下载主题

git clone https://github.com/PhosphorW/hexo-theme-academia.git themes/Academia

配置文件解释

格式	设计目的	最佳用途
JSON (JavaScript Object Notation)	数据交换 (Data Exchange)	Web API 通信、前后端数据传输。追求简洁、机器友好和通用性。
TOML (Tom’s Obvious, Minimal Language)	配置文件 (Configuration File)	应用程序设置、静态网站生成器 (如 Hugo)、Rust 生态系统 (如 Cargo)。追求明确、易读和易于编写。
YAML (YAML Ain’t Markup Language)	数据序列化 (Data Serialization)	复杂的配置文件、DevOps (如 Kubernetes, Docker Compose)，追求人类可读性和简洁性。

特点	JSON	TOML	YAML
结构化	使用大括号 `{}` (对象) 和方括号 `[]` (数组) 来定义结构。	使用方括号 `[]` 来定义区块/表格，使用点号 `.` 来表示嵌套。	严重依赖缩进 (Indentation) 来定义层级和结构。
键值对	`"key": "value"`	`key = "value"`	`key: value`
数组/列表	`["item1", "item2"]`	`list = ["item1", "item2"]`	使用破折号 `-`：`list:` `- item1` `- item2`
字符串引用	必须使用双引号 `""`。	字符串通常需要引号 `""`。	字符串通常不需要引号，除非包含特殊字符。
可读性	较差，有大量符号 (引号、逗号、括号)。	优秀，区块结构清晰。	最高，语法噪音最少 (没有大括号、逗号等)。
对空格敏感	不敏感 (结构由 `{}` 和 `[]` 定义)。	不敏感 (结构由 `[]` 和 `.` 定义)。	极度敏感 (缩进错误会导致解析失败)。
注释 (Comments)	不支持	支持 (`#`)	支持 (`#`)
高级引用	不支持	不支持	支持 (锚点 `&` 和别名 `*` 实现数据复用)
数据类型	仅支持基本类型 (字符串、数字、布尔、数组、对象、Null)。	支持较多类型 (字符串、整数、浮点数、布尔、日期/时间等)	支持最多类型，可以表达复杂数据结构甚至自定义类型。
解析速度	最快 (语法最简单，解析器高度优化)	较快 (介于 JSON 和 YAML 之间)	最慢 (因其复杂功能和灵活语法)

前言#

Hugo#

一、安装Hugo#

二、部署到GitHub作为代码托管#

1.新建仓库#

2.工作流配置#

3.推送到仓库#

3.1. 检查#

3.2. 绑定（如果没有）#

3.3. 修改Actions#

3.4.推送#

三、提交更改#

四、配置问题#

Hexo#

一、环境准备#

1. 安装node.js#

2. 安装Git#

3. 安装cnpm#

3.1 修改目录（可选）#

3.2 安装#

3.3 设置环境变量#

3.4 检查#

4. 安装hexo#

4.1 安装#

4.2. 初始化#

二、主题选择#

配置文件解释#

前言