基于hexo框架的博客搭建教程

2025/5/20 Web web 前端

基于hexo框架的博客搭建教程

Introduction: 从零到一，搭建一个属于你自己的个人网站！

文章参考：安知鱼 ，桃子，MortalCat，唐志远

1. 环境准备

演示操作系统：windows11 专业版

需要的环境：

git：https://git-scm.com/downloads
Nodejs：https://nodejs.org/zh-cn/download/
Hexo：见下文
GitHub 账号（https://github.com/ 需要自行注册 ps: 学会科学上网） / 云服务器（特别注意：中国内地服务器需要备案）
VScode：https://code.visualstudio.com/download

各种环境的安装教程自行上网查找

注：

Nodojs安装好后，最好需要更换npm源(npm默认源为国外，下载速度较慢，可能引起部分依赖无法安装问题)

换源：

npm config set registry https://registry.npmmirror.com/

2. 安装Hexo

安装好git和Nodejs后，在终端执行：

npm install -g hexo-cli

hexo -v 验证安装，成功会输出版本信息

3. 初始化项目

选择一个路径，这个路径即你博客之后所有本地文件所放的路径。建议在系统盘之外。

使用hexo init来初始化项目：

hexo init example

进入项目文件夹后打开终端，安装依赖：

npm -i

此时整个项目初始化完毕：

你的项目应包含以下结构：

【node_modules】：依赖包
【scaffolds】：生成文章的一些模板
【source】：用来存放你的文章
【themes】：主题
【_config.landscape.yml】：默认主题的配置文件
【config.yml】：网站的配置文件
【package-lock.json】：项目名称、描述、版本、运行和开发等信息

此时，你已经成功拥有一个个人网页了！

如何打开？

需要常说的hexo三连

即以下命令：

hexo clean && hexo generate && hexo server  // Git BASH终端
hexo clean; hexo generate; hexo server  // VSCODE终端

或者简写为：

hexo cl && hexo g && hexo s  // Git BASH终端
hexo cl; hexo g; hexo s  // VSCODE终端

成功应看到以下信息：

其代表你的网站服务在本地的4000端口开放（前提保证你的4000端口不被其他服务占用，如被占用可手动指定其他端口打开例如：-p 5000）

访问http://localhost:4000 或 http://127.0.0.1:4000 就可以看到你的网页了！

当然，网页中各种文字，描述，标题，图片等等都是可以改的，具体将在后文介绍

4. 上传至github/云服务器

你的网页目前只能在本地运行，也就是说，别人是无法访问的。

那么，如何像真正的网站那样，通过一个链接实现所有人都能访问呢？

你需要将你的网站推送到与公网连接的服务器上。

这里有两种方案：（以下配置方案二选一即可）

一. github pages

**优点：**完全免费的服务，免费生成的域名，操作方便

**缺点：**网站的访问速度较慢，部分资源很难加载，可能需要科学上网才能访问到你的网页

以下以github pages为例进行上传：

配置git，创建仓库，连接到github

第一步：注册github账号（需要科学上网）

https://github.com/

第二步：注册完成后，点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。

配置如下：

注意：格式必须为xxx.github.io！且必须选择Public！

第三步：需要配置好git用户名和邮箱：

git config --global user.name "your-username"
git config --global user.email "your-email"

通过git config -l 检查是否配置成功

第四步：连接到github

执行以下命令生成ssh公钥：

ssh-keygen -t rsa -C "your-email"

之后打开C盘下用户文件夹下的.ssh的文件夹，会看到 id_rsa.pub

用记事本打开上述图片中的公钥（id_rsa.pub），复制里面的内容。
进入github，点击右上角头像选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。

测试连接：

ssh -T git@github.com

成功信息：

将网站上传到github

首先需要安装依赖：

进入本地博客网站的目录后，运行如下命令：

npm install hexo-deployer-git --save

之后打开目录下的_config.yml，这是整个Hexo框架的配置文件，里面可以修改网站的各种配置。

