搭建个人博客 - 基础（Hexo + NexT）

参考作者博客 https://qkaiblog.com
本文转自作者博客 https://qkaiblog.com

简介

---

Hexo
Hexo是一个快速、简洁且高效的静态站点生成框架 , 它基于 Node.js . 它有以下特点 ：

超快速度
Node . js 所带来的超快生产的速度 , 让上百个页面在几秒内瞬间完成渲染 .
支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能 , 甚至可以整合 Octopress 的大多数插件 .
一键部署
只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站 .
丰富的插件
Hexo 拥有强大的插件系统 , 安装插件可以让 Hexo 支持 Jade, CoffeeScript .

NexT

一个主题，三种外观，选您所好
通过主题中的主题（亦称 Scheme）, 您可以方便地改变您博客的外观 , 同时几乎所有配置同样适用
多种语言支持
感谢 NexT 的热心用户 , 正是他们的贡献 , NexT 现已支持 10 种语言
5 套代码高亮主题
NexT 使用 Tomorrow 的代码高亮配色 , 只需要一行配置 , 即可选择您所喜爱的配色方案
定制属于您自己的 NexT
NexT 拥有丰富而简单的配置 , 结合第三方服务 , 打造属于您自己的博客

安装

---

安装Hexo之前需要检查自己电脑上是否装有 Node . js 和 Git

下载 Node . js & Git

Download | Node . js Download | Git

具体安装方法自行 Google 、 百度

安装Hexo

右键桌面 , 选择 ” Git Bash Here ” , 然后输入一下安装hexo命令：

$ npm install -g hexo-cli //$ 原有，不需要

指定文件夹 例如：我创建文件夹”Hexo”并放在D盘 , 路径为： “D:\Hexo”
在文件夹里运行以下代码：

$ hexo init

最后出现 “INFO Start blogging with Hexo!” 表示安装成功
指定文件夹 目录如下：

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

目录详解
继续执行命令

$ hexo g // g 全称 generate , 生成静态文件
$ hexo s --debug // s 全称 server , 启动服务器 .

命令详解
这时候在浏览器输入localhost:4000 , 默认情况下 , 访问网址为都是这个 .可以看到基于 Hexo 的默认主题的原型：

安装 NexT 主题

下载 NexT 主题

依然是在当前目录运行：

$  git clone https://github.com/iissnan/hexo-theme-next themes/next

等待下载完成 .

在 Hexo 中有两份主要的配置文件 , 其名称都是_config.yml .其中 , 一份位于站点根目录下 , 主要包含 Hexo 本身的配置 ; 另一份位于主题目录下 , 这份配置由主题作者提供 , 主要用于配置主题相关的选项
我们约定 , 将前者称为 站点配置文件，后者称为 主题配置文件

启用 NexT 主题

打开 站点配置文件 , 找到 theme 字段 , 并将值改为 next .

修改前：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

修改后：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

到此 , NexT 主题安装完成 . 下一步我们将验证主题是否正确启用 . 在切换主题之后、验证之前 , 我们最好使用命令” hexo clean “来清除 Hexo 的缓存 。

验证主题

在本地站点输入命令 hexo s , 并开启调试模式（即加上 –debug）, 整个命令是 hexo s –debug . 在服务启动的过程 , 注意观察命令行输出是否有任何异常信息 . 当命令行输出中提示：

# Extensions
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

这时候在浏览器输入localhost:4000 , 检查站点是否正确运行 .
当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题 . 这是 NexT 默认的 Scheme —— Muse

总结

本地调试步骤命令

$ hexo clean
$ hexo g
$ hexo s

官方文档

Hexo官方文档
NexT官方文档