当前位置: 首页 > news >正文

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

文章目录

  • 前言
  • 一、环境
    • 1.Hexo
    • 2.node.js
      • 2.1下载安装
      • 2.2检查安装
    • 3.npm
    • 4.git
  • 二、搭建
    • 1.github创建个人仓库
    • 2.安装hexo
    • 3.初始化博客目录
    • 4.配置 GitHub SSH 密钥连接
    • 5.连接 Hexo 与 GitHub
  • 三、博客优化
    • 1.主题变更
    • 2.基础信息更改
      • 2.1 头像、赞助码及标签页动态标题/图标更换
      • 2.2 更改随机背景图
      • 2.3 站点全局配置
  • 总结


前言

网上关于“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.jsHexo 根本无法运行。

2.1下载安装

官网:https://nodejs.cn/download/
以下仅为适用于编者的步骤,请根据自己实际情况选择相应安装包

在这里插入图片描述

Next
在这里插入图片描述

勾选后Next
在这里插入图片描述

建议更换路径为 D:\nodejs\
在这里插入图片描述
 

简单说明
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 的可执行路径添加到系统的环境变量中。

选择 Onnline documention shortcuts,后点击 Next
在这里插入图片描述

Next
在这里插入图片描述

Install
在这里插入图片描述

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

 
New repository
在右上角点击头像旁边的 “+” 号图标,选择 New repository(新建仓库)
在这里插入图片描述
 
 
填写仓库信息
建议用户名使用英文小写,无特殊符号,比如 tom。这个用户名将直接决定你的博客网址!

项目内容说明
Repository name用户名.github.io必须完全匹配你的 GitHub 用户名,加上 .github.io
DescriptionMy Hexo Blog(可选)写个简介
Public / Private选择 Public(公开)GitHub Pages 只支持公开仓库部署
☑️ Initialize this repository with:❌ 不勾选!不要勾选 README.gitignore!否则部署会失败!

前缀与用户名一致
点击绿色按钮 Create repository
确认所有信息填写无误后,点击绿色按钮 “Create repository”,完成创建。

如果你的用户名是 tom,仓库名就必须是:tom.github.io
否则博客将无法通过 GitHub Pages 正确访问。

之后你会跳转到一个空的仓库页面,上面会显示一行 “Quick setup”,以及提供仓库的 Git 地址,例如:
https://github.com/Tom/Tom.github.io.git
记下这个地址,后面我们会用 hexo d 把博客推送到这里。

在这里插入图片描述
此时如果访问 https://tom.github.io 页面应为空,但可以看到仓库的结构(main 分支)
 
 
Creating a new file
手动创建一个测试页面

在这里插入图片描述
 
命名 index.html
输入 test sth 进行测试

在这里插入图片描述
 
Creat index.html
点击 Commit changes

在这里插入图片描述
在这里插入图片描述
 
点击链接可查看网页内容(测试内容)
在这里插入图片描述

在这里插入图片描述

这也说明GitHub Pages 工作正常,仓库配置正常

之后进行的 hexo d 命令会自动覆盖掉这个测试页面(因为 Hexo 生成的 /index.html 会替代它),因此测试页面不需要手动删除。

2.安装hexo

创建博客项目文件夹
在本地选择一个合适的位置,用来存放 Hexo 博客项目文件。

建议在D盘下建一个专门的博客目录,直接命名为 Blog

Blog 文件夹以后会包含:
● Hexo 的运行核心代码
● 所有的 Markdown 博文
● 网站生成后的静态页面
● 所用主题文件
● 自定义配置、插件等

📌 该文件夹请勿随意移动或重命名! Hexo 会根据路径来关联一些本地文件。

 
安装 Hexo 的全局命令行工具(CLI)
Blog 文件夹中空白处 按住 Shift 键 + 右键,选择 Open Git Bash here
在这里插入图片描述

安装 Hexo 的全局命令行工具(CLI): npm install -g hexo-cli

