0%

Hexo搭建个人博客

个人网站:https://sunfove.xyz

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
hexo官网: http://hexo.io
github: https://github.com/hexojs/hexo

hexo优势

由于github pages存放的都是静态文件,hexo所做的就是将md文件都放在本地,每次写完文章后调用写好的命令来批量完成相关页面的生成,然后再将有改动的页面提交到github。
hexo具有以下特点:

  • 超快速度:Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染
  • 支持 Markdown:Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件
  • 一键部署:只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
  • 丰富的插件:Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript

安装hexo

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

  • Node.js (Node.js 版本需不低于 8.6,建议使用 Node.js 10.0 及以上版本)
  • Git

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

1
2
3
4
npm install hexo-cli -g
hexo init
npm install
hexo s

如果您的电脑中尚未安装所需要的程序,请根据hexo官网安装指示完成安装:https://hexo.io/zh-cn/docs/

hexo指令

配置好之后,hexo就可以使用了,常用的hexo命令可访问hexo指令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

缩写形式:

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

Github

GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub。

Github简介

作为开源代码库以及版本控制系统,Github拥有超过900万开发者用户。随着越来越多的应用程序转移到了云上,Github已经成为了管理软件开发以及发现已有代码的首选方法。

如前所述,作为一个分布式的版本控制系统,在Git中并不存在主库这样的概念,每一份复制出的库都可以独立使用,任何两个库之间的不一致之处都可以进行合并。

清空Github仓库内容

如果想要清空github仓库中的内容,可以先创建分支,然后清空本地master中的文件,保留.git和readme.md,清空后git到远程仓库中,可参考Github清空远程仓库

配置SSH key

为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

1
$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

1
ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到 .ssh\id_rsa.pub 文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:
配置SSH key测试是否成功

1
ssh -T git@github.com # 注意邮箱地址不用改

看到如下提示,说明配置成功。

You’ve successfully authenticated, but GitHub does not provide shell access.

此时你还需要配置:

1
2
$ git config --global user.name "liuxianan"// 你的github用户名,非昵称
$ git config --global user.email "xxx@qq.com"// 填写你的github注册邮箱

参考:使用hexo+github搭建免费个人博客详细教程

Deploy到github中

修改站点配置文件(_config.yml),修改 depoly :

1
2
3
4
deploy:
type: git
repo: git@github.com:username/username.github.io.git //替换成自己的邮箱
branch: master

如果不行,安装插件:

1
npm install hexo-deployer-git --save

修改主题

hexo的主题非常之多,可以从官网的主题中自由选择。这里以next主题为例。
主题的下载可以通过git到hexo/theme或者直接download zip然后解压到hexo/theme文件夹。
在站点配置文件(_config.yml)中查找theme,
修改主题然后将landscape修改为next或者hexo-theme-next,具体以theme中文件夹名称为主。
hexo d -ghexo s并刷新网页,可以看到主题已经更换成了next。

Next主题修改

Next安装

安装next主题:

1
2
$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

语言修改

在站点文件_config.yml中查找language并将en修改为简体中文(zh-CN):

Site
1
2
3
4
5
6
7
title: 明明如月
subtitle:
description:
keywords:
author: sunfove
language: zh-CN //语言名称要写对
timezone:

注意更改的语言名称要写对,具体查看主题文件夹下的language文件夹中的名称。

新建带日期格式的博文

使用hexo new post “博文名称”生成的博文以博文名称生成文件,当文件太多时不便于管理查看,生成yyyy-MM-dd-博文名称的名称有助于我们管理自己的博文。
在站点文件_config.yml中设置博客生成名称:

1
2
# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts

重新执行hexo new post “博文名称”命令,就可以生成yyyy-MM-dd-博文名称.md类型的名称了。

侧栏头像

在主题文件_config.yml中搜索:

1
2
3
4
5
6
7
8
9
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: #/images/avatar.gif
# If true, the avatar would be dispalyed in circle.
rounded: false
# If true, the avatar would be rotated with the cursor.
rotated: false

url处添加头像路径,本地图片放到主题文件夹下的source/image中,rounded为是否用圆形头像, rotated为是否旋转头像。

添加标签和分类

