1. 为什么现在还要自己搭博客这个问题我几乎每次分享都会被问到。在社交媒体、公众号、知乎专栏、小红书遍地开花的今天花几个小时甚至几天去折腾一个独立博客看起来确实有点“复古”。但作为一个写了十几年博客的老家伙我依然认为拥有一个完全由自己掌控的数字自留地其价值是任何平台都无法替代的。这不仅仅是情怀更是实打实的个人资产和技能沉淀。首先所有权。你在任何第三方平台发布的内容本质上都是“租用”了别人的地盘。平台规则说变就变账号可能因为各种原因被限制甚至封禁你辛苦积累的文字和流量可能一夜归零。而一个部署在自己服务器或托管在GitHub Pages这类服务上的博客只要你的域名和代码还在内容就永远是你的。其次自由度。从页面设计、交互逻辑到数据统计你拥有100%的控制权。想加个暗黑模式换套字体接入自己的评论系统完全由你说了算不受任何模板限制。最后技术成长。搭建博客的过程本身就是一次绝佳的“全栈”实践。你会接触到版本控制Git、命令行操作、静态站点生成器、前端部署等一系列现代开发者必备的技能哪怕你不是程序员这个过程也能极大地提升你的信息处理和技术理解能力。所以这篇教程的目标就是带你从“零”开始——这个“零”指的是对命令行只有模糊概念甚至从未接触过Node.js或Git的小白——一步步搭建起一个既好看又好用并且完全属于你自己的个人博客。我们选择的技术栈是Hexo GitHub Pages这是目前最成熟、社区最活跃、对新手最友好的静态博客方案之一。不用担心我会把每一步的原理、可能遇到的坑以及背后的“为什么”都讲清楚保证你能跟着做下来。2. 搭建前的核心准备理解工具链在动手敲命令之前我们先花几分钟搞清楚我们要用的几个核心工具到底是干什么的。知其然更要知其所以然这样出了问题你才知道该往哪个方向排查。2.1 Node.js博客的“发动机”你可以把Node.js理解为一个能让JavaScript语言在电脑上而不是只在浏览器里运行的环境。我们的博客生成器Hexo就是用JavaScript写的它必须在Node.js环境下才能工作。所以安装Node.js是第一步它为我们的博客项目提供了运行能力。这里有个关键点版本管理。Node.js更新很快不同项目可能依赖不同版本。直接安装官网的最新版有时会遇到兼容性问题。对于新手我建议先安装一个叫nvmNode Version Manager的工具Windows用户可以用nvm-windows。它可以让你在电脑上轻松安装和切换多个Node.js版本。不过为了教程的纯粹性我们先采用最直接的官网安装法如果你后续遇到版本问题再回头研究nvm也不迟。2.2 Git博客的“时光机”与“搬运工”Git是一个分布式版本控制系统。听起来很复杂其实它的核心作用就两个版本控制时光机它能记录你博客项目包括文章、配置、主题文件的每一次改动。如果你改坏了某个文件可以轻松回退到之前的任何一个正常状态再也不用担心“一失足成千古恨”。代码托管与部署搬运工我们将使用GitHub这个网站来免费托管我们的博客代码。Git就是本地电脑和GitHub网站之间的“搬运工”负责把本地的代码推送到云端GitHub也负责把云端的更新拉取到本地。我们后续会用一个非常巧妙的模式在本地用Hexo写文章、生成静态网页然后用Git命令将这些生成的网页文件推送到GitHub上一个特殊的仓库GitHub Pages服务会自动将这个仓库变成可以通过网址访问的网站。2.3 Hexo博客的“自动化工厂”Hexo是一个静态博客生成器。什么是“静态”它不像WordPress那样每次有人访问你的博客服务器都要现场从数据库里查询文章、组装页面。Hexo的工作模式是你在本地用Markdown格式写好文章运行一条命令Hexo就会读取你的文章和配置瞬间生成一整套完整的、纯粹的HTML、CSS、JavaScript文件。这些生成好的文件就是你的整个博客网站。这种模式的优点是极致的速度和安全。因为服务器只需要发送现成的文件访问速度飞快同时没有数据库和动态脚本几乎不存在被黑客攻击的风险。缺点是你想更新博客必须在本地电脑上操作生成新文件后再上传。2.4 GitHub Pages免费的“网站托管服务器”这是GitHub提供的一项免费服务。你可以创建一个特定名称的仓库比如你的用户名.github.io然后把静态网页文件放进去GitHub就会自动为你提供一个https://你的用户名.github.io的网址全世界都能访问。这是我们博客的最终归宿完全免费且稳定。理清了这四者的关系我们的工作流程就清晰了在本地安装Node.js和Git → 用Node.js的npm工具安装Hexo → 用Hexo创建博客项目并写文章 → 用Git将Hexo生成的静态文件推送到GitHub仓库 → 通过GitHub Pages提供的网址访问博客。3. 手把手环境配置与安装现在我们开始真正的实操。请严格按照顺序进行。3.1 安装Node.js访问官网打开浏览器访问 Node.js官网 。你会看到两个版本推荐LTS长期支持版和Current最新版。务必选择LTS版本。LTS版本更稳定兼容性更好是生产环境的首选。Current版本包含最新特性但可能不稳定不适合新手。下载安装点击LTS版本的下载按钮它会自动识别你的操作系统Windows/macOS/Linux并提供对应的安装包。下载完成后双击安装包一路点击“Next”即可。安装过程中记得勾选“Automatically install the necessary tools”或类似选项如果出现的话。验证安装安装完成后我们需要检查是否成功。打开“命令提示符”Windows或“终端”macOS/Linux。在Windows上可以按Win R输入cmd后回车。在macOS上可以按Cmd 空格输入“终端”后回车。 在打开的黑窗口里输入以下两条命令分别回车node -v npm -v如果安装成功你会看到分别输出了Node.js和npmNode.js的包管理器随Node.js一同安装的版本号例如v18.20.0和10.7.0。只要能看到版本号就说明安装成功了。注意如果提示“不是内部或外部命令”说明安装时可能没有自动将Node.js添加到系统环境变量PATH中。你需要手动将Node.js的安装路径如C:\Program Files\nodejs\添加到系统的环境变量Path中然后重新打开命令提示符。3.2 安装Git访问官网打开 Git官网 下载安装程序。安装过程运行下载的安装程序。在Windows上安装过程中有几个选项需要注意选择组件保持默认确保“Git Bash Here”和“Git GUI Here”被选中这会在右键菜单添加便捷入口。选择默认编辑器推荐选择“Use Visual Studio Code as Gits default editor”如果你安装了VSCode或者选择“Nano”或“Vim”作为简单的备用。避免选择复杂的编辑器。调整PATH环境选择“Git from the command line and also from 3rd-party software”。这会将Git工具添加到系统PATH让你在任何命令行窗口都能使用git命令。选择HTTPS传输后端选择“Use the OpenSSL library”。配置行尾符号转换非常重要选择“Checkout Windows-style, commit Unix-style line endings”。这能避免不同操作系统间换行符差异导致的问题。其他选项一路默认即可。验证安装安装完成后重新打开一个新的命令提示符或终端窗口输入git --version看到类似git version 2.45.0的输出即表示安装成功。全局配置一次性设置安装好Git后需要告诉Git你是谁这样你提交代码时GitHub才能知道是谁提交的。在命令行中执行以下两条命令将引号内的内容替换成你自己的GitHub注册邮箱和用户名。git config --global user.email 你的邮箱example.com git config --global user.name 你的GitHub用户名这个配置是全局的设置一次以后在这台电脑上所有Git操作都会使用这个身份。3.3 安装Hexo并创建博客项目环境准备好现在可以安装我们的主角Hexo了。安装Hexo命令行工具打开命令行输入以下命令。这个命令会通过npmNode.js的包管理器从网络下载并全局安装Hexo。npm install -g hexo-cli-g参数代表全局安装这样你可以在任何目录下使用hexo命令。安装过程可能需要一点时间取决于你的网络速度。创建博客文件夹并初始化找一个你喜欢的目录比如D:\Blog或~/Documents/Blog。在命令行中使用cd命令切换到这个目录然后执行初始化命令。# 切换到你想存放博客的目录示例 cd /d/Blog # 初始化一个名为 myblog 的Hexo项目 hexo init myblog这条命令会创建一个名为myblog的文件夹并在里面生成Hexo博客所需的全部基础文件。进入项目并安装依赖cd myblog npm installnpm install会读取项目根目录下的package.json文件安装Hexo运行所需的所有第三方模块依赖包。完成后你的博客骨架就搭好了。4. 本地运行与初体验看到你的第一个博客项目初始化完成让我们先看看它长什么样。启动本地服务器在myblog目录下运行hexo server或者简写hexo s命令行会输出类似Hexo is running at http://localhost:4000 . Press CtrlC to stop.的信息。在浏览器中查看打开你的浏览器在地址栏输入http://localhost:4000并访问。恭喜一个默认主题的Hexo博客已经呈现在你眼前了。你可以点击页面上的链接看看Hexo默认生成的一篇“Hello World”文章。理解本地服务器的意义hexo server启动的是一个本地开发服务器。它会在你电脑的4000端口运行一个临时网站方便你在写作和修改主题时实时预览效果。这个网站只有你自己能访问。当你关闭命令行窗口或按CtrlC服务器就停止了。现在博客的雏形已经有了。但默认的主题比较朴素接下来我们要给它“装修”一下。5. 为博客挑选并安装一个高颜值主题Hexo有海量的第三方主题这是它的一大魅力。我们以目前非常流行、文档齐全的Fluid主题为例进行安装。你也可以在 Hexo主题官网 探索其他主题。下载主题在博客根目录myblog下使用Git将主题克隆到themes文件夹中。Fluid主题的仓库地址是https://github.com/fluid-dev/hexo-theme-fluid.git。git clone https://github.com/fluid-dev/hexo-theme-fluid.git themes/fluid这行命令的意思是从GitHub上复制Fluid主题的代码放到当前项目的themes/fluid目录下。应用主题打开博客根目录下的全局配置文件_config.yml注意不是themes/fluid目录下的那个。用记事本或任何代码编辑器强烈推荐VSCode打开它找到theme这一行将其值修改为fluid。# 原本可能是 # theme: landscape # 修改为 theme: fluid保存文件。创建主题配置文件Fluid主题有自己丰富的配置项。我们不需要直接修改themes/fluid/_config.yml而是推荐在博客根目录下创建一个_config.fluid.yml文件来覆盖主题的默认配置。这样在主题升级时你的个性化配置不会丢失。 在博客根目录复制一份主题的配置文件模板# 在Windows命令提示符下 copy themes\fluid\_config.yml _config.fluid.yml # 在macOS/Linux终端下 cp themes/fluid/_config.yml _config.fluid.yml重启服务器并预览回到命令行如果之前hexo s还在运行先按CtrlC停止再次运行hexo s。刷新浏览器http://localhost:4000你应该能看到博客界面已经变成了Fluid主题的样式通常更现代、更美观。实操心得主题的配置非常灵活你可以慢慢探索_config.fluid.yml文件修改导航栏、页脚、颜色、字体等。但初次安装建议先保持默认确保博客能正常运行。永远不要直接修改themes/fluid/目录下的原始文件所有自定义都通过根目录的_config.fluid.yml进行这是最佳实践。6. 撰写你的第一篇博客文章博客的核心是内容。Hexo使用Markdown语法来写文章这是一种轻量级标记语言非常简单。创建新文章在博客根目录下运行Hexo的命令来创建一篇新文章。hexo new 我的第一篇博客命令执行后Hexo会在source/_posts目录下生成一个Markdown文件文件名类似我的第一篇博客.md。编辑文章用编辑器打开这个.md文件。你会看到文件开头有一段用---包裹的“Front-matter”这是文章的元数据。--- title: 我的第一篇博客 date: 2024-05-27 14:00:00 tags: ---title: 文章标题。date: 文章发布日期可以修改。tags: 文章标签可以添加多个例如- 随笔、- 技术。 在---下方就是正文区域。你可以开始用Markdown语法写作了。Markdown快速入门标题用#表示一个#是一级标题两个##是二级标题以此类推。列表无序列表用-或*开头有序列表用1.、2.开头。链接[链接文字](网址)。图片。代码块用三个反引号 包裹代码并可以指定语言如 javascript。粗体**文字**。斜体*文字*。 写完后保存文件。实时预览因为本地服务器hexo s正在运行并且Hexo支持热重载所以你保存文章后稍等几秒刷新浏览器页面就能在博客首页看到你的新文章了。点击进去就能看到渲染好的文章页面。7. 生成静态文件并部署到GitHub Pages本地一切都调试满意后我们就要把博客发布到公网让所有人都能访问了。这一步需要用到Git和GitHub。7.1 在GitHub上创建仓库登录你的GitHub账号。点击右上角“”号选择“New repository”。仓库名必须严格遵循格式你的用户名.github.io。例如如果你的GitHub用户名是zhangsan那么仓库名就必须是zhangsan.github.io。这是GitHub Pages识别并为你提供个人站点服务的特殊命名规则。描述可以选填仓库选择“Public”公开然后点击“Create repository”。7.2 配置Hexo部署插件Hexo有一个非常方便的部署插件hexo-deployer-git可以一键将生成好的静态文件推送到Git仓库。安装部署插件在博客根目录下运行命令npm install hexo-deployer-git --save配置部署信息再次打开博客根目录的_config.yml文件滚动到最底部找到deploy部分修改为以下格式deploy: type: git repo: https://github.com/你的用户名/你的用户名.github.io.git branch: main message: 更新博客内容repo: 替换成你刚刚创建的GitHub仓库的HTTPS地址。你可以在仓库页面点击绿色的“Code”按钮复制HTTPS链接。branch: 部署到的分支现在GitHub默认主分支是main如果你的仓库是master则改为master。message: 每次部署的提交信息可以自定义。7.3 执行部署三部曲每次更新博客写新文章、改配置、换主题后都需要执行以下三个步骤清理旧文件hexo clean。这个命令会清除之前生成的文件和缓存确保每次生成都是全新的。这是一个好习惯可以避免一些奇怪的缓存问题。生成静态文件hexo generate或简写hexo g。这个命令是核心它会读取你的所有Markdown文章、主题和配置在public文件夹里生成最终的、完整的静态网站文件HTML, CSS, JS等。部署到GitHubhexo deploy或简写hexo d。这个命令会调用刚刚安装的部署插件将public文件夹里的所有内容推送到你在_config.yml中配置的GitHub仓库的指定分支。第一次执行hexo d时可能会弹出一个窗口让你登录GitHub按照提示授权即可。或者会让你在命令行输入用户名和密码注意密码现在一般使用Personal Access Token而不是账号密码你可以在GitHub设置中生成一个Token。7.4 访问你的线上博客部署完成后等待1-2分钟GitHub Pages需要一点时间构建和发布然后在浏览器中访问https://你的用户名.github.io。如果一切顺利你的个人博客就正式上线了踩坑实录如果访问后看到的是GitHub的仓库文件列表而不是博客页面99%的原因是hexo g生成的静态文件没有被正确推送到main或master分支的根目录。请检查_config.yml中的deploy配置的branch是否正确。是否执行了hexo clean hexo g hexo d完整流程。去GitHub仓库页面查看main分支下是否有index.html等网站文件而不是只有README.md。8. 进阶配置与日常维护指南博客上线只是开始要让其更好用还需要一些额外配置。8.1 绑定自定义域名可选但推荐如果你觉得用户名.github.io的域名不够个性化可以购买一个自己的域名如zhangsan.com并绑定上去。购买域名在阿里云、腾讯云、Namecheap等域名服务商处购买。配置域名解析在你的域名管理后台添加两条CNAME记录记录类型CNAME主机记录记录值你的用户名.github.io记录类型CNAME主机记录www记录值你的用户名.github.io在博客项目中添加CNAME文件在博客根目录的source文件夹下注意是source不是public创建一个名为CNAME的纯文本文件没有后缀里面只写一行你的域名如zhangsan.com。在GitHub仓库中设置进入你的GitHub仓库的Settings - Pages页面在“Custom domain”栏输入你的域名并保存。重新部署执行hexo clean hexo g hexo d重新部署。等待DNS解析生效通常几分钟到几小时就可以用你的自定义域名访问博客了。8.2 写作与更新工作流养成固定的本地工作流效率会高很多写新文章hexo new 文章标题。本地预览hexo s打开localhost:4000边写边看。调试满意hexo clean hexo g hexo d三部曲部署。版本备份你的整个博客项目文件夹myblog本身也是一个Git仓库初始化时Hexo已经创建了。建议你将这个源码仓库也推送到GitHub上另一个仓库比如叫myblog-source进行备份。这样你的文章Markdown源文件、主题配置都有了版本管理换电脑也不怕。# 在博客根目录初始化本地Git仓库如果尚未初始化 git init git add . git commit -m 初始化博客源码 # 添加远程仓库地址并推送 git remote add origin https://github.com/你的用户名/myblog-source.git git push -u origin main8.3 常见问题排查QAQhexo d部署时一直提示输入用户名密码或者报错AGitHub已不再支持使用账号密码进行命令行操作。你需要生成一个Personal Access Token (PAT)。在GitHub Settings - Developer settings - Personal access tokens - Tokens (classic) 中生成一个权限勾选repo。在命令行输入密码时粘贴这个Token即可。或者更推荐使用SSH Key方式认证一劳永逸。Q本地预览正常部署后样式全乱了A这通常是因为主题的某些资源路径问题。首先检查_config.yml中的root:配置对于GitHub Pages个人站点通常是root: /。其次确保你修改的是正确的配置文件根目录的_config.yml和_config.fluid.yml。最后执行hexo clean彻底清理后再生成部署。Q想换电脑写博客怎么办A这就是备份源码仓库的重要性。在新电脑上安装好Node.js、Git、Hexo后只需要git clone你的源码仓库进入目录运行npm install安装依赖然后就可以继续写作和部署了。Q如何添加评论系统、访问统计A静态博客本身不支持这些动态功能但可以通过接入第三方服务实现。例如评论可以用Disqus、Gitalk基于GitHub Issue统计可以用Google Analytics、百度统计等。具体方法需要查阅你所使用主题的文档通常需要在主题配置文件_config.fluid.yml中填入相应的服务ID或Key。搭建个人博客的过程就像在数字世界亲手建造一座小房子。从打下地基安装环境到砌墙装修配置主题再到邀请朋友来访部署上线每一步都充满成就感。它不仅是内容的容器更是你学习、思考和创造的见证。希望这篇超详细的指南能帮你顺利启程。遇到问题别慌张多搜索Hexo和主题的官方文档、GitHub Issues通常是第一选择多尝试你一定会拥有一个令自己满意的数字家园。
