LeePoet实操快速上手:Hexo静态博客搭建全攻略

HEXO是一个基于Node.js的快速、简洁且高效的博客框架。它使用Markdown(或其他渲染引擎)解析文章,在几秒内即可利用靓丽的主题生成静态网页,非常适合搭建个人博客网站。超快速度,Node.js 所带来的超快生成速度。 上百个页面在几秒内完成渲染。Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。强大的 API 带来无限的可能。 支持数种模板引擎(EJS,Pug,Nunjucks等)。 可以与现有的NPM包 (Babel, PostCSS, Less/Sass 等) 轻松地集成。

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

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

如果您的电脑中已经安装上述必备程序,那么恭喜您! 你可以直接前往 安装 Hexo 步骤。

如果您的电脑中尚未安装所需要的程序,请根据以下安装指示完成安装。

  • Windows:下载并安装 git
  • Mac:使用 Homebrew, MacPorts 或者下载 安装程序
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

Mac 用户

如果在编译时可能会遇到问题。 请先到 App Store 安装 Xcode。 Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Node.js 为大多数平台提供了官方的 安装程序

其它的安装方法:

  • Windows:通过 nvs(推荐)或者 nvm 安装。
  • Mac:使用 HomebrewMacPorts 安装。
  • Linux(DEB/RPM-based):从 NodeSource 安装。
  • 其它:使用相应的软件包管理器进行安装。 可以参考由 Node.js 提供的 指导

对于 Mac 和 Linux 同样建议使用 nvs 或者 nvm,以避免可能会出现的权限问题。

Windows

使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)

Mac / Linux

如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误,请遵循 由 npmjs 发布的指导 修复该问题。

Linux

如果您使用 Snap 来安装 Node.js,在 初始化 博客时您可能需要手动在目标文件夹中执行 npm install

安装 Hexo

我现在是用WINDOWS安装,所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

还是使用用管理员身份运行,这条命令随便在哪个盘运行都无所谓。这相当于是HEXO的脚手架,只要安装了这个框架之后,后续安装HEXO随便在哪个盘使用npm install hexo安装,安装几个,都是独立的HEXO环境。

HEXO的脚手架安装成功

进阶安装和使用

对于熟悉 npm 的进阶用户,可以仅局部安装 hexo 包。

$ npm install hexo

比如我现在要在E盘的WEB文件夹里安装一个HEXO:

安装完后就有HEXO的文件了。

验证安装

hexo -v

初始化博客项目

创建并初始化项目

hexo init my-blog  # 创建名为my-blog的博客项目
cd my-blog
npm install        # 安装项目依赖

遇到了个问题,应该是我的Git没有配置环境变量,下面我配置一下

打开控制面板 → 系统与安全 → 系统 → 高级系统设置

点击”环境变量”,在系统变量中找到Path变量

添加Git安装路径,如:E:\Program Files\Git\cmd

重启命令行验证配置

cd到leepoetnote并使用npm install安装依赖,注:以后使用HEXO管理leepoetnote时,都要先cd到这个文件夹之后才能执行以下的操作。

项目结构解析

初始化后的项目包含以下主要文件和文件夹:

  • _config.yml:站点配置文件,包含博客的基本设置
  • package.json:应用程序信息和依赖配置
  • scaffolds/:模板文件夹,用于新建文章的模板
  • source/:资源文件夹,存放文章(_posts目录)和其他资源
  • themes/:主题文件夹,存放博客主题文件9

常用命令

基础命令

hexo new "文章标题"    # 创建新文章
hexo clean            # 清理缓存文件
hexo generate         # 生成静态文件(缩写:hexo g)
hexo server           # 启动本地服务器(缩写:hexo s)
hexo deploy           # 部署到远程平台(缩写:hexo d)

组合命令

hexo clean && hexo g && hexo s  # 清理、生成并启动本地预览
hexo clean && hexo g && hexo d  # 清理、生成并部署
.
├── _config.yml       # 站点的核心配置文件,网站标题、描述等都在这里设置
├── package.json      # 项目信息和依赖列表 
├── scaffolds         # 模板文件夹,新建文章时的默认格式 
├── source            # 源文件存放目录,你的文章就在这里!
│   └── _posts        # 你的所有 Markdown 博客文章都放在这个文件夹内 
├── themes            # 主题文件夹,所有安装的主题都放在这里 
└── public            # 执行生成命令后,Hexo 创建的静态网站文件会放在这里(此目录初始可能不存在)

在这些文件和文件夹中,你最需要关注的是:

  • _config.yml:博客的“大脑”,大部分设置在这里修改。
  • source/_posts/:你写的文章(.md文件)都存放在这里,注:方便文章管理,可以自己在这个文件夹里手动新建对应文章的分类。如下图所示,以后通过HEXO G去生成文章。这些是不会被识别的,只是方便我们自己管理文章的一个小技巧。

