Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

Hexo是一个基于node.js的静态博客生成系统,它使用markdown语法来写作,同时支持丰富的自定义标签系统。用户在本地安装Hexo系统并进行写作,通过一条命令,Hexo可以自动生成静态页面,并发布到多个平台上。与传统的博客相比,Hexo可以说是一个本地运行远程发布的博客程序。

Hexo最终生成的是一个静态博客,这就意味着它拥有其他博客系统无法比拟的低负载与高速度的特性。同时,Hexo支持丰富的第三方服务,包括统计、评论、搜索等,使得它的功能相对于动态博客系统并不是多么逊色。最后,Hexo使用简洁的YAML标准来建立配置文件。

Hexo通过修改配置文件可以方便快捷地修改站点的多个选项,例如为主题导航栏添加项目,只需要简单的在配置文件中增加一行即可。实际上,经过一定的修改和折腾,你完全可以将Hexo打造一个类似于Wordpress的博客网站,而且由于页面完全静态,服务器承受能力更强,适合性更强,让你专心写作。

本篇文章就让我们跟随n4l.pw博主在你的OS X、Windows与Linux轻松建立一个Hexo博客。更多的关于建站程序,可以看看:

  • 1、Ghost博客:VPS主机搭建Ghost环境:安装Nginx,Node.js,MariaDB 和Ghost
  • 2、Octopress:用Octopress免费静态博客系统在Github免费空间上搭建个人网站
  • 3、Hexo:Hexo免费静态博客安装和使用方法-基于Node.js高效率静态博客程序

Hexo从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

Hexo建站须知之Hexo基础知识。要建立Hexo博客系统,你需要的相关知识如下:

  • 1、Linux操作系统
  • 2、Git版本控制系统
  • 3、nginx web server
  • 4、(可选)理解和使用HTTPS/TLS协议。
  • 5、(至少)了解HTML/JavaScript/CSS
  • 6、了解Markdown语法和YAML语法
  • 7、(Windows)了解安装node.js和Git的方法,会配置环境变量
  • 8、(OS X/Linux)熟悉自己系统的包管理工具
  • 9、有自己进行研究解决问题的能力,英语阅读能力(必须!)

一、Hexo入门:本地安装Hexo

1、OS X安装Hexo

执行以下命令安装node.js(注意:本文代码中所有S*SH进行了特殊化表示,请去掉中间的*号):

1
brew install node

如果提示:bash: brew command not found ,强力安利一发OS X下最强大的命令行包管理工具Homebrew,官网在这里(有中文版):http://brew.sh/index_zh-cn.html。

通过这个工具可以快速安装一系列Linux下的软件包。例如安装python,只需要:

1
brew install python3

执行以下命令可以快速安装homebrew:(需要Xcode Command Line Tools)

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

测试一下node.js是否安装成功:node -v 。如果看到有显示版本号就表示成功了。

然后执行以下命令安装git

1
brew install git

执行:git --version,查看Git是否安装成功。如果brew显示安装成功,但无法运行上述命令。

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

请将/usr/local/bin目录加入系统PATH变量中。bash(默认)用户编辑~/.bashrc文件,zsh用户编辑~/.zshrc文件,找到export PATH行,并在变量值中加入/usr/local/bin项目。如下图所示(并重启终端)。

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

执行以下命令即可安装Hexo:

1
npm install -g hexo-cli

PS:目前npm官方源在国内访问并不稳定,如果你无法直接安装,请更换国内npm源或挂上DL。执行以下命令更换淘宝npm源:

1
npm config set registry https://registry.npm.taobao.org

测试是否安装成功:hexo version.如下图所示:

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

2、Linux安装Hexo

Hexo文档中只有Debian系以及RHEL系的安装方法,其他发行版请参考自己的包管理器用法。执行以下命令用nvm(node version manager)安装node.js:

1
wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后执行:nvm install stable。即可安装node.js,测试方法同上。执行以下命令安装Git:

1
2
sudo apt-get install git-core#debian/ubuntu
sudo yum install git-core#RHEL/centos

执行以下命令即可安装Hexo:

1
npm install -g hexo-cli

PS:目前npm官方源在国内访问并不稳定,如果你无法直接安装,请更换国内npm源或挂上DL。执行以下命令更换淘宝npm源:

1
npm config set registry https://registry.npm.taobao.org

测试是否安装成功:hexo version。如下图所示:

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

3、Windows系统安装Hexo

你需要到node.js官方网站下载安装包。点击这里直达:https://nodejs.org/zh-cn/download/。安装没什么好说的,注意到下图这一步时,勾选npm package manager以及Add to PATH选项。

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

