菠菜的Hexo博客搭建过程

欢迎来到菠菜丛林历险记!这是菠菜的第一篇帖子,文笔不能算差(因为菠菜没文笔),望各位海涵!

很久很久以前,菠菜看到Hexo觉得实在是太牛叉了,后来便迷失在挑选主题的路中。
最近心血来潮,终于用HexoNexT主题搭建了属于自己的博客,然后就开始琢磨”Hello World”。
后来寻思寻思,搭建过程中虽然有教程,但还是遇到些问题(个人原因),索性第一篇帖子就写这个博客的搭建过程!

注意:以下所有操作都是在Windows 10中进行的!

准备工作

安装Git

Git for Windows Setup下载地址
为了社会的和谐与安定,上面这货的下载速度不靠谱。但是,大家可以参考热心网友收录的下载链接
在安装完Git for Windows Setup后,它会提供一个Git Bash程序。Git Bash是Linux风格的bash客户端,我们可以在任意地方右击鼠标,然后选择“Git Bash Here”即可在当前路径下打开Git Bash。

安装Node.js

Node.js安装程序下载地址
在安装过程中,请勾选Add to PATH选项。

安装Hexo

在安装完Git和Node.js后,在Git Bash使用如下命令安装Hexo

1
$ npm install -g hexo-cli

我们还可以在Git Bash中使用命令来安装Node.js,有兴趣尝试或对上述步骤有疑问的可以参考:Hexo的安装与准备

网站初始化与配置

网站初始化

在你的电脑创建一个文件夹(如blog),然后启动Git Bash,执行以下初始化命令,Hexo即会自动在文件夹建立网站所需要的所有文件。

1
$ hexo init

初始化后,文件夹里面一共会有5个文件(夹)。其中,_config.yml是Hexo的配置文件,我们将称之为站点配置文件
然后使用“npm install”下载相关组件

1
2
3
$ npm install
$ #速度应该慢,建议使用下面的命令
$ npm install --registry=https://registry.npm.taobao.org

网站配置

在Hexo生成文件后,我们需要更改站点配置文件,让网站信息变成我们自己的!现在暂时只修改以下配置:

1
2
3
4
5
6
7
# Site
title: 你的网站标题
subtitle: 你的网站副标题
description: 你的网站描述
author: 你的名字
language: zh-Hans #网站使用的语言(该配置值取自NexT主题)
timezone: Asia/Shanghai #网站所在时区

注意:配置文件用的是YAML语言,每个“:”后面都是有空格的。有兴趣可以详细了解下YAML语言教程
更多站点配置文件说明请查阅:Hexo的站点配置

启动网站

还是在刚才的目录下,我们使用Git Bash,执行以下命令,然后在浏览器中输入http://localhost:4000就可以看到你的博客了。

1
2
3
4
$ hexo g
$ hexo s
$ #如果想以Debug模式运行,请使用以下命令
$ hexo s --debug

NexT主题安装与配置

安装NexT

这里菠菜使用“git clone”命令克隆的Next,这便于以后使用“git pull”来快速更新主题。

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

下载完毕,我们会发现在next目录下也有一个_config.yml文件,这个是NexT主题的配置文件,我们将之称为主题配置文件

选择主题

打开站点配置文件,找到theme字段,并将值改为next。然后,我们需要清除缓存然后验证主题。

1
2
$ hexo clean
$ hexo s --debug

然后浏览http://localhost:4000,检查主题是否切换成功。

设置Scheme

Scheme是NexT提供的一种特性,借助于Scheme,NexT为你提供多种不同的外观。

1
2
3
4
# Schemes
#scheme: Muse #默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
scheme: Mist #Muse 的紧凑版本,整洁有序的单栏外观(菠菜的选择)
#scheme: Pisces #双栏 Scheme,小家碧玉似的清新

设置菜单

菜单配置在主题配置文件中,它包括三个部分菜单项(名称和链接)、菜单项显示文本和菜单项对应图标三个部分。
1.设置菜单内容
设定菜单内容,对应的字段是menu。菜单内容的设置格式是:item_name: link。其中item_name是一个名称,这个名称并不直接显示在页面上,它将用于匹配图标以及翻译。

1
2
3
4
5
6
#菠菜的网站菜单配置
menu:
home: / #主页
tags: /tags/ #标签,需要手动添加页面(后面有讲)
categories: /categories/ #分类,需要手动添加页面(后面有讲)
archives: /archives/ #归档

2.设置菜单项的显示文本(无自定义菜单可以跳过)
在第一步中设置的菜单的名称并不直接用于界面上的展示。
Hexo在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在NexT主题目录下的 languages/{language}.yml({language} 为你所使用的语言)。

1
2
3
4
5
6
7
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索

3.设定菜单项的图标,对应的字段是menu_icons。(不自定义图标可以跳过)
此设定格式是 item_name: icon_name,其中item_name与上一步所配置的菜单名字对应,icon_name 是Font Awesome图标的名字。而enable可用于控制是否显示图标,你可以设置成false来去掉图标。

1
2
3
4
5
6
menu_icons:
enable: true
home: home
categories: th
tags: tags
archives: archive

设置侧边栏

