2. Hexo 搭建博客(一)

前言

一直想搭建个人网站, 当我了解到 Hexo 是一款快速、简洁且高效的博客框架。

什么是 Hexo

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

安装 Hexo

在安装前,您必须检查电脑中是否已安装下列应用程序:

Node.js 版本限制:我们强烈建议永远安装最新版本的 Hexo,以及 推荐的 Node.js 版本

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

npm install -g hexo-cli

新建网站

# 新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后,指定文件夹的目录如下:

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

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

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "6.2.0"
  },
  "dependencies": {
    "hexo": "^6.2.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^5.0.0",
    "hexo-renderer-stylus": "^2.1.0",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^0.0.3"
  }
}
scaffolds

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

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

source

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

themes

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

启动服务

hexo shexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/

配置

独立的 _config.[theme].yml 文件

我们强烈建议你将所有的主题配置集中在一处。如果你不得不在多处配置你的主题,那么这些信息对你将会非常有用:Hexo 在合并主题配置时,Hexo 配置文件中的 theme_config 的优先级最高,其次是 _config.[theme].yml 文件,最后是位于主题目录下的 _config.yml 文件。

顺序: theme_config > _config.[theme].yml > 主题目录下的_config.yml

新建文章

hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
示例 hexo new "My New Post"

生成静态文件

generate 该命令可以简写为

$ hexo g
或 $ hexo generate
  • -d, --deploy 文件生成后立即部署网站
  • -w, --watch 监视文件变动

部署 deploy 命令

deploy 该命令可以简写为

$ hexo d
或 $ hexo deploy
  • -g, --generate 部署之前预先生成静态文件

clean 命令

  • 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
  • 在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

list 命令

列出网站资料

$ hexo list
Usage: hexo list <type>

Description:
List the information of the site.

Arguments:
  type  Available types: page, post, route, tag, category

写作

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

hexo new [layout] <title>

您可以在命令中指定文章的布局(layout),默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

默认布局为 post

default_layout: post

布局(Layout)

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

文件名称

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

front-matter

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

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

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

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

hexo 插件

git 自动部署插件

需要安装 hexo-deployer-git。详细使用请点击链接进行查看。

npm install hexo-deployer-git --save

总结

完整的教程可以参照 Hexo官网 进行实践。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值