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 # 安装博客所需要的依赖文件
![](https://unpkg.zhimg.com/youthlql@1.0.8/Hexo/Setup/0001.png)
验证
注意:后续的命令均需要在站点目录下(即文件夹内)使用 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
最新评论
# 改动的地方
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://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