@LAPTOP-HHKOH1KL MINGW64 /d/Blog
$ npm install -g hexo-cli

命令说明
npm:Node.js 的包管理器

install:安装一个包

-g:全局安装(Global),让你在任何位置都可以用 hexo 命令

hexo-cli:Hexo 的命令行接口(Command Line Interface)

在这里插入图片描述

 

3.初始化博客目录

(1) 创建一个新的 Hexo 项目
命令 hexo init blogs
这个命令会新建一个 blogs 文件夹,该文件夹下会自动生成一个完整的 Hexo 项目目录结构,包括:

Blog/blogs
├── _config.yml         # 全局配置文件
├── package.json        # 项目依赖说明
├── scaffolds/          # 文章模板
├── source/             # 你的文章、资源文件
│   ├── _posts/         # 博文目录
│   └── index.md        # 默认页面
├── themes/             # 主题目录
└── node_modules/       # 安装依赖包(系统自动生成)

如果使用 hexo init ,则在 Blog 下生成Hexo项目目录

在这里插入图片描述

(2)进入 /blogs 目录下
命令 cd blogs
 

(3)安装 Hexo 项目所需的依赖项
命令 npm install

虽然 hexo init 会生成完整的博客目录结构,但它只创建了 package.json 文件(列出了所需依赖),并不会自动安装依赖包。
因此,你必须手动运行命令: npm install
这样,npm 才会根据 package.json 中的依赖说明,去下载并安装以下关键模块(通常包括):

hexo(核心框架)

hexo-generator-*(页面生成器)

hexo-renderer-*(Markdown 渲染器)

其他插件或主题依赖项
 
安装完成后,会在目录中生成一个 node_modules/ 文件夹,里面就是这些依赖的代码。

在这里插入图片描述

在这里插入图片描述

(4)启动本地预览服务器

