上一篇我们完成了Hexo所需求的环境的部署,本篇文章将会教学你初始化自己的博客,了解博客的文件结构,以及如何修改自己的博客

初始化你的博客

  1. 打开CMD
  2. (可选)输入cd <你想要存储博客文件夹的目录>,如果你是第一次搭建博客,我并不推荐你进行修改
  3. 输入hexo init <文件夹名称>,如hexo init myblog
  4. 输入cd <文件夹名称>,如cd myblog
  5. 输入npm install,等待进度条结束即可

CMD输出参考

C:\Users\Lynn>hexo init myblog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!
C:\Users\Lynn>cd myblog
C:\Users\Lynn\myblog>npm install
up to date in 616ms

你可以在CMD中输入hexo来判断是否初始化成功,若输出的结果与下图一致,则成功部署

image-20230213175444575

启动你的博客系统

  1. 在CMD中输入cd <文件夹名称>切换到你的博客文件夹
  2. 输入npm install hexo-server --save
  3. 输入hexo server启动你的博客

当你看到以下提示的时候,你的本地服务器就已经可以使用了

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

在浏览器中访问http://localhost:4000/,当你看到下面的页面时候,代表你的博客已经成功建立了!

image-20230213182354984

恭喜你,你已经完成了博客建设的绝大部分过程,现在你的博客已经准备好在本地生成了!

接下来,你将要学习博客文件夹的结构和配置文件的内容,这将有助于你对自己的博客更好的自定义

了解博客文件夹的结构

现在,你可以打开你的博客文件夹了,文件夹的目录在CMD中有所显示,如C:\Users\Lynn\myblog

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的 配置 信息,您可以在此配置大部分的参数。

package.json

应用程序的信息,包含了所有的依赖文件,请不要删除,我们会在Hexo 进阶篇中教你如何在云端构建并部署博客

package.json{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

scaffolds

模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

学习配置文件的内容

以下内容来自Hexo官网,你可以在阅读后进行修改

博主删除了一些内容,帮助你更好的入门搭建

部分内容将在后续的进阶篇进行教学

大部分博客的设置可以在 _config.yml 中修改

网站

参数描述
title网站标题
subtitle网站副标题
description网站描述
keywords网站的关键词。支持多个关键词。
author您的名字
language网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hanszh-CN
timezone网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai

其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数描述默认值
url网址, 必须以 http://https:// 开头
root网站根目录url's pathname
permalink文章的 永久链接 格式:year/:month/:day/:title/
permalink_defaults永久链接中各部分的默认值
pretty_urls改写 permalink 的值来美化 URL
pretty_urls.trailing_index是否在永久链接中保留尾部的 index.html,设置为 false 时去除true
pretty_urls.trailing_html是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)true

网站存放在子目录

如果您的网站存放在子目录中,例如 http://example.com/blog,则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/

例如:

# 比如,一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/

目录

参数描述默认值
source_dir资源文件夹,这个文件夹用来存放内容。source
public_dir公共文件夹,这个文件夹用于存放生成的站点文件。public
tag_dir标签文件夹tags
archive_dir归档文件夹archives
category_dir分类文件夹categories
code_dirInclude code 文件夹,source_dir 下的子目录downloads/code
i18n_dir国际化(i18n)文件夹:lang
skip_render跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

例如:

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染

提示

如果您刚刚开始接触 Hexo,通常没有必要修改这一部分的值。

文章

参数描述默认值
new_post_name新文章的文件名称:title.md
default_layout预设布局post
auto_spacing在中文和英文之间加入空格false
titlecase把标题转换为 title casefalse
external_link在新标签中打开链接true
external_link.enable在新标签中打开链接true
external_link.field对整个网站(site)生效或仅对文章(post)生效site
external_link.exclude需要排除的域名。主域名和子域名如 www 需分别配置[]
filename_case把文件名称转换为 (1) 小写或 (2) 大写0
render_drafts显示草稿false
post_asset_folder启动 Asset 文件夹false
relative_link把链接改为与根目录的相对位址false
future显示未来的文章true
highlight代码块的设置, 请参考 Highlight.js 进行设置
prismjs代码块的设置, 请参考 PrismJS 进行设置

