（新手向）基于Hexo和Butterfly主题的个人网站建设

一个人去走走
117 阅读6分钟

前言

目前建立个人网站的门槛已经十分低，网上的教程资源非常丰富。虽然有些因为时间较长和语焉不详导致参考难度较大，但是好在大模型的使用十分便捷（你可以把最基础的大模型想象成一个什么都会一些的“老师”）。
​
我的网站基于Hexo框架，主题使用了Butterfly（其他主题也有很多，可以搜索）。
​
在建站过程中，我遇见的绝大多数问题都通过询问DeepSeek和Qwen得到了妥善解决，少部分问题通过参考别人的教程予以解决。

流程

  1. 本地电脑部署
  2. 购买域名与服务器
  3. 服务器端配置
  4. 部署发布

其中步骤1和2并无绝对的先后顺序，在我自己的行动中我是先买完域名和服务器再进行本地电脑部署的。

步骤

本地部署Hexo

安装node.js

从Node.js的官网上下载LTS长期支持版本，并安装。一直点击确认即可，无需修改配置文件。

验证指令（均为cmd输入）

node -v
npm -v

有版本号输出即安装成功，无版本号（1）检查环境变量配置（2）尝试重新安装

【官网地址】Node.js — 在任何地方运行 JavaScript

【参考教程】Node.js 安装配置 | 菜鸟教程

安装git

根据自己的需求和情况配置即可。

验证指令

git --version

有版本号输出即安装成功，无版本号（1）检查环境变量配置（2）尝试重新安装

【官网地址】Git - Downloads

【参考教程】windows安装git（全网最详细，保姆教程）-CSDN博客

安装Hexo

（1） 安装 Hexo CLI
npm install -g hexo-cli
（2） 初始化 Hexo 项目
# 此步骤强烈建议（1）指定一个你希望的目录（2）cd进入再新建
hexo init my-blog   # 创建名为 my-blog 的博客目录
cd my-blog
npm install
（3）本地预览测试
hexo server

浏览器访问 http://localhost:4000 确认正常显示。

域名与服务器购买

购买域名

购买属于你的域名（阿里云/腾讯云/华为云等）。我的域名购买自阿里云万网。注意有些时期会有活动。

备案

在中国境内提供互联网信息服务，应当依法履行备案手续。跟着官方教程一步步走即可。

购买服务器

购买属于你的服务器（阿里云/腾讯云/华为云等）。

我的服务器购买于阿里云，属于“云服务器ECS”类别，2核2G配置。强烈建议关注是否有活动！

服务器镜像选择

服务器镜像可以选Ubuntu（我不太习惯宝塔，之后重制为了Ubuntu）

应用镜像.png

系统镜像.png 本篇教程基于Ubuntu24.04

服务器端配置

服务器初始镜像

以下服务器配置均基于Ubuntu镜像。

如果你需要Follow本教程的步骤，请选择Ubuntu镜像！

连接服务器

官方提供了2种方法，但第一种方法我并没有成功。第二种方法也只是部分成功，控制台绑定密钥的方法我没有起效（未知原因）。
​
第2种方法，控制台绑定密钥对我也没有成功，最后是在`.ssh/authorized_keys`文件中添加的。（参照官方教程常见问题Q1）
​
建议（1）按照官方教程走，基本问题都能解决；（2）请尝试所有方法：

方法一 PuTTY（Failed）

通过SSH密钥对登录Linux实例_云服务器 ECS(ECS)-阿里云帮助中心

方法二 登记本机公钥（success）

创建密钥对_轻量应用服务器(SAS)-阿里云帮助中心

方法三 切换服务器为密码登录

切换为密码登录之后就可以使用Mobaxterm、Xftp等软件传输文件。

此种方法我并未尝试，此处列出，只为拓展思路。

服务器环境（ubuntu）

服务器环境配置也需要安装相应的包，比如Node.js等。

安装nignx

a 更新系统软件包列表

sudo apt update

b 安装 Nginx

sudo apt install nginx -y

c 检查 Nginx 服务状态（正常状态应为 active (running)）

sudo systemctl status nginx

d 检查 Nginx 版本（输出类似 nginx version: 1.18.0）

nginx -v

浏览器访问测试：在浏览器中输入服务器的 公网 IP 地址，若看到 Welcome to nginx! 页面，则安装成功。

e 配置 Nginx 开机自启

sudo systemctl enable nginx
配置nginx
sudo nano /etc/nginx/sites-available/hexo

写入以下内容（替换 你的域名）：

server {
    listen 80;
    server_name 你的域名;
    root /var/www/hexo;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

创建符号链接并测试配置：

sudo ln -s /etc/nginx/sites-available/hexo /etc/nginx/sites-enabled/
sudo nginx -t  # 检查语法
sudo systemctl reload nginx
创建网站目录并设置权限
sudo mkdir -p /var/www/hexo
sudo chown -R $USER:$USER /var/www/hexo  # 赋予当前用户权限

自动化部署

服务器端

创建 Git 仓库：

mkdir ~/hexo.git && cd ~/hexo.git
git init --bare

创建钩子文件：

nano hooks/post-receive

写入内容（需要对应的上文件路径！！！）：

#!/bin/bash
# 设置工作目录为网站根目录
GIT_WORK_TREE=/var/www/hexo git checkout -f

赋予执行权限：

chmod +x hooks/post-receive

本地计算机

配置 Hexo 部署： 修改 _config.yml：

deploy:
  type: git
  repo: 你的服务器用户名@服务器IP:~/hexo.git
  branch: master

安装部署插件：

npm install hexo-deployer-git --save

3. 一键部署：

hexo clean && hexo deploy

访问测试

浏览器输入 https://你的域名，查看博客是否正常显示。

更多配置

域名解析与 HTTPS

  1. 域名解析登录阿里云控制台，进入域名解析设置，添加 A 记录：

    • 主机记录：@ 或 www
    • 记录值：服务器公网 IP

  2. 配置 HTTPS（Let's Encrypt） 安装 Certbot：

sudo apt install certbot python3-certbot-nginx -y

获取证书：

sudo certbot --nginx -d 你的域名

进一步开发（非常重要）

【官方教程】Butterfly - A Simple and Card UI Design theme for Hexo

官方教程共有6篇文章，详细介绍了后面的配置，包括

  1. 快速开始
  2. 主题页面
  3. 主题配置
  4. 标签外挂
  5. 主题问答
  6. 进阶教程

设置可被搜索

想要你的网站被搜索到，就必须向搜索引擎服务商申请添加网页

site:<ip>

搜索引擎输出以上指令确认

后记

得益于现在成熟的工具（包括开源框架、大模型的发展等），搭建自己的个人网站已经十分轻松。
​
由于我是在搭建网站一段时间后，写的本篇文章，因而无法保证记录了所有遇到的问题。但是，就个人经验而言，只要利用好LLM和网页搜索（有时候LLM给不出准确原因，就需要网页搜索了），就能解决几乎所有问题。
​
最后，如果你的服务器环境配置错误等，请尝试重置镜像。
avatar
文章
阅读
粉丝