Hexo + Next搭建静态博客

之前折腾了一下静态博客的搭建,现在记录一下。

选用Hexo搭建静态博客的原因:快速、简洁且高效的博客框架。部署简单,发布文章高效简洁,运行快速。

先放上Hexo官网 里面有详细的使用和操作的介绍。

Hexo搭建

1、安装nodejs和git

Hexo是基于nodejs的环境的,git的操作是我们提交我们博客到github仓库用的。所以这两个的安装是必须的。

安装的两种方式,官网下载和命令行安装。下面是两种安装方式:

nodejs官网

git官网

直接去官网下载,按照步骤安装就OK。

命令行安装,推荐神器Homebrew(Mac),我的之前博客有具体的使用介绍。Windows下是Chocolatey。这两个是专门的软件安装管理软件,借助他们,我们就不需要上网找各种安装命令行了,简单的操作:

$ brew install git
$ brew install nodejs

这样就安装完毕。

2、Hexo安装

  • 安装
$ npm install hexo-cli -g
  • 部署Hexo

建一个文件夹,用来当做你博客的根文件。例如:建立在桌面文件夹叫Hexo博客

$ cd /Users/minghaotai/Desktop/Hexo博客  //打开文件夹
$ hexo init  //初始化
$ npm install  //安装依赖包

以上,Hexo安装成功,你可以运行

$ hexo s  //预览

然后把 http://localhost:4000/ 这个粘到浏览器,看一下Hexo博客的效果。

3、Hexo常用命令行

$ hexo clean  清除缓存
$ hexo g  更新(更新本地数据)
$ hexo s  预览 (更新后可以先本地预览,没问题了在同步。)
$ hexo d  同步(部署到github)

4、Hexo配置

打开之前创建的博客根文件,找到 _config.yml 这个文件,这个文件夹就是用来配置Hexo的基本信息,包括设置博客网站标题,作者,应用主题,关联git等等。

注意:Hexo的配置,要想生效,都需要执行hexo g和hexo d。详细原因可以看上面的说明。

  • 设置基本信息
# Site
title: Leo’s Blog
subtitle: iOS Developer
description: 学无止境,上善若水
author: Leo
language: zh-Hans
timezone:
  • 关联git
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:LeoTaiMing/LeoTaiMing.github.io.git
  branch: master

这里说一下,repository后面是需要你的git仓库地址,这个需要你注册git账号,然后建一个仓库,专门用来储存你的静态博客信息,以用来别人的访问。

注意点:仓库名称必须和你的git昵称一样,就像我git昵称:LeoTaiMing。仓库名称:LeoTaiMing.github

配置以上之后就可以用 http://LeoTaiMing.github.io 来访问你的博客了。

  • 配置个性域名

当然,如果每个人要访问你的博客网站都是 http://LeoTaiMing.github.io 这种的,太累赘了,根本不够简洁。
所以我们需要自己的域名,我的是在阿里云万网申请的。还有好多申请网站可以自己选择。关于域名的开通和使用,大家自行谷歌,这里不做累述。

打开github上LeoTaiMing.github仓库的设置页面:

这样设置就OK。接下来我们就可以直接用自己的域名来访问自己的博客了。

注意:这样设置我们的个性域名之后,需要我们手动把仓库里的CNAME这个文件手动拷贝到我们本地的博客文件夹的public文件夹下,这样就保持了域名设置在本地和远端的同步。不然,我们之后每次向仓库同步我们本地的文件,都会覆盖域名设置。

  • 设置网站主题

各种主题介绍 里面有主题排行,当然主题的选择还是要看自己的喜好。

我选用的是Next,原因:极简,配置齐全,方便后面的博客统计,搜索,代码高亮等等的配置。

下载主题:

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

下载好的主题在themes这个文件夹里。

然后在 _config.yml 配置:

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

Hexo写博客

用Hexo写博客的流程
  • hexo n ‘“name” 新建文章
  • 在你的hexo的文件夹里/source/_posts这个路径下找到你新建的文件,用Markdown文本编译器开始编写博客。Markdown文本编译器推荐Typora,超简洁,功能强大。
  • 编辑完成,保存。执行 hexo g 更新本地数据。
  • 剩下的就是预览hexo s ,然后没问题之后一起推送到github。

注意:在设置文章头信息的时候,一定要在冒号后面打一个空壳,要不然,部署文章的时候会报错

好多人不小心卡在这里好久

title: Mac升级卡死解决办法
date: 2017-11-07
tags: Mac

设置多个标签
在编辑文章的时候,tags:后面是设置标签的地方,如果有多个标签的话,可以用下面两种办法来设置:

tages: [标签1,标签2,...标签n]
ages: 
- 标签1
- 标签2
...
- 标签n

Next主题配置

先放上Next官方文档上的一些简单配置:官方文档配置

下面我总结的一些博客配置,都是自己的博客亲自配置过一遍的,基本可行,可以先看效果:我的博客

最好更新到最新版的Next主题,我的版本是v5.1.4,这样Next本身就支持好多配置,我们只需要修改_config.yml就可以了,不必再修改源文件,添加一大堆代码了,这样高效,准确,方便。

1、社交链接和图标设置

打开Next主题的配置文件_config.yml,搜索social