相对地址

默认情况下,Hexo 生成的超链接都是绝对地址。例如,如果您的网站域名为 example.com,您有一篇文章名为 hello,那么绝对链接可能像这样:http://example.com/hello.html,它是绝对于域名的。相对链接像这样:/hello.html,也就是说,无论用什么域名访问该站点,都没有关系,这在进行反向代理时可能用到。通常情况下,建议使用绝对地址。

分类 & 标签

参数描述默认值
default_category默认分类uncategorized
category_map分类别名
tag_map标签别名

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数描述默认值
date_format日期格式YYYY-MM-DD
time_format时间格式HH:mm:ss
updated_option当 Front Matter 中没有指定 updatedupdated 的取值mtime

updated_option

updated_option 控制了当 Front Matter 中没有指定 updated 时,updated 如何取值:

  • mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
  • date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中,因为使用 Git 管理站点时,文件的最后修改日期常常会发生改变
  • empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。

use_date_for_updated 选项已经被废弃,将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'

分页

参数描述默认值
per_page每页显示的文章量 (0 = 关闭分页功能)10
pagination_dir分页目录page

扩展

参数描述
theme当前主题名称。值为false时禁用主题
theme_config主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置
deploy部署部分的设置
meta_generatorMeta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签

包括或不包括目录和文件

在 Hexo 配置文件中,通过设置 include/exclude 可以让 Hexo 进行处理或忽略某些目录和文件夹。你可以使用 glob 表达式 对目录和文件进行匹配。

includeexclude 选项只会应用到 source/ ,而 ignore 选项会应用到所有文件夹.

参数描述
includeHexo 默认会不包括 source/ 下的文件和文件夹(包括名称以下划线和 . 开头的文件和文件夹,Hexo 的 _posts_data 等目录除外)。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。
excludeHexo 不包括 source/ 下的这些文件和目录
ignoreHexo 会忽略整个 Hexo 项目下的这些文件夹或文件

举例:

# 处理或不处理目录或文件
include:
  - ".nojekyll"
  # 处理 'source/css/_typing.css'
  - "css/_typing.css"
  # 处理 'source/_css/' 中的任何文件,但不包括子目录及其其中的文件。
  - "_css/*"
  # 处理 'source/_css/' 中的任何文件和子目录下的任何文件
  - "_css/**/*"

exclude:
  # 不处理 'source/js/test.js'
  - "js/test.js"
  # 不处理 'source/js/' 中的文件、但包括子目录下的所有目录和文件
  - "js/*"
  # 不处理 'source/js/' 中的文件和子目录下的任何文件
  - "js/**/*"
  # 不处理 'source/js/' 目录下的所有文件名以 'test' 开头的文件,但包括其它文件和子目录下的单文件
  - "js/test*"
  # 不处理 'source/js/' 及其子目录中任何以 'test' 开头的文件
  - "js/**/test*"
  # 不要用 exclude 来忽略 'source/_posts/' 中的文件。你应该使用 'skip_render',或者在要忽略的文件的文件名之前加一个下划线 '_'
  # 在这里配置一个 - "_posts/hello-world.md" 是没有用的。

ignore:
  # 忽略任何一个名叫 'foo' 的文件夹
  - "**/foo"
  # 只忽略 'themes/' 下的 'foo' 文件夹
  - "**/themes/*/foo"
  # 对 'themes/' 目录下的每个文件夹中忽略名叫 'foo' 的子文件夹
  - "**/themes/**/foo"

列表中的每一项都必须用单引号或双引号包裹起来。

includeexclude 并不适用于 themes/ 目录下的文件。如果需要忽略 themes/ 目录下的部分文件或文件夹,可以使用 ignore 或在文件名之前添加下划线 _