找到deploy配置：

将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支

例如：

deploy:
  type: git
  repository: git@github.com:Mitunlny/example.github.io.git
  branch: main

配置保存后，运行hexo三连上传：

hexo clean && hexo generate && hexo deploy  // Git BASH终端
hexo clean; hexo generate; hexo deploy  // VSCODE终端

简写为：

hexo cl && hexo g && hexo d  // Git BASH终端
hexo cl; hexo g; hexo d  // VSCODE终端

如果出现Deploy done，则说明部署成功了。

此时进入你的项目，可以看到有多出的文件了：

此时点击上方settings:

在pages这里修改分支为main

等待出现上方的Visit site，就说明上传成功了，可以通过网址访问了

二. 云服务器

**优点：**内地访问速度快

**缺点：**云服务器需要付费，需要额外购买域名，且需要进行备案（港澳台除外）

配置教程：

首先你需要有一台云服务器（Linux系统）实例，这里以基于Debian 发行版的Ubuntu 22.04为例

对于个人博客，建议使用1核CPU、1GB内存、20GB存储及以上配置的轻量级配置；带宽适量提高

本地端环境配置

见上文，初始化项目结束，可以通过localhost访问即可。

服务端环境配置

前置：

开放服务器常用端口，配置好防火墙或安全组等

访问服务器终端进行环境配置

1. 安装git和nginx

更新软件包：

sudo apt update

安装Nginx:

sudo apt -y install nginx git

验证：

nginx -v

启动nginx服务：

systemctl enable nginx.service
systemctl start nginx.service

查看状态：

systemctl status nginx.service

如果显示active，那么就代表安装成功了。

2. 配置git仓库和HOOK

创建git用户：

#创建用户,用户名为git
adduser git
#设置密码
passwd git

把git用户添加到sudo用户组中:

输入sudo vi /etc/sudoers，打开sudoers文件

到代码行root ALL=(ALL) ALL,然后在这一行下添加以下代码git ALL=(ALL) ALL。

输入完毕之后，按wq!强制保存退出vi。

切换到git用户，添加SSH Key文件并且设置相应的读写与执行权限：

# 切换用户
su git
# 创建目录
mkdir ~/.ssh
# 新建文件
vim ~/.ssh/authorized_keys

然后把之前在客户端设置的SSH Key,复制到authorized_keys文件中，保存后退出。

配置权限：

chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

创建一个新的文件夹，用于存放git仓库：

mkdir /home/git/

修改权限：

chown -R $USER:$USER /home/git/
chmod -R 755 /home/git/

创建git仓库：

cd /home/git/
git init --bare blog.git

创建hook:

vim ~/blog.git/hooks/post-receive

输入以下内容：

git --work-tree=/home/www/blog --git-dir=/home/git/blog.git checkout -f

# 在john.git/hooks文件夹下，修改post-receive文件权限，使其能够被正常执行
chmod +x post-receive

在本地的网站配置文件中配置如下：

deploy:
  type: git
  repo: git@公网IP:/home/git/blog.git
  branch: master

再运行hexo cl; hexo g; hexo d即可部署到服务器上

3. 配置nginx环境

创建托管地址：

mkdir -p /home/www/blog

chown -R $USER:$USER /home/www/blog
chmod -R 755 /home/www/blog

这是之后博客网页文件的上传地址

之后找到nginx的配置文件（nginx.conf）

一般位于/etc/nginx，也可以用nginx -t来查找：

修改配置文件中的server项：

server {
        listen       80;
        server_name  example.com;             #域名

		……

        location / {
            root   /home/www/blog;
            index  index.html index.htm;
        }

}

主要是修改server_name与root，server_name修改为域名，没有域名就不用修改了，root就是blog静态资源文件目录。

然后重启nginx服务：

sudo systemctl restart nginx.service

5. 自定义域名

首先你需要去搜索你想要的域名去购买一个

