第二章:Hexo 基础搭建与配置
发表于更新于
字数总计:4.3k阅读时长:15分钟阅读量: 广东
第二章:Hexo 基础搭建与配置
在上一部分,我们已经完成了 Hexo 的环境准备和基本项目的初始化。现在,我将带您进一步了解 Hexo 的基础使用,包括核心命令以及对站点全局配置文件的初步认识。
1. Hexo 常用基础命令
掌握 Hexo 的基础命令是高效管理博客的关键。以下是一些最常用的命令:
命令 | 简写 | 核心功能 |
---|
hexo init [folder] | - | 新建一个 Hexo 网站 |
hexo new [layout] <title> | hexo n | 创建新文章、页面或草稿 |
hexo generate | hexo g | 生成静态文件 (到 public 目录) |
hexo server | hexo s | 启动本地服务器预览 (用 hexo s --drafts 查看草稿) |
hexo deploy | hexo d | 部署网站 (需安装并配置部署插件) |
hexo clean | - | 清理缓存和已生成文件 (解决生成异常问题) |
hexo version | hexo v | 显示版本信息 |
常用命令组合:
- 撰写并预览:
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 里
3.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
---
|
3.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
---
|