hexo+git搭建博客

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

安装hexo

首先需要安装nodejs环境

sudo pacman -S nodejs

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

npm i hexo-cli -g

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

hexo init

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

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

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

部署到git

生成密钥

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

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

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

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

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

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的版本管理

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文件,找到以下内容:

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文件中。

!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文件末尾添加：

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

侧边栏添加音乐播放器

参考链接:

• hexo上的aplayer应用
• Hexo个人博客添加APlayer音乐播放器功能

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

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的官方文档.

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

<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中

<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

npm install --save hexo-tag-aplayer

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

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

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

next主题添加字数统计

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

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

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

symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true

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

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.

hexo-symbols-count-timegithub.com/theme-next/hexo-symbols-count-time

官方文档提示:因为在中文中一个词语的平均长度在 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文件，内容为自定义域名即可