怎么制作博客网站：新手从零搭建避坑指南

找过建站公司的朋友都知道，报价单一拿出来，心就凉了半截。基础版要八千，高级版两万起步，还动不动就说“功能定制另算”。对于只想做个个人博客、记录生活或分享技术的普通人来说，这钱花得真冤枉。其实，怎么制作博客网站并没有那么神秘，核心逻辑就是从零搭建一个属于你自己的数字空间。今天咱们不整那些虚头巴脑的理论，直接上干货，用最低的成本，最稳的技术栈，手把手教你把博客搞上线。

需求分析与技术选型：别被忽悠买“大材”

很多新手一上来就问：“我该用 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 地址了！

常见报错与避坑指南

在从零搭建的过程中，这几个坑几乎人人都会踩，提前知道能省你半天时间。

坑一：图片不显示

现象：文章里写了 ![alt](image.png)，但本地能看，线上挂了。原因：_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 周时间办理备案，并购买国内服务器（如腾讯云轻量应用服务器）。