Hexo搭建博客教程-基于Butterfly主题Hexo和Hugo安装Hexo主题快速开始（后面的都以Butterfly主题为例）生成导航菜单开启404代码风格社交图标主页文章节选文章封面文章页相关配置头像主页侧边栏设置不蒜子原理评论系统搜索（algolia）字数统计网站背景图片文章生成永久url连接自定义图标部署到Gitee同时部署到Github写文章CDN全站加速diy部分1diy部分2

71 阅读 0 评论 47 点赞

我是靠谱客的博主犹豫水杯，最近开发中收集的这篇文章主要介绍Hexo搭建博客教程-基于Butterfly主题Hexo和Hugo安装Hexo主题快速开始（后面的都以Butterfly主题为例）生成导航菜单开启404代码风格社交图标主页文章节选文章封面文章页相关配置头像主页侧边栏设置不蒜子原理评论系统搜索（algolia）字数统计网站背景图片文章生成永久url连接自定义图标部署到Gitee同时部署到Github写文章CDN全站加速diy部分1diy部分2，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

title: Hexo搭建博客教程
tags:

Hexo
博客教程
categories:
Hexo
keywords: ‘Hexo,博客教程’
description: Hexo搭建博客，以及主题butterfly中一些常规配置。
cover: ‘https://unpkg.zhimg.com/youthlql@1.0.8/blog/Cover-Hexo-Butterfly.png’
abbrlink: ‘2e704894’
date: 2020-10-01 16:21:58

特别强调一点，修改文件一定要用csvode打开。不然会出现各种莫名其妙的格式问题

Hexo和Hugo

1、Hexo我个人认为最大的优点目前就是主题多，缺点就是生成静态文件 (hexo g) 速度慢。Hexo是基于Nodejs的，有很多插件，但是加载费时。并且当md文档成百的时候，可能hexo g一次几分钟，体验感不好（不过几分钟也还好，不是特别长），Hexo目前貌似也是在进行优化

2、Hugo使用自带的Go html模板实现，速度快，基本上在 Hexo 上面几分钟，使用 Hugo 只需要十几秒钟。然而Hugo目前主题太少，找不到什么满意的主题。

3、我个人搭建博客比较喜欢漂亮的主题，所以目前用的Hexo。

安装Hexo

步骤

首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为 blogtest 的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择 Git Bash Here，然后依次输入如下命令，：

# hexo框架的安装
npm install -g hexo-cli

# 等上一个命令完成后，在输入下面的命令
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>

npm install  # 安装博客所需要的依赖文件

验证

注意：后续的命令均需要在站点目录下（即文件夹内）使用 Git Bash 运行。

等待运行完成，此时文件夹中多了许多文件。此时 Hexo 框架的本地搭建已经完成了，我们来运行一下看看，命令行依次输入以下命令进行本地验证:

hexo g && hexo s

浏览器中打开 http://localhost:4000 或者 127.0.0.1:4000，可以看到一个网页，说明 Hexo 博客已经成功在本地运行。

主题快速开始（后面的都以Butterfly主题为例）

官方文档：https://demo.jerryc.me/posts/21cfbf15/

官方文档的配置相当详细了，这里只是记录下我的配置过程，以及一些细节坑。对于默认不需要改动的配置就不说了

安裝插件

如果你沒有 pug 以及 stylus 的渲染器，請下載安裝：

npm install hexo-renderer-pug hexo-renderer-stylus --save

这个命令一定要执行，不执行的话后面会出问题。

升级建议

我用的是_config.butterfly.yml这个方法。后续如果没有特殊说明，改动的配置都是_config.butterfly.yml这个文件里的。

验证

执行以下命令，如果发现页面和之前验证的页面不一样了，说明主题配置成功

hexo g && hexo s

生成导航菜单

再次提醒：后续的命令均需要在站点目录下（即文件夹内）使用 Git Bash 运行。

