Debug World

世界很大 我想盘它

0%

使用 Hexo 搭建个人博客

发表于 更新于 分类于 ，
本文字数： 2.3k 阅读时长 ≈ 8 分钟

0X00、前言

现在有好多平台都支持写作，比如：CSDN、知乎、掘金、简书、微信公众号等，这些平台和社区都有着巨大的「网络效应」，那为什么还要有自己的独立博客呢？就我自己而言主要有两个理由：

  • 受限于平台的局限性(封杀、广告、政治正确等)。即少了社交圈子，但多了自由
  • 程序员的 Geek 心态

0X01、搭建方案

搭建独立博客有很多方法，可根据自己的需求及情况决定使用哪套方案。

框架 技术门槛 服务器购买 服务器配置 域名备案 访问速度 费用
WordPress 中高 True 自行配置 可免 视服务器而定 视服务器而定
Hexo 中低 False 托管平台(GitHub、Gitee) 可免 视托管平台而定 低
Jekyll 中低 False 托管平台(GitHub、Gitee) 可免 视托管平台而定 低
Ghost 低 False 服务商提供的配置 可免 较快 高
Farbox 低 False 服务商提供的配置 可免 快 中

本教程选择是 GitHub + Hexo 进行搭建，GitHub 是一个面向开源及私有软件项目的托管平台。Hexo 是一个快速、简洁且高效的博客框架，在几秒内即可利用靓丽的主题生成静态网页。我们把 Hexo 生成的静态网页托管到 GitHub，通过访问 GitHub 绑定的域名来达到访问静态网页的效果。

0X02、GitHub配置

首先需要一个 GitHub 账号，注册账号之后，新建一个代码仓库用于存放生成的静态网页。

图片

项目创建成功之后，在 Setting –> Pages 里配置 GitHub Pages，选择构建和部署的分支。

图片

0X03、Hexo配置

1、安装

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git
    如果没有安装，可以按照推荐的教程进行安装。如果您的电脑已经安装上述必备程序，接下来只需要使用 npm 即可完成 Hexo 的安装。
1
2
3
node --version             # 查看node版本
npm install -g hexo-cli    # 安装 hexo
hexo version               # hexo版本号，查看是否安装成功 hexo: 6.3.0

2、建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件，指定的文件夹一定是空文件夹，否则会报错。

1
2
3
4
# 比如指定一个新的文件夹BlogSource, 用来存放源文件，没有指定文件，默认在当前文件
hexo init BlogSource
cd BlogSource
npm install

执行上述命令后，在 BlogSource 生成的目录如下：

图片

每个文件具体作用，查看官方文档说明。

3、配置

博客的网站标题、网站副标题、您的名字、网站使用的语言以及网站时区都可以在站点根目录下的 _config.yml 进行配置。查看官方文档，了解具体说明。

1
2
3
4
5
6
7
8
# ./_config.yml
title: Debug World
subtitle: '世界很大 我想盘它'
description: ''
keywords:
author: Debug World
language: zh-CN
timezone: Asia/Shanghai

Hexo和GitHub进行关联，在 _config.yml 找到 deploy，进行修改。

1
2
3
4
5
# ./_config.yml
deploy:
  type: git
  repository: https://github.com/xxxx.git    # 仓库地址链接
  branch: master

4、构建

进入BlogSource目录

1
2
3
cd BlogSource    # 进入BlogSource目录
hexo generate    # 把源文件生成静态文件。等同 hexo g
hexo server      # 启动本地服务器。等同 hexo s

用浏览器打开 http://localhost:4000/ 出现Hexo默认博文，就说明成功了。
图片

把静态网页推送到 GiHub

1
2
3
4
hexo deploy       # 把生成的静态文件部署到 GiHub 仓库
# hexo g -d       # 重新生成静态文件并部署到 GiHub 仓库
# 如果遇到 ERROR Deployer not found: git 错误，执行以下命令
npm install hexo-deployer-git --save

