環(huán)境說明
- 阿里云服務器 ubuntu server操作系統(tǒng)
- NodeJs v6.11.3(v8版本以上使用hexo-admin會有一個error出現(xiàn)，強迫癥受不了nodejs降級了)
- Hexo-cli:1.1.0
- Hexo:3.7.1
- Hexo-admin
- Nginx:1.10.3
- 暢言評論系統(tǒng)
- ShareSDK:分享系統(tǒng)（用于分享到微信僻爽、微博等）
- 七牛云/極簡圖床：用于存儲外聯(lián)圖片和音樂
安裝NodeJS
- 方法一：官網(wǎng)下載安裝包進行安裝（百度）
- 方法二：換源下載（百度）
nodejs升級或版本降級
- 使用npm安裝一個模塊n到全局：
npm install -g n
- 使用n加版本號的方式可以安裝到其他版本，比如：
n 6.11.3
- 在使用n通過上下鍵就可以選擇不同的版本（注意檬寂，從低版本到高版本時可以共存欠肾，高到低時只會保留低版本）
安裝hexo
npm install hexo-cli -g
hexo init blog(生成的博客文件夾的名字拱雏，自定義,會在對應執(zhí)行該語句的路徑生成對應的文件)
cd blog
npm install
hexo server
安裝hexo-admin
npm install --save hexo-admin
hexo server -d(開啟hexo操作)
- 現(xiàn)在打開http://IP:4000/admin/會發(fā)現(xiàn)顯示沒有找到對應的目錄，需要配置hexo-admin,打開blog目錄下的_config.yml配置hexo-admin
admin:
username: XXXX(自己設置用戶名)
password_hash: XXXXXXXXX(密碼济锄，但是是明文經(jīng)過bcrypt hash加密后生成的)
secret: hey hexo(用于cookie安全)
deployCommand: './admin_script/hexo-generate.sh'(調(diào)用該腳本）
- 關(guān)于bcrypt加密具體的需要百度聊浅，我也沒怎么弄懂餐抢，但是當時是用JAVA實現(xiàn)的现使，需要去下載一個jar包，源碼如下：
package com.zhou;
import java.security.NoSuchAlgorithmException;//需要引入的包
/**
* Created by 強 on 2018/9/28.
*/
public class BcryptHashingExample {
public static void main(String[] args) throws NoSuchAlgorithmException<br>
{<br>
String originalPassword = "XXXXXX";//設置密碼
System.out.println(originalPassword.substring(1, originalPassword.length()));
String generatedSecuredPasswordHash = BCrypt.hashpw(originalPassword, BCrypt.gensalt(12));
System.out.println(generatedSecuredPasswordHash);
boolean matched = BCrypt.checkpw(originalPassword, generatedSecuredPasswordHash);
System.out.println(matched);
}
}
- 在配置完密碼后可以登錄上面的網(wǎng)址訪問管理主頁了旷痕。
- 由于之前配置了deployCommand,所以現(xiàn)在還需要在_config.yml/admin_scripts創(chuàng)建一個deployCommand文件：
touch hexo-generate.sh;<br>
vim hexo-generate.sh;<br>
文件內(nèi)容如下：<br>
#!/bin/bash sh<br>
hexo g<br>
- 退出文件后chmod +x deployCommand修改權(quán)限碳锈，然后啟動hexo server, 再訪問http://IP:4000/admin登錄寫文章并且到Deploy中點擊deploy發(fā)布，發(fā)現(xiàn)前臺頁面生成即可表示成功
- hexo server進程一直在后臺運行的辦法（執(zhí)行hexo server -d &在一段時間后會停止hexo欺抗，此時無法打開后臺）：采用pm2接管hexo進程
- 安裝pm2:
npm install -g pm2
- 在博客的根目錄下創(chuàng)建一個hexo_run.js的文件售碳，文件內(nèi)容如下:
const { exec } = require('child_process')
exec('hexo server -d',(error, stdout, stderr) => {
if(error){
console.log('exec error: ${error}')
return
}
console.log('stdout: ${stdout}');
console.log('stderr: ${stderr}');
})
- 運行開啟命令: pm2 start hexo_run.js
- 最后附上我寫的一個hexo重啟腳本restart_hexo.sh(需要先配置好nginx），需要重啟刷新的時候執(zhí)行source restart_hexo.sh即可：
#!/bin/bash
PROCESS=`ps -ef|grep hexo|grep -v grep|grep -v PPID|awk '{ print $2}'`
PROC_NAME="pm2"
for i in $PROCESS
do
echo "Kill the $1 process [ $i ]"
kill -9 $i
done
hexo clean #清除數(shù)據(jù)
hexo generate #生成靜態(tài)文件public文件夾
ProcNumber=`ps -ef |grep -w $PROC_NAME|grep -v grep|wc -l`
if [ $ProcNumber -le 0 ];then
pm2 start hexo_run.js
else
pm2 restart hexo_run.js
fi
service nginx restart
nginx配置
- nginx安裝（網(wǎng)上教程很多绞呈，最簡單的方式就是apt-get）:
sudo apt-get install nginx
- 我采用的apt-get方式贸人，然后打開/etc/nginx/nginx.conf文件：
include /etc/nginx/conf.d/*.conf;//注釋掉
include /etc/nginx/sites-enabled/*;//注視掉
server {
listen 80; //開啟的端口號
server_name xxxx localhost; //解析的域名,多個域名中間用空格
location / {
root /root/my-blog/public; //鏈接到的hexo的目錄，我放在根目錄下所以是/root/my-blog,還請根據(jù)對應的修改
}
} //加入
修改hexo樣式
- 到hexo官網(wǎng)尋找一款覺得滿意的主題鏈接到對應的github佃声，下面一般都有下載說明
- 下載的文件放到對應的theme文件夾下
- 修改/my-blog/下的_config.yml文件：
theme: 對應的theme下要選擇的主題文件夾名
- 對相應的樣式進行調(diào)整修改
hexo主頁下的tag標簽艺智、category標簽無顯示找不到
- 解決辦法： 在主目錄下執(zhí)行 hexo new page "tags"或者hexo new page "category"
- 在/source/tags/index.md中設置修改
---
date: 2018-10-02 19:31:00
type: "tags"
comments: false
---
- 同理categories:
---
date: 2018-10-02 19:37:05
type: "categories"
comments: false
---
- 或者about me:
---
title: 關(guān)于我
type: "about-me"
date: 2018-10-02 19:36:51
comments: false
---
集成暢言評論系統(tǒng)：
- 注冊，獲取APP ID 和APP KEY
- 進入到theme下的主題下圾亏，打開_config.yml文件十拣，找到comment那一段配置，我的配置如下(和具體的主題有關(guān)志鹃，有的可能比較復雜)：
comment:
# your disqus_shortname
disqus:
changyan:
appid: 'XXXX'
conf: 'XXXXX'
youyan:
# gitment: https://github.com/imsun/gitment
# make sure you know how to set it
gitment:
owner:
repo:
oauth:
client_id:
client_secret:
集成分享系統(tǒng)
- 去mob系統(tǒng)注冊賬號
- 進入后臺管理
- 新建應用
- 進入hexo應用管理頁面夭问，添加ShareSDK功能
- 記錄AppKey
- 到web集成文檔
中找到集成代碼，將appkey改成剛才生成的弄跌，copy代碼待用 - 進入theme下的theme/XXX/layout/_partial文件夾下甲喝，新建一個shares.ejs,將剛才的代碼拷貝進去
- 打開同目錄下的article.ejs，在article body最后引用此代碼：
<%- partial('shares') %>
- 重啟即可
增加打賞功能
- 在layout/_partial目錄下新建donate.ejs文件铛只，輸入以下內(nèi)容：
<! -- 添加捐贈圖標 -->
<div class ="post-donate">
<div id="donate_board" class="donate_bar center">
<a id="btn_donate" class="btn_donate" href="javascript:;" title="打賞"></a>
<span class="donate_txt">
↑<br>
<%=theme.donate_message%>
</span>
<br>
</div>
<div id="donate_guide" class="donate_bar center hidden" >
<!-- 支付寶打賞圖案 -->
<img src="<%- theme.root_url %>/img/Alipay.jpg" alt="支付寶打賞">
<!-- 微信打賞圖案 -->
<!-- img src="/img/weixin.jpg" alt="微信打賞" -->
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
document.getElementById('btn_donate').onclick = function(){
$('#donate_board').addClass('hidden');
$('#donate_guide').removeClass('hidden');
}
</script>
</div>
<! -- 添加捐贈圖標 -->
- 在source/css下新建一個donate.css,內(nèi)容如下：
.donate_bar {
text-align: center;
margin-top: 5%
}
.donate_bar a.btn_donate {
display: inline-block;
width: 82px;
height: 82px;
margin-left: auto;
margin-right: auto;
background: url(http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif)no-repeat;
-webkit-transition: background 0s;
-moz-transition: background 0s;
-o-transition: background 0s;
-ms-transition: background 0s;
transition: background 0s
}
.donate_bar a.btn_donate:hover {
background-position: 0 -82px
}
.donate_bar .donate_txt {
display: block;
color: #9d9d9d;
font: 14px/2 "Microsoft Yahei"
}
.donate_bar.hidden{
display: none
}
.post-donate{
margin-top: 80px;
}
#donate_guide{
height: 210px;
width: 420px;
margin: 0 auto;
}
#donate_guide img{
height: 200px;
height: 200px;
}
- donate.css引入到同目錄下的style.css中
- 將支付寶的二維碼/微信二維碼拷貝到source/img文件夾下，img文件夾新建
- 在layout/_partial/article.ejs中的article的末尾添加以下代碼：
<% if (theme.donate){ %>
<%- partial('donate') %>
<% } %>
- 在主題的_config.yml中配置以下內(nèi)容：
Alipay: /img/Alipay.jpg
#是否開啟打賞功能
donate: true
#打賞文案
donate_message: 欣賞此文糠溜？求鼓勵淳玩，求支持！
- 重啟測試
參考鏈接：
https://www.cnblogs.com/conserdao/p/6876381.html
https://hexo.io/zh-cn/
http://www.reibang.com/p/68e727dda16d
https://hadronw.com/2018/05-28/hexo-addshares/
http://cighao.com/2016/02/23/add-donate-to-hexo/
https://blog.csdn.net/tangcuyuha/article/details/80331169
