Hexo NexT搭建博客

前言

古人见面之初,为方便认识,常会自报家门,譬如:吾乃常山赵子龙;某姓张名飞,字翼德,世居涿郡。如今,我们虽然不都是有身份的人,但可以是有身份证的人。

在程序猿圈子中,个人博客无疑是我们的身份象征。面试中、同行交流中,常常会问到一个问题,”你有博客吗?”为了让场面不是很尴尬,你是否想到要有一个自己的博客呢?

那么,本文将简述如何用Hexo搭建博客,如果有兴趣跟着命令动动手,相信你也可以马上拥有一个自己的博客。

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

  • 为了描述方便,在下文中,将前者称为 站点配置文件, 后者称为 主题配置文件

安装Hexo

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

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

1
$ npm install -g hexo-cli

安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

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

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

其中 _config.yml站点配置文件,可以在此配置大部分网站的 配置 信息,_posts文件夹里放的就是你的文章。

安装NexT

克隆最新版本的NexT主题。最新版本中加入了一些三方服务和背景特效,效果还是不错的。

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 主题完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next

找到NexT下的 主题配置文件,在这里,你可以修改NexT的配置,加入一些不错的功能。

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮,共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题,可选的值有 normal,night, night blue, night bright, night eighties。更改 highlight_theme 字段,将其值设定成你所喜爱的高亮主题,例如:

1
2
3
4
# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

开启打赏功能

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

1
2
3
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

订阅微信公众号

在每篇文章的末尾显示微信公众号二维码,扫一扫,轻松订阅博客。

在微信公众号平台下载您的二维码,并将它存放于博客source/uploads/目录下。

然后编辑 主题配置文件,如下:

1
2
3
4
5
# Wechat Subscriber
wechat_subscriber:
enabled: true
qcode: /uploads/wechat-qcode.jpg
description: 欢迎您扫一扫上面的微信公众号,订阅我的博客!

更多主题配置:主题配置

常用命令

创建新博文

执行下列命令,你会发现,在站点根目录下 /source/_posts 文件夹下,生成了 my-new-post.md 文件,打开文件,就可以开始写你的第一篇博文了。

1
$ hexo new "My New Post"

更多信息: Writing

启动服务

启动 Hexo 本地站点,并开启调试模式(即加上 debug),运行成功后,根据命令行输出的访问地址信息,你就可以访问到自己的本地博客了

1
$ hexo server --debug

更多信息: Server

编译生成静态文件

编译生成好静态文件,用于部署发布使用

1
$ hexo generate

更多信息: Generating

部署

站点配置文件 下找到 deploy 字段,进行相关配置后,执行命令,将会部署博客。

1
$ hexo deploy

更多信息: Deployment

部署到Github

首先建立一个与你用户名相对应的仓库,仓库名必须为 [your_user_name.github.io] ,固定写法。

然后在 站点配置文件 中,找到 deploy 修改配置,例如:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/GreatMagicianHC/greatmagicianhc.github.io.git
branch: master
message: 我的博客

每次部署的步骤,可以分三步进行:

1
2
3
hexo clean // 清理public文件夹
hexo generate // 编译生成好静态文件
hexo deploy // 部署

Sayings

总算完结了文章,耗时将近3小时。这3小时感觉无比充实,时间也过得飞快,认真做一件事的感觉,很好。

作为第一篇真正有干货的文章,内心还是很激动的,水平有限,欢迎赞赏。(什么?出问题了?命令报错?好吧,那你多喝热水,重启试试呗~)

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!