前行的足迹
0%

使用Hexo+NexT搭建博客

发表于 分类于 ， 标签 ， ，

引

从上篇文章到现在过去了4年，时间过得真快。
这几年一直没有写东西一方面是因为比较忙没太多的时间，一方面也是因为自己太懒了。
有时候现查现用，当时没做记录，之后就懒得再记了，毕竟把零散的记录整理成一篇可读的文章还是挺麻烦的。
现在想想确实有点儿可惜。
这段时间又接触了不少新东西，觉得还是应该把博客捡起来，把学的东西记录下来。
以后有时间的话，把之前记录的东西也整理整理陆续发出来。

既然又要开始写东西，那首先我要先折腾一下我的博客站。之前整个站点全都是通过javascript在前端动态加载生成的，
虽然方便，但是文章没办法被搜索引擎收录。要解决这个问题，那就要放弃之前使用的方案。

方案选择

方案其实一早就确定了方向。我希望能够沿用之前用markdown写文章的方式，并且尽量保留之前设计的网站样式。
不需要复杂的功能简简单单的能显示文章就好。所以我直接就锁定了那些通过markdown编写文章，最终生成静态网站的方案。
这样在博客文章这块就不需要做什么改动，只要把生成的静态网站的样式调整成和之前差不多就可以了。

早在第一次建站的时候，当时就有Jekyll方案可以选择，只不过当初对web这块相关的技术还都不太了解，所以选择了javascript方案方便自己学习。
现在这些对我来说已经不是问题了，这种生成静态页面的方案正适合我。

这么多年过去了，重新在网上找了一下目前主流的静态博客框架，除了Jekyll之外又出现不少新的框架，其中Hexo比较令我满意。

Jekyll的强大与完善自不必说，毕竟持续更新维护了这么多年，用户也很多，但是Hexo有两点直接让我选择了它。
首先他是基于Nodejs实现的，比起Ruby来说我对Nodejs更熟悉一些。再有就是Hexo的模板做的我比较喜欢，其中有一个模板刚好符合我的需求。
这样我需要做的调整就少了很多。

安装

Hexo官网有很详细的中文文档。按照文档步骤一步步来就可以。

  1. 安装nodejs

    我当前使用的系统的CentOS 7.8 x64，因为之前安装别的东西，已经有了nodejs，所以这步就省了，
    安装步骤无非就是先添加源，然后再通过yum进行安装

    1
    2
    curl --silent --location https://rpm.nodesource.com/setup_7.x | bash -
    yum install -y nodejs

    值得一提的是在之前解决其他问题的时候发现了一个能方便切换nodejs版本的东西，一个专门用来管理nodejs版本的n模块。
    安装方式很简单直接用npm安装

    1
    npm install -g n

    使用这个模块切换nodejs版本就很方便，比如像切换到8.0版本只需要输入

    1
    n 8.0

    就可以方便的切换完成。

    npm升级的方法也很简单，直接用自己升级自己…

    1
    npm install npm -g

    就完了… 真是方便…

  2. 安装hexo

    一句话搞定

    1
    npm install -g hexo-cli

    接下来就可以创建一个测试站点了

建站

通过hexo执行初始化命令

1
2
3
hexo init <folder>
cd <folder>
npm install

然后耐心等待npm自动下载依赖库就好，创建完成后站点路径下的主要目录结构是这样的：

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── node_modules
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml: 站点配置文件
  • package.json: nodejs项目的配置文件，主要描述了项目的依赖库和一些由npm调用的命令
  • node_modules：执行npm install后下载的依赖库
  • scaffolds：生成文章用的模板，在用命令创建新的文章的时候，会从这个目录下寻找对应的模板创建文件。
  • source: 存放文章的地方，放在其中的markdown文件会被生成静态页面，其中_posts用来存放博客文章，_drafts用来存放草稿，这里还可以创建其他的目录，用来生成不同的页面。
  • themes: 存放主题的地方，Hexo可以下载各种主题放在这里，然后通过配置文件方便的切换。

Hexo常用命令：

1
2
3
4
5
6
7
8
9
10
11
12
#初始化站点
hexo init <folder>

#生成静态页面 执行成功后会在站点路径下public目录中生成静态站点 直接拿出去部署就可以了
hexo g

