利用Hexo构建个人博客

举报
Bikevibe 发表于 2023/02/13 16:44:20 2023/02/13
【摘要】 利用Hexo构建个人博客 需求构建一个个人博客可以解析Markdown快速部署发布方便主题切换和页面美化 框架个人检索了一下博客的框架,最后选择了Hexo作为个人博客的框架,选择好框架过后就可以开始安装了。 Hexo安装 Hexo 相当简单,只需要先安装下列应用程序即可:Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)Git文档 ...

利用Hexo构建个人博客

需求

  • 构建一个个人博客
  • 可以解析Markdown
  • 快速部署发布
  • 方便主题切换和页面美化

框架

  • 个人检索了一下博客的框架,最后选择了Hexo作为个人博客的框架,选择好框架过后就可以开始安装了。

Hexo

安装 Hexo 相当简单,只需要先安装下列应用程序即可:

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git

安装Hexo

1.检测环境

# 确认Nodejs和git安装成功:运行下面命令打印版本号即可
node -v
npm  -v
git --version

配置nodejs

配置git

2.安装hexo

安装hexo框架

npm install -g hexo-cli

初始化博客

我建立了blog文件夹,hexo init 需要在一个空的文件夹。

hexo init <folder>
#输出 INFO  Start blogging with Hexo!
cd <folder>
npm install

本地部署【测试】

hexo clean
hexo g
hexo s

当服务器运行时,可以通过浏览器,输入 localhost:4000

成功构建个人博客!!!

3.更换Hexo主题

选择主题

默认的主题是landscape,很简洁。

Hexo 有很多主题。建议直接去官网查看自己喜欢的主题。Themes | Hexo 部分主题对中文支持比较弱,可以筛选一下对中文友好的主题。

本人采用Fluid主题:一款 Material Design 风格的主题,官方注释详细,功能丰富

安装主题

方式一

Hexo 5.0.0 版本以上,推荐通过 npm 直接安装,进入博客目录执行命令

npm install --save hexo-theme-fluid
方式二

下载 主题zip 解压到 themes 目录,并将解压出的文件夹重命名为 主题名称

然后在博客目录下创建 _config.fluid.yml,将主题的 _config.yml 内容复制进去。

指定主题

在Hexo中修改主题

如下修改 Hexo 博客目录中的 _config.yml

theme: fluid  # 指定主题
language: zh-CN  # 指定语言,会影响主题显示的语言,按需修改

创建「About Me」

hexo new page about

创建成功后,编辑博客目录下 /source/about/index.md,添加 layout 属性。

修改后的文件示例如下:

---
title: about
layout: about
---

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

本地部署【测试】

4.优化主题

配置指南

配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)

图标

图标 | Hexo Fluid 用户手册 (fluid-dev.com)

进阶

进阶用法 | Hexo Fluid 用户手册 (fluid-dev.com)

5.编写博文

hexo new [layout] <title>

布局[Layout]

Hexo 有三种默认布局:postpagedraft。在创建这三种不同类型的文件时,它们将会被保存到不同的路径;而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts
草稿

刚刚提到了 Hexo 的一种特殊布局:draft,这种布局在建立时会被保存到 source/_drafts 文件夹,您可通过 publish 命令将草稿移动到 source/_posts 文件夹,该命令的使用方式与 new 十分类似,您也可在命令中指定 layout 来指定布局。

hexo publish [layout] <title>

草稿默认不会显示在页面中,您可在执行时加上 --draft 参数,或是把 render_drafts 参数设为 true 来预览草稿。

模版

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:

hexo new photo "My Gallery"

在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md,并根据其内容建立文章,以下是您可以在模版中使用的变量:

变量 描述
layout 布局
title 标题
date 文件建立日期

文件名称[Filename]

Hexo 默认以标题做为文件名称。您可编辑 new_post_name 参数来改变默认的文件名称,举例来说,设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量 描述
:title 标题(小写,空格将会被替换为短杠)
:year 建立的年份,比如, 2015
:month 建立的月份(有前导零),比如, 04
:i_month 建立的月份(无前导零),比如, 4
:day 建立的日期(有前导零),比如, 07
:i_day 建立的日期(无前导零),比如, 7

头文件[Front-matter]

Front-matter

标签页[Tags-Page]

标签是以词云的形式展示,标签的大小和颜色会根据标签下的文章数量变化,相关配置如下:

tag:
  tagcloud:
    min_font: 15
    max_font: 30
    unit: px  # 字号单位
    start_color: "#BBBBEE"
    end_color: "#337ab7"

其他配置具体见配置文件注释

插件[Plugins]

便签

在 markdown 中加入如下的代码来使用便签:

{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

或者使用 HTML 形式:

<p class="note note-primary">标签</p>

可选便签:

image-20230212001522236

使用时 {% note primary %}{% endnote %} 需单独一行,否则会出现问题

行内标签

在 markdown 中加入如下的代码来使用 Label:

{% label primary @text %}

或者使用 HTML 形式:

<span class="label label-primary">Label</span>

可选 Label:

image-20230212001759385

勾选框

在 markdown 中加入如下的代码来使用 Checkbox:

{% cb text, checked?, incline? %}

text:显示的文字
checked:默认是否已勾选,默认 false
incline: 是否内联(可以理解为后面的文字是否换行),默认 false

示例:

image-20230212001900189

按钮

你可以在 markdown 中加入如下的代码来使用 Button:

{% btn url, text, title %}

或者使用 HTML 形式:

<a class="btn" href="url" title="title">text</a>

url:跳转链接
text:显示的文字
title:鼠标悬停时显示的文字(可选)

image-20230212001953478

组图

如果想把多张图片按一定布局组合显示,你可以在 markdown 中按如下格式:

{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}

total:图片总数量,对应中间包含的图片 url 数量、
n1-n2-...:每行的图片数量,可以省略,默认单行最多 3 张图,求和必须相等于 total,否则按默认样式。

如下图为 {% gi 5 3-2 %} 示例,代表共 5 张图,第一行 3 张图,第二行 2 张图。

image-20230212002034620

LaTeX 数学公式

TIP

Hexo 5.0 以上,可尝试 Hexo 官方的 hexo-math 插件,支持更多定制化参数,使用方式参照链接内的文档,以下介绍的是主题内置的 LaTeX 功能。

当需要使用 LaTeX语法的数学公式时,可手动开启本功能,需要完成三步操作:

1. 设置主题配置

post:
  math:
    enable: true
    specific: false
    engine: mathjax

specific: 建议开启。当为 true 时,只有在文章 Front-matter里指定 math: true 才会在文章页启动公式转换,以便在页面不包含公式时提高加载速度。

engine: 公式引擎,目前支持 mathjaxkatex

2. 更换 Markdown 渲染器

由于 Hexo 默认的 Markdown 渲染器不支持复杂公式,所以需要更换渲染器(mathjax 可选择性更换)。

然后根据上方配置不同的 engine,推荐更换如下渲染器:

mathjax

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

并且还需安装 Pandoc

katex

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save
npm install @traptitech/markdown-it-katex --save

然后在站点配置中添加:

markdown:
  plugins:
    - "@traptitech/markdown-it-katex"

3. 安装完成后执行 hexo clean

书写公式的格式:

$$
E=mc^2
$$

WARNING

  • 如果公式没有被正确渲染,请仔细检查是否符合上面三步操作。
  • 不可以同时安装多个渲染插件,包括 hexo-math 或者 hexo-katex 这类插件,请注意检查 package.json
  • 如果更换公式引擎,对应渲染器也要一并更换。
  • 不同的渲染器,可能会导致一些 Markdown 语法不支持,或者渲染样式有细微差异。
  • 自定义页面默认不加载渲染,如需使用,需在 Front-matter 中指定 math: true
Mermaid 流程图

当需要使用 Mermaid渲染流程图时,可手动开启本功能:

post:
  mermaid:
    enable: true
    specific: false
    options:

specific: 建议开启。当为 true 时,只有在文章 Front-matter里指定 mermaid: true 才会在文章页启动流程图渲染,以便在页面不包含流程图时提高加载速度。

options: 官方 API 的配置项,具体可见 mermaidAPI.js

TIP

自定义页面默认不加载,如需使用,需在 Front-matter 中指定 mermaid: true

使用 Mermaid 可以通过内置的 Tag 书写:

{% mermaid %}
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
{% endmermaid %}

也可以通过代码块书写:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
引用

在文章中插入引言,可包含作者、来源和标题。

别号: quote

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
  • 没有提供参数,则只输出普通的 blockquote
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

  • 引用书上的句子
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

  • 引用 Twitter
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

@DevDocstwitter.com/devdocs/status/356095192085962752

  • 引用网络上的文章
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

Seth GodinWelcome to Island Marketing

代码块

在文章中插入代码。

别名: code

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

option:value 的格式指定额外选项,例如:line_number:false first_line:5

额外选项 描述 默认值
line_number 显示行号 true
line_threshold 只有代码块的行数超过该阈值,才显示行数 0
highlight 启用代码高亮 true
first_line 指定第一个行号 1
mark 突出显示特定的行,每个值用逗号分隔。 使用破折号指定数字范围 例如: mark:1,4-7,10 将标记第1、4至7和10行
wrap `` 包裹代码块 true

普通的代码块

{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
alert('Hello World!');

指定语言

{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}
[rectangle setX: 10 y: 10 width: 20 height: 20];

附加说明

{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}
Array.map
Array.maparray.map(callback[, thisArg])

附加说明和网址

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
Pull Quote

在文章中插入 Pull quote。

{% pullquote [class] %}
content
{% endpullquote %}
jsFiddle

在文章中嵌入 jsFiddle。

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}
Gist

在文章中嵌入 Gist。

{% gist gist_id [filename] %}
iframe

在文章中插入 iframe。

{% iframe url [width] [height] %}
Image

在文章中插入指定大小的图片。

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}
Link