默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。 可以通过修改主题配置文件中的sidebar字段来控制侧栏的行为。
侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。
1.设置侧栏的位置,修改sidebar.position的值,支持的选项有:

  • left - 靠左放置
  • right - 靠右放置

2.设置侧栏显示的时机,修改sidebar.display的值,支持的选项有:

  • post - 默认行为,在文章页面(拥有目录列表)时显示
  • always - 在所有页面中都显示
  • hide - 在所有页面中都隐藏(可以手动展开)
  • remove - 完全移除

设置头像

编辑主题配置文件,修改字段avatar值,设置成头像的链接地址。
1.完整的互联网URI,如配置为http://example.com/avatar.png
2.站点内的地址,如将头像放置主题目录下的source/uploads(新建uploads目录,若不存在),配置为/uploads/avatar.png

设置RSS

NexT中RSS有三个设置选项,满足特定的使用场景。更改主题配置文件,设定rss字段的值:

  • false:禁用RSS,不在页面上显示RSS连接。
  • 留空:使用Hexo 生成的Feed链接.需要先安装hexo-generator-feed插件。
  • 具体的链接地址:适用于已经烧制过Feed的情形。

添加「标签」页

「标签」页面将展示站点的所有标签,若你的所有文章都未包含标签,此页面将是空的。
1.新建页面

1
$ hexo new page tags

2.设置页面类型
编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。页面内容如下:

1
2
3
4
5
---
title: 标签
date: 2017-08-05 12:39:04
type: "tags"
---

添加「分类」页

「分类」页面将展示站点的所有分类,若你的所有文章都未包含分类,此页面将是空的。
1.新建页面

1
$ hexo new page categories

2.设置页面类型
编辑刚新建的页面,将页面的 type 设置为 categories ,主题将自动为这个页面显示分类。页面内容如下:

1
2
3
4
5
---
title: 分类
date: 2017-08-05 12:39:04
type: "categories"
---

更多主题配置

1.代码高亮主题(highlight_theme)。
2.侧栏社交链接,包含链接(social)和链接图标(social_icons)两个部分。
3.友情链接(links)。
更多请参见官方文档:Hexo主题配置

第三方服务配置

畅言评论

1.到畅言注册一个账号然后登录。
2.打开“账号管理”->“管理站点”页面,点击“增加站点”,填写资料等待审核通过。
菠菜丛林历险记
3.等审核通过,打开后台总览,选择之前新增的站点,查看畅言秘钥
菠菜丛林历险记
4.打开主题配置文件,找到“changyan”字段,将changyan.enable更改为true,appid和appkey更改为畅言秘钥

1
2
3
4
5
# changyan
changyan:
enable: true
appid: c*****O
appkey: eb0**********************f5

LeanCloud(阅读统计)

1.注册LeanCloud账号登录并打开控制台。
2.创建新的应用
菠菜丛林历险记
3.为新添加的应用增加Class,NexT要求新建Class名字必须是”Counter”
菠菜丛林历险记
4.查看应用秘钥
菠菜丛林历险记
4.打开主题配置文件,找到“leancloud_visitors”字段,将leancloud_visitors.enable更改为true,app_id和app_key更新。

1
2
3
4
5
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: pO**************Hsz
app_key: W1*******************J

更多请参阅:为NexT主题添加文章阅读量统计功能

Algolia(文章搜索)

1.注册Algolia账号,登录后创建新的Index。
菠菜丛林历险记
2.获取ApplicationID、Search-OnlyApiKey、IndexName
菠菜丛林历险记
3.在网站根目录下安装Hexo Algolia

1
$ npm install --save hexo-algolia

4.编辑站点配置文件,在文件最后添加以下内容

1
2
3
4
5
6
# Algolia
algolia:
applicationID: Your ApplicationID
apiKey: Your Search-Only ApiKey
indexName: Your IndexName
chunkSize: 5000

5.创建一个具有更新Index权限的UpdateApiKey
注意:这个ApiKey是在每次写完新的帖子更新Index时使用的,请勿暴露在前端!
菠菜丛林历险记
6.在网站根目录下运行以下命令更新Index

1
2
3
4
5
6
$ export HEXO_ALGOLIA_INDEXING_KEY='YourUpdateApiKey'
$ hexo algolia
$ ###注意###
$ #菠菜用的是Git Bash,如果你使用的是win平台的cmd,请使用以下命令
$ set HEXO_ALGOLIA_INDEXING_KEY='YourUpdateApiKey'
$ hexo algolia

7.主题的集成。
更改主题配置文件,找到Algolia Search字段,更新如下:

1
2
3
4
5
6
7
8
9
# Algolia Search
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: 搜索文章
hits_empty: "没有找到与【${query}】相关的内容!"
hits_stats: "找到${hits}条记录,耗时${time} ms"

更多请参阅:Hexo Algolia

Baidu统计

1.注册[百度统计][17]并登陆添加站点
菠菜丛林历险记
2.获取站点代码,获取baidu_analytics
菠菜丛林历险记
3.更新主题配置文件, 修改字段baidu_analytics字段,值设置成你的百度统计脚本ID。

1
2
# Baidu Analytics ID
baidu_analytics: 16***********************a9

参考文档