获得最佳阅读体验
是一个优秀的轻量级博客系统,本身可以兼容各种功能
而 ,则是一个集成有非常多功能、并且兼容性极好
因此本文选择了 的搭配
第一部分: 简介
Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。可以进入hexo官网进行详细查看(毕竟官方文档很有用),因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。
第二部分: 配置
1. 安装
Git是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章,上传到GitHub的工具。
请到官网下载,然后打开 命令行工具
或者到国内镜像站,找到相应的最新的版本
安装完成后,使用 git version
验证版本
2. 安装
Hexo基于Node.JS,因此需要安装Node.Js和npm
工具。
国内镜像站,找到对应的最新版本
选择 版本即可
这样一来,就可以使用Git Bash
来代替cmd
了
3. 安装
你需要在Git Bash中使用此命令安装Hexo
npm install -g hexo-cli
然后使用 hexo -v
查看版本验证安装
之后初始化Hexo!
hexo init
注意myblog
处是你的博客本地文件夹的名字,写什么都可以
然后执行下面的命令
cd myblog //进入这个myblog文件夹
npm install
2021.08.02 UPD:
可以先建好文件夹然后右键Git Bash Here
因为自带 主题,因此这个时候就可看到你的博客了!
[图片上传失败...(image-e1d867-1629557536228)]
hexo generate //可以缩写成 hexo g
hexo server //可以缩写成 hexo s
说一个小诀窍:你可以hexo g && hexo s
,一步到位
4. 创建 个人仓库
登录你的GitHub账号,创建一个新的仓库(没有账号的、不会创建的请自行BFS)
仓库名创建为 你的用户名.github.io
,不然无法识别
选择Public
5. 生成 并添加到
git config --global user.name yourname
git config --global user.email youremail
yourname
就是你的GitHub用户名,youremail
是你的GitHub的注册邮箱。这是Github用来验证账户的。
可以用下面的命令检查输入是否正确
git config user.name
git config user.email
接下来创建SSH,全部点回车就可以了
ssh-keygen -t rsa -C youremail
你会在大概会在C:\Users\Administrator中找到这个文件夹,记事本打开id_rsa.pub
。
ssh,简单来讲,就是一个秘钥,其中,id_rsa
是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub
是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。
而后在GitHub的setting
中,找到SSH keys
的设置选项,点击New SSH key
把你的id_rsa.pub
里面的信息复制进去。
用下面的代码验证 (无需改动)
ssh -T git@github.com
6. 将 部署到
打开站点配置文件 _config.yml
,翻到最后,修改YourgithubName
为你的GitHub账户
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
安装 部署工具以部署到
npm install hexo-deployer-git --save
然后执行
hexo clean //清除之前生成的东西 缩写为hexo cl
hexo generate //生成静态文章 缩写为hexo g
hexo deploy //部署 缩写为hexo d
另外说一下,生成和部署可以合为 hexo g -d
。
现在,你可以打开 source\_posts
,在里面创建Markdown
文件,可以在里面写文章了!
第三部分: 基本操作
1. 设置网站的基本框架
参数 | 描述 | 注释 |
---|---|---|
title |
网站标题 | |
subtitle |
网站副标题 | |
description |
网站描述 | |
author |
作者 | |
language |
语言 | |
timezone |
时区 | Asia/Shanghai |
url |
网址 | 改成你的网站域名 |
root |
网站根目录 | 不用修改 |
permalink |
文章的永久链接格式 | 不建议使用默认格式 |
permalink_defaults |
永久链接中各部分的默认值 |
2. Page(创建新页面)
hexo new page 页面名称
系统会自动给你在博客根目录下的 source
文件夹中生成一个新的文件夹,里面有一个 index.md
,页面的编辑操作在此文件中进行。
3. Draft(草稿)
hexo new draft newpage
这样会在 source/_draft
中新建一个 newpage.md
文件,如果你的草稿文件写的过程中,想要预览一下,那么可以使用
hexo server --draft
在本地端口中开启服务预览。
如果你的草稿文件写完了,想要发表到post
中,下面的代码就会自动把newpage.md
发送到post
中。
hexo publish draft newpage
第四部分: 优化
1. 更换主题
在这里,窝推荐两款主题
- 非常优秀的二次元主题。缺点是集成的功能比较少,需要自己读代码写文件(开发者似乎大学毕业了,回issue回答比较慢),而且开发者的主要开发方向是PC端
- 非常优秀、功能极为强大、易于操作的主题。如果喜欢各种效果实现各种功能,选择这个会比较方便,移动端效果比较好
由于我现在已经不用Shana主题了,所以用我正在用的NexT主题来说一下
NexT官方文档 NexT是有中文文档的。参照官方文档即可
下载主题
有两种方法下载NexT:使用git克隆最新版本和下载稳定版本的压缩包(.zip)
git clone https://github.com/iissnan/hexo-theme-next themes/next
启用主题
<font color=red size=4>提前声明一下:站点配置文件
是你博客根目录下的_config.yml
文件,主题配置文件
是next主题文件夹下的_config.yml
文件</font>
打开 thmems\next
,找到 站点配置文件 (_config.yml)
。搜索找到 theme:
字段,把后面的 landscape
改成 next
theme: next
执行 hexo cl
清除缓存。之后执行 hexo s
便可以在 localhost:4000
中看到博客的预览效果了
其他内容
请自行阅读NexT官方文档
2. 添加 订阅功能
可以参照我的这篇文章
安装插件
博客有一个专门生成文件的插件hexo-generator-feed
npm install hexo-generator-feed
修改站点配置文件
## RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
接下来直接执行hexo g
就可以生成文件
订阅
自行Google
推荐世界第一RSS阅读器 inoreader
3. 绑定个人域名
首先你需要有一个域名
域名后缀看自己需求,.com
比较贵,可以选择近年来比较火的.top .xyz
之类的,这类的便宜,还有个性。第一年我用的.com
,后来就换成.icu
了
获取 地址
在此之前需要获取自己 GitHub 的二级域名的 IP 地址。Git Bash下ping自己博客的地址即可获得。
解析域名
在你购买网站的控制台中找到域名解析,将刚刚得到的 ip 地址填入后面的“对应值(或者叫记录值)”,选择A记录,其他不用动。
之后在主机名中分别填入 www
和 @
。刷新一下,大概就成功了。
仓库的 绑定域名
进入仓库中, 点击setting
往下滑 会看到custom domain
随后将自己购买的域名填写进去(纯域名,不要加www之类的任何东西)
设置
进入Hexo根目录下的 source
文件夹,添加一个CNAME。<font color=RED>注意不要添加任何后缀名!</font>
在里面填入你的域名
4. 国内外分流
但是吧,这一点我并不会做,正在研究,过段时间会补上的。
BFS吧
5. 优化
首先需要让搜索引擎收录你的这个网站,别人才能搜索的到,那么这就需要SEO优化了
SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。
百度SEO
登录 百度站长平台,在站点管理中添加自己的网站。
验证方式选择 标签 验证,我们需要获取的是红框内的这串代码
打开站点配置文件
,添加以下两行,并把刚才的代码填在baidu那一行之后,注意与冒号之间要有空格。
google_site_verification:
baidu-site-verification:
站点地图
首先安装插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
在站点配置文件
添加以下代码
# Sitemap
sitemap:
path: sitemap.xml
url: https://wincer.icu/
baidusitemap:
path: baidusitemap.xml
url: https://wincer.icu/
然后执行一下 hexo cl && hexo g
,在 public
中找到 baidusitemap.xml
和 sitemap.xml
,用VSCode的查找和替换功能,把所有的 http://yoursite.com/
换成我们自己的域名。然后不需要generate
,直接deploy
就可以了。
百度主动提交
执行一下
npm install hexo-baidu-url-submit --save
然后在站点配置文件
中插入,填入你的token
# Baidu主动推送
baidu_url_submit:
count: 5 ## 提交最新的五个链接
host: ## 百度站长平台中注册的域名
token: ## 准入秘钥
path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里
是主动推送(实时)
中的
随后在主题配置文件
中搜索找到 baidu_push
段落,将其改为
baidu_push: true
之后在 themes\next\layout\_partials\head.swig
中搜索 baidu_site_verification
{% if theme.baidu_site_verification %}
<meta name="baidu-site-verification" content="{{ theme.qihu_site_verification }}" />
{% endif %}
把 content
后面换成自己的token,<font color=RED>只需要刚才的token,括号和引号都不需要。</font>
Google SEO
需要小梯子
首先选择资源类型,一般选择网页前缀
会自动帮你完成验证。如果没有成功,那么按照指导验证。比如HTML验证,复制HTML代码中的部分内容,填到刚才 themes\next\layout\_partials\head.swig
中的相应字段中。
6. 更换字体
在主题配置文件
中,查找font
修改为
font:
enable: true
随后打开Google Font,挑选字体
然后可以自由设置lobal、title、heading这些不同区域的字体
第五部分: 功能
1. 添加音乐功能
直接插入文章当中
标签
相当的简单
先到网易云音乐中中搜出你想要的音乐,然后点击生成外链播放器
所需要的所有代码都在这个框框内了
然后把这个代码粘贴到你的文章的文件中,就可以显示了
标签
<script type="text/javascript" src="http://www.xiami.com/widget/player-single?uid=32329501&sid=1776238762&mode=js"></script>
使用插件
是在上的插件,其配置可以参考官方文档
npm install hexo-tag-aplayer --save
在文章的markdown文档里添加
{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3" "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" "autoplay=false" %}
以上两种都只能实现单篇文章内的播放,下面这一种是将播放器部署在所有界面
主页音乐播放器
可以控制是否自动播放(自动播放移动端不支持)
修改 themes/next/layout/_macro/sidebar.swig
文件
添加播放器内容
<!-- 音乐播放器 -->
<div>
{% if theme.background_music %}
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="{{ theme.background_music }}"></iframe>
{% endif %}
</div>
大概在这个位置
在 themes/next/_config.yml
主题配置文件中添加歌单地址配置
background_music: //music.163.com/outchain/player?type=0&id=2120628564&auto=1&height=66
background_music:
如图所示填入歌曲的部分HTML代码
添加歌单
创建歌单,复制代码
把 height=90
改成 height=66
最后贴一张我的博客的效果图
也可以单独的做一个歌单页面
最新版的 已经支持了的使用,可以直接解析网络平台的歌曲,首先要在站点配置文件中开启 模式,添加以下代码在配置文件的最后:
aplayer:
meting: true
复制歌单的链接,然后复制歌单的,例如 https://music.163.com/playlist?id=523845661&userid=46562117 ,这个歌单的id就是523845661,公司名可以是tencent、netease或是其他公司,下面给出一个例子,打开 /Hexo/source/playlist/index.md文件,输入:
{% meting "7634442256" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}
这就是一个音乐的歌单
最终效果
2. 代码块一键复制
1. 新建代码复制模块文件
在/themes/next/layout/_third-party
下新建文件copy-code.swig
,写入代码
{% if theme.codeblock.copy_button.enable %}
<style>
.copy-btn {
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
user-select: none;
outline: 0;
}
.highlight-wrap .copy-btn {
transition: opacity .3s ease-in-out;
opacity: 0;
padding: 2px 6px;
position: absolute;
right: 4px;
top: 8px;
}
.highlight-wrap:hover .copy-btn,
.highlight-wrap .copy-btn:focus {
opacity: 1
}
.highlight-wrap {
position: relative;
}
</style>
<script>
$('.highlight').each(function (i, e) {
var $wrap = $('<div>').addClass('highlight-wrap')
$(e).after($wrap)
$wrap.append($('<button>').addClass('copy-btn').append('{{__("post.copy_button")}}').on('click', function (e) {
var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
return $(e).text()
}).toArray().join('\n')
var ta = document.createElement('textarea')
document.body.appendChild(ta)
ta.style.position = 'absolute'
ta.style.top = '0px'
ta.style.left = '0px'
ta.value = code
ta.select()
ta.focus()
var result = document.execCommand('copy')
document.body.removeChild(ta)
{% if theme.codeblock.copy_button.show_result %}
if(result)$(this).text('{{__("post.copy_success")}}')
else $(this).text('{{__("post.copy_failure")}}')
{% endif %}
$(this).blur()
})).on('mouseleave', function (e) {
var $b = $(this).find('.copy-btn')
setTimeout(function () {
$b.text('{{__("post.copy_button")}}')
}, 300)
}).append(e)
})
</script>
{% endif %}
2. 引用文件
编辑/themes/next/layout/_layout.swig
文件,在文件末尾</body>
前添加一行代码
{% include '_third-party/copy-code.swig' %}
3. 添加按钮上显示的语言
在/themes/next/languages/zh-Hans.yml
文件的post板块中添加下列代码
copy_button: 复制
copy_success: 复制成功
copy_failure: 复制失败
4. 在主题配置文件中添加开关
需要注意的是,NexT version 5.1.4是没有codeblock选项的,需要在主题配置文件
中添加
codeblock:
border_radius:
copy_button:
enable: true
# Show text copy result·
show_result: true
3. 添加顶部加载条
配置主题配置文件_config.yml
,将pace: false
改为pace: true
即可
有多种样式可供选择
4. 修改底部标签
打开/themes/next/layout/_macro/post.swig
,搜索 rel="tag">
,将 #
换成
<i class="fa fa-tag"></i>
5. 文本提示
插件为 hexo-tag-hint
,实例:
穹妹经常带着{% hint '黑色的兔子布偶' '小时候悠送的' %},在悠的面前常常抱怨且任性
效果
穹妹经常带着{% hint '黑色的兔子布偶' '小时候悠送的' %},在悠的面前常常抱怨且任性
注意字符串中有单引号的时候加反斜线转义
<center><font size=5 color=Orange>未完待续</font></center>