1、生成标签页，分类页，友情链接等等按照文档要求做即可。做完之后，需要将_config.butterfly.yml下面的配置打开，butterfly3.2.0版本是注释掉了，打开之后。再次本地运行验证，就会发现页面右上角出现了几个菜单就算成功了。

关于作者

2、hexo new page about可以生成关于页，和上面生成标签页，分类页一个意思，也可以自定义名字，只要和下面的配置对上号就可以。

清单

注意中文需要自己在这里手动改，改成ch-zn没有用。

#改动的地方
menu:
  首页: / || fa fa-home
  时间轴: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-folder-open
  清单||fa fa-heartbeat:
    - 友人帐 || /link/ || fa fa-link
    - 分享 || /share/ || fas fa-share
  留言板: /messageboard/ || fas fa-comment-dots
  关于作者: /about/ || fas fa-user-tag

留言板

hexo new page messageboard

开启404

将_config.butterfly.yml对应的配置打开即可。

# A simple 404 page
error_404:
  enable: true
  subtitle: '頁面沒有找到'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

代码风格

修改_config.butterfly.yml对应的配置，mac比较好看。

#改动的地方
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
code_word_wrap: false

社交图标

图标库

https://fontawesome.com/icons?from=io

#改动的地方
social:
  fab fa-github: https://github.com/youthlql || GitHub
  fab fa-qq: 1826692270 || QQ：1826692270
  fa fa-address-card: https://blog.csdn.net/Youth_lql || 我的CSDN

主页文章节选

#改动的地方
index_post_content:
  method: 2
  length: 500 # if you set method to 2 or 3, the length need to config

文章封面

这里我设置的是封面统一显示在左边

cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  # 改动的地方
  position: left
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

文章页相关配置

文章meta显示

# 改动的地方
post_meta:
  page: # Home Page
    date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: true # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

文章打赏

# 改动的地方
reward:
  enable: true
  QR_code:
    - img: https://unpkg.zhimg.com/youthlql@1.0.8/blog/wechat.jpg
      link:
      text: 微信
    - img: https://unpkg.zhimg.com/youthlql@1.0.8/blog/alipay.jpg
      link:
      text: 支付宝

头像

# 改动的地方
avatar:
  img: https://unpkg.zhimg.com/youthlql@1.0.8/blog/avatar.jpg
  effect: false # 頭像會一直轉圈

主页侧边栏设置

侧边栏排版及内容

# 改动的地方
aside:
  enable: true
  mobile: true # display on mobile
  position: left # left or right
  card_author:
    enable: true
    description:
    button:
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/youthlql
  card_announcement:
    enable: true
    content: 这里是公告。
  card_recent_post:
    enable: true
    limit: 10 # if set 0 will show all
    sort: date # date or updated
  card_categories:
    enable: true
    limit: 0 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: true
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true

运行时间

# 改动的地方
runtimeshow:
  enable: true
  publish_date: 1/27/2020 00:00:00

不蒜子原理

1、不蒜子可以同时网页的UV和PV主要是通过域名来定位的，比如说我现在只有gitee的域名，https://youthlql.gitee.io/。

假设我再将博客放到github上并且自定义域名，那么他网站的UV和PV会重新计算。

2、文章的阅读量也是由不蒜子算的，是通过域名和URL链接来定位是哪篇文章。

评论系统

评论系统和说说功能在我的另一篇文章里有细讲

推荐valine，好用且评论的人不用登陆

# 改动的地方
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
  use: 
    - Valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in top_img

# 改动的地方
valine:
  appId: 你自己的ID # leancloud application app id
  appKey: 你自己的Key # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-CN/zh-TW/en/ja
  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)

搜索（algolia）

algolia（放弃了）

很详细的一篇博客：https://blog.csdn.net/qq_35479468/article/details/107335663

上面的文章讲的很详细了，下面对一些细节进行补充

1、这个是根目录的_config.yml文件