在各大云厂商都可以购买（阿里云/腾讯云/百度云……）

之后就可以进行域名的解析了

推荐这篇文章：https://www.cnblogs.com/luoweifu/p/18361568

例如：连接域名到github：

即添加CNAME记录，将你的域名指向github给你分配的域名。

6. 网站页面修改和主题美化

默认的hexo页面非常简介而且不美观，因此想要让自己的博客变得好看起来，我们可以使用自定义的主题！

一. 主题配置

hexo有很多种主题，可以到官网去下载或者在线预览各种主题样式的网页：http://hexo.io

下载并应用主题：

这里以butterfly主题为例：

使用npm安装（也可以如上，从官网搜索该主题并安装）

npm i hexo-theme-butterfly

修改网站的配置文件，将主题theme改为butterfly:

安装依赖：

npm install hexo-renderer-pug hexo-renderer-stylus --save

重新hexo三连，可以看到网页已经切换了主题：

基础信息配置：

我们可以看到，现在标题还是Hexo，而且我们的头像，昵称什么的也不对，因此我们需要去配置文件中修改。

注意！网页配置文件和主题配置文件的区别：

本文中，所指的网页配置文件指的是_config.yml

而主题配置文件，指的是_config.landscape.yml或_config.butterfly.yml

这里，如果是通过npm安装的，我们的_config.butterfly.yml会在这个位置：

……\node_modules\hexo-theme-butterfly\_config.yml

我们可以将这个文件复制一份到根目录，并重命名为：_config.butterfly.yml

这样方便编辑，且hexo默认第一优先使用的是这里复制的文件。

接下来，我们就可以编辑配置文件了！

_config.yml 网站配置文件：

Site项：

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: mitu
language: en
timezone: ''

项目	内容
title	网站的标题
subtitle	副标题
description	页面描述
keywords	页面关键字
author	你的名字
language	网站使用的语言（zh-CN）
timezone	网站时区（Asia/Shanghai）

URL：填写成你自己的域名即可

_config.butterfly.yml 网站配置文件：

menu项：网站的菜单，指向你的每一个页面，需要去掉注释。

例如：

code_blocks项：代码块的主题，风格调整

code_blocks:
  # Code block theme: darker / pale night / light / ocean / false
  theme: light
  macStyle: true
  # Code block height limit (unit: px)
  height_limit: 200
  word_wrap: false

social项：填写自己的联系方式

social:
  fab fa-github: https://xxxxxx/xxxxxx || Github || '#24292e'
  fas fa-envelope: mailto:xxxxxx@qq.com || Email || '#4a7dbe'

avatar: 网站图标和头像

favicon:

avatar:
  img:
  effect: false

banner images：网站各个地方的banners图片(具体看自己应用)

# Disable all banner images
disable_top_img:

# If the banner of page not setting, it will show the default_top_img
default_top_img:

# The banner image of index page
index_img:

# The banner image of archive page
archive_img:

# Note: tag page, not tags page
tag_img:

# The banner image of tag page, you can set the banner image for each tag
# Format:
#  - tag name: xxxxx
tag_per_img:

# Note: category page, not categories page
category_img:

# The banner image of category page, you can set the banner image for each category
# Format:
#  - category name: xxxxx
category_per_img:

# The background image of footer
footer_img:

background项：网站的背景图片

background: 
  - background.png

LOADING

基于hexo框架的博客搭建教程

基于hexo框架的博客搭建教程

1. 环境准备

注：

2. 安装Hexo

3. 初始化项目

4. 上传至github/云服务器

一. github pages

配置git，创建仓库，连接到github

将网站上传到github

二. 云服务器

本地端环境配置

服务端环境配置

前置：

1. 安装git和nginx

2. 配置git仓库和HOOK

3. 配置nginx环境

5. 自定义域名

6. 网站页面修改和主题美化

一. 主题配置

下载并应用主题：

基础信息配置：

_config.yml 网站配置文件：

_config.butterfly.yml 网站配置文件：