我爱编程程序员小呱呱的随笔

Hexo + Next搭建静态博客

2018-10-24  本文已影响42人  墨痕未干

先放上我的个人博客地址：http://leotai.cc/，里面同样也有这篇教程，排版更方便浏览。

选用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博客

$ 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:

# 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仓库的设置页面：

image

这样设置就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写博客的流程

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

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

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文件，搜索的时候从这个文件中根据关键字检索出相应的链接，这个可以永久使用。

配置步骤：

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

$ npm install hexo-generator-search --save

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

$ 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支持哪些评论系统。

先说下各个评论系统：

这里简单的记录一下我的Valine配置过程（Next主题），很简单：

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、文章阅读次数统计

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

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

leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>

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

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、更多个性化设置

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

上一篇 下一篇

猜你喜欢

热点阅读