在文章中插入链接,并自动给外部链接添加 target="_blank" 属性。

{% link text url [external] [title] %}
Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的,取决于你在配置文件中 code_dir 的配置。

{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}
Youtube

在文章中插入 Youtube 视频。

{% youtube video_id [type] [cookie] %}

视频

{% youtube lJIrF4YjHfQ %}

播放列表

{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

隐私模式

在这种模式下,禁用 YouTube cookie

{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}
Vimeo

在文章中插入 Vimeo 视频。

{% vimeo video_id %}
引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}

在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期。

例如,在文章中使用 {% post_link how-to-bake-a-cake %} 时,只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下、或者文章的永久链接是 2018/en/how-to-bake-a-cake,都没有影响。

默认链接文字是文章的标题,你也可以自定义要显示的文本。

默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用escape选项,禁止对特殊字符进行转义。

链接使用文章的标题

{% post_link hexo-3-8-released %}

Hexo 3.8.0 Released

链接使用自定义文字

{% post_link hexo-3-8-released '通往文章的链接' %}

通往文章的链接

对标题的特殊字符进行转义

{% post_link hexo-4-released 'How to use <b> tag in title' %}

How to use tag in title

禁止对标题的特殊字符进行转义

{% post_link hexo-4-released '<b>bold</b> custom title' false %}

bold custom title

引用资源

引用文章的资源,与 资源文件夹 一起使用。

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}
嵌入图片

hexo-renderer-marked 3.1.0+ 可以(可选)自动解析图片的文章路径,参考 本节 如何启用它。

“foo.jpg” 位于 http://example.com/2020/01/02/hello/foo.jpg

默认(无选项)

