hexo博客的配置过程
发表更新tools21 分钟读完 (大约3221个字)0次访问

hexo博客的配置过程

安装环境

步骤就两个，先安装nodejs，然后再安装hexo

在linux上安装nodejs时，如果需要安装最新版本，需要根据nodejs官网的步骤进行：

1
2
3
4
5
6
7
# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
sudo apt-get install -y nodejs

其中的18.x可以换成17.x或者16.x以安装不同版本的nodejs。

nodejs安装后，进行hexo的安装：

1
npm install -g hexo-cli

初始化hexo目录

hexo目录可以理解为hexo网站所有源数据的存放处，hexo作为一个博客管理，从md生成博客网页的工具，自然是有一套自己的文件架构，需要使用hexo自带命令来初始化一个目录，作为hexo数据的存放点：

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

初始化之后，在目标文件夹下面，会出现以下内容：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中，_config.yml是最重要的配置文件，theme是主题，source就是我们写的文章的保存地，这些文件切勿删除！

先进行初步的设置

我们先来进行最初步的设置，使得hexo可以按照我们的想法生成一个我们的网站：

1
2
cp _config.yml _config.yml.save
nano _config.yml

配置文件的主要修改地方如下：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
# 网站的基本信息，
title: 网站名称
subtitle: 副标题
description: 网站的描述
keywords: # 网站关键词，对搜索引擎有用
  - python
  - IT
  - mysql
  - 数据库
  - css
  - react
  - js
  - javascript
  - ubuntu
  - centos
  - 机器学习
  - 数据分析 
author: 作者名称
language: zh-CN  # 一定不要写错
timezone: Asia/Shanghai  # 一定不要写错

# 网站打开的url
url: https://www.haoran.co
install_url: https://www.haoran.co
permalink: :year/:month/:title/  # 网站中文章的url规则
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory， 不需要动
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing，可以按照默认配置来即可，我在这里修改了new_post_name，这样让我的文章可以按照日期排列，比较好管理
new_post_name: :year-:month-:day_:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: '    '
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# 默认即可，可以按需修改，我把每页改成8篇
index_generator:
  path: ''
  per_page: 8
  order_by: -date

# Category & Tag， 默认即可
default_category: uncategorized
category_map:
tag_map:

# Metadata elements， 默认即可
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format， 按照喜欢的时间格式修改
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'date'  # 官方文档有解说，可根据官方解说修改

# Pagination，默认即可
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)，默认即可
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions， 这里是主题的修改，需要把主题下载下来，放在themes文件夹，这里的theme与主体所在文件夹的名字要一致！
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# theme: landscape
theme: icarus

# Deployment, 部署的时候的选项，有很多种，按照需要配置，我这里配置到git上面
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://*.git  # 填写你自己的git地址
  branch: 'main'  # 填写你自己的分支名称，有的是master，有的是main，也可以创建别的分支，在这里写上
  message: 网站更新： {{ now('YYYY-MM-DD HH:mm:ss') }})   # 自定义更新的时候的commit message
  token: *** # 访问git的时候，使用的token，在git项目中设置

