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 | 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 | type: 'git' |
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 | sudo pacman -S nvm #安装nvm |
参考
后续主题配置
我使用的主题是next
因为用的人很多,已经有许多现成的配置教程了。
Next使用文档
next添加访客人数和总访问量
修改主题配置/theme/next/_config.yml
文件,找到以下内容:
1 | busuanzi_count: |
将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 | <!-- 页面点击小红心 --> |
侧边栏添加音乐播放器
参考链接:
先克隆aplayer
项目到本地,然后将dist
目录复制到themes/next/source/dist
下.新建一个文件名为music.js
代码如下
1 | const ap = new APlayer({ |
关于样式更多信息可以去看aplayer的官方文档.
在主题的侧边栏中添加播放器
1 | <link rel="stylesheet" href="/dist/APlayer.min.css"> |
我是将其放在了themes/next/layout/_macro/sidebar.swig
中
1 | <div class="toggle sidebar-toggle"> |
文章添加音乐播放器
需要安装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 | symbols_count_time: |
在主题的配置文件themes/next/_config.yml
中找到以下代码
1 | symbols_count_time: |
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
否则会显示不正常.
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文件,内容为自定义域名即可