搭建个人博客的教程
第一步 确定所选择的框架
前言
所想要搭建静态博客，大致要走完这个流程（这是我用Hugo和Github搭建博客时的流程）：
选择框架(网站生成器)–>在对应框架的主题库内选择主题(模板)–>对主题和模板进行修改，在本地渲染网页进行调试，产生public文件夹–>通过git将public内容上传至Github仓库托管–>由Github生成网页
Here we go!
博客分为静态网站和动态网站（顺便一提）
静态网站的核心特点
- 内容固定
- 网站内容在更新前不会随访问变化，浏览器拿到的就是预先生成好的页面。
- 没有服务端动态逻辑
- 没有 PHP、Python、Node.js 等后端程序实时输出数据。
- 没有数据库（如 MySQL、MongoDB）实时读取。
- 部署极其简单
- 可以直接放到任何 Web 服务器甚至 GitHub Pages 这类静态托管服务。
- 访问速度快
- 没有复杂的服务端运算，页面加载非常迅速。
- 安全性高
- 没有服务端程序与数据库，攻击面极小，不怕 SQL 注入等常见动态网站漏洞。
我们搭建一个静态网站可以是0金钱成本的，这就很不错。静态网站没有后端程序或数据库，缺点就是缺乏与用户的交互和动态(比如说评论，用户系统，个性化内容等等)。而动态网站就需要自己花钱去租赁服务器，租域名和维护网站安全，成本高昂。这篇文章则重点以Hugo框架为例详解搭建静态博客。
以下各个框架是由不同语言开发的，这意味着如果要使用框架可能需要对应的语言环境和技术基础。（建议善用AI）
静态框架
Hexo
- 开发语言：Node.js
- 优点
- 上手简单，配置清晰，写 Markdown 就能发文章；
- 插件多，主题丰富，社区活跃；
- 文章少时构建速度较快；
- 托管友好，常用 GitHub Pages 一键部署。
- 缺点
- 生成大型站点时速度和内存有限制；
- 部分插件兼容性一般，需要一定技术基础；
- 没有动态功能，不能直接实现评论、用户系统等，需要借助第三方服务。
- 据说文章量大时（数百篇）渲染速度会明显减慢。
Hugo
- 开发语言：Go
- 优点
- 构建速度极快，适合超大量内容的博客或网站（在文章数量庞大的时候仍能快速渲染）；
- 多语言和分区支持好，国际化方便；
- 官方文档完善，可定制性强；
- 无需数据库，部署简单。
- 缺点
- Go 模板语法较学习成本；
- 中文社区和资源比 Hexo 少一些；
- 插件、主题生态比 WordPress、Hexo要小。
Jekyll
- 开发语言：Ruby
- 优点
- GitHub Pages 原生支持，免配置一键部署；
- 社区成熟、文档齐全，主题不少；
- 支持 Markdown、Liquid 模板。
- 缺点
- Ruby 环境搭建略麻烦；
- 构建速度比 Hugo 慢，尤其内容多时；
- 主题和插件生态不如 WordPress、Hexo广。
动态框架
Typecho
- 开发语言：PHP
- 优点
- 极致轻量，对服务器资源要求低；
- 后台清爽简洁，操作简单；
- 插件和主题够用，适合个人极简博客；
- 便于自定义和二次开发。
- 缺点
- 文档较为简略，社区小众，扩展生态有限；
- 插件数量和兼容度不如 WordPress；
- 动态系统，需配置数据库和服务器环境。
Halo
-
开发语言：Java
-
优点
- 管理后台现代化、功能丰富；
- 安全性较高，支持 Docker 部署，非常适合云服务器；
- 支持丰富主题及插件，接口友好。
-
缺点
- Java 环境要求高，搭建门槛高于 PHP 类，资源消耗更大；
- 生态和社区相较 WordPress略弱；
- 插件扩展还在成长中。
WordPress
- 开发语言：PHP
- 优点
- 全球用户最多、插件主题最全，能满足几乎所有网站需求；
- 支持博客、电商、论坛、企业官网等各类应用场景；
- 社区活跃，资源教程齐全；
- 支持可视化编辑和多用户管理。
- 缺点
- 占用资源大，安全性需实时关注（更新和防护必不可少）；
- 简单小站显得太冗余，后台操作重；
- 插件太多可能导致兼容和性能问题。
总结
- 注重性能与极简：Hugo
- 主题和插件多、上手快：Hexo
- 省心原生支持 GitHub Pages：Jekyll
- 服务器资源很小但要后台：Typecho
- 现代化部署/Java生态：Halo
- 功能最丰富/做企业级或加电商：WordPress
操作
首先在官网下载hugo，我们要安装带有extended的版本
下载好后打开powershell，输入hugo version
可以看到成功安装好了带有extended版本的hugo
找一个你想存放博客的本地文件的位置，打开powershell，输入hugo new site myblog
这样就会创建一个叫做myblog的文件夹，这就是你的博客项目。
（在实操中遇到更细节性的问题建议使用AI）
第二步 选择主题(模板)
在对应框架的主题库中找自
在这里找到一个你喜欢的主题，点进去一般会有两个按钮，Download和Demo
点击download可以跳转到对应的github项目，Demo可以预览作者给出的实例。
比如这个PaperMod
建议使用git指令来获取主题
首先在myblog文件夹内执行git init初始化项目
然后使用git submodule指令来抓取主题仓库（不懂的话可以把主题URL复制下来问AI）
git clone https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
然后在myblog文件夹根目录找到hugo.toml或者config.toml(这两种文件名都可以，这是总配置文件)，在title下面添加一行theme = "PaperMod"即可
到此我们可以在项目文件夹内使用hugo server -D来本地渲染一下你的网站
可以看到成功渲染在了localhost:1313，点进去即可看到。
第三步 创作你的网站
这是自由的一步，你要根据自己的想法来雕刻模板，创造出自己的网站。
第四步 生成public并推送
在本地调试的过程中其实已经生成了public文件。为了确保最新你可以先删除掉public文件，再在powershell运行hugo或者hugo --minify来生成public文件。这个public就是已完全编译好的静态网页文件。它不是源码，而是成品页面。把它推送至Github仓库，并且指定分支，Github会自动把文件作为网站托管。
可以把public里的内容单独拎出来。放在一个文件夹里，运行以下指令
git init
git add .
# 将当前目录所有文件和修改（包括新文件、删除、修改）都加入 git 暂存区，准备提交
git commit -m "add workflow"
# 用说明（commit message）“add workflow”提交所有刚才 add 的文件和修改到本地 git 仓库。这一步是保存快照，也可把消息改成你喜欢的，比如 "更新文章" "首次初始化博客"
git remote add origin https://github.com/你的用户名/你的仓库名.git
#把你本地的 Git 仓库和远程的 GitHub 仓库关联起来，告诉 Git，远程仓库的名字叫 origin，地址是你 GitHub 的仓库 URL
git push origin master
# 说明：把本地 git 仓库的所有最新提交（commit）推送到远程 GitHub 仓库。推送后，所有新内容/修改会同步到 GitHub。如果你的仓库分支是main，则把master改成main
第一次可能还需要配置用户信息，如下
git config --global user.name "你的github用户名"
git config --global user.email "你的Github账号邮箱"
成功后你就可以在Github仓库里看到自己的文件。就像这样
第五步 配置Github pages和更新
在你的仓库上方有一个Settings按钮
进入找到Pages，就在这里生成你的网页
可以用Github Actions或者手动选择分支来生成网页。成功后即可在这个页面看到上方的
进入即可查看你的网页。
后续更新网站内容只需要
git add .
git commit -m "update"
git push origin master
即可，原理上刷新你仓库内的那些public文件，就可以自动新建页面
常见问题
在本地渲染网页期间如果出现库报错一直无法解决的错误，可以看一下系统的语言环境是不是出了问题
在正式发布到Github之前记得修改好你.toml文件的BaseURL配置，这经常被忽略
posts文章手动创建无标题和时间，记得用hugo来生成文章
Git 仓库只会记录/推送你修改过的文件，而不会修改没变化的文件
Comments