侧边栏壁纸
博主头像
KoolMax 博主等级

行动起来,活在当下

  • 累计撰写 13 篇文章
  • 累计创建 3 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

Hexo+Shoka 博客搭建保姆级教程

Administrator
2025-08-08 / 0 评论 / 0 点赞 / 3 阅读 / 0 字

前言

网上关于“Hexo 博客搭建”有铺天盖地的教程,但大多数文章内容零散、逻辑混乱、步骤跳跃大,很多细节模糊不清,尤其是对 Shoka 主题的介绍更是寥寥数语,往往让初学者“看着简单,动手崩溃”。

本文从零开始,带你完整走了一遍 Hexo+Shoka 博客的搭建流程,尤其聚焦于 Shoka 主题的配置与优化。从搭建本地环境、创建 GitHub 仓库并部署博客、配置 SSH 密钥及安装并启用 Shoka 主题,本文内容详细、逻辑清晰。编者不管是在内容章法逻辑之大观,还是插图尺寸之小节,都力求达到使读者阅读轻松愉悦、易读易懂。

一、环境

1. Hexo

Hexo 是一个快速、简洁且高效的 静态博客框架。它使用 Node.js 编写,支持通过 Markdown 撰写博文,生成静态网页后部署到 GitHub Pages、Vercel、Cloudflare Pages 等平台,完全免费,无需服务器。

Hexo 与其他博客系统对比

系统

类型

写作方式

是否免费

适合人群

Hexo

静态博客

Markdown + 本地编译

稍懂命令行的技术人/学生

WordPress

动态博客

在线编辑

❌需要服务器

非技术用户

VuePress / VitePress

文档系统/博客

Markdown + Vue

技术文档撰写

Hugo

静态博客

Markdown

对速度要求极高的用户

Hexo 的基本组成

my-blog/
├── _config.yml        # Hexo 全局配置文件
├── source/            # 存放 Markdown 文章、图片等资源
├── themes/            # 博客使用的主题(如 Shoka)
├── scaffolds/         # 创建文章的默认模板
├── public/            # 生成的 HTML 静态网站文件(部署用)
└── package.json       # npm 配置文件,记录依赖包

Hexo 工作原理图

Markdown文章 (.md)
     │
     ▼
hexo generate (生成)
     │
     ▼
静态网页 (public/*.html)
     │
     ▼
hexo deploy (部署)
     │
     ▼
线上访问(如 GitHub Pages)

2. node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。它的主要作用是:让你可以在命令行终端(例如 Windows 的 CMD 或 PowerShell)中执行 JavaScript 代码。

Hexo 本身是用 JavaScript 写的,运行依赖于 Node.js 环境

Hexo 的命令行工具 hexo,本质上就是一个 Node.js 应用程序

因此,没有 Node.js,Hexo 根本无法运行。

2.1 下载安装

官网:https://nodejs.cn/download/

以下仅为适用于编者的步骤,请根据自己实际情况选择相应安装包

简单说明

● Node.js runtime 是 Node.js 的核心运行环境

● Corepack Manager 是一个 Node.js 自带的工具,用来在不同的 JavaScript 包管理器(如 npm、Yarn、pnpm)之间进行管理和切换。

● npm package manager 是 Node.js 附带的官方包管理工具,全称为 Node Package Manager

● Online documentation shortcuts 是指是否在开始菜单或桌面上添加指向 Node.js 官方文档的快捷方式。

● Add to PATH是指将 Node.js 和 npm 的可执行路径添加到系统的环境变量中。

(1)选择 Onnline documention shortcuts,后点击 Next

(2)Next

(3)Install

(4)Finish

2.2 检查安装

检查是否安装成功
在命令行窗口 node -v,出现对应版本号即安装成功

3. npm

npm(Node Package Manager) 是 Node.js 的官方包管理器。它的功能是用来安装、卸载和管理 JavaScript 模块(包)。

在 Hexo 中,npm 负责:

安装 Hexo 框架本体:npm install -g hexo-cli

安装插件:比如部署插件 hexo-deployer-git

安装主题依赖:很多主题(比如 Shoka)需要依赖 npm 安装额外模块

Node.js 和 npm 的关系

Node.js 是运行环境,npm 是它的“工具箱”。安装 Node.js 的同时,npm 会自动一起安装。使用 Hexo 前必须保证这两个都安装成功

4. git

git 的介绍及环境搭建详见之前的文章:【Git环境搭建】Git的下载安装教程

二、搭建

1. github创建个人仓库

Hexo 是静态博客,它会将文章编译成一堆 .html 文件,这些网页必须有一个地方放上网才可以访问。而 GitHub 提供了一个叫做 GitHub Pages 的免费托管服务,可以帮你把静态网站部署到互联网。

我们将创建一个公开仓库,把 Hexo 编译好的网页推送上去,这样别人就可以通过 https://你的用户名.github.io 访问你的博客了。

在开始之前,您需要一个 GitHub 账号。如果还没有,请先注册:https://github.com/join

(1)New repository
在右上角点击头像旁边的 “+” 号图标,选择 New repository(新建仓库)

(2)填写仓库信息
建议用户名使用英文小写,无特殊符号,比如 tom。这个用户名将直接决定你的博客网址!

项目

内容

说明

Repository name

用户名.github.io

必须完全匹配你的 GitHub 用户名,加上 .github.io

Description

My Hexo Blog

(可选)写个简介

Public / Private

选择 Public(公开)

GitHub Pages 只支持公开仓库部署

☑️ Initialize this repository with:

❌ 不勾选!

不要勾选 README 或 .gitignore!否则部署会失败!

0

评论区