algolia:
  applicationID: 'your applicationID'
  apiKey: 'your apiKey'
  adminApiKey: 'your adminApiKey'
  indexName: 'your indexName'
  chunkSize: 5000

这个配置里的indexName是你之前创建的那个index的名字。

2、每当你上传一篇新的文章，就要使用下面两个命令更新一下索引。

export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia

或者把HEXO_ALGOLIA_INDEXING_KEY配到系统环境变量里，这样就只需要输入hexo algolia命令了

3、刚注册的algolia可能显示的是试用版，它会让你更改计划，你点进去，拉到最下面改成Free版的就行。

本地搜索

# Local search 本地搜索
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

需要安装插件

npm install hexo-generator-search --save

加速（可选）

Hexo-BlogthemesButterflysourcesourcejslocal-search.js` 找到如下内容因该是在 `55行`左右
修改 `url: GLOBAL_CONFIG.root + path,` 为 `url: "https://cdn.jsdelivr.net/gh/你GitHub的用户名/你GitHub的用户名.github.io/search.xml",

 function search (path) {
    $.ajax({
      url: "https://cdn.jsdelivr.net/gh/youthlql/youthlql.github.io/search.xml",
      dataType: 'xml',
      success: function (xmlResponse) {
        // get the contents from search data
        const datas = $('entry', xmlResponse).map(function () {
          return {
            title: $('title', this).text(),
            content: $('content', this).text(),
            url: $('url', this).text()
          }
        }).get()

字数统计

#改动的地方
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

同时安装wordcount插件，不安装的话运行会报错

npm i --save hexo-wordcount

网站背景图片

#改动的地方
background: url(https://unpkg.zhimg.com/youthlql@1.0.8/blog/background.jpg)

# 改动的地方
# the banner image of home page
index_img: https://unpkg.zhimg.com/youthlql@1.0.8/blog/background.jpg

上面两个地方改了之后整个主页就是自定义图片了，个人感觉还挺好看。

文章生成永久url连接

步骤

1、首先安装插件

npm install hexo-abbrlink --save

2、然后改配置

# 改动的地方
url: http://youthlql.gitee.io
root: /
#permalink: :year/:month/:day/:title/
permalink: post/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

效果区别

1、下面这个是默认的配置

permalink: :year/:month/:day/:title/：(http://localhost:4000/2020/04/16/计算机网络-总结/)

2、修改之后

# dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制
crc16 & hex
https://youthlql.gitee.io/posts/66c8.html

crc16 & dec
https://youthlql.gitee.io/posts/65535.html

crc32 & hex
https://youthlql.gitee.io/posts/8ddf18fb.html

crc32 & dec
https://youthlql.gitee.io/posts/1690090958.html

好处

在以后进行文章评论的合并，不蒜子阅读量的合并上都有用处。

自定义图标

: 这种自定义图标如何实现呢？

阿里阿巴图标库：https://www.iconfont.cn/

用svg的格式，把代码复制下来，然后改一下高度和宽度即可

部署到Gitee

# 改动的地方
deploy:
  type: git
  repo: https://gitee.com/youthlql/youthlql.git
  branch: master

安装发布的插件

npm install hexo-deployer-git --save

直接部署

hexo clean && hexo g && hexo d

几个坑

这部分网上可以搜到一堆，就不细讲了。注意几个问题就行

1、如何创建一个首页访问地址不带二级目录的 pages，如ipvb.gitee.io？

答：如果你想你的 pages 首页访问地址不带二级目录，如ipvb.gitee.io，你需要建立一个与自己个性地址同名的仓库，如 https://gitee.com/ipvb 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后，就可以以 https://ipvb.gitee.io 进行访问了。

2、当要部署的项目与自己的个性地址不一致时，部署完成后存在一些资源访问404？

答：当需要部署的仓库和自己的个性地址不一致时，如：https://gitee.com/ipvb/blog ，生成的pages url 为 https://ipvb.gitee.io/blog ，而访问的资源404，如 https://ipvb.gitee.io/style.css 。这是因为相应配置文件的相对路径存在问题导致的，生成的资源 url 应该为 https://ipvb.gitee.io/blog/style.css 才对。对于不同的静态资源生成器，配置如下：

Hugo 配置文件config.toml的baseURL修改如下

baseURL = "https://ipvb.gitee.io/blog"

Hexo 配置文件_config.yml的url和root修改如下：

url: https://ipvb.gitee.io/blog
root: /blog

同时部署到Github

域名绑定

https://yafine-blog.cn/posts/a170.html

注意在域名绑定的时候有一个坑：https://blog.csdn.net/qq_38332436/article/details/81907686

写文章

可配置的属性

https://demo.jerryc.me/posts/dc584b87/

abbrlink不要写

---
title: 计算机网络-总结篇
tags:
  - 计算机网络
  - 面试
categories:
  - 计算机网络
keywords: 计算机网络，计网，面试
description: 计算机网络-总结篇，可以用来期末复习，校招面试等。
cover: 'https://unpkg.zhimg.com/youthlql@1.0.8/computer_network/logo.jpg'
top_img: 'https://unpkg.zhimg.com/youthlql@1.0.8/blog/background.jpg'
# abbrlink: 3905e6f8
date: 2020-04-16 17:21:58
---

上面的abbrlink不要写，这个属性会给你自动生成。你自己写可能会有冲突

文章置顶

安装hexo-generator-index插件

npm install hexo-generator-index --save

你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

参考：

https://yafine-blog.cn/posts/4ab2.html

CDN全站加速

参考这篇文章即可

https://plushine.cn/14261.html

笔者亲测百度云很不行，虽然上面文章的作者推荐百度云，但是目前据butterfly群里反馈来看，大部分用百度云都会出现各种各样的问题，所以建议如果需要用cdn的话，可以考虑又拍云

参考这两篇文章即可

diy部分1

页面整体的样式参考：https://blog.lete114.top/article/Butterfly-config.html

diy部分2

参考：https://www.antmoe.com/posts/a811d614/index.html

下面是一些笔者博客用到的功能

标签外挂

1、目前我只引入了功能扩展部分的css

自定义阿里图标

评论系统出现博主/访客（仅限valine）

看这篇文章：https://blog.lete114.top/article/Valine-LeanCloud-Config.html

这里有一个大坑，master和friends进行Md5加密的时候不能用大写字母，不然就会发生只有访客标识，没有博主和小伙伴标识

花瓣飘零

https://yafine-blog.cn/posts/12b4.html

最后

以上就是犹豫水杯为你收集整理的Hexo搭建博客教程-基于Butterfly主题Hexo和Hugo安装Hexo主题快速开始（后面的都以Butterfly主题为例）生成导航菜单开启404代码风格社交图标主页文章节选文章封面文章页相关配置头像主页侧边栏设置不蒜子原理评论系统搜索（algolia）字数统计网站背景图片文章生成永久url连接自定义图标部署到Gitee同时部署到Github写文章CDN全站加速diy部分1diy部分2的全部内容，希望文章能够帮你解决Hexo搭建博客教程-基于Butterfly主题Hexo和Hugo安装Hexo主题快速开始（后面的都以Butterfly主题为例）生成导航菜单开启404代码风格社交图标主页文章节选文章封面文章页相关配置头像主页侧边栏设置不蒜子原理评论系统搜索（algolia）字数统计网站背景图片文章生成永久url连接自定义图标部署到Gitee同时部署到Github写文章CDN全站加速diy部分1diy部分2所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：杂文
浏览次数：71 次浏览
发布日期：2023-11-02 07:06:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_18_f3_13_jcz.html

建站神器：使用Hexo+Kaze+Gitee 自建博客1.简介2.基础要求(本地环境)3.安装Hexo4.配置5.部署托管