#打开hexo server hexo会生成站点并在本地开启http服务，并且支持动态修改不需要重启服务。
#执行后默认在本地4000端口开启服务，访问http://localhost:4000就可以看到站点了
hexo server

#创建新文章或页面, layout就是和站点文件下scaffolds中匹配的名字，title是文章的标题。
hexo new [layout] <title>

创建出来的md文件，在文件最上方会有以---分割的区域，这个区域叫做Front-matter，用于指定文章的信息。

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

常用的属性有：

  • title：文章标题
  • date：建立日期
  • comments 是否开启评论
  • tags 标签
  • categories 分类

这种把信息直接写在文章头部的方式，比我之前单独写json文件方便了许多。

下面就该去调整站点样式了

下载和更换模板

之前在选方案的时候就确定了网站模板那就是Next, 它的版式和风格都很合适，而且功能也很完善。
安装主题的方法很简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。

1
2
cd <folder>
git clone https://github.com/iissnan/hexo-theme-next themes/next

然后修改站点配置文件_config.yml

1
2
#启用NexT主题
theme: next

NexT模板配置

NexT模板是一个功能强大而且完善的模板，它有很多可以配置的东西，一套模板中存在三种主题可以切换，
通过修改配置文件做很多定制，本身有完整的多语言支持，同时支持继承第三方服务。而且官网有详细的中文文档，
对各个功能都有详细的说明，只要按照文档一步步的进行配置就可以了。

下面说一些NexT比较有特色的东西

  1. 主题Scheme

    Scheme是NexT提供的一种特性，通过切换Scheme，可以得到不同的外观，目前NexT包含三种Scheme

    • Muse： 默认Scheme
    • Mist： Muse的紧凑版本
    • Pisces： 双栏Sheme

    切换Scheme只需要修改主题配置文件中scheme配置即可

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

    依次尝试后发现Mist主题和我之前的版式最接近，所以我选择了Mist外观。

  2. 导航菜单

    导航菜单需要通过主题配置文件进行设置。在配置文件中可以定义这些导航菜单的名称和链接、显示文本和对应的图标。
    通过menu字段设置菜单项的链接地址
    主题配置文件中已经列出了默认的菜单项，默认只有home和archives是打开的。

    1
    2
    3
    4
    5
    6
    7
    menu:
      home: /
      archives: /archives
      #about: /about
      #categories: /categories
      tags: /tags
      #commonweal: /404.html

    其他的菜单项除了需要这里打开，还需要手动创建页面才能够正常显示。

    1
    2
    3
    4
    5
    6
    7
    8
    #创建关于页面
    hexo new page about

    #创建标签页面
    hexo new page tags

    #创建分类页面
    hexo new page categories

    执行之后在source路径下就会创建出对应的目录，并会在其中创建index.md文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    source
    ├── about
    |   └── index.md
    ├── tags
    |   └── index.md
    ├── categories
    |   └── index.md
    ├── _posts
    |   └── ...
    └── _drafts

    about页面只要正常的书写内容就可以了，需要注意的是tags和categories页面，
    在Front-matter区域需要添加type字段

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #source/categories/index.md
     ---
    title: 分类
    date: 2021-08-18 10:50:47
    type: "categories"
    ---
     
    #source/tags/index.md
    ---
    title: 标签
    date: 2021-08-18 10:49:50
    type: "tags"
    comments: false
    ---

    这两个文件只要定义好Front-matter就可以了，不需要写文章内容，生成后NexT会自动在页面内显示对应的内容。

  3. 侧栏

    NexT有一个很好的侧栏，可以通过按钮展开和收起，在非文章页面显示头像，昵称和三个快捷导航可以跳到archives、categories和tags页面。
    在文章页面时会显示文章目录，这个功能我很喜欢。
    在站点配置文件中，可以配置侧栏的位置是在左边还是右边，以及侧栏显示的时机。通过设置可以做到在显示文章页面时主动展开侧栏，其他页面时收起侧栏。

文章迁移

由于我的文章之前就是用markdown书写的，所以迁移起来很方便，只需要把文章放到source/_posts下并且在文章最上方补上Front-matter的内容就可以了。
关于页面直接将文章内容复制到source/about/index.md中即可正常显示。

到这步，我的站点迁移从功能上已经完成了，接下来就是对界面布局和配色做一些修改，让它看起来和我之前的样式接近。

模板文件修改

