Hexo搭建博客教程-基于Butterfly主题

2024-01-27 19:18:10

文章目录

1、文章可能会优先更新在Github，个人博客，公众号【Github有】。其它平台会晚一段时间。个人博客备用地址

2、如果Github很卡，可以在Gitee浏览，或者Gitee在线阅读，个人博客。Gitee在线阅读和个人博客加载速度比较快。

3、转载须知：转载请注明GitHub出处，让我们一起维护一个良好的技术创作环境！

4、如果你要提交 issue 或者 pr 的话建议到 Github 提交。

5、笔者会陆续更新，如果对你有所帮助，不妨Github点个Star~。你的Star是我创作的动力。

特别强调一点，修改文件一定要用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  # 安装博客所需要的依赖文件
Hexo搭建博客教程-基于Butterfly主题

验证

注意：后续的命令均需要在站点目录下（即文件夹内）使用 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://cdn.jsdelivr.net/gh/youthlql/lql_img/blog/wechat.jpg
      link:
      text: 微信
    - img: https://cdn.jsdelivr.net/gh/youthlql/lql_img/blog/alipay.jpg
      link:
      text: 支付宝

头像

# 改动的地方
avatar:
  img: https://cdn.jsdelivr.net/gh/youthlql/lql_img/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

最新评论

# 改动的地方
newest_comments:
  enable: true
  limit: 6
  avatar: true
  leancloud:
    enable: false
    appId: # leancloud application app id
    appKey: # leancloud application app key
    serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:

如果你用的是Valine的话这三个属性都要填appId，appKey，serverURL，不然显示不出来。

serverURL就是REST API 服务器地址

不蒜子原理

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-Blog\themes\Butterfly\source\source\js\local-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://cdn.jsdelivr.net/gh/youthlql/lql_img/blog/background.jpg)

# 改动的地方
# the banner image of home page
index_img: https://cdn.jsdelivr.net/gh/youthlql/lql_img/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://cdn.jsdelivr.net/gh/youthlql/lql_img/computer_network/logo.jpg'
top_img: 'https://cdn.jsdelivr.net/gh/lql-youth/lql_img/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配置-butterfly配置