此时 GitHub 仓库就会有静态文件，如果没有绑定自己购买的域名，就会在 GitHub Pages 根据用户名和项目生成一个网页链接，此链接就是博客的网址。

图片

0X04、配置和第三方服务

1、主题选择

Hexo 是高效的静态站点生成框架，她基于 Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。NexT主题是我个人最喜欢的主题，精于心，简于形。查看NexT官方文档，了解具体使用说明。

下载主题

1
2
cd BlogSource     # 进入BlogSource目录
git clone https://github.com/theme-next/hexo-theme-next themes/next

可以在 themes –> next –> package.json 查看 NexT 版本。

图片

此时在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

图片

配置主题，修改站点配置文件里的 _config.yml 里 theme字段。

1
2
# ./_config.yml
theme: next      # theme: landscape 改成 theme: next

重新编译和运行

1
2
hexo generate    # 重新编译
hexo server      # 重新启动服务

打开网站就会发现，主题已经更换成 NexT。

图片

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

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

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

1
2
3
4
5
6
7
# ./themes --> next --> _config.yml

# Schemes
# scheme: Muse
# scheme: Mist
scheme: Pisces
# scheme: Gemini

下面是 Pisces 主题样式。

图片

2、元数据配置

1
2
3
4
5
6
7
8
# ./themes --> next --> _config.yml
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

3、文章设置

在站点根目录下的 source –> _posts 里新建md文件。下面是文章的设置。

1
2
3
4
5
6
7
8
9
---
title: 文章标题
date: 2019-06-13 18:00:00
updated: 2019-06-14 18:00:00
categories:
  - LeetCode
tags:
  - LeetCode
---

4、阅读全文

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

  1. 在文章中使用 <!– more –> 手动进行截断，Hexo 提供的方式(官方推荐方案，因为灵活)
  2. 在文章的 front-matter 中添加 description，并提供文章摘录
  3. 自动形成摘要，在 主题配置文件 中添加:
    1
    2
    3
    4
    # ./themes --> next --> _config.yml
    auto_excerpt:
      enable: true
      length: 150    # 默认截取的长度为 150 字符，可以根据需要自行设定

5、目录配置

取消目录自动添加编号并展开所有层级目录。在 主题配置文件 下配置。

1
2
3
4
5
6
7
8
9
10
11
# ./themes --> next --> _config.yml
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

6、站内搜索

当文章越来越多的时候，想要查找某篇文章的时候就比较麻烦了，虽然有分类(categories)和标签(tags)，这个时候就需要站内搜索功能了，通过比较各种主流插件最终选择了local_search。

安装插件

1
2
# 在站点根目录下执行
npm install hexo-generator-searchdb --save

站点配置文件

1
2
3
4
5
6
7
# ./_config.yml
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

主题配置文件

1
2
3
# ./themes --> next --> _config.yml
local_search:
  enable: true

7、多端同步

博客的维护需要多端同步，比如更换电脑，就需要copy源码以及配置文件，我采用的方案是在
GitHub 仓库新建一个项目用来保存 Hexo 配置文件。

图片

8、绑定域名

Hexo 绑定域名

9、查看插件

查看安装的插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm list

├── hexo-deployer-git@4.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-searchdb@1.4.1
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.0.0
├── hexo-renderer-stylus@2.1.0
├── hexo-server@3.0.0
├── hexo-theme-landscape@0.0.3
└── hexo@6.3.0

0X05、注意事项

  • NexT 的动画效果很赞但也很费内存
  • 每次更博或者修改配置的之后，上传到 GitHub 仓库才能生效，我用的命令是: hexo g -d
  • 每次构建和部署之后，需要等一段时间才会生效

0X06、总结

个人认为无论从事任何行业，写作都是提升技能的重要途径，希望大家通过本教程能够搭建个人独立博客，记录自己的成长。

0X07、参考

Hexo 官网文档
NexT 官方文档
Hexo-NexT