添加一个 分类 页面,并在菜单中显示页面链接。
新建一个页面,命名为 categories 。命令如下:

1
2
hexo new page categories
hexo new page tags

编辑刚新建的页面,将页面的类型设置为 categories ,主题将自动为这个页面显示所有分类。

1
2
3
4
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

注意:如果有启用多说 或者 Disqus 评论,默认页面也会带有评论。需要关闭的话,请添加字段 comments并将值设置为 false,如:

1
2
3
4
5
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

在菜单中添加链接。编辑主题的_config.yml ,将 menu 中的 categories: /categories注释去掉,如下:

1
2
3
4
5
menu:
home: /
categories: /categories
archives: /archives
tags: /tags

添加标签和这个操作类似,将categories换成tags即可。

参考:创建分类界面

对文章进行加密

打开hemes\hexo-theme-next\layout\_partials\head\head.swig,在文件的开头位置找到如下代码

1
2
3
4
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="{{ theme.android_chrome_color }}">

在上边代码的末尾添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
if (history.length === 1) {
window.opener = null;
window.open('', '_self');
window.close();
} else {
history.back();
}
}
}
})();
</script>

添加完脚本代码,接下来在想要加密的文章的文件头加上password 属性就行了,如下:

1
2
3
4
5
6
7
8
9
---
title: XXX
date: XXX
tags:
- XXX
categories:
- XXX
password: 123
---

这样在打开这篇文章时只有输入了123这个密码才可以打开成功。

参考:NexT主题个性化 - 对文章进行加密

Hexo admin编辑博客

如果自己编辑 MD 文件的话,确实比较麻烦,你可以用一些 MD 的编辑器,但是在管理 MD 文件上还是操作不方便。
这里推荐使用 hexo-admin,而且编辑完之后可以马上看到效果呢。
需要说明的是,hexo-admin 管理是本地用的,就是你需要在本地编辑完之后再上传到 github,而不能直接在线编辑保存,因为 github pages 只支持静态页面的。
安装过程:

1
npm install --save hexo-admin

在 hexo-admin 你可以

  • Pages - 新加 page;
  • Posts - 新加或删除 post;双击一个 post,你可以编辑,预览,新增修改 tags、categories,选择发布或不发布;
  • Settings - 一些配置;
  • Deploy - 可以直接部署到 github。
    hexo admin

参考:hexo-admin安装使用

注:按照这个方案配置hexo-admin后,会出现如下警告,但不太影响使用。

1
2
3
4
hexo s -g
(node:12084) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

配置完成后,可以进行认证,详见:【hexo】安装并配置admin插件
这样登录admin就需要账号密码验证。
hexo admin认证

阅读全文

推荐使用< !--more--> 进行手动截断,网上有很多教程自动截断,但文中包含中文和一些特殊符号的时候,判断可能会失效。自动截断教程可参考:Hexo-设置阅读全文

修改标签样式

修改模板 \themes\hexo-theme-next\layout\_macro/post.swig,搜索 ,将 #换成<i class="fa fa-tag"></i>

修改布局模板

layout 布局模板放在 scaffolds/目录下,文件名称就是layout 名称。每次新建时,Hexo 会尝试在 scaffolds 文件夹中寻找同名文件,并根据其内容建立文章。所以可以在这里添加自己的 layout,作为常用的新建模板使用。同时你也可以编辑现有的 layout,比如 post 的 layout 默认是 scaffolds\post.md

这里有一份文章配置信息,可以根据情况修改后作为模板复用,或直接在保存文章的路径新建.md文件中使用:

1
2
3
4
5
6
7
8
9
10
---
title: #文章名
date: #发表日期
updated: #更新日期
categories: #文章分类
tags: #文章标签,多标签时使用英文逗号隔开
photos: #如果使用Fancybox(文章头部展示图片),如此设置
- URL1
- URL2
---

参考:Hexo 使用指导

切换主题风格

在主题文件_config.yml中查找schemes

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

4种风格大同小异,你们可以选择自己喜欢的风格。

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新
  • Gemini - 类似Pisces

    配置浏览进度

    在主题文件_config.yml中查找scrollpercent,将false改为true

本地搜索

安装插件

