第二部分:Hexo 基础搭建与配置
在上一部分,我们已经完成了 Hexo 的环境准备和基本项目的初始化。现在,我将带您进一步了解 Hexo 的基础使用,包括核心命令以及对站点全局配置文件的初步认识。
1. Hexo 常用基础命令
掌握 Hexo 的基础命令是高效管理博客的关键。以下是一些最常用的命令:
如果您想在本地查看草稿的效果,普通的 hexo server
命令是看不到的,您必须使用一个特殊的命令:hexo server --drafts
(或者简写 hexo s --drafts
),
命令 | 简写 | 功能描述 | 常用场景 | 备注 |
---|
hexo init [folder] | - | 初始化一个新博客项目到指定文件夹。如果文件夹不存在,Hexo 会创建它。 | 首次创建博客项目。 | 通常在空目录下执行。 |
hexo new <layout> <title> | hexo n | 创建一篇新文件。<layout> 可以是 post (文章)、page (页面) 或 draft (草稿),默认是 post 。<title> 是文件名(不含扩展名)。 | 撰写新文章、创建关于页面等。 | 会根据 scaffolds 目录下的模板生成文件。 |
hexo generate | hexo g | 生成静态网站文件到 public 目录。 | 内容更新后准备部署前;本地预览前(hexo s 通常包含此步骤)。 | 会处理 source 目录下的 Markdown 文件、主题和配置。 |
hexo server | hexo s | 启动本地预览服务器。 | 在本地查看博客效果、调试主题或内容。 | 默认地址 http://localhost:4000 ,支持热重载。 |
hexo deploy | hexo d | 将生成的静态网站文件部署到远程服务器(如 GitHub Pages)。 | 将本地博客发布到线上。 | 需要先安装对应的部署插件并配置 _config.yml 中的 deploy 部分。 |
hexo clean | - | 清理 public 目录下的生成文件和 db.json 缓存文件。 | 遇到生成错误或需要强制完全重新生成时。 | 有助于解决一些缓存问题或文件冲突。 |
hexo version | hexo v | 显示 Hexo、Node.js 和 npm 的版本信息。 | 检查环境是否符合要求;排查版本兼容性问题。 | |
常用命令组合:
- 撰写并预览:
hexo new post "我的第一篇文章"
-> 编写内容 -> hexo clean && hexo server
-> 浏览器预览。 - 更新并部署: 编写/修改内容 ->
hexo clean && hexo generate && hexo deploy
(或者更简单的 hexo deploy -g
)。
场景化解释:
- 当我写完一篇新文章或者对已有文章进行了修改,我通常会先运行
hexo clean
清理掉旧的生成文件和缓存,然后运行 hexo generate
重新生成最新的静态网站。最后,为了验证修改是否正确,我会在本地运行 hexo server
进行预览。 - 当我确认本地预览无误,准备发布到线上时,我只需要运行
hexo deploy
命令(如果配置了自动生成,可以使用 hexo deploy -g
)。这个命令会将 public
目录下的所有文件推送到我配置好的托管平台(比如 GitHub Pages)。
2. Hexo 根目录配置文件 (_config.yml
)
_config.yml
文件位于 Hexo 项目的根目录下,它是站点的全局配置文件。大部分重要的全局设置,如网站标题、副标题、作者、语言、URL、文章链接格式、主题等,都在这里进行配置。
这个文件采用 YAML 格式。YAML 格式使用缩进表示层级关系,键值对之间用冒号 :
分隔(注意冒号后面需要加两个小空格
)。请务必注意缩进,Hexo 对 YAML 的缩进非常敏感,通常使用两个空格进行缩进。
默认的文件是英文的以下是 _config.yml
文件中的中文翻译
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209
|
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls: trailing_index: true trailing_html: true
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
new_post_name: :title.md
default_layout: post
titlecase: false
external_link: enable: true field: site exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight: line_number: true auto_detect: false tab_replace: '' wrap: true hljs: false
prismjs: preprocess: true line_number: true tab_replace: ''
index_generator: path: '' per_page: 10 order_by: -date
default_category: uncategorized
category_map:
tag_map:
meta_generator: true
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: 'mtime'
per_page: 10
pagination_dir: page
include:
exclude:
ignore:
theme: landscape
deploy: type: ''
|
场景化解释:
- 修改
title
, subtitle
, description
, author
, language
会直接影响博客的全局信息,比如在浏览器标签页、搜索引擎结果以及主题的某些位置显示。当我第一次搭建博客时,会在这里填入我的博客名称、简介、作者信息等。 url
配置项至关重要,它告诉 Hexo 您的博客最终部署到哪个网址。如果此处配置错误,可能导致生成的静态文件中资源路径错误(比如 CSS/JS 加载失败),使得网站只有文字而没有样式。permalink
决定了您文章的 URL 形式。我个人比较喜欢简洁的 :category/:title.html
或 :year/:month/:day/:title/
格式,方便记忆和分享。
在开始自定义主题之前,我建议您根据自己的信息修改 _config.yml
文件中的 title
、author
和 url
等基本信息。language
建议修改为 zh-CN
以便更好地显示中文内容和使用中文主题。
至此,我们已经完成了 Hexo 的基础搭建,了解了核心命令,并对站点配置文件有了初步认识。在下一部分,我们将正式安装并配置 魔改的Butterfly 主题,让您的博客焕然一新。
3.页面配置(重点)
Front-matter 的基本认识
Front-matter
是 markdown
文件最上方以 ---
分隔的区域,用于指定个别档案的变数。其中又分为两种 markdown 里
1.Page Front-matter 用于页面配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
| ---
title: 友情链接
date: 2025-06-09 20:00:00
type: link
updated: 2025-06-09 21:30:00
description: "这里是我的个人博客的友情链接页面,汇集了许多优秀博主的网站,欢迎大家参观和交换友链!"
keywords: "友情链接, 博客圈, 技术博客, 生活分享, Hexo"
comments: true
mathjax: false katex: false
aside: true
aplayer: false
highlight_shrink: false
top_img: /img/banners/friends.jpg
top_single_background: /img/backgrounds/simple_sky.png
---
|
2.Post Front-matter 用于文章页配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
| ---
title: 深入解析PWA核心技术与未来展望
date: 2025-06-09 18:30:00
updated: 2025-06-09 20:15:00
categories: - 前端技术 - Web App
tags: - PWA - Hexo - Service Worker
keywords: "PWA, Progressive Web App, Service Worker, Hexo博客"
description: "本文将从 Service Worker、Manifest 等核心组件出发,深入探讨PWA的工作原理,并展望其在未来的应用场景。"
ai: true
top_img: /img/banners/pwa-banner.png
cover: /img/covers/pwa-cover.png
main_color: "#005af0"
swiper_index: 1
top_group_index: 2
comments: true
toc: true toc_number: false toc_style_simple: true
copyright: true copyright_author: "特邀作者 张三" copyright_author_href: "https://example.com/zhangsan" copyright_url: "https://example.com/original-post" copyright_info: "本文为特邀作者原创,转载请联系作者获得授权。"
mathjax: false katex: false aplayer: false highlight_shrink: true aside: true
---
|