# password
encrypt: # hexo-blog-encrypt
  abstract: 查看本文需提供访问密码
  message: 请输入查看密码
  tags:
  - {name: #要加密的tag, password: 对应的密码}
  wrong_pass_message: 您提供的密码不正确，请检查输入是否有误！
  wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.

安装主题，进行主题的设置

经过寻找，最终我选择的主题是icarus，链接：https://github.com/ppoffice/hexo-theme-icarus

官方网站看上去还是不错的：

icarus官网

安装很简单：

1
2
npm install hexo-theme-icarus
hexo config theme icarus

然后对主题的配置文件进行更新：

1
nano _config.icarus.yml

由于主题已经说的很清晰了，于是我就不再细说了，只说几个自行修改的地方

设置两套widget，post页面单独设置

我发现默认的配置是左右两边都有widget，打开文章的时候，文章比较窄，解决办法就是新建一个_config.post.yml文件，在里面单独设置post页面的widget，这样就单独把post页面的widget布局给设置好了

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
32
nano _config.post.yml

# 内容如下：
# Sidebar configurations.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # Right sidebar configurations
    right:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: true
widgets:
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: toc
        # Whether to show the index of each heading
        index: true
        # Whether to collapse sub-headings when they are out-of-view
        collapsed: true
        # Maximum level of headings to show (1-6)
        depth: 3
    # Recent posts widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: recent_posts
    # Categories widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: categories

添加背景图片等自定义

主题文件也有一些我想自己diy的地方，最直接的就是更新style文件，推荐新建一个文件来管理diy的部分：

1
nano themes/icarus/source/css/custom.styl

添加以下内容是添加一张自定义图片，其中/img/bg_pic.webp是在icarus的source文件夹下面的，直接放上图片即可：

1
2
3
4
5
6
.body
    background-image url("/img/bg_pic.webp")
    background-position center center
    background-repeat no-repeat
    background-attachment fixed
    background-size cover

修改了foot和widget的透明：

1
2
.widget, .footer
    background-color rgba(255, 255, 255, 0.7)

修改了foot的高度：

1
2
.footer
    padding 3rem 1.5rem 3rem

在foot中添加以下备案号之类的信息：

打开主题文件夹下面的layout/common/footer.jsx文件，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
<p class="is-size-7">
                      <span dangerouslySetInnerHTML={{ __html: `&copy; ${siteYear} ${author || siteTitle}` }}></span>
                      &nbsp;&nbsp;Powered by <a href="https://hexo.io/" target="_blank" rel="noopener noreferrer nofollow">Hexo</a>&nbsp;&&nbsp;
                      <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener noreferrer nofollow">Icarus</a>
                      {showVisitorCounter ? <br /> : null}
                      {showVisitorCounter ? <span id="busuanzi_container_site_uv"
                          dangerouslySetInnerHTML={{ __html: visitorCounterTitle }}></span> : null}
                  </p>
                  
                  # 下面是自己添加的内容，在这里添加
                  <p class='is-size-7'>
                      <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery">你的备案号</a>
                  </p>

添加加密文章的功能

事实上，在前面初步设置的时候，最后面的设置就是为此服务的，我们需要安装以下插件：

1
npm install --save hexo-blog-encrypt

具体文档查看：https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md

搜索引擎友好设置

为了让我们的网站对搜索引擎更加友好，我们需要为网站添加以下sitemap，并添加robots.txt文件，具体操作如下：

先安装相关插件：

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

这里分别生成了两套面对google和baidu的sitemap，具体两个项目地址是：

hexo-generator-sitemap：https://github.com/hexojs/hexo-generator-sitemap

hexo-generator-baidu-sitemap：https://github.com/coneycode/hexo-generator-baidu-sitemap

然后要在_config.yml文件中添加如下配置：

1
2
3
4
5
6
7
8
baidusitemap:
  path: baidusitemap.xml
sitemap:
  path: 
    - sitemap.xml
  rel: false
  tags: true
  categories: true

配置完成之后，访问网站https://*./sitemap.xml以及https://*./baidusitemap.xml就可以看到sitemap内容。

我们还可以在google和baidu的相关网站上面配置收录我们的网站，这里就不细说了。

我们还要再添加以下robots.txt，这样搜索引擎可以更快的知道我们的网站哪些内容可以抓取，哪些不要抓取：

这个功能也是借助一个插件来完成：hexo-robotstxt-multisitemaps，地址：https://github.com/anthonyweidai/hexo-robotstxt-multisitemaps

先安装：

1
npm install hexo-robotstxt-multisitemaps --save

然后在_config.yml文件中添加如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# robots文件配置
robotstxt:
  useragent: "*"
  disallow:
    - /vendors/
    - /js/
    - /css/
    - /fonts/
    - /fancybox/
  allow:
    - /
    - /archives/
    - /categories/
    - /tags/
    - /about/
#    - 其他你想添加的页面
  sitemap: 
    - /sitemap.xml
    - /baidusitemap.xml

这样我们的博客部署之后，就能够自动生成robots.txt文件了

为hexo博客添加rss功能

添加rss可能是一个比较个性化的需求，也有专门的插件来做这件事情：hexo-generator-feed，地址：https://github.com/hexojs/hexo-generator-feed

还是先安装插件：

1
npm install hexo-generator-feed --save

然后在_config.yml文件中添加配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# rss功能配置
feed:
  enable: true
  type: atom
  path: atom.xml  # rss的路径
  limit: 20  # 展示文章的数量,使用0或则false代表展示全部
  hub:
  content: false  # 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
  content_limit: 140  # 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
  content_limit_delim: ' '  # 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.
  order_by: -date
  icon: /img/site.svg
  autodiscovery: true
  template:

这样设置好之后，访问博客的rss链接就变成了：https://*.*/atom.xml

为hexo博客的图片设置懒加载模式

如果博客上有图片而且图片不小的话，加载图片很可能会拖慢网页访问的速度，我们借助一个已有的插件，来实现图片的懒加载：

hexo-lazyload-image，链接：https://github.com/Troy-Yang/hexo-lazyload-image

先安装以下插件：

1
npm install hexo-lazyload-image --save

然后在_config.yml中添加配置：

1
2
3
4
5
6
lazyload:
  enable: true
  onlypost: false # true的话只有来自帖子或页面的图像将支持延迟加载，否则全部都懒加载
  loadingImg: # 在未加载出来期间，显示哪一个图片，当然是要一个很小的图片啦
  isSPA: false # 如果你的主题是 SPA 页面，请将其设置为 true 以使延迟加载生效
  preloadRatio: 1 # 为了获得更好的体验，默认值为 1。此比例表示预加载与当前屏幕尺寸相比在多少比例范围内的图像

这样就完成啦

写文章之前的最后一步：配置模板

配置模板是为了把一些文章固定的参数给确定下来，避免每次文章都要重复的设置，模板存放在scaffolds文件夹下面，有三个md文件，就是我们的模板。根据以上的插件，以及主题文件，我将post.md和draft.md都修改成了以下内容：

1
2
3
4
5
6
7
8
9
10
11
---
title: {{ title }}
date: {{ date }}
tags:
categories:
excerpt: # 文章的摘要
toc: true  # 是否开启目录，还要配合theme的配置一起使用
cover:  # cover图片
updated:  # 最后更新时间
password:  # 访问时需要的密码
---

这些默认信息可以方便我在写新文章时，不要忘记做这些配置。

开始写文章

写文章也有两个选择，一是直接写，二是先写成草稿，再发布。

直接写的话，运行以下命令：

1
hexo new post "文章的名称"

然后就会在source/_posts文件夹下面产生一个.md文件，就可以用我们的编辑器对这个文件编辑啦

先写草稿的话，也差不多，运行以下命令：

1
hexo new draft "文章的名称"

能够在source/_drafts找到新产生的.md文件，写完文章后，再运行：

1
hexo publish draft "文章的名称"

就可以把文章发布出去啦(其实就是移动到_post文件夹)。

博客的部署

写完文章后，我们需要使用hexo，来把我们的博客转换成一个静态的网站：

1
2
3
4
hexo g
hexo d
# 或者简化为：
hexo d -g

hexo将会根据配置文件中的deploy配置，将静态网站文件发布到相应的地方。部署到github.io已经有很多教程了，我的网站是单独部署到云主机上，日后单独开一篇文章写一下部署过程。

hexo博客的配置过程

https://www.haoran.co/2022/06/hexo博客的配置过程/

作者

Haoran

发布于

2022-06-05

更新于

2022-06-07

许可协议

#

喜欢这篇文章？打赏一下作者吧

最新文章

分类

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×