惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 叶小钗
D
Docker
GbyAI
GbyAI
Y
Y Combinator Blog
Google DeepMind News
Google DeepMind News
G
Google Developers Blog
P
Proofpoint News Feed
云风的 BLOG
云风的 BLOG
雷峰网
雷峰网
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Stack Overflow Blog
Stack Overflow Blog
WordPress大学
WordPress大学
小众软件
小众软件
Engineering at Meta
Engineering at Meta
酷 壳 – CoolShell
酷 壳 – CoolShell
I
InfoQ
B
Blog
H
Help Net Security
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 聂微东
The GitHub Blog
The GitHub Blog
A
About on SuperTechFans
B
Blog RSS Feed
Microsoft Security Blog
Microsoft Security Blog

韩小韩博客

你还在用真实邮箱注册网站?等等,你真的想清楚了吗? IPFS星际文件系统 最新二合一收款码 - 物理合并版 从Hexo到Astro博客1分钟迁移指南 Astro 添加 Waline 评论组件 腾讯云 EdgeOne Pages 实测对比:能否成为国内开发者的 Cloudflare Pages 最佳平替? Astro 中使用 Lenis 增加鼠标滚动阻尼感 一组手机和电脑动态壁纸分享【分享】 Astro 添加 Twikoo 评论组件 Astro主题-优雅的vhAstro-Theme【使用文档】 Fetch的GET、POST简单HTTP请求封装 一些实拍的手机壁纸 大理And威海【图】 很喜欢西湖的水【转自:狮子狮子鱼】 Tarot-塔罗牌占卜 Web Watermark 图片添加水印在线小助手 HanAnalytics访问分析Web统计托管于(Cloudflare Pages) 基于AI的微博动态心情分析 阿里云免费用9年ecs教程【适合轻量化服务如frp】 Cloudflare优选IP➕DnsPod的DDNS自动切换 混沌神器Clash全家桶 卷王都在用的变态休息法 NodeJs文本相似度去重脚本 骤雨重山无限存储图床托管于(Cloudflare Pages) 分享好看的天空和云(长期更新) Typecho转到Hexo(主题由Typecho-Joe-Theme转Butterfly主题) Typecho评论导出为Hexo的Valine、Twikoo等评论所支持的JSON文件 Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题 拼夕夕快速提现100元攻略 2024 平安喜乐
胎教级搭建Hexo静态博客安装Fluid主题
.𝙃𝙖𝙣 · 2026-04-11 · via 韩小韩博客

avatar

.𝙃𝙖𝙣

587 2.9分钟

Daily

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

准备

如果你没有安装 Node.js,请百度一下,安装好Node.js再回来。
还有 你的双手和大脑

安装

yarn global add hexo-cli
# npm install -g hexo-cli

搭建Hexo静态博客Fluid主题

建站

安装好 Hexo 后,直接进入主题。

新建一个项目

hexo init han-hexo
# han-hexo 是我的项目名称

这里有个坑,安装好如果出现这个错误提示

搭建Hexo静态博客Fluid主题

请到你的 npm 安装目录删除 hexo.ps1 文件即可。 默认安装目录 : C:\Users\用户名\AppData\Roaming\npm

搭建Hexo静态博客Fluid主题

执行完毕后,如图所示,即运行成功。

搭建Hexo静态博客Fluid主题

安装依赖

cd han-hexo
yarn
# npm install

搭建Hexo静态博客Fluid主题

至此,Hexo已经安装完毕并创建了一个名为 han-hexo 的项目。

主题安装

这里我用的是优雅的 Fluid Hexo主题

安装

yarn add hexo-theme-fluid
# npm install --save hexo-theme-fluid

搭建Hexo静态博客Fluid主题

设置主题为 Fluid

将项目根目录的 _config.yml 中的 theme 的值设置为 fluid 顺便把语言设置成中文 languagezh-CN

搭建Hexo静态博客Fluid主题

顺带提一下SEO优化URL地址

搭建Hexo静态博客Fluid主题

配置主题文件

在博客目录下创建 _config.fluid.yml 文件,将主题的 _config.yml ( opens new window )内容复制过去。

搭建Hexo静态博客Fluid主题

创建主题自带的「关于页面」

hexo new page about

搭建Hexo静态博客Fluid主题

创建成功后修改 /source/about/index.md ,添加 layout 属性。
修改后的文件示例如下:

---
title: 标题
layout: about
---

这里写关于页的正文,支持 Markdown, HTML

搭建Hexo静态博客Fluid主题

写文章

万事俱备,只差文章

hexo new hexo-in-cloudflare-workers
# hexo-in-cloudflare-workers 为文件名,随意取

搭建Hexo静态博客Fluid主题

文章支持 HTML MarkDown 语法

编译静态文件

直接终端输入

hexo generate

搭建Hexo静态博客Fluid主题

本地测试

hexo server

搭建Hexo静态博客Fluid主题

恭喜你,完成Hexo博客胎教级教学

Hexo 静态博客