source/:这个文件夹下除了有_posts文件夹即:文章md文件之外之外,在source的目录下还可以放图片,通过/image/***.jpg即可以直接调用,同样是方便管理的小技巧。

我们一般备份只需要拿以下这些文件即可:

Tip:如果有需要也可以加上package.json以及db.json,其实也可有可无

本地预览

启动本地服务器后,在浏览器中访问 http://localhost:4000即可查看博客效果。

为HEXO安装一个主题:

先找到主题对应的开源仓库通过介绍安装

使用 NPM 包进行安装如:

使用 NPM 包进行安装 npm i hexo-theme-solitude

应用主题 theme: solitude

这里已经多出了一个_config.landscape.yml文件,基本上这样就可以了,有些主题是需要自己手动把主题配置改名为 _config.主题名.yml的之后再手动移到根目录的。具体还得看主题作者的介绍。下面就是修改HEXO的核心配置文件 _config.yml让主题生效。

保存即可。然后通过hexo clean && hexo g && hexo s重新启动服务。

其它的设置全在_config.landscape.yml这个主题配置文件里修改。


其它配置

本地搜索

本地搜索是实现起来最快捷的方案。

安装插件

在Hexo博客的根目录下打开终端,执行以下命令安装核心插件。常用的插件有 hexo-generator-searchhexo-generator-searchdb

npm install hexo-generator-searchdb --save
  1. 配置站点文件 打开博客根目录下的 _config.yml文件,在末尾添加以下配置(具体参数可根据插件文档和需求调整): search: path: search.xml # 生成的索引文件路径和名称 field: post # 搜索范围:post(文章)、page(页面)、all(全部) content: true # 是否包含文章全文,建议true以提高搜索命中率 format: html # 内容格式
  2. 启用主题的搜索功能 打开你正在使用的主题的配置文件(如 _config.[theme-name].yml),找到本地搜索相关的选项并启用它。例如,在流行的Next主题中: local_search: enable: true 对于Butterfly主题,配置类似。完成以上步骤后,执行 hexo clean && hexo g重新生成博客,然后启动本地服务器 hexo s预览,通常可以在页面右上角或侧边栏找到搜索图标。

Hexo 有三种默认布局:postpage 和 draft,它们分别对应不同的路径,而自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

布局路径
postsource/_posts
pagesource
draftsource/_drafts

如果你不想你的文章被处理,你可以将 Front-Matter 中的layout: 设为 false 。

模版(Scaffold)

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

$ hexo new photo "My Gallery"

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

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

 Front-matter

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

---
title: Hello World
date: 2013/7/13 20:46:25
---

注意:一般Front-matter使用的yaml语法,yaml语法需要注意空格,如title: Hello World冒号需要有一个空格,当然除YAML 外,你也可以使用 JSON 来编写 Front-matter。

以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

参数描述默认值
layout布局
title标题
date建立日期文件建立日
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签(不适用于分页)
categories分类(不适用于分页)
permalink覆盖文章网址

分类和标签

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

categories:
- Diary
tags:
- PS3
- Games

WordPress支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是Hexo不支持指定多个同级分类。下面的指定方法:
categories:

  • Diary
  • Life

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

文章摘要

设置文章摘要,我们只需在想显示为摘要的内容之后添 <!-- more --> 即可。像下面这样:

---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
- hello
- hexo
- markdown
---

我是短小精悍的文章摘要(๑•̀ㅂ•́)و✧

<!-- more -->

紧接着文章摘要的正文内容

这样,<!-- more --> 之前、文档配置参数之后中的内容便会被渲染为站点中的文章摘要。

注意!文章摘要在文章详情页是正文中最前面的内容。

资源引用

写个博客,有时候会想添加个图片或者其他形式的资源等等。有以下两种方式进行解决:

  1. 使用绝对路径引用资源,在 Web 世界中就是资源的 URL
  2. 使用相对路径引用资源

对于使用相对路径引用资源的,我们可以使用 Hexo 提供的资源文件夹功能。

使用文本编辑器打开站点根目录下的 _ config.yml 文件,将 post_asset_folder 值设置为 true

post_asset_folder: true

修改之后会开启 Hexo 的文章资源文件管理功能。Hexo 将会在我们每一次通过 hexo new <title> 命令创建新文章时自动创建一个同名文件夹,于是我们便可以将文章所引用的相关资源放到这个同名文件夹下,然后通过相对路径引用。例如,你把一个 example.jpg 图片放在了这个同名文件夹中,使用相对路径的常规 markdown 语法 ![](./example.jpg)即可访问 。


其它

Linux 用户可以将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>

echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile