使用hexo搭建博客
什麼是 Hexo？
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
npm install hexo
hexo init <blog folder>
cd <blog folder>
npm install
hexo clean && hexo g && hexo d
hexo server
使用yelee模板
使用hexo-theme-yelee 模板，該模板個人感覺非常高大上，故使用該模板搭建。
進入themes目錄，拉取yelee代碼
cd themes
git clone https://github.com/MOxFIVE/hexo-theme-yelee
更改根目錄的_config.yml文件
theme: yelee
在使用命令
hexo clean | hexo g | hexo s
即可進入到自己的博客頁。
我的博客：Zoey-Share-Site
yelee模板bug處理
首頁不顯示文章列表,這是因爲加載出錯了,進行更改
進入yelee模板頁的 .config.yml
將search.onload false 配置改成 search.on false 即可使首頁正常顯示
創建一些系統頁
生成標籤雲
hexo new page tags
生成關於我
hexo new page about
爲文章添加分類
hexo new page categories
添加統計字數
npm i --save hexo-wordcount
文件配置：
- 在yelee/layout/_partial/post/word.ejs下創建word.ejs文件：
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字數統計: </span>
<span class="post-count"><%= wordcount(post.content) %>字</span>
</span>
</span>
<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 閱讀時長: </span>
<span class="post-count"><%= min2read(post.content) %>分</span>
</span>
</span>
</div>
- 然後在 themes/yelee/layout/_partial/article.ejs中添加
<div class="article-inner">
<% if (theme.fancybox){ %>
<input type="hidden" class="isFancy" />
<% } %>
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
<!-- 開始添加字數統計-->
<% if(theme.word_count && !post.no_word_count){%>
<%- partial('post/word') %>
<% } %>
<!-- 添加完成 -->
</header>
- 開啓功能
在yelee主題的_config.yml中添加下面代碼
word_count: True
配置本地搜索
npm install hexo-generator-search --save
然後配置文件themes/yelee/_config.yml中修改爲：
search:
on: ture
#on: false
左邊的本地搜索即可使用，不過可能會有點慢。
RSS 訂閱
npm install hexo-generator-feed --save
重啓服務即可本地查看效果。
網站運行時間添加
<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("02/14/2018 12:49:00");//此處修改你的建站時間或者網站上線時間
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全運行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
Url 持久化
我們可以發現 hexo 默認生成的文章地址路徑是 【網站名稱／年／月／日／文章名稱】。
這種鏈接對搜索爬蟲是很不友好的，它的 url 結構超過了三層，太深了。
下面我推薦安裝 hexo-abbrlink 插件：
npm install hexo-abbrlink --save
然後配置根目錄的_config.yml
permalink: :title/
減少出站鏈接能夠有效防止權重分散，hexo 有很方便的自動爲出站鏈接添加 nofollow 的插件。
首先安裝 hexo-autonofollow 插件：
npm install hexo-autonofollow --save
再在外層_config.yml 中添加配置，將 nofollow 設置爲 true：
# 外部鏈接優化
nofollow:
enable: true
exclude: # 例外的鏈接，可將友情鏈接放置此處
- 'yousite'
這樣，例外的鏈接將不會被加上 nofollow 屬性。
添加萌妹子
獲取
npm install --save hexo-helper-live2d
配置
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-unitychan
display:
position: right
width: 150
height: 300
mobile:
show: true
需要哪個萌妹子，需要先下載模型，官方
npm install live2d-widget-model-shizuku
添加文章評論
文章評論可以選擇來必力或者Valine等。
這裏演示Valine的接入方式，當然來必力接入也非常簡單，有興趣者也可以研究下。
先去Valine官網註冊賬號，創建開發版應用，申請獲得appid和appkey，
然後修改配置文件：
在/yelee/_config.yml中加入：
valine:
on: true
appid: ***** # App ID
appkey: ***** # App Key
verify: true # 驗證碼
notify: true # 評論回覆郵箱提醒
avatar: mp # 匿名者頭像選項
placeholder: Just go go!
在CDN中加入：
valine: //unpkg.com/[email protected]/dist/Valine.min.js
在/yelee/layout/_partial/article.ejs中加入
<% } else if (theme.livere.on) { %>
<%- partial('comments/livere') %>
<!--加入下面內容-->
<% } else if (theme.valine.on){ %>
<%- partial('comments/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } else if (theme.youyan.on) { %>
<%- partial('comments/youyan') %>
<% }
創建/yelee/layout/_partial/comments/valine.ejs文件，寫入：
<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
<div id="vcomment" class="comment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="<%- theme.CDN.valine %>"></script>
<script>
new Valine({
el: '#vcomment',
notify: '<%= theme.valine.notify %>',
verify: '<%= theme.valine.verify %>',
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar: "<%= theme.valine.avatar %>"
});
</script>
</section>
在/yelee/source/css/_partial/mobile.styl最後加入：
#comments {
margin: (10/16)rem 10px !important;
padding: 1rem !important;
}
加入網易雲音樂
進入網易雲音樂版，可以選擇單曲生成音樂鏈接外鏈，也可以創建歌單，添加多條歌曲，在生成一個歌單播放器外鏈，注意部分歌曲因爲版權問題而無法生成外鏈，應當去除有版權的歌曲。
在自己覺得需要的地方加入，樣式可以自己在調整下，相信你可以的。
<div style="position:absolute; bottom:120px;left:auto; width:85%">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=422428548&auto=1&height=66"></iframe>
</div>
讓Hexo一直在後臺運行
安裝pm2
$ npm install -g pm2
寫一個執行腳本
在博客根目錄下面創建一個hexo_run.js
//run
const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
if(error){
console.log('exec error: ${error}')
return
}
console.log('stdout: ${stdout}');
console.log('stderr: ${stderr}');
})
運行腳本
在根目錄下
# pm2 start hexo_run.js
我的博客：Zoey-Share-Site
參考鏈接：
https://www.imooc.com/article/44662?block_id=tuijian_wz
https://tding.top/archives/9a232bbe/