Hexo + Github + Git,博客三剑客。
Why
What
Hexo简介
快速、简洁且高效的博客框架
超快速度
Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
支持 Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
一键部署
只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
插件和可扩展性
强大的 API 带来无限的可能,与数种模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)轻易集成
主题
在众多美观、强大、可定制的主题中选择;使用任何兼容的模板引擎创建自己的主题。
1 | npm install hexo-cli -g |
_config.yml
网站的 配置 信息,您可以在此配置大部分的参数。
package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
1 | package.json |
scaffolds
模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes
主题 文件夹。Hexo 会根据主题来生成静态页面。
init
1 | $ hexo init [folder] |
新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。
new
1 | $ hexo new [layout] <title> |
新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
1 | $ hexo new "post title with whitespace" |
默认情况下,Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说,Hexo 会创建一个以标题为名字的目录,并在目录中放置一个 index.md 文件。你可以使用 –path 参数来覆盖上述行为、自行决定文件的目录:
1 | hexo new page --path about/me "About me" |
以上命令会创建一个 source/about/me.md 文件,同时 Front Matter 中的 title 为 “About me”
注意!title 是必须指定的!如果你这么做并不能达到你的目的:1
hexo new page --path about/me
此时 Hexo 会创建 source/_posts/about/me.md,同时 me.md 的 Front Matter 中的 title 为 “page”。这是因为在上述命令中,hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout。
generate
1 | $ hexo generate |
publish
1 | $ hexo publish [layout] <filename> |
server
1 | $ hexo server |
deploy
1 | $ hexo deploy |
render
1 | $ hexo render <file1> [file2] ... |
migrate
1 | $ hexo migrate <type> |
clean1
2
3$ hexo clean
清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
list
1 | $ hexo list <type> |
version
1 | $ hexo version |
选项
安全模式
1 | $ hexo --safe |
调试模式
$ hexo –debug
在终端中显示调试信息并记录到 debug.log。当您碰到问题时,可以尝试用调试模式重新执行一次,并 提交调试信息到 GitHub。
简洁模式
1 | $ hexo --silent |
自定义配置文件的路径
1 | # 使用 custom.yml 代替默认的 _config.yml |
显示草稿
1 | $ hexo --draft |
自定义 CWD
1 | $ hexo --cwd /path/to/cwd |
写作
你可以执行下列命令来创建一篇新文章或者新的页面。
1 | $ hexo new [layout] <title> |
布局(Layout)
Hexo 有三种默认布局:post、page 和 draft。在创建者三种不同类型的文件时,它们将会被保存到不同的路径;而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。
1 | 布局 路径 |
不要处理我的文章
如果你不想你的文章被处理,你可以将 Front-Matter 中的layout: 设为 false 。
文件名称
Hexo 默认以标题做为文件名称,但您可编辑 new_post_name 参数来改变默认的文件名称,举例来说,设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。
1 | 变量 描述 |
草稿
刚刚提到了 Hexo 的一种特殊布局:draft,这种布局在建立时会被保存到 source/_drafts 文件夹,您可通过 publish 命令将草稿移动到 source/_posts 文件夹,该命令的使用方式与 new 十分类似,您也可在命令中指定 layout 来指定布局。
1 | $ hexo publish [layout] <title> |
模版(Scaffold)
在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:
1 | $ hexo new photo "My Gallery" |
Front-matter
Front-matter 是文件最上方以 — 分隔的区域,用于指定个别文件的变量,举例来说:
1 | --- |
以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。
参数 描述 默认值
layout 布局
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址
keywords 仅用于 meta 标签和 Open Graph 的关键词(不推荐使用)
分类和标签
只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。1
2
3
4
5categories:
- Diary
tags:
- PS3
- Games
分类方法的分歧
如果您有过使用 WordPress 的经验,就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法:1
2
3categories:
- Diary
- Life
会使分类Life成为Diary的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。
如果你需要为文章添加多个分类,可以尝试以下 list 中的方法。
1 | categories: |
此时这篇文章同时包括三个分类: PlayStation 和 Games 分别都是父分类 Diary 的子分类,同时 Life 是一个没有子分类的分类。
JSON Front-matter
除了 YAML 外,你也可以使用 JSON 来编写 Front-matter,只要将 — 代换成 ;;; 即可。
1 | "title": "Hello World", |
标签插件(Tag Plugins)
标签插件和 Front-matter 中的标签不同,它们是用于在文章中快速插入特定内容的插件。
引用块
在文章中插入引言,可包含作者、来源和标题。
别号: quote
content
样例
没有提供参数,则只输出普通的 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.
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.
引用书上的句子
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
David LevithanWide Awake
引用 Twitter
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
@DevDocstwitter.com/devdocs/status/356095192085962752
引用网络上的文章
Every interaction is both precious and an opportunity to delight.
Every interaction is both precious and an opportunity to delight.
Seth GodinWelcome to Island Marketing
代码块
在文章中插入代码。
别名: code
1 | code snippet |
Specify additional options in option:value format, e.g. line_number:false first_line:5.
Extra Options Description Default
line_number Show line number true
highlight Enable code highlighting true
first_line Specify the first line number 1
mark Line highlight specific line(s), each value separated by a comma. Specify number range using a dash
Example: mark:1,4-7,10 will mark line 1, 4 to 7 and 10.
wrap Wrap the code block in
普通的代码块
1 | alert('Hello World!'); |
alert(‘Hello World!’);
指定语言
1 | [rectangle setX: 10 y: 10 width: 20 height: 20]; |
[rectangle setX: 10 y: 10 width: 20 height: 20];
附加说明
1 | array.map(callback[, thisArg]) |
Array.map
array.map(callback[, thisArg])
附加说明和网址
1 | _.compact([0, 1, false, 2, '', 3]); |
_.compactUnderscore.js
_.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]
反引号代码块
另一种形式的代码块,不同的是它使用三个反引号来包裹。
1 | [language] [title] [url] [link text] code snippet |
Pull Quote
在文章中插入 Pull quote。
content
jsFiddle
在文章中嵌入 jsFiddle。
Gist
在文章中嵌入 Gist。
iframe
在文章中插入 iframe。
Image
在文章中插入指定大小的图片。
Link
在文章中插入链接,并自动给外部链接添加 target=”_blank” 属性。
text url [external] [title]
Include Code
插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的,取决于你在配置文件中 code_dir 的配置。
样例
嵌入 test.js 文件全文
只嵌入第 3 行
嵌入第 5 行至第 8 行
嵌入第 5 行至文件结束
嵌入第 1 行至第 8 行
Youtube
在文章中插入 Youtube 视频。
Vimeo
在文章中插入 Vimeo 视频。
引用文章
引用其他文章的链接。
在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期。
例如,在文章中使用 时,只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下、或者文章的永久链接是 2018/en/how-to-bake-a-cake,都没有影响。
默认链接文字是文章的标题,你也可以自定义要显示的文本。此时不应该使用 Markdown 语法 。
默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用escape选项,禁止对特殊字符进行转义。
链接使用文章的标题
Hexo 3.8.0 Released
链接使用自定义文字
通往文章的链接
对标题的特殊字符进行转义
How to use tag in title
禁止对标题的特殊字符进行转义
bold custom title
引用资源
引用文章的资源。
Raw
如果您想在文章中插入 Swig 标签,可以尝试使用 Raw 标签,以免发生解析异常。
文章摘要和截断
在文章中使用 ,那么 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。
例如:
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.
首页中将只会出现
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 覆盖。
资源文件夹
资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 的方法访问它们。
文章资源文件夹
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。
1 | _config.yml |
相对路径引用的标签插件
通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。
1 | {% asset_path slug %} |
比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg 图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法 ,它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)
正确的引用图片方式是使用下列的标签插件而不是 markdown :
通过这种方式,图片将会同时出现在文章和主页以及归档页中。
数据文件
有时您可能需要在主题中使用某些资料,而这些资料并不在文章内,并且是需要重复使用的,那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件,如此一来您便能在网站中复用这些文件了。
举例来说,在 source/_data 文件夹中新建 menu.yml 文件:
1 | Home: / |
您就能在模板中使用这些资料:1
2
3<% for (var link in site.data.menu) { %>
<a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>
渲染结果如下 :1
2
3<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>
服务器
hexo-server
Hexo 3.0 把服务器独立成了个别模块,您必须先安装 hexo-server 才能使用。1
$ npm install hexo-server --save
安装完成后,输入以下命令以启动服务器,您的网站会在 http://localhost:4000 下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。
1 | $ hexo server |
静态模式
1 | 在静态模式下,服务器只处理 public 文件夹内的文件,而不会处理文件变动,在执行时,您应该先自行执行 hexo generate,此模式通常用于生产环境(production mode)下。 |
自定义 IP
1 | 服务器默认运行在 0.0.0.0,您可以覆盖默认的 IP 设置,如下: |
生成文件
1 | 使用 Hexo 生成静态文件快速而且简单。 |
1 | 监视文件变动 |
完成后部署
您可执行下列的其中一个命令,让 Hexo 在生成完毕后自动部署网站,两个命令的作用是相同的。
1 | $ hexo generate --deploy |
缩进
YAML依靠缩进来确定元素间的从属关系。因此,请确保每个deployer的缩进长度相同,并且使用空格缩进。
Git
1 | 安装 hexo-deployer-git。 |
修改配置。
1 | deploy: |
生成站点文件并推送至远程库。执行 hexo clean && hexo deploy。
You will be prompted with username and password of the target repository, unless you authenticate with a token or ssh key.
hexo-deployer-git does not store your username and password. Use git-credential-cache to store them temporarily.
登入 Github/BitBucket/Gitlab,请在库设置(Repository Settings)中将默认分支设置为_config.yml配置中的分支名称。稍等片刻,您的站点就会显示在您的Github Pages中。
这一切是如何发生的?
1 | 当执行 hexo deploy 时,Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中,并且完全覆盖该分支下的已有内容。 |
For 使用 Git 管理站点目录的用户
由于 Hexo 的部署默认使用分支 master,所以如果你同时正在使用 Git 管理你的站点目录,你应当注意你的部署分支应当不同于写作分支。
一个好的实践是将站点目录和 Pages 分别存放在两个不同的 Git 仓库中,可以有效避免相互覆盖。
Hexo 在部署你的站点生成的文件时并不会更新你的站点目录。因此你应该手动提交并推送你的写作分支。
此外,如果您的 Github Pages 需要使用 CNAME 文件自定义域名,请将 CNAME 文件置于 source 目录下,只有这样 hexo deploy 才能将 CNAME 文件一并推送至部署分支。
永久链接(Permalinks)
您可以在 _config.yml 配置中调整网站的永久链接或者在每篇文章的 Front-matter 中指定。
变量
除了下列变量外,您还可使用 Front-matter 中的所有属性。
1 | 变量 描述 |
您可在 permalink_defaults 参数下调整永久链接中各变量的默认值:
1 | permalink_defaults: |
示例
假设 source/_posts 文件夹中有个 hello-world.md,包含以下内容:
1 | title: Hello World |
多语种支持
若要建立一个多语种的网站,您可修改 new_post_name 和 permalink 参数,如下:
1 | new_post_name: :lang/:title.md |
当您建立新文章时,文章会被储存到:
1 | $ hexo new "Hello World" --lang tw |
How
优化网站的访问速度,其本质就是加快网站资源的下载速度。一般而言,一个网页包含的资源大概有 HTML 源代码、CSS 文件、JS 文件、XHR 请求、以及媒体资源如图片、视频、字体等。那么应该加快网站的哪些资源呢?首先,HTML 代码是用户打开网站时读取的第一个文件,而 XHR 请求通常会取决于用户每次的访问而有所不同,因此这两类文件无法被直接优化。
1 | 而剩下的资源,比如 CSS 文件、JS 文件,他们以链接的形式通过 <link> 或者 <script> 标记嵌入在 HTML 中。另外,媒体资源也会通过相应的标记比如 <img>、<video> 嵌入其中。我们可以把这些以链接形式嵌入在 HTML 代码中的文件称之为静态资源文件,这一类文件就是我们着重需要优化的地方了。 |
还要补充一点的是,在国内加快 GitHub Pages 访问速度最有效的方法当然是不使用 GitHub Pages,而是使用一台国内的服务器来部署,毕竟连接国外的服务器在一开始就会带来至少 200ms 到 300ms 的延迟。但即使你使用国内服务器进行部署,通过使用一些优化访问速度的技巧仍然会带来一定的帮助,比如可以减少服务器消耗的资源,节省流量费用等等。
Experience
Hexo的设置
一、Hexo配置文件说明
Hexo的配置文件位置是:~/_config.yml
在编辑配置文件的时候,在相应的设置项的:之后一定要添加一个空格。
其他一些详细的设置可以参考官方文档(中文)
在这里我着重讲解我的配置文件,可以作为你自己Hexo博客的配置参考
MarkEditor
现在越来越多的写作平台开始支持 MarkDown,不得不说这确实是一门提高文字生产效率的语言,写 MarkDown 我强烈推荐 MarkEditor,我之前尝试过各种 MarkDown 写作软件,觉得都不如这款好用,如 Typora、MWeb、GitBook 等等。MarkEditor 支持写作及预览模式,更重要的是支持文件管理,很多软件如 Typora 只能打开单个的 Makrdown 文件,不能打开整个文件夹,这就很鸡肋了。另外 MarkEditor 支持直接插入图片,如我们截了一张图或者刚从网上复制了一张图,在 MarkEditor 里面直接粘贴就可以了,它会自动把这张图保存到当前目录下,同时生成 Makrdown 格式的的图片链接,不能更方便了!另外还支持主题自定义、样式自定义,还可以快速插入某些 Makrdown 元素,还支持 Latex 公式,还可以快速导出电子书,快速生成文稿网页,快速局域网共享,功能应有尽有,强烈推荐!
这个软件我购买了 Pro 版,解锁了全部功能,订购地址:https://www.markeditor.com/,个人觉得物超所值!
推荐指数:★★★★★
ForkLift
Mac 上的 Finder 你是不是已经受够了?在一些方面做得相当不友好,例如在当前打开的目录下新建一个空白文件,在当前的目录下打开命令行工具等等,有了 ForkLift 这些都是小意思了。另外 ForkLift 还集成了 Filezlla 的功能,利用它我们还可以像普通文件管理器一样管理远程的主机内容,它还支持 FTP、SFTP、SMB、WebDAV、NFS 等等各种协议。同时界面也非常美观,有了它,几乎可以抛弃 Finder 和 Filezilla 了,强烈推荐!
推荐指数:★★★★☆
iPic
有时候我们在写 MarkDown 的时候,可能突然需要一张插入一张图片,比如我们想插入一张屏幕截图,我们就需要把这张图片先存下来,然后加上图片的路径,如果转发给别人还需要连着图片一并发给对方,这其实是不怎么方便的,倘若这张图片是一张来自网络的图片,我们直接用 HTTP 访问的话,那岂不是方便太多了?要将图片传到网上分几步?三步。第一步,把上传页面打开,第二步,把图片传到网上并把传后链接拷贝下来,第三步,把上传页面关闭。简直是太麻烦了对不对?另外找个合适的图床也是个麻烦事啊,七牛?又拍?你不得又得申请和注册。那么有了 iPic,一切就不是难事了,它可以监听 Mac 的粘贴板,一旦我们复制了一张图或者新截了一张图,它就能显示到待上传队列里面,我们点一下它就会把图片上传到网络上,然后生成上传后的链接,默认使用的是新浪的图床,网速也非常快。有了它,传图什么的都不是事了!另外付费版还支持各种自定义图床,如七牛云、又拍云、阿里云、腾讯云等等。
推荐指数:★★★★☆
PixelMator
在 Windows 上我们常用 PS 来修改和处理图片,Mac 上我是没有使用 PS,使用了 PixelMator,个人觉得使用这款软件能完全胜任 PS 的工作,一般的图片设计、排版、抠图、特效、蒙版等操作都支持,我个人比较喜欢使用这款软件做设计。推荐指数:★★★★
Boom2
我有边工作边听歌的习惯,所以音乐几乎离不开我的生活,入了个好耳机,那当然就得配上好音乐。大家肯定也听说过音效均衡器,我们可以调整不同的音效参数来达到不同的声音效果,如电子音、人声、环绕、重低音等等,在 Mac 上我觉得最好用的就是 Boom2 了,它内置了各种音效均衡器,还有一些高保真效果的渲染,效果非常给力。我一般听歌的时候就会把 Boom2 开起来,享受不一样的音效感觉,美哉。推荐指数:★★★★
undraw
一个免费的插图网站,可以在上面寻找合适的插图,用于商业用途。