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: truesubtitle: '頁面沒有找到'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 || GitHubfab fa-qq: 1826692270 || QQ：1826692270fa fa-address-card: https://blog.csdn.net/Youth_lql || 我的CSDN

主页文章节选

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

文章封面

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

cover:# display the cover or not (是否顯示文章封面)index_enable: trueaside_enable: truearchives_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 Pagedate_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: trueQR_code:- img: https://unpkg.zhimg.com/youthlql@1.0.8/blog/wechat.jpglink:text: 微信- img: https://unpkg.zhimg.com/youthlql@1.0.8/blog/alipay.jpglink:text: 支付宝

头像

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

主页侧边栏设置

侧边栏排版及内容

# 改动的地方
aside:enable: truemobile: true # display on mobileposition: left # left or rightcard_author:enable: truedescription:button:icon: fab fa-githubtext: Follow Melink: https://github.com/youthlqlcard_announcement:enable: truecontent: 这里是公告。card_recent_post:enable: truelimit: 10 # if set 0 will show allsort: date # date or updatedcard_categories:enable: truelimit: 0 # if set 0 will show allexpand: none # none/true/falsecard_tags:enable: truelimit: 40 # if set 0 will show allcolor: truecard_archives:enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show allcard_webinfo:enable: truepost_count: truelast_push_date: true

运行时间

# 改动的地方
runtimeshow:enable: truepublish_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 Commentsuse: - Valinetext: 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 invalidlazyload: truecount: true # Display comment count in top_img

# 改动的地方
valine:appId: 你自己的ID # leancloud application app idappKey: 你自己的Key # leancloud application app keypageSize: 10 # comment list page sizeavatar: monsterid # gravatar style https://valine.js.org/#/avatarlang: en # i18n: zh-CN/zh-TW/en/japlaceholder: 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 IPserverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)bg: # valine backgroundemojiCDN: # emoji CDNenableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ AvatarrequiredFields: 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: truelabels:input_placeholder: Search for Postshits_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 dataconst datas = $('entry', xmlResponse).map(function () {return {title: $('title', this).text(),content: $('content', this).text(),url: $('url', this).text()}}).get()

字数统计

#改动的地方
wordcount:enable: truepost_wordcount: truemin2read: truetotal_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 crc32rep: hex    # 进制：dec(default) and hex
permalink_defaults:
pretty_urls:trailing_index: true # Set to false to remove trailing 'index.html' from permalinkstrailing_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.htmlcrc16 & dec
https://youthlql.gitee.io/posts/65535.htmlcrc32 & hex
https://youthlql.gitee.io/posts/8ddf18fb.htmlcrc32 & dec
https://youthlql.gitee.io/posts/1690090958.html

好处

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

自定义图标

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

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

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

部署到Gitee

# 改动的地方
deploy:type: gitrepo: https://gitee.com/youthlql/youthlql.gitbranch: 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搭建博客教程(matery主题)
hexo搭建博客教程(matery主题) 写在前面这篇教程是我搭建个人博客的路程经历和经验总结,matery主题挺多人用,网上也有各种详细教程,没时间我就不出详细教程了,这里给出其他大佬的教程链接, ...
手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
hexo博客本地服务器显示正常,Hexo 搭建博客本地运行常见报错及解决办法
作为一名在hexo方面的新手,我在使用hexo编辑文档时遇到了很多问题,hexo generate编译的时候遇到了各种错误. 在此将这些错误及其解决方案记录下来,以便日后查证之用,同时,也可给各位在遇 ...
建站规划—基于私有化gitlab/node+hexo搭建博客网站
目录概述建站方案及成本建站方案成本低成本替代方案概述本合辑(建站合辑)将介绍如何基于私有化gitlab+pages+Hexo搭建博客网站,由于域名备案周期较长,因此更新可能较慢.根据功能 ...
用Github Pages+Hexo搭建博客之(八)Hexo博客Next主题添加统计文章阅读量（访问量/浏览量/阅读次数）功能
[置顶][专栏]用Github Pages+Hexo搭建博客文章目录 [置顶][专栏][用Github Pages+Hexo搭建博客](https://blog.csdn.net/qq_342439 ...
使用Hexo搭建博客并部署到Github
一.博客环境搭建 Hexo 是一个静态博客框架,基于 Node.js,将 Markdown 文章通过渲染引擎,生成一个静态网页,再结合 Git 命令(ssh),Hexo 是一个快速.简洁且高效的博 ...
hugo搭建博客教程-简单搭建
title: Hugo简单搭建博客 tags: Hugo 博客教程 categories: Hugo keywords: 'Hugo,博客教程' description: 简单的Hugo搭建博客教程, ...
hexo搭建博客的几种方式（入门级）
hexo搭建博客的几种方式(入门级) 概述网站介绍 html css js hexo node.js git hexo安装安装node.js 安装Git 安装hexo 初始化hexo 网站部署免 ...
详解Hexo搭建博客的底层原理
文章目录前言 Github page Hexo 工作原理每次部署的流程模板引擎--Hexo怎样生成HTML 数据填充配置文件中的数据配置文件中数据的使用总结前言在2021年初对照着攻略 ...

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