Hexo 搭建博客

版权说明:本文为原创文章,未经允许,不得转载。

Hexo 是台湾大学生 tommy351 基于 Node.js 搭建的静态博客程序,以生成静态页面速度快为著称,并可以将生成的静态页面直接放到Github Pages等平台上。

环境配置

1.安装Node

到 Node.js 官网下载对应平台的最新版本,根据提示一路安装即可。

2.安装Git

安装 Xcode 时自带 Git,或者去 Git 官网下载对应平台的最新版本即可。

3.申请 GitHub 账号

GitHub用于托管代码以及博客的服务器等。点击注册

安装Hexo

配置完必须环境之后,打开终端,执行以下命令安装 Hexo。

sudo npm install -g hexo

安装完毕止之后,开始配置 Hexo。

1.创建一个文件夹,即我们的博客在本地的目录。

mkdir hexo

2.进入目录,进行初始化操作。

cd hexo
hexo init
npm install

以上命令完成后,会在创建的目录下生成以下目录结构:

.
├── _config.yml         //博客的配置文件
├── package.json        //应用程序数据
├── scaffolds           //博客文章模板
├── source              //博客文章目录
|   ├── _drafts
|   └── _posts
└── themes              //博客主题文件夹

3.生成静态页面

cd hexo
hexo generate        //或hexo g

4.启动本地服务

hexo server            //或hexo s

以上命令完成后,即可在浏览器打开本地地址 0.0.0.0:4000 查看博客。至此,已简单配置完本地博客,下一步来跟 GitHub 进行关联。

5.配置文件 _config.yml ,以下为部分设置的简单说明

# Site               ##基本信息
title: Hexo          ##网站标题
subtitle:            ##网站副标题
description:         ##网站描述
author: John Doe     ##网站作者
email:               ##联系邮箱
language:zh-Hans     ##语言,zh-Hans

# URL #域名和文件结构
url: http://yoursite.com                  ##访问的域名
root: /                                   ##所在Web文件夹的哪一个目录
permalink: :year/:month/:day/:title/      ##时间格式

# Writing #编辑选项
highlight: #代码高亮
  enable: true #是否启用
  line_number: false #是否显示行号
  tab_replace:

# Pagination #分页设置
## Set per_page to 0 to disable pagination
per_page: 10 #每页10篇文章
pagination_dir: page

# Directory
source_dir: source           ##定义从哪个文件夹获取博客资料              
public_dir: public           ##定义生成静态网站到哪个文件夹

配置Github

1.建立Repository

打开 Github ,建立与用户名对应的仓库,仓库名必须为 用户名+github.io 命名。

创建仓库

2.进入仓库设置

设置仓库

3.如下图所示,根据红框依次点击

完成以上操作后,开始关联Github.

关联Github

1.打开所创建的本地目录 hexo 下的 _config.yml 文件,进行如下修改:

#URL
url: http://sunzqcoder.github.io/            //修改此条为 “http://+仓库名“”

2.在文档最下方添加以下代码:

deploy:
  type: git
  repository: git@github.com:sunzqcoder/sunzqcoder.github.io.git
  branch: master

要注意的是:

· type项必须为git。
· 冒号后面必须有一个空格。

3.保存文件后,进入终端,输入以下命令

cd hexo
npm install hexo-deployer-git --save
hexo d --g

4.运行无出错后,在浏览器中输入 http://sunzqcoder.github.io/ ,即你的仓库地址,即可查看博客,至此,如无错误发生,我们的博客就建立完成了。

更换主题

Hexo的主题有很多,我们可以选择自己喜欢的主题,Hexo主题列表 Hexo Themes,PO主所用的是 litten 制作的 hexo-theme-yilia 主题。

1.主题下载

首先,进入目标主题的Gtihub,在如下图红框所示的位置,获取该主题地址:

获取主题地址

回到本地,打开终端,依次输入以下命令:

cd hexo/themes
git clone XXXXXXXXXXXX        //目标主题地址

2.下载完成后,打开根目录的 _config.yml 文件,修改以下代码:

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: hexo-theme-yilia                //目标主题文件夹名称

3.更新博客

打开终端,进入 hexo目录,输入以下命令:

hexo generate
hexo deploy

运行无误后,更换主题成功,刷新浏览器页面查看。

发布文章

博客创建完成之后,当然要开始写文章啦。

1.创建文章

打开终端,进入 hexo 目录,输入以下命令:

hexo new "XXXXX"        //创建一个名为XXXXX.md 的文件

执行以上命令后,该文件会生成在 hexo/source/_posts 文件夹下。打开即可编辑该文章。

2.文章属性

生成的md文件,默认属性为以下三个:

· title:定义了该文章的标题。
· date:定义了该文章创建时的时间.
· tags:定义了该文章的标签。

除此之外,还可以扩展一些属性:

· update:定义了文章最后的修改时间。
· comments:定义了能否评论此文章,默认为true。
· categories:定义了文章的种类。

3.文章编辑

所创建的md文件,支持 markdown 语法,Markdown 是一种用来写作的轻量级 [标记语言],用简洁的语法代替排版,相比 Word 或 Pages 等,更能专注于码字,PO主用的编辑软件为 Mou 官网 , Mou 是一款免费的 Markdown 编辑软件,支持实时预览,非常好用。

· 创始人 John Gruber 的 Markdown 语法说明
· Markdown 中文语法说明

4.更新文章

当我们的文章编辑完成之后,打开终端,进入 hexo 目录下,输入以下命令,即可同步文章到我们的博客。

hexo generate
hexo deploy

以上两条命令也可用以下一条命令代替:

hexo d --g

5.图片引用

在本地编辑的 md 文件,同步到 Github 之后,经常出现图片引用路径出错,导致图片无法正常显示,可用 hexo-asset-image 进行解决。

打开 _config.yml ,设置 post_asset_folder:true

打开终端,进入 hexo 目录,输入以下命令:

npm install hexo-asset-image --save

进入 hexo 文件夹,使用如下目录结构:

XXXXX            //图片文件夹
|—— AAA.png
|—— BBB.png
└── CCC.png
XXXXX.md        //文章文件

在 Markdown 编辑器中,即可使用以下代码插入图片。

<img src="XXXXX/AAA.png" alt="AAA">  或  ![AAA](XXXXX/AAA.png) 

更新

查看 Hexo 版本

hexo version

Hexo更新命令:

npm update -g hexo

配置SSH

1.生成秘钥

打开终端,进入 hexo 目录,依次输入以下命令设置你的用户名:

git config --global user.email "XXXXXX.gmail.com"
git config --global user.email "hexo"

继续输入以下命令,生成秘钥:

ssh-keygen -t rsa -C "XXXXXX.gmail.com"

输入此条命令后,终端要求输入存放秘钥位置,直接回车为默认位置,Mac 系统默认位于/Users/你的用户名/.ssh文件夹,该文件夹为隐藏文件夹。

直接回车或者输入地址之后,设置密码,完成操作。

完成以上操作之后,会在设置的目录下,生成两个文件 id_rsa 和 id_rsa.pub 。

2.关联秘钥

因为生成的秘钥为隐藏文件,可用 cd 命令进入秘钥目录,打开文件查看秘钥:

cd ~/.ssh
open id_rsa.pub

打开文件后,全选复制秘钥。

复制后,进入你的 GitHub 仓库,依次进入 Setting → Deploy keys → Add deploy key 。填写完成后,保存即可。