1
npm install hexo-generator-search --save

修改 站点配置 文件:

1
2
3
4
search:
path: search.xml
field: post
content: true
  • path - file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
  • field - the search scope you want to search, you can chose:
    • post (Default) - will only covers all the posts of your blog.
    • page - will only covers all the pages of your blog.
    • all - will covers all the posts and pages of your blog.
  • content - whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.

    参考:hexo-generator-search

注:之前只能搜索标题,不能搜索内容,可能是与local admin冲突,去掉admin后,可以正常使用了。后面发现好像是之前post的一个文件格式有问题,加了URL 1和URL 2导致没法搜索。并不是,烦。但是已经不报错了。
最后不清楚到底为啥,并不能搜索全文,无论修改成post还是all,都不行。最后在github上找到了一个解决方案,完美解决,感谢。
经验证,仅仅采用第二种方案还是不行,必须要同时安装两个插件才可以。
使用hexo-generator-search-zip

1
npm install hexo-generator-search-zip --save

配置说明:修改站点文件

1
2
3
4
5
search:
path: search.json
zipPath: search.zip
versionPath: searchVersion.txt
field: post

其中field有以下可选,
* post (Default) - will only covers all the posts of your blog.
* page - will only covers all the pages of your blog.
* all - will covers all the posts and pages of your blog.

参考:hexo-generator-search-zip

SiteMap插件

hexo-generator-sitemap:生成易于搜索引擎搜素的网站地图

1
npm install hexo-generator-sitemap --save

添加配置信息:

1
2
3
4
5
#feed
atom:
type: atom
path: atom.xml
limit: 20

可以在主题配置文件中添加相关配置,可以在页面上显示。
比如,添加链接信息

1
2
3
links:
Feed: /atom.xml
SiteMap: /sitemap.xml

参考:手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

注:有点问题,给关了。

设置菜单及对应页面

在主题配置文件中查找menu:

1
2
3
4
5
6
7
8
9
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

去掉#注释即可显示对应的菜单项,也可自定义新的菜单项。 ||之前的值是目标链接,之后的是分类页面的图标,图标名称来自于FontAwesome icon。若没有配置图标,默认会使用问号图标。
Encycolorpedia

新添加的菜单需要翻译对应的中文
打开hexo/theme/next/languages/zh-CN.yml,在menu下自定义,如:

1
2
menu:
resources: 资源

hexo new page “categories”
此时在根目录的source文件夹下会生成一个categories文件,文件中有一个index.md文件,修改内容如下

1
2
3
4
5
6
---
title: 分类
date: 2017-12-14 13:05:38
type: "categories"
comments: false
---

注:如果有启用评论,默认页面带有评论。需要关闭的话,添加字段comments并将值设置为false。

参考:Hexo框架下用NexT(v7.0+)主题美化博客

网站图标设置

图标可以从图标素材网站:iconfont、easyicon上进行下载。
下载16x16以及32x32大小的PNG格式图标,置于/themes/next/source/images/下
打开themes/next/下的_config.yml,查找favicon

1
2
3
4
5
6
7
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

修改small和medium的路径为下载的图标路径

参考:Hexo框架下用NexT(v7.0+)主题美化博客

设定站点建立时间

打开themes/next/下的_config.yml,查找since

1
2
3
4
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
#since: 2019

如果不设置,默认显示当前年份。

参考:Hexo框架下用NexT(v7.0+)主题美化博客

修改侧栏颜色

打开\themes\hexo-theme-next\source\css\_schemes\Pisces中的_menu.styl文件,查找background:

1
2
3
4
.menu-item-active a {
background: #f9f9f9;
border-bottom-color: white;
$badges = hexo-config('menu_settings.badges');

将f9f9f9修改成自己想要的颜色,可从encycolorpedia上查看颜色。

创建同名文件夹

新建文章时,在相同目录下创建同名文件夹(便于图片管理):
打开站点配置文件_config.yml,搜索post_asset_folder字段,设置其值为true
安装hexo-asset-image:

1
npm install hexo-asset-image --save

此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹
只需在 md 文件里使用 ![title](图片名.jpg) ,无需路径名就可以插入图片。

设置博客透明度

\themes\hexo-theme-next\source\css\_schemes\Pisces\_layout.styl文件中,查找.content,修改background:

1
2
.content-wrap {
background: rgba(255, 255, 255, 0.8);

rgba中最后一个参数表示透明度。

图片点击放大

图片可点击放大查看,放大后可关闭。打开站点配置文件_config.yml,搜索fancybox字段,设置其值为true
进入到theme/text/文件夹下,打开`git bash。

博客访问量统计

打开主题配置文件_config.yml,查找busuanzi:

1
2
3
4
5
6
7
8
busuanzi_count:
enable: false
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

false改为true即可。

修改powered标识

修改文末的“由 Hexo 强力驱动”,theme版本标志:

1
2
3
4
5
6
7
8
9
10
11
12
  # If not defined, `author` from Hexo `_config.yml` will be used.
copyright:
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true

false改为true即可。

统计字数

使用hexo-symbols-count-time. Symbols count and time to read of articles.Better than hexo-reading-time and faster than hexo-worcount. No external dependencies.安装:

1
$ npm install hexo-symbols-count-time --save

在站点配置文件中添加:

1
2
3
4
5
6
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false

在主题配置文件中修改:

1
2
3
4
5
6
7
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
suffix: mins.

参考:https://github.com/theme-next/hexo-symbols-count-time

社交账号

Usage: Key: permalink || icon
Key is the link label showing to end users. Value before || delimiter is the target permalink. Value after || delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.

1
2
3
4
5
6
7
8
9
10
11
12
social:
GitHub: https://github.com/sunfove || github
E-Mail: mailto:sunfove@gmail.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

友情链接

Blog rolls:

1
2
3
4
5
6
7
links_settings:
icon: link
title: 友情链接
# Available values: block | inline
layout: block
links:
我的简书: https://www.jianshu.com/u/39e329082972

评论系统

评论系统采用了Valine和Leancloud结合,先在Leancloud申请账号,并创建应用
LeanCloud中创建的应用

进入应用设置,在安全中心绑定域名,然后在应用keys中读取AppID和AppKey,进入主题配置文件中,查找valine,然后按照如下形式填写ID和Key。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
valine:
enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 说两句吧 # Comment box placeholder
avatar: monsterid # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # If false, comment count will only be displayed in post page, not in home page
#post_meta_order: 0

其中Valine 的 avatar 参数用来设置评论头像,avatar 参数可选值如下:
不同的avatar样式

匿名聊天

按照网上的说明配置Daovoice一直出现问题,后来使用了chatra,十天试用期,之后又尝试了tidio,以下是tidio配置说明。

1
2
3
tidio:
enable: true
key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer

id通过在tidio官网注册账号,然后输入中developer中找到public key,输入即可。但是加载速度似乎特别慢,可能因为服务器在国外的缘故。

打赏功能

添加打赏。在主题文件中查找reward:

1
2
3
4
5
6
7
8
9
10
11
 reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: true
animation: true
#comment: Donate comment here.

reward:
#wechatpay: /images/wechatpay.png
#alipay: /images/alipay.png
#bitcoin: /images/bitcoin.png

百度SEO

在主题配置工具中,查找baidu_push并更改为true:

1
2
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: true

百度统计

百度统计中注册账号并获取app_id,然后在主题配置文件中查找Baidu Analytics,粘贴到对应位置。

1
2
# Baidu Analytics
baidu_analytics: # <app_id>

文章置顶

在Hexo生成首页HTML时,将top值高的文章排在前面,达到置顶功能。
修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js,在生成文章之前进行文章top值排序。
需添加的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});

修改完成后,只需要在front-matter中设置需要置顶文章的top值,将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是,这个文件不是主题的一部分,也不是Git管理的,备份的时候比较容易忽略。
以下是最终的generator.js内容

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
if(a.top == b.top) return b.date - a.date;
else return b.top - a.top;
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

设置置顶标志
打开:/blog/themes/next/layout/_macro 目录下的post.swig文件,定位到

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

我没有修改color而是修改了font size = 2,使得和其他字体大小统一。

参考:Hexo博客添加文章置顶功能
hexo博客优化之文章置顶+置顶标签

觉着不错就支持一下吧!