搭建个人博客

发表于 | 分类于 | 阅读次数:
字数统计: 4k | 阅读时长 ≈ 15

一个博客的搭建过程分为三步：

  • 编写：包含内容的书写与格式的配置
  • 构建：从编写的原始内容生成可发布的最终内容
  • 发布：让待发布的内容对读者可见

依托于博客平台（如博客园、新浪博客等）发布内容的用户只需要关注编写部分，但要搭建一个独立的个人博客则以上三方面都需要关心。幸运的是，现在有大量的工具帮助我们简化这个过程：丰富的 Markup 语言简化了编写；强大的静态站点生成器简化了构建；友好的托管平台简化了发布。

这个博客的诞生也得益于这些工具：

  • 编写：使用 Markdown，内置大量层级、列表、超链接、代码等的简便语法支持

  • 构建：使用 Hexo，几条命令完成生成、预览、发布步骤

  • 发布：使用 GitHub Pages 进行托管，方便又免费

环境准备

全局安装hexo

1
npm install -g hexo-cli

初始化目录

1
2
hexo init [folder] 指定目录初始化目录
hexo init 在当前目录初始化目录

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

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

安装 NexT

下载主题

在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

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

启用主题

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

启用 NexT 主题

1
theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。 当命令行输出中提示出：

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

img

现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。

主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

选择 Pisces Scheme

1
2
3
#scheme: Muse
scheme: Mist
#scheme: Pisces

本站使用的为Mist主题。

设置 语言

编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

1
language: zh-Hans

设置 菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。

编辑 主题配置文件，修改以下内容：

  1. 设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link || icon name。其中 item name是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

    菜单示例配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    menu:
      home: / || home
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      # about: /about/ || user
      # search: /search/ || search
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat

    # Enable/Disable menu icons.
    menu_icons:
      enable: true

    若你的站点运行在子目录中，请将链接前缀的 / 去掉

    NexT 默认的菜单项有（标注 的项表示需要手动创建这个页面）：

    | 键值 | 设定值 | 显示文本（简体中文） |
    | ———- | ————————- | ——————– |
    | home | home: / | 主页 |
    | archives | archives: /archives | 归档页 |
    | categories | categories: /categories | 分类页 |
    | tags | tags: /tags | 标签页 |
    | about | about: /about | 关于页面 |
    | commonweal | commonweal: /404.html | 公益 404 |

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

    以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件languages/zh-Hans.yml，在 menu 字段下添加一项：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      commonweal: 公益404
      something: 有料

设置 侧栏

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

  1. 设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：

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

    目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。

    1
    2
    sidebar:
      position: left

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

    • post - 默认行为，在文章页面（拥有目录列表）时显示
    • always - 在所有页面中都显示
    • hide - 在所有页面中都隐藏（可以手动展开）
    • remove - 完全移除
    1
    2
    sidebar:
      display: post

设置 头像

编辑 主题配置文件， 修改字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：

地址 值
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在） 配置为：avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png

头像设置示例

1
avatar: http://example.com/avatar.png

设置 作者昵称

编辑 站点配置文件， 设置 author 为你的昵称。

站点描述

编辑 站点配置文件， 设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

设置 RSS

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

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

添加「标签」页面

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags ：

1
2
$ cd your-hexo-site
$ hexo new page tags

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

1
2
3
4
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---

添加「分类」页面

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 categories ：

1
2
$ cd your-hexo-site
$ hexo new page categories

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

1
2
3
4
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

设置字体

注意： 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后

为了解决 Google Fonts API 不稳定的问题，NexT 在 5.0.1 中引入此特性。 通过此特性，你可以指定所使用的字体库外链地址；与此同时，NexT 开放了 5 个特定范围的字体设定，他们是：

  • 全局字体：定义的字体将在全站范围使用
  • 标题字体：文章内标题的字体（h1, h2, h3, h4, h5, h6）
  • 文章字体：文章所使用的字体
  • Logo字体：Logo 所使用的字体
  • 代码字体： 代码块所使用的字体