{% asset_img foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg">

自定义 class 属性

{% asset_img post-image foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg" class="post-image">

展示尺寸

{% asset_img foo.jpg 500 400 %}
<img src="/2020/01/02/hello/foo.jpg" width="500" height="400">

title 和 alt 属性

{% asset_img logo.svg "lorem ipsum'dolor'" %}
<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor">
Raw

如果您想在文章中插入 Swig 标签,可以尝试使用 Raw 标签,以免发生解析异常。

{% raw %}
content
{% endraw %}
文章摘要和截断

在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。

例如:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- more -->
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

首页中将只会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

正文中则会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

注意,摘要可能会被 Front Matter 中的 excerpt 覆盖。

6.分类和标签

只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

Hexo 不支持指定多个同级分类。下面的指定方法:

categories:
  - Diary
  - Life

会使分类 Life 成为 Diary 的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类,可以尝试以下 list 中的方法。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类: PlayStationGames 分别都是父分类 Diary 的子分类,同时 Life 是一个没有子分类的分类。

7.资源路径

全局资源文件夹

资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

文章资源文件夹

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

_config.ymlpost_asset_folder: true

当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg 图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法 ![](example.jpg) ,它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)

正确的引用图片方式是使用下列的标签插件而不是 markdown :

{% asset_img example.jpg This is an example image %}

通过这种方式,图片将会同时出现在文章和主页以及归档页中。

使用 Markdown 嵌入图片

hexo-renderer-marked 3.1.0 引入了一个新的选项,其允许你无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片

如需启用:

_config.yml

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后,资源图片将会被自动解析为其对应文章的路径。
例如: image.jpg 位置为 /2020/01/02/foo/image.jpg ,这表示它是 /2020/01/02/foo/ 文章的一张资源图片, ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg">

8.数据文件

有时您可能需要在主题中使用某些资料,而这些资料并不在文章内,并且是需要重复使用的,那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件,如此一来您便能在网站中复用这些文件了。

举例来说,在 source/_data 文件夹中新建 menu.yml 文件:

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些资料:

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

9. 部署

Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。

hexo deploy

在开始之前,您必须先在 _config.yml 中修改参数,一个正确的部署配置中至少要有 type 参数,例如:

deploy:
  type: git

您可同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer。

deploy:
- type: git
  repo:
- type: heroku
  repo:

关于更多的部署插件,请参考 插件 列表。

GIT

  1. 安装 hexo-deployer-git
$ npm install hexo-deployer-git --save
  1. 修改配置。
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://github.com/Bikevibe/bikevibe.github.io.git
  branch: master
参数 描述 默认
repo 库(Repository)地址
branch 分支名称 gh-pages (GitHub) coding-pages (Coding.net) master (others)
message 自定义提交信息 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
token 可选的令牌值,用于认证 repo。用 $ 作为前缀从而从环境变量中读取令牌
  1. 生成站点文件并推送至远程库。执行 hexo clean && hexo deploy
  • 除非你使用令牌或 SSH 密钥认证,否则你会被提示提供目标仓库的用户名和密码。
  • hexo-deployer-git 并不会存储你的用户名和密码. 请使用 git-credential-cache 来临时存储它们。
  1. 登入 Github/BitBucket/Gitlab,请在库设置(Repository Settings)中将默认分支设置为_config.yml配置中的分支名称。稍等片刻,您的站点就会显示在您的Github Pages中。
这一切是如何发生的?

当执行 hexo deploy 时,Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中,并且完全覆盖该分支下的已有内容。

10.Hexo指令说明

指令 说明 参数
hexo init [folder] 新建一个网站。
如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。
hexo new [layout] <title> 新建一篇文章。
如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
-p,--path:自定义新文章的路径。
-r,--replace:如果存在同名文章,将其替换
-s,–-slug:文章的 Slug,作为新文章的文件名和发布后的 URL
hexo generate
hexo g
生成静态文件。 -d,--deploy:文件生成后立即部署网站
-w,--watch:监视文件变动
-b,--bail:生成过程中如果发生任何未处理的异常则抛出异常
-f,--force:强制重新生成文件
Hexo 引入了差分机制,如果 public 目录存在,那么 hexo g 只会重新生成改动的文件。使用该参数的效果接近 hexo clean && hexo generate
-c,-concurrency:最大同时生成文件的数量,默认无限制
hexo publish 发表草稿。
hexo server
hexo s
启动服务器。默认情况下,访问网址为: http://localhost:4000/ -p,--port:重设端口
-s,--static:只使用静态文件
-l,--log:启用日记记录,使用覆盖记录格式
hexo deploy
hexo d
部署网站。 -g,--generate:部署之前预生成静态文件
hexo render 渲染文件。 -o,--output:设置输出路径
hexo migrate 从其他博客系统 迁移内容
hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
hexo list 列出网站资料。
hexo version 显示 Hexo 版本。
hexo --safe 在安全模式下,不会载入插件和脚本。当您在安装新插件遭遇问题时,可以尝试以安全模式重新执行。
hexo --debug 在终端中显示调试信息并记录到 debug.log。当您碰到问题时,可以尝试用调试模式重新执行一次,并 提交调试信息到 GitHub
hexo --silent 隐藏终端信息。
hexo --draft 显示 source/_drafts 文件夹中的草稿文章。

附:Hexo插件

附:加快网页加载加快网页加载

  • 如果你的域名已备案,可以使用七牛云、阿里云、腾讯云等大厂的 OSS 服务并绑定域名,将生成后的 public 目录下全部上传到 OSS,然后你不仅可以无服务器部署博客,加载速度也将无可比拟;
  • 没有备案,也可以通过香港及海外地区的云,或者私有 CDN 等方式进行加速,推荐一份 CDN 使用指南
  • 如果图片是存在 source 目录中,建议搭配 hexo-all-minifier插件,可自动对图片进行压缩;
  • 如果是存放在外部的图片,建议先使用 tinypng进行压缩。

附:自定义配置文件的路径

# 使用 custom.yml 代替默认的 _config.yml
hexo server --config custom.yml
# 使用 custom.yml 和 custom2.json,其中 custom2.json 优先级更高
hexo generate --config custom.yml,custom2.json,custom3.yml

自定义配置文件的路径,指定这个参数后将不再使用默认的 _config.yml
你可以使用一个 YAML 或 JSON 文件的路径,也可以使用逗号分隔(无空格)的多个 YAML 或 JSON 文件的路径。例如:

# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml
# 使用 custom.yml, custom2.json 和 custom3.yml,其中 custom3.yml 优先级最高,其次是 custom2.json
hexo generate --config custom.yml,custom2.json,custom3.yml

当你指定了多个配置文件以后,Hexo 会按顺序将这部分配置文件合并成一个 _multiconfig.yml。如果遇到重复的配置,排在后面的文件的配置会覆盖排在前面的文件的配置。这个原则适用于任意数量、任意深度的 YAML 和 JSON 文件。

附:Front-matter

Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说:

---
title: Hello World
date: 2013/7/13 20:46:25
---
参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章的永久链接,永久链接应该以 /.html 结尾 null
excerpt 纯文本的页面摘要。使用 该插件 来格式化文本
disableNunjucks 启用时禁用 Nunjucks 标签 {{ }}/{% %}标签插件 的渲染功能 false
lang 设置语言以覆盖 自动检测 继承自 _config.yml
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。