1. 前言

Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。即把用户的markdown文件,按照指定的主题解析成静态网页。

2. 安装hexo

安装使用hexo之前需要先安装Node.js和Git,当已经安装了Node.js和npm(npm是node.js的包管理工具),可以通过以下命令安装hexo

$ npm install -g hexo-cli

可以通过以下命令查看主机中是否安装了node.js和npm

$ node --version    #检查是否安装了node.js
$ npm --version     #检查是否安装了npm

如下所示表示已经安装了node.js和npm

root@***:~# node --version
v8.11.3
root@***:~# npm --version
6.7.0

3. 建站

安装完Hexo之后,执行下列命令,Hexo将会在指定目录中新建所需要的文件,指定的目录即为Hexo的工作站

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成之后,指定目录中的情况如下

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

3.1. _config.yml

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

3.2. package.json

应用程序的信息,以及需要安装的模块信息。

3.3. scaffolds

模版文件夹。新建文章时,Hexo 会根据 scaffold 中的模板文件来建立新的文件。Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。也就是说,通过hexo命令每新建一个文章,都会包含指定模板文件中的内容。

官网模板详述

3.4. source

资源文件夹是存放用户资源的地方,如markdown文章。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

注意:除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。

3.5. themes

主题文件夹。Hexo 会根据主题来解析source目录中的markdown文件生成静态页面。官网主题详述

4. 写作

可以执行下列命令来创建一篇新文章。

$ hexo new [layout] <title>

可以在命令中指定文章的布局(layout),不指定默认为 post,也可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。创建的新文章会自动加上指定布局对应的模板文件中的内容。

4.1. 布局(Layout)

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

布局路径postsource/_postspagesourcedraftsource/_drafts

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

4.2. 模版(Scaffold)

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

$ hexo new photo "My Gallery"

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

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

4.3. 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开启文章的评论功能truetags标签(不适用于分页)categories分类(不适用于分页)permalink覆盖文章网址

分类和标签

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

categories:
- Diary
tags:
- PS3
- Games

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

  • Diary
  • Life

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

4.4. 文章摘要

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

---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
- hello
- hexo
- markdown
---我是短小精悍的文章摘要(๑•̀ㅂ•́) ✧<!-- more -->紧接着文章摘要的正文内容

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

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

4.5. 资源引用

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

  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)即可访问 。

5. 网站发布

首先执行下列命令生成相应的静态网页,生成的静态网页以及相关资源都会在public目录下

$ hexo generate

5.1. 用hexo-server

hexo-server模块的主要命令如下,输入以下命令以启动服务器,您的网站会在 http://localhost:4000 下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。

$ hexo server

如果您想要更改端口,或是在执行时遇到了 EADDRINUSE 错误,可以在执行时使用 -p 选项指定其他端口,如下:

$ hexo server -p 5000

但是个人认为此方式比较适合用于调试网站,并不适合长时间的网站服务器,同时为了让这个命令在后台长时间运行,需要编写相应的脚本。

5.2. 部署到Git上

这个暂时没有尝试过,但是网络上很多都是关于部署到Git上的,可以自行谷歌或百度。

5.3. 部署到Apache或者Nginx上

通过hexo g命令生成的都是静态网页,可以把生成的public目录中的文件,全都拷贝到网站根目录,然后启动apache或者nginx服务。

6. 其他基础命令

6.1. 清除缓存文件

为了避免不必要的错误,在生成静态文件前,强烈建议先运行以下命令:

$ hexo clean

上述命令会清除本地站点文件夹下的缓存文件(db.json)和已有的静态文件(public)。

7. 参考链接

文档​hexo.ioHexo教程:(三)使用Hexo写博客​lfkid.github.io


更多内容请关注微信公众号【多选参数】

