怎么制作博客网站：新手从零搭建避坑指南
找过建站公司的朋友都知道，报价单一拿出来，心就凉了半截。基础版要八千，高级版两万起步，还动不动就说“功能定制另算”。对于只想做个个人博客、记录生活或分享技术的普通人来说，这钱花得真冤枉。其实，怎么制作博客网站并没有那么神秘，核心逻辑就是从零搭建一个属于你自己的数字空间。今天咱们不整那些虚头巴脑的理论，直接上干货，用最低的成本，最稳的技术栈，手把手教你把博客搞上线。
需求分析与技术选型：别被忽悠买“大材”
很多新手一上来就问：“我该用 WordPress 还是 Hexo？该买多高的服务器？”这就是被忽悠的开始。在动手之前，你得先搞清楚自己到底要什么。
如果你是程序员，或者对 Markdown 写作有执念，追求极致的加载速度和代码洁癖，那么静态博客生成器是你的首选。Hexo、Hugo 这类工具，生成的就是纯 HTML 文件，丢到任何静态托管平台（比如 GitHub Pages 或 Vercel）都能跑，几乎零维护成本，安全性极高。
如果你非程序员，更看重后台管理的可视化，想像写 Word 文档一样写文章，那 WordPress 依然是王者。虽然它重，需要配 PHP 环境，但插件生态无敌，想加个评论、加个统计、加个支付，拖个插件就行。
这里有个西南地区的特别视角。如果你人在成都、重庆，或者服务器打算放在西南节点，要注意网络延迟问题。虽然国内主要带宽都在北上广深，但腾讯云在成都、重庆都有可用区。对于追求极致本地化访问速度的用户，选择就近的服务器节点能带来毫秒级的提升。不过，对于个人博客而言，CDN（内容分发网络）的重要性远大于物理距离，后面部署环节会细说。
关键决策点：内容类型：纯文字技术博客选静态（Hexo/Hugo）；图文混合、需要频繁互动选动态（WordPress）。
预算：静态博客几乎免费（域名除外）；动态博客每年至少准备 300-500 元服务器费用。
技术栈偏好：前端出身选静态，运营出身选动态。环境准备：工欲善其事，必先利其器
确定了技术路线，接下来就是准备“施工工具”。以目前最流行的静态博客方案 Hexo 为例，我们需要准备 Node.js 环境。
别被“环境”这个词吓到。现在的开发工具已经非常傻瓜化了。对于 Windows 用户，直接去 Node.js 官网下载 LTS（长期支持）版本，一路下一步安装即可。安装完成后，打开命令行（CMD 或 PowerShell），输入 node -v 和 npm -v，如果能输出版本号，说明环境没问题。
对于 Mac 或 Linux 用户，推荐使用 Homebrew 或系统包管理器安装，更简洁。
除了 Node.js，你还需要注册一个域名。域名是博客的门牌号，建议去腾讯云、阿里云或 Namesilo 注册。后缀选择上，.com 最通用，但价格略贵；.cn 适合国内用户，备案方便；.dev 或 .io 适合开发者，逼格高但稍贵。特别提醒：如果你打算在国内服务器部署且提供公共访问，域名必须完成 ICP 备案，否则会被阻断。如果是用 GitHub Pages 或 Vercel 这种境外节点，则无需备案，但国内访问速度可能会波动。
还有一个容易被忽视的软件：Git。博客代码需要版本控制，Git 是标配。安装 Git 后，配置好用户名和邮箱，并生成 SSH 密钥，这样你才能平滑地把本地代码推送到 GitHub 或 Gitee。
核心步骤：从零搭建 Hexo 博客实战
环境就绪，开始动工。整个过程只需几条命令，但每一步都有坑。
第一步：初始化博客
打开终端，进入你想要存放博客代码的目录，执行：
# 创建博客目录并进入
mkdir my-blog cd my-blog# 使用 npm 初始化 Hexo
npm init -y
npm install hexo-cli --save-dev# 初始化博客（这一步会下载 Hexo 框架和默认主题）
hexo init执行 hexo init 时，你会看到大量的包在下载安装，请耐心等待。完成后，目录下会出现 _config.yml（主配置文件）、source（源码目录）等文件。
第二步：配置站点信息
打开根目录下的 _config.yml，这是博客的“大脑”。你需要修改以下关键信息：
# 站点信息配置
title: 我的技术博客 # 这里填你的博客名字
subtitle: # 副标题，留空即可
description: 分享代码与生活 # 博客描述，SEO 重要字段
keywords: [技术, 博客, 前端] # 关键词# URL 配置
url: https://your-domain.com # 这里填你申请的域名，务必加 https
root: /# 作者信息
author: 你的笔名
language: zh-CN
timezone: Asia/Shanghai注意：url 字段必须是你最终部署后的完整地址，且建议加上 https://。如果这里配错，文章里的图片链接、内链都会失效，这是新手最常见的“血泪教训”。
第三步：安装并配置主题
Hexo 自带主题是白色的，比较简陋。我们安装一个流行的主题，比如 next 或 butterfly。以 butterfly 为例，它颜值高、功能多，深受国内博主喜爱。
# 下载 butterfly 主题到 themes 目录
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly下载完成后，回到 _config.yml，找到 theme 字段，将其修改为 butterfly：
theme: butterfly接下来，进入 themes/butterfly/_config.yml，这是主题的配置中心。在这里你可以设置侧边栏、导航菜单、社交链接（GitHub、Email 等）、评论系统（如 Valine 或 Gitalk）。切记，修改完配置文件后，保存并重启服务才能看到效果。
代码与配置示例：让博客“活”起来
光有架子不行，得能写文章、能看文章。我们来实操一下文章发布和部署。
1. 创建第一篇文章
在终端执行：
hexo new Hello World这会在 source/_posts 目录下生成一个 hello-world.md 文件。用编辑器打开它，你会看到 YAML Front-matter（头部元数据）：
---
title: Hello World
date: 2023-10-27 10:00:00
tags:- 测试
categories:- 教程
---你好，我是第一篇文章。你可以随意修改标题、日期、标签。正文部分支持 Markdown 语法。比如，你想插入代码块，可以这样写：
// 这是一个示例代码块
console.log(Hello, Hexo!);2. 本地预览
写完后，别急着上线。先在本地看看效果。
# 启动本地服务器
hexo server在浏览器访问 http://localhost:4000。如果你能看到精心排版的博客首页，恭喜你，核心流程跑通了！
3. 部署到云端
现在到了最关键的一步：把本地代码推送到 GitHub，并触发自动部署。
首先，在 GitHub 上创建一个名为 yourusername.github.io 的仓库（注意：必须叫这个名，或者配置好 Pages 设置）。
然后，在博客根目录初始化 Git：
git init
git add .
git commit -m init blog接着，配置 Hexo 的部署插件。安装 hexo-deployer-git：
npm install hexo-deployer-git --save修改根目录 _config.yml 底部的 deploy 部分：
deploy:type: gitrepo:github: https://github.com/yourusername/yourusername.github.io.gitbranch: main重点来了：如果仓库是空的，第一次推送可能报错。你需要先手动将本地生成的静态文件推送到仓库，或者使用 hexo deploy 命令。但更稳妥的方式是使用 GitHub Actions 或 Vercel 自动部署。
这里推荐 Vercel，因为它对静态站点支持极好，且提供全球 CDN。将代码推送到 GitHub 后，登录 Vercel，导入仓库，它会自动检测 Hexo 项目。构建命令填 hexo generate，输出目录填 public。点击部署，等待 30 秒，你的博客就拥有全球加速的 HTTPS 地址了！
常见报错与避坑指南
在从零搭建的过程中，这几个坑几乎人人都会踩，提前知道能省你半天时间。
坑一：图片不显示
现象：文章里写了 ，但本地能看，线上挂了。
原因：_config.yml 里的 url 没配好，或者图片路径写错了。
解决：确保 url 是完整的 https://... 格式。图片路径建议使用绝对路径，或者利用 Hexo 的 asset_folder 配置。更推荐的做法是将图片上传到图床（如腾讯云 COS 或 GitHub 仓库），文章里直接引用外链 URL，这样最稳定。
坑二：部署失败，权限拒绝
现象：执行 hexo deploy 报错 Permission denied 或 Authentication failed。
原因：GitHub 现在强制要求 SSH 密钥或 Token 认证，旧的密码登录方式已失效。
解决：配置 SSH 密钥。生成 ssh-keygen -t rsa -C your_email@example.com，将公钥添加到 GitHub 的 SSH Keys 中。或者，在 Vercel 部署时，直接在 Vercel 后台配置环境变量，避免本地 Git 推送的权限问题。
坑三：中文乱码或 404
现象：文章标题中文显示正常，但 URL 是乱码，或者点击分类页 404。
原因：Hexo 默认的 URL 生成规则与服务器路径不匹配。
解决：在 _config.yml 中检查 root 字段。如果部署在 GitHub Pages 的子目录下（比如 https://user.github.io/blog/），root 必须设为 /blog/。如果部署在根目录，root 设为 /。同时，确保 url 和 root 逻辑一致。
坑四：服务器备案陷阱
现象：国内服务器部署后，网站无法访问，提示“未完成备案”。
原因：国内所有对外提供 Web 服务的服务器，域名必须 ICP 备案。
解决：如果不想折腾备案，坚决使用境外节点（如 Vercel、Netlify、Cloudflare Pages）或 GitHub Pages。如果非要国内高速访问，请提前预留 1-2 周时间办理备案，并购买国内服务器（如腾讯云轻量应用服务器）。
小结与互动
到这里，你的博客已经从零开始，跑通全流程，并部署到了全球 CDN 上。整个过程，除了域名费用（每年几十块），其他几乎零成本。比起找建站公司花几千块买个模板，自己从零搭建不仅省钱，更让你彻底掌控自己的内容和技术栈。
记住，技术不是目的，表达才是。博客的价值不在于你用了多炫酷的框架，而在于你持续输出的内容。先完成，再完美。哪怕第一篇文章只有三行字，只要它在线，你就已经赢过了 90% 还在犹豫的人。
现在，你的博客上线了吗？在从零搭建的过程中，你花了多少时间？遇到最头疼的一个 Bug 是什么？或者，如果你之前找过外包，建站花了多少钱？留言说说真实价格，看看大家是不是都交过“智商税”。咱们评论区见，互相避坑，一起成长。
