Hexo框架的用法
一、核心概念与工作流程
- 写作:你用
Markdown语法编写文章(.md文件)。 - 生成:Hexo 读取这些源文件,并根据你选择的主题和模板,生成一整套静态的
HTML,CSS,JS文件。 - 部署:你将生成的静态文件上传到你的服务器或托管平台。
- 介绍:Hexo 是一个基于 Node.js 的快速、简洁且高效的博客框架。它将 Markdown 文档渲染成漂亮的静态网页,你可以轻松地部署到 GitHub Pages、Netlify、Vercel 等平台。
二、安装与初始化
1. 前提条件:安装 Node.js 和 Git
- Node.js (推荐 LTS 版本): https://nodejs.org
- Git: https://git-scm.com
安装完成后,可以在终端(或命令行)中通过以下命令检查是否成功:
1 | |
2. 安装 Hexo CLI
使用 npm(Node.js 的包管理器)全局安装 Hexo 命令行工具:
1 | |
3. 初始化一个博客项目
找一个你喜欢的目录,执行以下命令来创建你的博客项目文件夹(my-blog 可以替换为你喜欢的名字):
1 | |
4. 安装依赖包
进入项目文件夹后,安装必要的依赖:
1 | |
5. 本地预览
现在,一个最简单的博客已经创建好了。运行本地服务器查看效果:
1 | |
然后在浏览器中打开 http://localhost:4000,你就能看到默认的 Hexo 博客和一篇名为 “Hello World” 的示例文章。
三、核心用法与命令
1. 创建一篇新文章
使用 new 命令创建一篇新的 Markdown 文章:
1 | |
这条命令会在 source/_posts 目录下生成一个 我的第一篇文章.md 文件。打开这个文件,你可以开始用 Markdown 写作了。
文件开头是 Front-matter,用于设置文章的属性,采用 YAML 格式:
1 | |
正文部分:在 --- 下方开始用 Markdown 写作。
2. 生成静态文件
当你写完文章或修改了主题、配置后,需要重新生成静态文件:
1 | |
生成的文件会放在 public 文件夹中。
3. 部署到服务器
最常用的方式是部署到 GitHub Pages。首先需要安装 hexo-deployer-git 插件:
1 | |
然后修改博客根目录下的配置文件 _config.yml,找到 deploy 部分进行配置:
1 | |
配置完成后,使用一条命令即可完成生成和部署:
1 | |
4. 清除缓存文件
有时主题修改未生效,可能是缓存问题,可以清除缓存和已生成的文件:
1 | |
这会删除 public 文件夹和数据库缓存,下次 generate 时会重新生成全新文件。
四、目录结构与核心配置
1. 目录结构
1 | |
2. 主配置文件 (_config.yml)
这是博客最重要的配置文件,你可以设置:
- 网站信息:标题、副标题、描述、作者、语言等。
- URL:网站链接、文章永久链接格式。
- 目录:源文件、标签、分类等路径。
- 部署:部署平台和仓库地址。
- 扩展:插件和主题设置。
注意:修改此文件后需要重启服务器 hexo s 或重新生成 hexo g 才能生效。
五、更换主题
下载主题:以最流行的 NexT 主题为例,将主题克隆到
themes/目录下:1
2cd your-hexo-folder
git clone https://github.com/next-theme/hexo-theme-next themes/next启用主题:修改主配置文件
_config.yml:1
theme: next # 从默认的 'landscape' 改为 'next'配置主题:主题自身也有配置文件,通常位于
themes/next/_config.yml。你可以直接修改它,但推荐的做法是:在博客根目录下创建一个_config.next.yml文件(与主配置文件同级),然后从主题的配置文件中复制你想要修改的部分过来进行覆盖配置。这样可以避免主题更新时你的配置被覆盖。运行
hexo clean && hexo s来查看新主题的效果。
六、实用技巧与进阶
创建页面:除了文章,你还可以创建独立页面,如“关于”、“友情链接”等。
1
hexo new page "about"这会在
source/about/index.md创建一个关于页面。插件系统:Hexo 有丰富的插件生态系统。
hexo-generator-search: 生成搜索索引。hexo-wordcount: 统计文章字数与阅读时长。hexo-related-popular-posts: 显示相关文章。
使用npm install <plugin-name> --save安装插件,然后在主配置文件中进行配置。
写作技巧:
- 文章摘要:在文章中插入
<!-- more -->分隔符,分隔符前面的内容会作为首页摘要。 - 资源文件夹:在主配置中设置
post_asset_folder: true,之后每次hexo new都会创建一个与文章同名的文件夹,方便你存放图片等资源。在文章中引用图片时,路径直接写文件名即可。
- 文章摘要:在文章中插入
多端同步:将整个 Hexo 博客文件夹(除了
public和node_modules)推送到一个独立的 Git 仓库(如hexo-source),这样你可以在另一台电脑上拉取代码,运行npm install后继续写作和部署。
总结
Hexo 的使用流程可以简化为一个循环:
配置 (_config.yml) -> 写作 (hexo new) -> 预览 (hexo s) -> 生成 (hexo g) -> 部署 (hexo d)。
它完美结合了 Markdown 的简洁写作和 静态网站的飞速体验,是技术博主和内容创作者的绝佳选择。从简单的命令行开始,一步步探索主题和插件,你就能打造出一个独一无二的个人博客。