hexo评论_Hexo系列 | Hexo的基本使用相关推荐

  1. hexo评论_hexo修改主题

    1.进入Hexo官网https://hexo.io/themes/ 选择喜欢的主题 2.在hexo目录下的themes文件夹下打开git bash,输入以下命令,下载主题: git clone 复制主 ...

  2. hexo评论_hexo使用畅言评论系统

    title: hexo使用畅言评论系统 date: 2017-09-24 16:03:40 tags: hexo githubpage 一.前言 经过一天的部署环境,从升级npm.下载hexo,从中经 ...

  3. hexo评论_Hexo博客调用Valine最新评论

    背景 Hexo作为静态博客,访问速度还是挺快的,但是还是有局限性的,比如调用最新评论.根据点击量和评论数进行热门文章排序等等.最近几天,在icraus主题的魔改版amazing主题上看到了最新评论的调 ...

  4. hexo评论_hexo博客之next主题添加畅言评论

    tips: 接下去会在github写博客,简书不再更新和修改文章,欢迎大家逛逛我的新博客博客地址,我会尽量用更容易理解的方式写好每一篇博客,大家一起学习交流

  5. hexo评论_【前端简历加分】hexo框架搭建个人博客站点,手把手教学

    最近,粉丝们在金九银十期间也是不断的面试,有比较多的毕业生说我在这个期间出多一些面试题,上几期都是倾向于面试文章,这期出一次简历加分项操作,使用hexo框架搭建个人博客. 作为应届毕业生或者1-3年工 ...

  6. hexo 菜单_Hexo 搭建个人博客教程 - 6 - 设置菜单,发布博客 - 2018

    设置menu 位置:~\themes\next下的_config.yml文件,我的在D:\hexo\hexo\themes\next 去掉about和categories的注释menu: home:  ...

  7. hexo教程系列——hexo配置教程

    博客新址: http://blog.xuezhisd.top 邮箱:xuezhisd@126.com 本文对hexo的配置文件进行了说明. 网站的配置文件 网站配置文件的存储位置:hexo_blog/ ...

  8. Hexo系列 | Hexo部署至服务器

    目录 前言 一.git安装 二.git配置 三.创建git仓库 四.配置本地Hexo,构建至服务器 五.部署 前言 将Hexo部署至服务器,记录部署过程 个人博客效果 一.git安装 安装git yu ...

  9. hexo修改index.html,Hexo自定义页面做首页

    前言 如果你想了解如何在 GitHub Pages上传自己写的网页作为首页,hexo博客作为其子页?即自己写的页面作为http://user.github.io的页面,将hexo博客放在http:// ...

最新文章

  1. DokuWiki 开源wiki引擎程序
  2. Stark 组件:快速开发神器 —— 模板设计
  3. 唐山师范学院计算机考试,[河北]唐山师范学院2017年3月计算机一级考试报名时间...
  4. 知名大学博士毕业都去哪儿?55所高校大数据揭秘
  5. javascrpt 继承
  6. 中国武侠片的50条爆笑定律
  7. 杜拉拉升职记(1和2)
  8. 薛定谔方程编译成python码并画出电子轨道
  9. iptables drop与reject 的区别
  10. 最新TIOBE编程语言排行:C语言第一,Python反超Java,挤进第二
  11. 《Python编程-从入门到实践》
  12. C语言遥控器程序,单片机学习型遥控器程序详解(完整版)
  13. [CEOI2017]One-Way Streets
  14. [pandas] DataFrame 取指定列为某些值的行
  15. 朋友圈的权限研究、最后有个实现朋友圈的实现的推测(全网最全)
  16. linux c 开发数据,Linux c 开发
  17. 第18章 灾难恢复计划
  18. Office 2010 正式版相关资源
  19. openstack AZ
  20. c++ 解析eps文件

热门文章

  1. Angular 自定义 structural 指令的一个例子
  2. 重构老系统遗留代码的一些方法学习笔记
  3. OPA 18 - iTeardownMyAppFrame
  4. 阮一峰react demo代码研究的学习笔记 - Chrome extension - react tool
  5. SAP Fiori UI上的三个catelog对应后台的JSON返回
  6. 如何把自己github博客配置到一个腾讯云购买的自定义域名上
  7. SAP odata模型缓存校验机制
  8. Account detail页面加载的性能分析 - 2017-09-25
  9. Try to use JDK instead of JRE to debug source code
  10. SAP Spartacus Popover Component 显示与否的逻辑判定