0%

使用Hexo搭建博客系统

使用hexo搭建博客系统分四步,讲逐步介绍

  1. 安装hexo
  2. 安装主题
  3. 配置hexo
  4. 设置主题

安装hexo

hexo是基于nodejs的静态博客系统框架,hexo 源码托管在git上,因此安装hexo之前需要安装nodejs 和 git。安装git 和 nodejs不再介绍。假设git和nodejs已经安装并配置完成。
1、安装hexo组件,运行命令

1
npm install -g hexo-cli

2、将hexo 所在目录的node_modules添加到环境变量,否则每次输入hexo命令时都需要带上npm ,就如这样npm hexo
3、初始化hexo,生成项目目录

1
hexo init <项目名称>

4、cd 项目目录、安装hexo项目依赖

1
npm install

5、初始化的hexo项目自带了主题,如果对自带主题不满意,继续下边步骤,安装新主题。

安装主题

  1. hexo官网提供了很多主题,挑选自己喜欢的主题,并 下载主题 ,总有一款适合你。
  2. 将下载后的主题拷贝到项目里的themes目录下。

配置hexo

hexo的配置主要有三大部分、网站信息,链接设置,主题选择。在跟目录下的 /_config.yml 中配置
1、网站信息

1
2
3
4
5
6
7
8
# Site
title: XXX #网站名
subtitle: subXXX #副标题
description: 这是我的博客系统 #网站描述
keywords: 博客系统 #关键词
author: Ltens #作者
language: zh-CN #语言(在所使用主题下的languages目录下,选择需要的语言包)
timezone: Asia/Shanghai #时区

2、链接设置
hexo默认博客系统访问链接是根据年月日+文件名生成的(:year/:month/:day/:title/),如果对此不满意可使用固定链接。
下边介绍使用 hexo-abbrlink 生成固定链接。
    2.1、安装依赖

1
npm install hexo-abbrlink --save

    2.2、设置链接模式

1
2
3
4
5
6
7
8
url: http://www.zuze.net #网站跟路径
permalink: posts/:abbrlink.html #博客系统内容访问链接为http://www.zuze.net/posts/xxxx.html(abbrlink 为下方算法的关键字)
abbrlink: #算法关键字
alg: crc32 #算法:crc16(default) and crc32
rep: dec #进制:dec(default 10进制) and hex(16进制)
pretty_urls:
trailing_index: false # 设置为true 链接尾部不带index
trailing_html: true # 设置为true 链接尾部不带 .html 后缀

3、主题选择
这里以hexo-theme-next为例介绍主题的使用,因为hexo-theme-next已停止维护,因此选择的是 社区维护的版本
1、因为hexo-theme-next名字太长,修改主题目录名为next。 将next主题放在/themes下。
2、修改hexo配置(/_config.yml) 中的默认主题 theme: landscapetheme: next、以及 language: language: zh-CN

设置主题

这里是用的是hexo-theme-next主题,现在就介绍下hexo-theme-next主题的主要配置
1、菜单设置
hexo-theme-next默认开启的菜单只有homearchives、这里我有开启了三个菜单,分别是 abouttagscategories
    1.1、开启菜单

1
2
3
4
5
6
7
8
9
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat

    1.2、创建菜单目录

1
2
3
hexo new page about
hexo new page tags
hexo new page categories

  1.2.1、设置 tags,/source/tags/index.md

1
2
3
title: 标签 #修改为你想要的标签名
date: 2022-02-18 19:28:53
type: tags #设置关键字,在写文章时,用关键字标记标签。

        1.2.2、设置 categories,/source/tags/categories.md

1
2
3
title: 分类 #修改为你想要的分类名
date: 2022-02-18 19:28:53
type: categories #设置关键字,在写文章时,用关键字标记分类。

        1.2.3、完善 /source/tags/about.md对网站的介绍

2、设置网站风格,需要哪个开启哪个

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

3、开启摘要,并显示阅读更多按钮

1
2
excerpt_description: true
read_more_btn: true

4、404页面设置、在/source下新建404.html文件,并在主机中设置404重定向到/404.html。文件内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>

5、更多的配置按照 主题目录下的 _config.yml的介绍配置,下边介绍hexo几款插件
    5.1、全局搜索
        5.1.1、安装插件

1
npm install hexo-generator-searchdb --save

        5.1.2、在主题的_config.yml中进行配置

1
2
3
4
5
search:
path: search.xml
field: post
content: true
format: html

    5.2、网站地图、安装插件后、无需其他处理,自动生成sitemap.xml

1
npm install hexo-generator-sitemap --save

6、写文章
    6.1、创建文件,会在/source/_posts下创建一个 .md文件

1
hexo new 文件名

    6.2、编辑文件,打开/source/_posts下新建的.md文件

1
2
3
4
5
6
7
8
---
title: 文章标题 #自动生成,默认用的是文件名,可手动修改
date: 2022-02-20 20:52:35 #文件创建时间、自动生成
tags: #多个标签用[]扩起来,标签中间用半角逗号","分割、tags关键字自动生成(这里的tags就是/source/tags/index.md中配置的type: tags)
categories: #分类、此关键字需要手动添加到这里(categories/source/categories/index.md中配置的type: categories)
description:摘要内容 #如果主题配置项中的 excerpt_description:true 则摘要会在首页作为本文的全部内容显示出,通过点击标题或更多看完整的文章内容。
---
继续完成文章……

到此hexo搭建博客系统简单的介绍完了。