记一次Hexo搭建博客

还记得刚开始弄 Github Pages 博客的时候，是拷贝了别人的 Jekyll 博客模板，然后用自己的博客文章替换掉别人的博客文章，再把一些标题的内容稍微修改一下，最后在 Github Pages 上就会生成自己的博客，非常简单！

不过因为套用了别人的模板，样式和结构都已经定型了，很难再去修改了。后面也有想过去下载 Jekyll 框架来修改模板，但是 Jekyll 是基于 Ruby 语言的博客生成器，需要在系统上配置 Ruby 的运行环境，Win10 系统下试过几次安装 Ruby 都莫名报错之后，只好放弃了！

后来无意中看到了别人用 Hexo 搭建的博客，博客使用的是 Next 主题，当时就被这简洁优雅的主题惊艳到了！那时，我就想：这应该才是我想要的博客的样式吧！

于是去了解了下 Hexo 框架和 Next 主题，发现 Hexo 是基于 Node.js 搭建博客的，这不正是我所想要的嘛！我对 Node.js 还是比较熟悉的。

于是，开始着手使用 Hexo 框架重新构建博客。

配置环境#

全局安装 Hexo 脚手架工具（之前需要安装好 node.js 环境）

yarn global add hexo-cli
# npm install -g hexo-cli

初始化 Blog

hexo init Blog
cd Blog
yarn install

下载 Next 主题，目前最新版本是V6.4.0

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

配置博客#

在博客根目录下面有一个_config.yml文件，是博客站点配置文件。在 Next 主题下面也有一个_config.yml文件，这是主题配置文件。这 2 个文件是最主要的配置文件。

站点常用配置#

site（站点基本配置，自定义标题内容）

title: Hale's Notes
subtitle: Quick notes
description: 新的征程，新的开始
keywords: blog front-end fe
author: Hale
language: zh-CN # 站点语言，next v6.0 版本后由 zh-Hans 改成了 zh-CN
timezone: Asia/Shanghai

url （地址栏配置）

url: http://www.haledeng.com
root: /
permalink: /blog/:year/:month/:day/:title.html

# 其他的默认配置不建议修改
skip_render: README.md # 使得放在 blog/source/README.md 文件，不会被渲染成html格式

theme （主题配置）

theme: next # 修改成 next 主题，与主题的文件夹名字要相同

deploy （部署配置）

deploy:
  type: git
  repository: git@github.com:alanhaledc/alanhaledc.github.io.git # 换成你自己的 github 博客地址
  branch: master # 部署的分支
  message: deploy # commit 信息

其他的选项暂时不用修改，按照默认配置就可以。

主题常用配置#

footer （网站页脚配置）

since: 2018 # 博客的建站时间
  icon:
    name: heart # 设置为桃心 也可自定义
  powered:
    enable: true # 这里显示，可隐藏
    version: false # 隐藏 Hexo 版本号
  theme:
  	enable: true # 这里显示，可隐藏
    version: false # 隐藏主题版本号

menu （菜单配置）

menu：
  home: / || home  # 路径 || icon图标
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  about: /about || user

Hexo 默认只有 home（主页）和 archives（归档），其他菜单需要自己添加，自定义内容

cd blog
hexo new page tags
hexo new page categories
hexo new page about

然后会在站点的source文件夹下面生成对应的文件，可修改这些文件为中文：

修改source/categories/index.md

---
title: 分类
date: 2018-08-13 20:00:00
type: categories
comments: false
---

修改source/tags/index.md

---
title: 标签
date: 2018-08-13 19:41:51
type: "tags"
comments: false
---

source/about/index.md可自定义内容

theme （主题设置）

scheme: Gemini # next主题下有四个不同风格的主题，可根据喜好自行修改

social （社交配置)

social:
  GitHub: https://github.com/alanhaledc || github # 设置成自己的Github 地址，后面的是 icon 图标
  weibo: http://weibo.com/u/1794861850 || weibo
social_icons:
  enable: true # 显示 icon 图标

links （自定义链接）

links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
#links:
#Title: http://example.com/

avatar （头像设置）

avatar:
  url: /images/avatar.gif # 默认的是空白头像，用自己的头像替换掉，默认根路径是 next/source/images
  rounded: false # 是否设置为圆形
  opacity: 1 # 比例
  rotated: false # 是否可以旋转

sidebar （工具栏设置）

sidebar:
  position: left # 工具栏位置
  b2t: false # 是否把定位到顶部的按钮放在左侧
  scrollpercent: true # 是否在定位到顶部的按钮上显示页面滚动的百分比

scroll_to_more（滚动到 more）

scroll_to_more: false # 设置为 false，不然点击阅读全文时会滚动的 more 的位置，而不是显示文章开头

auto_excerpt （自动摘录）

auto_excerpt:
  enable: true # 设置为 true 会按照在 md 文件中设置的  来显示摘录
  length: 150

post_meta （设置文章属性）

post_meta:
  item_text: true
  created_at: true
  updated_at:
    enabled: false # 隐藏文章更新时间
    another_day: true
  categories: true

symbols_count_time （统计文章字数和阅读时长）

yarn add hexo-symbols-count-time # 需要安装对应的插件，详情可参考插件文档

站点字数配置

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true # 在站点底部显示站点总字数，可关闭
  total_time: true # 在站点底部显示阅读总时长，可关闭

