版权说明:本文为原创文章,未经允许,不得转载。
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 。填写完成后,保存即可。