各项所指定的字体将作为首选字体，当他们不可用时会自动 Fallback 到 NexT 设定的基础字体组：

  • 非代码类字体：Fallback 到 "PingFang SC", "Microsoft YaHei", sans-serif
  • 代码类字体： Fallback 到 consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

另外，每一项都有一个额外的 external 属性，此属性用来控制是否使用外链字体库。 开放此属性方便你设定那些已经安装在系统中的字体，减少不必要的请求（请求大小）。

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

设置代码高亮主题

更改 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. 链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

    配置示例

    1
    2
    3
    4
    5
    6
    7
    8
    # Social links
    social:
      GitHub: https://github.com/your-user-name
      Twitter: https://twitter.com/your-user-name
      微博: http://weibo.com/your-user-name
      豆瓣: http://douban.com/people/your-user-name
      知乎: http://www.zhihu.com/people/your-user-name
      # 等等

  2. 设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

    配置示例

    1
    2
    3
    4
    5
    6
    7
    # Social Icons
    social_icons:
      enable: true
      # Icon Mappings
      GitHub: github
      Twitter: twitter
      微博: weibo

开启打赏功能

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

打赏功能配置示例

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

友情链接

编辑 主题配置文件 添加：

友情链接配置示例

1
2
3
4
5
# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

站点建立时间

这个时间将在站点的底部显示，例如 © 2013 - 2015。 编辑 主题配置文件，新增字段 since。

配置示例

1
since: 2013

订阅微信公众号

注意： 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后

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

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

然后编辑 主题配置文件，如下：

配置示例

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

评论系统

来必力

登陆 来必力 获取你的 LiveRe UID。 编辑 主题配置文件， 编辑 livere_uid 字段，设置如下：

1
livere_uid: #your livere_uid

数据统计与分析

百度统计

  1. 登录 百度统计，定位到站点的代码获取页面
  2. 复制 hm.js? 后面那串统计脚本 id
  3. 编辑 主题配置文件， 修改字段 baidu_analytics，值设置成你的百度统计脚本 id。

内容分享服务

百度分享

编辑 主题配置文件，添加/修改字段 baidushare，值为 true。

百度内容分享服务配置示例

1
2
3
4
# 百度分享服务
baidushare:
  type: slide
  baidushare: true

搜索服务

添加百度/谷歌/本地 自定义站点内容搜索

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

    1
    $ npm install hexo-generator-searchdb --save

  2. 编辑 站点配置文件，新增以下内容到任意位置：

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  3. 编辑 主题配置文件，启用本地搜索功能：

    1
    2
    3
    # Local search
    local_search:
      enable: true

在右上角或者左上角实现fork me on github

点击这里 或者 这里挑选自己喜欢的样式，并复制代码。

然后粘贴刚才复制的代码到

1
themes/next/layout/_layout.swig

文件中(放在

1
<div class="headband"></div>

的下面)，并把href改为你的github地址

img

在网站底部加上访问量

打开\themes\next\layout\_partials\footer.swig文件，在文件最前面加上以下代码：

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再合适的位置添加显示统计的代码

代码如下：

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在这里有两中不同计算方式的统计代码：

  • pv的方式，单个用户连续点击n篇文章，记录n次访问量
1
2
3
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
  • uv的方式，单个用户连续点击n篇文章，只记录1次访客数
1
2
3
<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

实现统计功能

实现效果图

img

具体实现方法

在根目录下安装 hexo-wordcount,运行：

1
$ npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

部署到github pages

在github新建GitHub Pages项目，具体步骤自行百度。

安装 hexo-deployer-git。

1
$ npm install hexo-deployer-git --save

编辑 站点配置文件，添加/修改字段 deploy，配置如下：

1
2
3
4
5
deploy:
    type: git
    repo: <repository url>
    branch: [branch]
    message: [message] //提交信息

部署更新到github

1
hexo g -d

访问https://temp.github.io/，temp为你的github用户名，即可查看博客页面。