NexT的模板目录结构还是很清晰的，需要关注的主要是两个路径

  • layout：存放的是各种用swig模板编写的html片段，对于swig我不怎么了解，但是模板语言基本上都是这个样子，看懂逻辑做简单的修改不是什么问题。
  • source/css：存放模板css样式

需要注意的是由于NexT模板是有多个Scheme的，所以在修改的时候要找到对应Scheme的文件，NexT的路径结构组织的很好，不同Scheme的文件会放在Schemes\主题名字路径下。
找到对应的文件然后修改就好了。

列一下我做的修改：

  • 页面宽度调成了和老站点一致
  • header调整了高度，做成了更窄的条，调整了条标题和菜单的位置和尺寸，由于侧栏有标签页和分类页的入口，所以顶栏菜单我只保留了归档和关于，简简单单。
  • footer调整了一下copyright和备案号的显示样式，调整了一下power by的显示顺序，之前power by显示在copyright下面，上面宽下面窄看起来怪怪的…
  • 主页显示文章增加了边框样式，看起来和老站点一样，这样每篇文章的区分就明显了很多，但是文章页没有加边框样式，新的文章页没有边框看起来更宽了一些。
  • 调整了文章标题的显示样式，沿用了老站点的红色标题，在标题和文章meta区域之间增加了分割线。
  • 文章meta区域原本没有标签显示，表现原本是显示在文章页最底部的，我将标签显示移到了meta区域。

经过一番修改，新站点看起来已经和老站点比较像了，而且还有了新的侧栏，页面还有了动画，比以前更高大上了。

部署

Hexo有很方便的一键部署功能，只要做好相关的配置则可以自动生成静态站点并将public目录中的文件推送到_config.yml中指定的远端仓库中，并且完全覆盖该分支下的已有内容。
操作步骤很简单

  1. 安装hexo-deployer-git

    1
    npm install hexo-deployer-git --save

  2. 修改_config.yml站点配置文件

    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
      branch: [branch]
      message: [message]

配置完成后执行hexo clean && hexo deploy即可完成部署。

如果使用的是GitHub那执行完deploy就可以了，但是由于我是自建服务器，所以还需要一些额外的手动步骤。

  1. 给发布文件建立一个git仓库，配置hexo deploy将部署文件推送到该仓库中。

  2. 在远程Server端clone发布文件仓库。

  3. 给他们都配置好ssh密钥，用于免密码登录。

  4. 编写一个脚本来执行整个发布流程。

    • 执行hexo deploy
    • 文章编写也有自己独立的git仓库，提交改动
    • ssh到server端执行git pull

这样我的自动发布脚本就完成了。

后记

  1. 关于首页文章添加阅读全文的功能，官方推荐的做法是直接在文章中合适的位置插入<!--more-->标记，这种方式可以精准的控制每个文章在主页显示的长度。
    虽然很想吐槽… 但不得不说这确实是一个好办法…

  2. NexT模板由于有多个主题，所以里面有一些没用的文件，有时间的话可以精简一下。

  3. Hexo框架安装虽然一句命令就搞定了，但是在初始化站点工程的时候下载的依赖库又多又大..老站点工程连1M都没有，新工程竟然有61M… 光node_modules就占了50M，真恐怖…

  4. 就在我写这篇文章的时候，我又发现了另一个静态博客框架Hugo, 它是由Golang实现的静态网站生成器，特点是生成速度快，安装方便。不像Hexo需要先装nodejs再安装一大堆依赖库，
    仅仅下载一个可执行文件就可以用了。下载下来试了一下，功能也满足需求，路径结构、实现思路也和hexo差不多，唯一遗憾的地方就是没找到合适的theme像NexT一样让我满意，
    我想把NexT的样式移过去，可惜实在是没那么多时间了，而且刚折腾完Hexo也实在折腾不动了… 就先用Hexo吧，更换Hugo框架就当作未来的课题吧。

  5. 记录一些参考资料

    Hexo
    NexT
    5分钟搞定个人博客-hexo
    hexo史上最全搭建教程
    Hexo | 搭建自己的个人博客
    Hexo | NexT打造一个炫酷博客
    hexo+next教程(一)
    Hugo
    Jekyll
    这两年经历了hexo到jekyll再到hugo，推荐hugo
    个人博客建站中jekyll/hexo/Hugo各自的优势与区别