social:
  GitHub: https://github.com/LeoTaiMing || github
  简书: https://www.jianshu.com/u/b0ea4a445096 || table
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

想设置那个社交就把它直接放开就行,或者也可以添加自己想要添加的社交链接,例如:添加简书。|| 前面是你的社交链接,后面是社交图标。hexo作者已经帮我们写好了,如果你想配置别的图标,参考图标大全网站

2、添加站内文章搜索

Next主题支持好多搜索,像微搜索、Local Search 和 Algolia,Swiftype和Algolia等等,但是好像都是只有一段时间的试用期。

我采用Hexo提供的Local Search,原理是通过hexo-generator-search插件在本地生成一个search.xml文件,搜索的时候从这个文件中根据关键字检索出相应的链接,这个可以永久使用。

配置步骤:

  • 安装 hexo-generator-search

​ 在站点的根目录下执行以下命令:

$ npm install hexo-generator-search --save
  • 安装 hexo-generator-searchdb

在站点的根目录下执行以下命令:

$ npm install hexo-generator-searchdb --save

打开next主题文件夹_config.yml文件,搜索local_search

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

将enable这个字段改成true,就像上面那样就行。

3、配置代码高亮

可能大家遇到的问题的原因不一,所以先放上github讨论:https://github.com/iissnan/hexo-theme-next/issues/989

在上面基本都能找到各种问题解决,我的解决办法是:

在站点配置文件里搜索highlight,找到:

highlight:
  enable: true
  line_number: true
  auto_detect: true

像上面那样,把enable设置成true。然后先执行hexo clean,再执行hexo g

这个时候你在预览的时候就应该是代码高亮了。

4、添加评论系统

给博客添加评论系统是很必要的,hexo最新版已经支持了多说(已停用),畅言,友言,Disqus,LiveRe,Gitment,Valine等等评论系统。可以在hexo的根文件中comments.swig这个文件中具体查看hexo支持哪些评论系统。

先说下各个评论系统:

  • 畅言,友言是国内支持的评论系统,和之前的多说差不多,不过多说在2017.6.1的时候宣布停用了,坑了一大批人。所以我没有选择这两个,这两个的使用还是挺容易的,去官网按照流程走就行。
  • Disqus,LiveRe是国外支持的评论系统,很稳定,支持Facebook,Twitter等登录评论,但是会有被墙的风险,而且大部分人很少用国外的社交账号的,我也没有采用
  • Gitment,Valine是大神自己写的评论系统,拜服,其中Gitment是基于github的评论系统,要想评论必须有github账号并且登录。但是考虑到刷静态博客的受众,这点还是可以接受的,但是不足的就是,有的时候延迟很会很大,并且换一个博客,就要登录一次,有点麻烦。Valine是一个超轻量级的评论系统,不用任何账号登录,可以随时随意评论,而且流畅度还是可以的。我最终选择的是这个。

这里简单的记录一下我的Valine配置过程(Next主题),很简单:

  • LeanCloud官网注册一个账号,然后添加一个应用,名字随便就行,记录一下appid,appkey,下面用。这个相当于管理我们博客评价系统的后台,我们可以导出数据,查看动态。
  • 打开Next主题的配置文件_config.yml,搜索找到valine:
valine:
  enable: true
  appid: # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: true # Verification code
  placeholder: 欢迎评论~ # comment box placeholder
  avatar: # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size<

将enable设置为true,然后填上你的appid,appkey,就OK了。

Valine官网想要更多设置的可以去官网看看。还有邮件提醒Valine 评论系统中的邮件提醒设置

5、创建云标签

官方创建方法

6、文章阅读次数统计

  • 注册 LeanCloud 账号 (如果注册了,这步省略)

    这一步直接去LeanCloud注册就行了。

  • 创建 App

​ 注册、登陆成功后,进入“控制台”,创建一个应用,应用名称随便填一个,记得选“开发版”(免费的),然后点“创建”就行了。

  • 创建 “Counter” Class

​ 在刚才创建的 App 下方点击“存储”,跳转到新的页面后,点击“创建 Class”,Class 名称填 Counter(必须填 Counter),下面的选项里选择“无限制”,然后点“创建 Class”就行了。

  • 打开 Next 主题根目录下的 _config.yml, 找到“leancloud_visitors”
leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>
  • 把enable改为true,填上你的appid和appkey就行了。到这里你预览自己的博客应该就会有阅读次数了。

  • 配置Web 安全域名

这是为了我们的博客网站安全,最好是适配一下,也不麻烦。这样我们的博客的环境也更为安全点。

LeanCloud 的对应 App 中,去“设置”里找到“安全中心”,在“Web 安全域名”里填写自己的域名就行了,包括 http 和 https 协议的 GitHub 上的博客域名,如下:

[图片上传失败...(image-3d506e-1540365152225)]

7、首页显示文章列表,列表里的每一篇文章只显示预览,不显示全文。

Next主题文件夹下配置_config.yml文件,搜索”auto_excerpt”,找到如下部分:

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把enable改为对应的false改为true,length是控制预览是文章的多大的部分,可以自己调整。

8、更多个性化设置

以上我们的静态博客基本配置就完成了,各种基本功能也都有,当然如果你想折腾更多酷炫的功能,或者设置更多的自定义,可以参考这篇文章.

推荐阅读更多精彩内容