Next 主题字数配置

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

post_copyright （文章版权）

post_copyright:
  enable: true # 设置后会在文章后面显示文章版权信息
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

font （主题字体设置，下面是我的博客的设置）

font:
  enable: true
  global:
    external: true
    family: Monda
    size:
  headings:
    external: true
    family: Roboto Slab
    size:
  posts:
    external: true
    family:
  logo:
    external: true
    family: Lobster Two
    size: 24
  codes:
    external: true
    family: consolas
    size:

baidu_analytics（百度统计，具体配置参考网上的教程）

baidu_analytics: 你的uid

livere_uid（来比力评论，具体配置参考网上的教程）

livere_uid: 你的uid

leancloud_visitors（LeanCloud 阅读次数配置，具体配置参考网上的教程）

leancloud_visitors:
  enable: true
  app_id: 你的id
  app_key: 你的key

algolia_search （algolia 搜索，具体配置参考网上的教程）

// 在站点的配置 Blog/_config.yml
algolia:
  applicationID: 你的id
  apiKey: 你的key
  indexName: 你的index名称
 
// 在主题的配置 （algolia 搜索设置中文提示）theme/next/_config.yml
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: '请输入关键字'
    hits_empty: '我们没有找到任何搜索结果: ${query}'
    hits_stats: '找到约${hits}条结果（用时${time}ms）'

favicon （favicon 配置）

favicon:
  # small: /images/favicon-16x16-next.png
  medium: /images/favicon.ico # 替换掉相关的 favicon 图片即可，默认路径是 next/source/images
  # apple_touch_icon: /images/apple-touch-icon-next.png
  # safari_pinned_tab: /images/logo.svg
  # android_manifest: /images/manifest.json

pace （站点头部加载线的样式）

yarn add theme-next-pace # 安装插件，或者使用 cdn，详情查看相关文档

在主题的配置

pace: true
pace_theme: pace-theme-minimal # 可自定义主题

vendors （cdn 配置）

vendors:
  _internal: lib
  jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js
  fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js
  fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css
  fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js
  lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js
  velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js
  velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js
  ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js
  fontawesome: //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css
  # 如使用了algolia搜索
  algolia_instant_js: //cdn.jsdelivr.net/npm/instantsearch.js@2.10.0/dist/instantsearch.js
  algolia_instant_css: //cdn.jsdelivr.net/npm/instantsearch.js@2.10.0/dist/instantsearch.min.css

404 （配置 404 页面，在 next/source 文件夹下面创建404.html文件，复制下面内容）

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://qzone.qq.com/gy/404/style/404style.css"
    />
  </head>
  <body>
    <script
      type="text/plain"
      src="http://www.qq.com/404/search_children.js"
      charset="utf-8"
      homePageUrl="/"
      homePageName="回到我的主页"
    ></script>
    <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
    <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
  </body>
</html>

CNAME （配置 CNAME，在 next/source 文件夹下面创建CNAME文件（注意没有后缀名），输入自己的域名）

alanhaledc.com

模板配置#

主要说下 post 文章的模版配置，修改根目录下的 scaffolds/post.md 文件为下面代码：

---
title: { { title } }
date: { { date } }
categories:
tags:
---

title和date可自定义，也可以让系统自动生成，生成的标题为 md 的文件名，生成的时间是文件建立的时间。
categories和tags就需要自己定义，之后会在菜单栏的categories和tags中集成这些分类和标签。
配置完成后，md 格式的文章前面加上这些配置就行了，需要按照 yml 语法来书写。比如：

---
title: 记一次Hexo搭建博客
date: 2018-8-14 20:00:00
categories: Hexo
tags:
  - Hexo
  - Blog
---
这里是文章的前面摘要内容
 
 
 
这里是文章的内容

位于``前面的内容就是摘录内容，上面的主题配置摘录中有说明。
之后只需要把 md 格式的文章放在博客的 source/_posts 目录下面就可以了。

常用命令#

启动 Hexo 博客，默认端口是 4000，可以自定义端口和 ip 地址,-s为只启动生成的静态文件。

hexo server [-p 8888] [-i 192.168.1.1] [-s]

生成静态文件， watch 能够监视文件变动并立即重新生成静态文件。

hexo generate [--watch]

部署到服务器（如 github 等），部署前需要先安装插件hexo-deployer-git 和在站点配置文件上设置deploy选项。

hexo deploy

你也可以在package.json中定义脚本，方便操作。

"scripts": {
    "dev": "hexo server -p 8888",
    "build": "hexo generate",
    "deploy": "hexo deploy",
    "static": "hexo server -s -p 8888"
  }

总结#

到这里，博客基本上就搭建完成了，上面的配置也能满足日常基本需求了。但是，next 主题配置远远不止上面所讲的内容，它集成了非常多的功能，后面版本的功能也会越来越多，大家可以慢慢尝试。

Hexo 是一个快速、简洁且高效的博客框架，基于 Node 环境，有关详情是查看Hexo 文档。

Next theme 是一个非常简洁高雅的主题，应用广泛，社区活跃。有关详情请查看下面文档

本博客现在使用的是 V6.4.0 版本的 Next 主题下的 Gemini 主题，以后可能也会尝试其它的 Next 主题。