到这里:https://git-for-windows.github.io/,可以下载Git for windows。这个套件不仅仅在windows上安装了Git版本控制系统,最重要的是这个套件提供了Git Bash,一个可以在windows上运行的Linux风格shell,除非你够硬核,能忍受win的cmd,否则通过Git Bash使用hexo无疑是最佳选择。

下图的选项建议勾选,视觉效果有明显提升。其余选项保持默认即可。

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

运行Git Bash,之后请参考Linux安装Hexo的命令,即可完成Hexo的安装。附图一张:(Git Bash中粘贴请右键Paste)

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

二、Hexo进阶:初步了解Hexo

1、Hexo的文件夹结构

在初始化一个hexo站点文件夹之后(详见下一节),该文件夹的目录结构如下:

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

详细说明如下:

  • 1、_config.yml是YAML格式文件,也是Hexo的站点配置文件(敲黑板!重点重点!)
    2、node_modules包含使用Hexo需要的其他node.js模块,以后安装的hexo相关模块也放在这里
    3、package.json配置hexo运行需要的node.js包,不用手动更改(PS:通常不需要干预它,不过其中有一条"name": "hexo-site"起着告诉hexo该文件夹是hexo站点的作用,因此更加不要修改该文件内容,安装hexo其他模块也依赖该文件)
    4、scaffolds是模板文件夹,不过这里的“模板”概念没有那么高端。这个“模板”就是指新建的markdown文件的模板,每新建一个markdown文件(由于Hexo使用markdown语法,在渲染生成静态HTML页面之前,源文件都是markdown文件),就会包含对应模板的内容。
    该文件夹内有三个模板:draft.md,草稿的模板page.md,页面的模板post.md,文章的模板
    5、source是源文件文件夹,此处存有渲染生成静态页面需要的所有源文件,包括markdown文件、图片文件。默认此文件夹下只有一个_post文件夹,存放文章的markdown源文件。每个页面有一个以该页面命名的文件夹,也存放在source文件夹下。该文件夹下除了_post外,所有以下划线开头的或以.开头的文件夹都会被忽略。
    6、themes是主题文件夹,Hexo的主题作用与WordPress相同。
    7、public文件夹,默认没有,存放生成的静态文件。

2、Hexo命令使用

PS:<参数>为必填参数,[参数]为可选参数。以下命令全部需要在hexo站点文件夹下运行。

1
2
hexo init <folder>
</folder>

此命令用于执行站点的初始化。执行后,folder文件夹会成为一个Hexo站点文件夹,执行过程中涉及安装多个nodejs模块包以及git clone操作,因此最好挂上DL。

1
hexo new [layout]

新建一个markdown文件。[layout]是该文件的类型,取值有post、draft和page三种,分别对应新建文章、草稿、页面。在运行该命令时,会调用scaffolds下的对应模板。

1
hexo clean

清理Hexo缓存。该操作会强制Hexo清空已生成的全部静态文件以及Hexo自身的数据库,有时候相当有效(更换主题后建议运行)。

1
hexo generate

生成静态页面。在生成时可以加上-d或--deploy参数在生成后立即部署。生成的静态文件在public文件夹下,没有则会自动建立。

1
hexo deploy

部署站点。也就是将public目录下生成的静态文件上传到某个特定的位置,Hexo支持多种部署方式,下文详解。部署时可以加上-g或--generate参数,在部署前先生成一遍静态文件。

1
hexo publish

发布某篇草稿(即将该markdown文件转移到_post文件夹下)

1
hexo server

在本地http://localhost:4000启动一个hexo服务器,可以用来预览hexo站点的效果。

PS:这里只介绍了Hexo的常用命令,详细命令请参考中文文档:https://hexo.io/zh-cn/docs/commands.html

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

3、Hexo markdown文件的结构

每个由Hexo建立的markdown文件包含如下两部分:

Frone-matter:类似于HTML中的元信息,HTTP包中的头部等等。它也使用YAML格式,定义了一系列Hexo程序需要使用的变量。例如我撰写这篇文章时的Front-matter内容如下图所示:

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

正文:使用普通的markdown语法,这是你的文章或页面的内容。

4、YAML基本语法

YAML基本组件。YAML的基本组件都有区块(即所谓的代码块)和行内(即写在一行)两种形式。

1.清单:如字面意思所言,“清单”所表示的就是一系列有序的值。类似于数组。清单的区块表达方式类似如下:

这就是一系列的简单字符串。

1
2
3
4
5
6
1
2
3
--- 
- v1
- v2

而其行内表示形式如下:[v1,v2]。其表达方式十分类似于Python的列表。