命令 hexo s (或者 hexo server

命令说明:
命令 hexo s 是命令 hexo server 的简写
启动一个本地 HTTP 服务(监听在 4000 端口)
默认打开 http://localhost:4000/ 就能访问你生成的博客页面

注意: 这个服务只是临时的,只在你运行该命令的终端窗口中有效,关闭终端后页面就无法访问了。

在这里插入图片描述
在这里插入图片描述

 
访问 http://localhost:4000/
看到以下页面则说明部署成功

在这里插入图片描述

4.配置 GitHub SSH 密钥连接

SSH 密钥是 GitHub 用来确认身份的“钥匙对”(公钥和私钥),让你在部署 Hexo 时,免输入 GitHub 密码
否则你会遇到:Permission denied (publickey) 错误

 
(1)配置 Git 的全局身份信息
命令 git config --global user.name "你的GitHub用户名"
 

(2)指定提交者的邮箱地址,通常使用注册 GitHub 时用的邮箱
命令 git config --global user.email "你的GitHub注册邮箱"
 

git config --global user.name Tom
git config --global user.email 123456@163.com

 
 

在这里插入图片描述
 

(3)生成 SSH 密钥文件(连接 GitHub 所用)
命令 ssh-keygen -t rsa -C "你的GitHub注册邮箱"

ssh-keygen -t rsa -C 123456@163.com

之后
① 第一次提示保存路径:
Enter file in which to save the key (/c/Users/你的用户名/.ssh/id_rsa):
直接按回车,保存到默认位置即可。

② 第二次提示设置密码(可选):
Enter passphrase for "/c/Users/你的用户名/.ssh/id_rsa" (empty for no passphrase):
直接回车,不设置密码(否则每次用都需要输入密钥密码)

③ 第三次确认密码:
Enter same passphrase again:
回车跳过。

执行完后会输出类似信息:
Your identification has been saved in /c/Users/.../.ssh/id_rsa
Your public key has been saved in /c/Users/.../.ssh/id_rsa.pub

在这里插入图片描述

 
(4)复制公钥 id_rsa.pub ,将 SSH 公钥添加到 GitHub

复制 id_rsa.pub 全部内容(包括开头 ssh-rsa 和结尾邮箱)

在这里插入图片描述

 
标题填写没有要求
将复制的 id_rsa.pub 密钥粘贴到 Key
最后 Add SSH key

在这里插入图片描述
 

(5)检测连接是否成功
在Git Bash中检测GitHub公钥设置是否成功

命令 ssh git@github.com
如果你是第一次连接,会出现类似提示:

The authenticity of host 'github.com (IP地址)' can't be established.
Are you sure you want to continue connecting (yes/no)?

输入:yes
 
出现

Hi your_username! You've successfully authenticated, but GitHub does not provide shell access.

说明你已经使用 SSH 成功连接到 GitHub
 
在这里插入图片描述

 
出现

Hi your_username! You've successfully authenticated, but GitHub does not provide shell access.

说明你已经使用 SSH 成功连接到 GitHub

 

5.连接 Hexo 与 GitHub

(1)获取 GitHub 仓库的 SSH 地址

在所建的仓库主页,点击绿色按钮 Code,选择:

SSH → git@github.com:yourusername/yourusername.github.io.git
复制SSH地址

在这里插入图片描述

 
(2)配置 Hexo 的站点部署信息

打开博客根目录下的配置文件 _config.yml(注意,不是主题的 _config.yml
/Blog/blogs/_config.yml

config.yml 底部找到

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:type:''

修改为如下格式:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:type: gitrepo: git@github.com:yourusername/yourusername.github.io.gitbranch: main

type: git 表示使用 Git 部署方式

repo: 填入复制的 SSH 地址

branch: main 是你 GitHub 仓库的默认分支(如果你是 master,就写 master)

 
未更改的 _config.yml
在这里插入图片描述

 

更改后的 _config.yml

在这里插入图片描述

 
(3)安装 Hexo 部署插件

执行:

npm install hexo-deployer-git --save

--save 作用是把它写入 package.json,下次他人克隆你的项目可以一键安装依赖。

在这里插入图片描述

 
(4)部署命令(首次部署或更新博客时都要执行)

依次执行命令
hexo clean
hexo g
hexo d

hexo clean       # 清除缓存文件
hexo g           # 生成静态页面(HTML、CSS 等)
hexo d           # 部署(推送)到 GitHub 仓库

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

 
以上步骤之后可以在github仓库看到推送的项目文件
在这里插入图片描述

三、博客优化

1.主题变更

Hexo 默认主题是 landscape,但可以在 themes/ 文件夹下添加任意新主题并启用它

在Hexo官网寻找自己的主题: Hexo官网主题

本文选择主题 Shoka
主题代码项目地址:https://github.com/amehime/hexo-theme-shoka

在这里插入图片描述
 
(1)进入Hexo根目录

进入根目录下,即 Blog/blogs/
 

  • 若目录层次结构如下,则根目录为 Blog/blogs/
Blog/blogs
├── _config.yml         # 全局配置文件
├── package.json        # 项目依赖说明
├── scaffolds/          # 文章模板
├── source/             # 你的文章、资源文件
│   ├── _posts/         # 博文目录
│   └── index.md        # 默认页面
├── themes/             # 主题目录
└── node_modules/       # 安装依赖包(系统自动生成)

 

  • 若目录层次结构如下,则根目录为 Blog/
Blog
├── _config.yml         # 全局配置文件
├── package.json        # 项目依赖说明
├── scaffolds/          # 文章模板
├── source/             # 你的文章、资源文件
│   ├── _posts/         # 博文目录
│   └── index.md        # 默认页面
├── themes/             # 主题目录
└── node_modules/       # 安装依赖包(系统自动生成)

 

(2)克隆 Shoka 主题代码

命令

git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

命令说明
git clone:克隆 Git 仓库。
https://github.com/amehime/hexo-theme-shoka.git:Shoka 原主题的仓库地址。
./themes/shoka:指定克隆到当前目录下的 themes/shoka 文件夹中,而不是默认的 hexo-theme-shoka
 
这样可以直接让你的主题目录名与配置文件里的 theme: shoka 保持一致,省去了手动重命名文件夹的步骤。
如果你用默认 clone(目录名是 hexo-theme-shoka),但 _config.yml 写成了 theme: shoka,就会加载失败,导致空白页。

 
在这里插入图片描述

🚨如果遇到使用命令git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka 克隆失败
可以选择到项目地址下载项目压缩包,解压后移至根目录下的 themes 文件夹下,重命名为 shoka

在这里插入图片描述

在这里插入图片描述

(3)配置 Hexo 启用该主题

在 Hexo 根目录,打开站点配置文件 _config.yml,找到:

theme: landscape

改为:

theme: shoka

⚠️ 注意,主题名要与 themes 文件夹中主题文件夹的名字一致。

在这里插入图片描述
 
(4)配置语言

站点根目录的 language: zh-CN 是设置 Hexo 系统层的语言;
它不一定会影响你所用主题的语言,主题语言配置是分开的(大部分主题也支持语言切换,但要在主题自己的 _config.yml 中设置);
所以可能要同时改两处:
● 站点根目录/_config.yml
themes/你用的主题/_config.yml

但是从Hexo主题官网上可以看到,shoka主题是支持中文的,因此 themes/shoka/_config.yml 的语言配置不需要更改

在这里插入图片描述

(5)预览

user@LAPTOP-HHKOH1KL MINGW64 /d/Blog/blogs
$ hexo cleanuser@LAPTOP-HHKOH1KL MINGW64 /d/Blog/blogs
$ hexo guser@LAPTOP-HHKOH1KL MINGW64 /d/Blog/blogs
$ hexo s

在这里插入图片描述

2.基础信息更改

2.1 头像、赞助码及标签页动态标题/图标更换

avatar.jpg 为头像
favicon.ico 为停留在标签页时的图标
failure.ico 为离开标签页时的图标
alipay.png 为赞赏码
paypal.png 为赞赏码
wechat.png 为赞赏码
404.png 为404页面时显示的图片

将图片替换为自己的图片即可
之后

user@LAPTOP-HHKOH1KL MINGW64 /d/Blog/blogs
$ hexo cleanuser@LAPTOP-HHKOH1KL MINGW64 /d/Blog/blogs
$ hexo guser@LAPTOP-HHKOH1KL MINGW64 /d/Blog/blogs
$ hexo d

即可在 https://tom.github.io 看到相应变化

注意,替换的图片格式需要与原配置的图片格式相同
在这里插入图片描述

停留在标签页时的图标和标题
在这里插入图片描述
 
离开标签页时的图标和标题
在这里插入图片描述

 

2.2 更改随机背景图

shoka 背景图调用的核心机制

shoka主题的背景图使用默认的图片列表,位于 <root>/themes/shoka/_images.yml

 - https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399cvt1pzj30y00p60vh.jpg- https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399cwvuibj30y00j4gnb.jpg- https://dlink.host/wx3.sinaimg.cn/large/008ETLevly8i399cxy32tj30u00gsjw9.jpg- https://dlink.host/wx3.sinaimg.cn/large/008ETLevly8i399diw10qj30hr0i9ta2.jpg- https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399djgw2vj30u00mijv6.jpg- https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399ewgzegj319n0n5ae3.jpg

shoka 文件夹下的 _images.yml 图片链接可知,其背景图来自新浪图库,使用的图床:新浪图床(sinaimg.c
其中 wx2.sinaimg.cnwx3.sinaimg.cn 是新浪微博图床服务器的一个子域。

 
结合 Blog/blogs/themes/shoka/scripts/helpers 下的 engine.js 代码
Blog/blogs/themes/shoka 下的 _config.yml 文件

//engine.js
const randomBG = function(count = 1, image_server = null, image_list = []) {if (image_server) {if(count && count > 1) {var arr = new Array(count);for(var i=0; i < arr.length; i++){arr[i] = image_server + '?' + Math.floor(Math.random() * 999999)}return arr;}return image_server + '?' + Math.floor(Math.random() * 999999)}var parseImage = function(img, size) {if (img.startsWith('//') || img.startsWith('http')) {return img} else {return 'https://tva'+randomServer+'.sinaimg.cn/'+size+'/'+img}}if(count && count > 1) {var shuffled = image_list.slice(0), i = image_list.length, min = i - count, temp, index;while (i-- > min) {index = Math.floor((i + 1) * Math.random());temp = shuffled[index];shuffled[index] = shuffled[i];shuffled[i] = temp;}return shuffled.slice(min).map(function(img) {return parseImage(img, 'large')});}return parseImage(image_list[Math.floor(Math.random() * image_list.length)], 'mw690')
}

 

#_config.yml# random image api
image_server: "https://acg.xydwz.cn/api/api.php"

可知,Shoka 的背景图是通过 randomBG() 函数动态生成的,这个函数根据配置项:

image_server: 使用随机 API 动态获取背景图;

image_list: 使用本地或手动指定的图片列表;

● 没有设置时使用默认的微博图床。

_config.yml 配置使用的是:

image_server: "https://acg.xydwz.cn/api/api.php"
也就是说,启用了随机图接口模式,Shoka 每次构建页面时会自动向这个接口发送请求,从而动态生成背景图地址。

如果想要使用自己的背景图,可以通过在 _config.yml 中列出图片文件名,
Blog/blogs/source/images/ 新建文件夹 bg ,并将这些图片放在 Blog/blogs/source/images/bg/ 目录下,
再通过修改主题的 parseImage() 函数拼接本地路径 Blog/blogs/source/images/bg/ 文件名,
结合 randomBG() 随机选择图片,实现在页面中动态调用本地背景图的功能,
最终由 Hexo 渲染成 <div style="background-image: url(...);"> 自动加载。

(1)放置背景图

Blog/blogs/source/images/ 新建文件夹 bg ,并将背景图放在 Blog/blogs/source/images/bg/ 目录下

简单重命名图片,注意图片格式为 .jpg 格式

在这里插入图片描述

 
(2)修改 Blog/blogs/themes/shoka/_images.yml 图源列表

按照格式列出图片文件名,注释原有图片的文件名

- 1.jpg
- 2.jpg
- 3.jpg
- 4.jpg
- 5.jpg
# - https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399cvt1pzj30y00p60vh.jpg
# - https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399cwvuibj30y00j4gnb.jpg
# - https://dlink.host/wx3.sinaimg.cn/large/008ETLevly8i399cxy32tj30u00gsjw9.jpg
# - https://dlink.host/wx3.sinaimg.cn/large/008ETLevly8i399diw10qj30hr0i9ta2.jpg
# - https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399djgw2vj30u00mijv6.jpg
# - https://dlink.host/wx2.sinaimg.cn/large/008ETLevly8i399ewgzegj319n0n5ae3.jpg

 
在这里插入图片描述

 
(3)关闭 image_server

Blog/blogs/themes/shoka 下的 _config.ymlimage_server 后的内容使用 # 注释掉
这样可以禁用随机 API 模式,改用本地图片

 

未更改的 _config.yml 的 image_server

# random image api
image_server: "https://acg.xydwz.cn/api/api.php"

 
 
更改后的 _config.yml 的 image_server

# random image api
image_server: # "https://acg.xydwz.cn/api/api.php"

 
在这里插入图片描述

 
(4)重写 parseImage() 函数

因为没有设置 image_server,所以进入 randomBG()fallback 模式:
然后 parseImage() 调用重写后的逻辑:

使用本地背景图列表,不依赖外部图床或 API
更改 return 指向,使其将图片路径解析为本地路径,直接拼接 /images/bg/ 目录下的路径

 
 
未更改前的 engine.js 代码中的parseImage() 函数

var parseImage = function(img, size) {if (img.startsWith('//') || img.startsWith('http')) {return img} else {return 'https://tva'+randomServer+'.sinaimg.cn/'+size+'/'+img}}

 
 
更改后的 engine.js 代码中的parseImage() 函数

var parseImage = function(img, size) {if (img.startsWith('//') || img.startsWith('http')) {return img} else {// return 'https://tva'+randomServer+'.sinaimg.cn/'+size+'/'+imgreturn '/images/bg/'+img}}

 
 
未更改的js代码

在这里插入图片描述

 
 
更改后的js代码
在这里插入图片描述

 
博客网站效果图·
在这里插入图片描述

 
 

2.3 站点全局配置

 
Blog/blogs 下的 _config.yml 文件更改站点全局配置

配置项说明
title站点主标题。显示在网页 、导航栏、首页顶部等
subtitle站点副标题。显示在首页主标题下方(若主题支持)。为空则不显示
description网站描述(简介)。用于 SEO 的 标签,通常不会直接展示在页面上
keywords关键词(SEO)。多个关键词用英文逗号隔开。用于搜索引擎优化
author作者名。可显示在页脚、文章底部等
language默认语言。决定页面语言。设置的是 zh-CN(中文简体)
timezone时区设置。用于控制文章时间显示格式。为空默认使用 Asia/Shanghai

 

在这里插入图片描述


更多博客优化教程详见 shoka 官方教程


总结

这篇教程之所以花了大量笔墨,是因为我深知:网上太多 Hexo 教程对于初学者“说起来简单,做起来心酸”,不是步骤不全,就是章法混乱,让人一头雾水。

本篇不仅详细讲解了从 0 开始的 Hexo 环境搭建,还结合图文对 GitHub 仓库配置、Node.js/npm 安装、SSH连接、Shoka 主题启用等关键环节逐一拆解,力求让初学者也能顺利完成部署并拥有一个结构清晰、美观实用的个人博客。

写博客不止是写技术,更是记录成长。希望你在搭建博客的过程中,不仅能积累技术经验,也能收获表达的乐趣。


如果你觉得这篇文章对你有帮助,欢迎点赞,你的支持是我分享更多免费优质内容的动力!

http://www.dtcms.com/a/304226.html

相关文章:

  • 鸿蒙Harmony-自定义List组件,解决List组件手势滑动点击卡住问题
  • Android JNI 语法全解析:从基础到实战
  • 预过滤环境光贴图制作教程:第二步 - 生成环境贴图图集
  • 音频算法基础(语音识别 / 降噪 / 分离)
  • p5.js 三角形triangle的用法
  • 中国贸促会融媒体中心出海活动负责人、出海星球创始人莅临绿算技术
  • FSMC的配置和应用
  • python类里面的魔法方法
  • 某雷限制解除:轻松获取原始下载链接,支持多任务转换
  • 运维笔记:HTTP 性能优化
  • python学习DAY26打卡
  • 二叉树的最大路径和C++
  • 2025手机软件上架各大应用市场大致流程
  • RabbitMQ消息确认机制有几个confirm?
  • 面向对象系统的单元测试层次
  • Node.js 是怎么一步步撼动PHP地位的
  • C#基础篇 - 正则表达式入门
  • 预过滤环境光贴图制作教程:第三阶段 - GGX 分布预过滤
  • Python爬虫实践:高效下载XKCD漫画全集
  • Vue3数组去重方法总结
  • 数据赋能(342)——技术平台——容错性
  • oneapi本地部署接口测试(curl命令方式+postman方式)
  • git中多仓库工作的常用命令
  • C 语言第 12 天学习笔记:函数进阶应用与变量特性解析
  • Accessibility Insights for Windows 使用教程
  • 【Nginx】Nginx进阶指南:解锁代理与负载均衡的多样玩法
  • Apache Ignite 的分布式锁Distributed Locks的介绍
  • VLA--Gemini Robotics On-Device: 将AI带到本地机器人设备上
  • SQL 怎么学?
  • 小程序发票合并功能升级!发票夹直接选,操作更便捷