blog搭建

发表于 更新于 分类于 阅读次数：

blog搭建：Hexo + NexT主题完整指南

本文详细记录使用 Hexo 8.1.1 静态博客框架配合 NexT 主题（Mist 方案）搭建个人技术博客的完整过程，包括环境准备、主题配置、功能增强、SEO优化和自动化部署。

1. 环境准备

1.1 安装 Node.js 和 npm

Hexo 基于 Node.js，需要先安装 Node.js（建议 LTS 版本）和 npm 包管理器。

1
2
3
# 检查 Node.js 版本
node -v
npm -v

1.2 安装 Hexo CLI

全局安装 Hexo 命令行工具：

1
npm install -g hexo-cli

1.3 创建博客项目

使用 Hexo 初始化新博客项目：

1
2
3
hexo init myblog
cd myblog
npm install

2. 主题安装与配置

2.1 安装 NexT 主题

NexT 是 Hexo 最流行的主题之一，提供多种配色方案和丰富功能。

1
2
cd myblog
npm install hexo-theme-next

2.2 启用 NexT 主题

编辑 _config.yml 文件，设置主题为 next：

1
theme: next

2.3 配置 NexT 主题

NexT 主题的主要配置文件为 _config.next.yml，位于项目根目录。复制默认配置：

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

3. 界面美化与自定义

3.1 字体优化

在 _config.next.yml 中配置中文字体，确保良好显示效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
font:
  enable: true
  host: https://fonts.googleapis.com
  global:
    external: true
    family: "Noto Sans SC"
    size: 1
  headings:
    family: "Noto Sans SC"
    size: 1.5
  posts:
    family: "Noto Sans SC"
  codes:
    family: "SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace"
    size: 0.875

3.2 颜色方案

NexT 提供多种配色方案（Scheme），选择 Mist 方案：

1
scheme: Mist

3.3 自定义样式

通过自定义 Stylus 文件增强视觉效果：

  1. 创建自定义样式文件 source/_data/styles.styl
  2. 在 _config.next.yml 中启用自定义样式：
1
2
custom_file_path:
  style: source/_data/styles.styl

示例样式配置：

1
2
3
4
5
6
7
8
9
10
11
// 主色调
$brand-color = #3498db
$text-color = #2c3e50
$link-color = #3498db

// 代码块样式
code {
  background-color: #f8f9fa;
  border-radius: 3px;
  padding: 2px 4px;
}

3.4 头像配置

设置个人头像，增强博客个性：

1
2
3
4
avatar:
  url: /images/avatar.jpg
  rounded: true
  rotated: false

4. 功能增强

4.1 本地搜索

安装本地搜索插件，提升内容可发现性：

1
npm install hexo-generator-searchdb

配置搜索功能：

1
2
3
4
5
search:
  path: search.json
  field: post
  format: html
  limit: 10000

4.2 评论系统（Gitalk）

使用 Gitalk 基于 GitHub Issues 的评论系统：

  1. 创建 GitHub OAuth Application
  2. 配置环境变量（保护敏感信息）：
1
2
3
4
5
# .env 文件
GITALK_CLIENT_ID=your_client_id
GITALK_CLIENT_SECRET=your_client_secret
GITALK_REPO=your_github_repo
GITALK_OWNER=your_github_username
  1. 在 _config.next.yml 中启用 Gitalk：
1
2
3
4
5
6
7
8
gitalk:
  enable: true
  clientID: ${GITALK_CLIENT_ID}
  clientSecret: ${GITALK_CLIENT_SECRET}
  repo: ${GITALK_REPO}
  owner: ${GITALK_OWNER}
  admin: [${GITALK_OWNER}]
  distractionFreeMode: true

4.3 社交链接

配置社交平台链接，增加读者联系渠道：

1
2
3
4
5
social:
  GitHub: https://github.com/xinyvpeng || fab fa-github
  Twitter: https://twitter.com/yourusername || fab fa-twitter
  Email: mailto:xinyvpeng@163.com || fa fa-envelope
  RSS: /atom.xml || fa fa-rss

4.4 分享按钮

启用文章分享功能，方便读者传播内容：

1
2
3
4
5
6
needmoreshare:
  enable: true
  postbottom:
    enable: true
  float:
    enable: true

5. SEO 优化

5.1 站点元信息

完善站点描述和关键词：

1
2
3
4
5
6
7
8
9
# _config.yml
title: Raniy
subtitle: '记录项目、工作、论文、笔记'
description: '个人技术博客，记录项目介绍、工作内容、论文阅读、笔记和个人介绍'
keywords:
  - 技术博客
  - 编程
  - 开发
  - 学习笔记

5.2 站点地图和 robots.txt

生成站点地图，方便搜索引擎收录：

1
npm install hexo-generator-sitemap hexo-generator-robots-txt

配置 robots.txt：

1
2
3
4
5
robots_txt:
  useragent: "*"
  allow:
    - /
  sitemap: /sitemap.xml

6. 部署到 GitHub Pages

6.1 安装部署插件

使用 hexo-deployer-git 插件自动化部署：

1
npm install hexo-deployer-git --save

6.2 配置部署设置

在 _config.yml 中配置部署目标：

1
2
3
4
5
deploy:
  type: git
  repo: git@github.com:xinyvpeng/xinyvpeng.github.io.git
  branch: main
  message: "更新博客内容 {{ now('YYYY-MM-DD HH:mm:ss') }}"

6.3 SSH 密钥配置

为自动化部署配置 SSH 密钥：

  1. 生成 SSH 密钥对：
1
ssh-keygen -t rsa -b 4096 -C "xinyvpeng@163.com"
  1. 将公钥添加到 GitHub 账户
  2. 测试 SSH 连接：
1
ssh -T git@github.com

6.4 一键部署

执行部署命令，将博客发布到 GitHub Pages：

1
hexo clean && hexo generate && hexo deploy

7. 内容管理

7.1 创建新文章

使用 Hexo 命令快速创建新文章：

1
hexo new post "文章标题"

7.2 文章 Front Matter

每篇文章的元数据配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 文章标题
date: YYYY-MM-DD HH:mm:ss
updated: YYYY-MM-DD HH:mm:ss
tags:
  - 标签1
  - 标签2
categories:
  - 分类1
toc: true
mathjax: false
comments: true
---

7.3 图片资源管理

使用资源文件夹管理文章图片：

1
2
# _config.yml
post_asset_folder: true

8. 本地开发与测试

8.1 启动本地服务器

在开发过程中实时预览：

1
2
3
hexo server
# 或指定端口
hexo server -p 5000

8.2 构建静态文件

生成生产环境静态文件：

1
2
3
hexo generate
# 或简写
hexo g

8.3 清理缓存

清理生成的文件和缓存：

1
hexo clean

9. 常见问题解决

9.1 主题配置不生效

  • 检查 _config.next.yml 文件是否正确加载
  • 确认主题名称在 _config.yml 中为 next
  • 清理缓存后重新生成：hexo clean && hexo g

9.2 Gitalk 评论错误

  • 确认 GitHub OAuth Application 的 Homepage URL 和 Authorization callback URL 正确
  • 本地开发时使用 http://localhost:5000，生产环境使用 https://xinyvpeng.github.io
  • 检查环境变量是否正确加载

9.3 部署失败

  • 确认 SSH 密钥已添加到 GitHub 账户
  • 检查仓库权限和分支名称
  • 查看部署日志：hexo deploy --debug

10. 总结

通过以上步骤，我们成功搭建了一个功能完整、界面美观、性能优化的个人技术博客。关键要点：

  1. 框架选择：Hexo 8.1.1 + NexT 主题提供稳定基础和丰富功能
  2. 界面设计：通过字体、颜色、布局优化提升阅读体验
  3. 功能增强：搜索、评论、分享、社交链接完善博客互动性
  4. SEO优化：站点地图、元信息、robots.txt 提升搜索引擎可见性
  5. 自动化部署：GitHub Pages + SSH 密钥实现一键发布
  6. 内容管理：标准化的文章创建和资源管理流程

博客不仅是技术记录的平台，也是个人品牌建设的重要工具。定期更新优质内容，积极参与技术社区，让博客成为技术成长的见证。

本文档将随博客功能更新而持续维护，最新版本请查看 GitHub 仓库。