2.杂凑表:杂凑表是一系列key: value对,它有点像其他语言中的“字典”。由于它的特性,Hexo配置文件使用的主要是杂凑表形式。杂凑表的区块方式如下:

1
2
3
4
1
2
name: John Smith
age: 33

而其行内表达形式与Python字典几乎相同:{name: John Smith, age: 33}。需要注意的是,杂凑表的key和value均允许任意的空格,不需要用引号将它们括起来。

注意事项:1.杂凑表的key:后必须有一个空格; 2.一个清单的一个元素可以是一个杂凑表,一个杂凑表的一个元素可以是一个清单,清单和杂凑表可以自身嵌套。嵌套时请注意缩进。

掌握这两项基本元件编写Hexo配置文件已经够用,需要了解更多语法请参考百科上的YAML:https://zh.wikipedia.org/wiki/YAML

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

三、Hexo精通一:Hexo建站初始化、配置、更换主题、写作、预览

3.1 初始化

首先建立一个文件夹:mkdir hexo_blog。执行hexo命令初始化文件夹:hexo init hexo_blog。你可以选择你喜欢的文件夹名称。注意,该步骤最好挂DL。

基本配置

PS:有关部署配置在部署一节中讲解。

用你喜欢的文本编辑器打开站点文件夹下的_config.yml文件,我用的是Sublime Text 3。本节内容以Hexo官方文档中的有关内容为主,想了解更多的话强烈建议阅读官方文档(纯中文!毫无障碍,有疑问可以到文章下方留言)

用一个对代码支持友好的文本编辑器打开文件后,可以看到标准的YAML文件内容,如下图所示,涉及到的语法我在图中有所提示:(点击放大)

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

再次提醒,嵌套元件请注意缩进!注意空格!(敲黑板!重点!)对一个新站点来说,需要编辑的项目有:

1
2
3
4
5
6
7
8
9
10
11
12
title: Hexo #站点的标题
subtitle: #站点的副标题
description: #站点的描述,写一段话来介绍你的博客吧:),主要为SEO使用
author: John Doe #显示的文章作者名字,例如我配置的是fourstring
language: #语言。简体中文是zh-Hans
timezone: #时区,可以不配置,默认以本地时区为准
url: http://yoursite.com #你的站点地址,如果是全站HTTPS记得写成https://domain.com
root: / #如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。(引用自官方文档)
permalink: :year/:month/:day/:title/ #固定链接格式。这项配置的格式为:变量1/变量2/变量3...,其中合法的变量格式为“:变量名”(注意,:是变量的组成部分!)这样生成的效果为/2016/08/10/文章标题。默认的固定链接格式存在一些问题,下文讲解
per_page: 10 #设置每页文章篇数,设为0可以关闭分页功能
theme: #使用的主题。下文讲解
deploy: #部署配置,其值是一个杂凑表,注意缩进,下文详细讲解

如果你想了解更多自定义配置项(就个人安装体验来说,其实很多选项保持默认即可),请看上面的官方文档链接。

3.2 更换主题

PS:下文以home代指Hexo根目录

Hexo的主题存储在home/themes目录下(我使用unix的文件路径表示法,Git Bash可以兼容这种表示法)。我们只要将喜欢的主题下载到这个目录下,解压为文件夹,然后将_config.yml中的theme:配置项改为对应主题文件夹名称即可。

这里特别提醒,主题自身也有一个_config.yml配置文件,配置主题本身需要的一系列选项。语境中通常称为主题配置文件,请勿与站点配置文件混淆。

另外,强力推荐n4l.pw使用的Hexo主题:Next,功能极其强大,是目前github上star第一的Hexo主题:https://github.com/iissnan/hexo-theme-next。官方文档讲解非常详细,鉴于篇幅,这里只提一个小技巧,在文章中加入<!--more-->标签,主题会自动将标签之前的内容截取作为文章摘要输出在首页。(可见下图效果,点击放大)。

Hexo建站从入门到精通-Hexo博客本地环境配置,初始化,写作与部署

顺便说一句,Hexo自带的主题颜值也是很不错的(秒杀WordPress几千倍),不妨用用~

3.3 写作

执行:

1
hexo new post "标题"

可以新建一篇文章。post参数可以省略,_config.yml中的default_layout:设置了默认类型,默认值是post,你可以改成draft来默认存储为草稿(PS:感觉并没有什么卵用,草稿也可以存为post,不生成部署即可)

然后用任意你喜欢的编辑器打开home/source/_post/标题.md文件就可以写作了。(PS:Windows下优雅的markdown编辑器实在是少之又少,OS X下我用的是MWeb,功能非常强大)

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: