0%

hexo+git搭建博客

十分水,没有什么营养的搭建博客记录

安装hexo

首先需要安装nodejs环境

1
sudo pacman -S nodejs

然后安装hexo(要保证nodejs版本在10.0以上,自行编译安装nodejs的话gcc+要6.3.0版本以上)

1
npm i hexo-cli -g

安装好后,新建一个空白文件夹,

1
hexo init

初始化,如果是clone他人博客的源码的话,就不用初始化了。

初始化之后使用npm install 安装所需要的模块。

hexo g生成静态页面,接着hexo s运行服务器,这时就可以检查有没有安装成功了

部署到git

生成密钥

1
2
ssh-keygen
会让你输入两次密码,一路回车就好

将生成的内容id_rsa 复制粘贴到github上的ssh中。
使用ssh -T [email protected]测试

如果以下语句就说明成功了。

1
hi username! You've successfully authenticated, but GitHub does not provide shell access.

接着在_config.yml下最后的内容添加部署格式

1
2
3
type: 'git'
repo: '[email protected]:<username>/<reponame>.git'
branch: 'master'

详细教程

clone他人博客源码之后该如何部署

首先确定安装好了hexo,接着clone你想要部署的博客的源码,在源码的目录下,npm install安装所需要的模块,在去theme/主题名字下再npm install一次,安装主题

接着就正常hexo s,hexo g了,最后修改_config.yml文件内容以及删去其他原博主的文章即可。

nodejs版本过高

最近nodejs已经更新到了14.2.0了,但是hexo还是没有更新到5.0.0,所以,如果你的nodejs版本过高,会无法deploy推送到github.

解决办法:降级nodejs

但是nodejs的依赖包过多,怕会影响其他软件,所以应该要使用nvm,nodejs的版本管理

1
2
3
4
5
sudo pacman -S nvm #安装nvm
echo 'source /usr/share/nvm/init-nvm.sh' >> ~/.zshrc #如果你使用的是bash,就改为.bashrc
source ~/.zshrc
nvm install 12.0
nvm use 12.0

参考

超详细Hexo+Github博客搭建小白教程

后续主题配置

我使用的主题是next
因为用的人很多,已经有许多现成的配置教程了。
Next使用文档

next添加访客人数和总访问量

修改主题配置/theme/next/_config.yml文件,找到以下内容:

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

enable:false修改为enable:true

  • site_uv表示是否显示整个网站的访客数
  • site_pv表示是否显示整个网站的访问数
  • page_pv表示是否显示每个页面的阅读数

页面点击添加爱心

转自:asdfv1929

创建js文件

/themes/next/source/js/src下新建文件clicklove.js,接着把该链接下的代码拷贝粘贴到clicklove.js文件中。

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

修改_layout.swig

\themes\next\layout\_layout.swig文件末尾添加:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script

侧边栏添加音乐播放器

参考链接:

先克隆aplayer项目到本地,然后将dist目录复制到themes/next/source/dist下.新建一个文件名为music.js代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: false, //吸底模式
autoplay: false, //自动播放
audio: [
{
name: "小さな恋のうた",//音频名称
artist: '新垣結衣',//音频艺术家
url: '音乐外链',//音频外链
cover: 'http://p1.music.126.net/jn5QCsmkR3WIDEOBvYqnpg==/892803441798468.jpg?param=130y130'//音频封面
}
]
});

关于样式更多信息可以去看aplayer的官方文档.

在主题的侧边栏中添加播放器

1
2
3
4
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

我是将其放在了themes/next/layout/_macro/sidebar.swig

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>

<aside class="sidebar">
<div class="sidebar-inner">

{%- set display_toc = page.toc.enable and display_toc %}
{%- if display_toc %}
{%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
{%- set display_toc = toc.length > 1 and display_toc %}
{%- endif %}

<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc">
{{ __('sidebar.toc') }}
</li>
<li class="sidebar-nav-overview">
{{ __('sidebar.overview') }}
</li>
</ul>
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
{%- if display_toc %}
<div class="post-toc motion-element">{{ toc }}</div>
{%- endif %}
</div>
<!--/noindex-->

<div class="site-overview-wrap sidebar-panel">
{{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}
<!-- 加入APlayer音乐播放器 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
{{- next_inject('sidebar') }}
</div>
{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top motion-element">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
{%- endif %}
</div>
</aside>
<div id="sidebar-dimmer"></div>

文章添加音乐播放器

需要安装hexo-tag-aplayer

1
npm install --save hexo-tag-aplayer

在文章中添加以下代码,即可生成音乐播放器(和侧边栏播放器冲突,两者存在的时候会优先选择文章音乐播放器)

1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

关于hexo-tag-aplayer更多使用方式请前往官方项目地址:github

next主题添加字数统计

安装这个插件hexo-symbols-count-time

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

接着,在博客的配置文件中_config.yml添加以下代码.

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

在主题的配置文件themes/next/_config.yml中找到以下代码

1
2
3
4
5
6
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 2 #多少字符统计为一个字
wpm: 300 #阅读速度

Note for Chinese users: because in Chinese language average word length about ~1.5 and if you at most cases write posts in Chinese (without mixed English), recommended to set awl to 2 and wpm to 300.
But if you usualy mix your posts with English, awl to 4 and wpm to 275 will be nice.

官方文档提示:因为在中文中一个词语的平均长度在 1.5 字左右,所以一般建议设置为awl=2,wpm=300。

最后执行hexo clean否则会显示不正常.The symbols count is undefined and reading time is NaN:aN

next主题添加版权声明

在主题配置文件themes/next/_config.yml中将creative_commons项的post项设为true,就能开启内置版权声明。

让页脚的心’活’起来

修改主题配置文件themes/next/_config.yml,搜索footer相关配置项

animated:false处改为true即可

将页脚的Tag#去掉

在主题配置文件themes/next/_config.yml中将tag_icon=false改为true即可

自定义域名后,需要每次去github page 的setting中修改自定义域名

原因: source/文件夹下没有CNAME。

解决办法: source 文件夹下新建CNAME文件,内容为自定义域名即可