hexo搭建个人博客完整版

2018-11-07 本文已影响716人 zhouwaiqiang

环境说明

阿里云服务器 ubuntu server操作系统
NodeJs v6.11.3(v8版本以上使用hexo-admin会有一个error出现，强迫症受不了nodejs降级了)
Hexo-cli:1.1.0
Hexo:3.7.1
Hexo-admin
Nginx:1.10.3
畅言评论系统
ShareSDK:分享系统（用于分享到微信、微博等）
七牛云/极简图床：用于存储外联图片和音乐

安装NodeJS

方法一：官网下载安装包进行安装（百度）
方法二：换源下载（百度）

nodejs升级或版本降级

使用npm安装一个模块n到全局：

npm install -g n

使用n加版本号的方式可以安装到其他版本，比如：

n 6.11.3

在使用n通过上下键就可以选择不同的版本（注意，从低版本到高版本时可以共存，高到低时只会保留低版本）

安装hexo

npm install hexo-cli -g
hexo init blog(生成的博客文件夹的名字，自定义,会在对应执行该语句的路径生成对应的文件)
cd blog
npm install
hexo server

安装hexo-admin

npm install --save hexo-admin
hexo server -d(开启hexo操作)

现在打开http://IP:4000/admin/会发现显示没有找到对应的目录，需要配置hexo-admin,打开blog目录下的_config.yml配置hexo-admin

admin:
    username: XXXX(自己设置用户名)
    password_hash: XXXXXXXXX(密码，但是是明文经过bcrypt hash加密后生成的)
    secret: hey hexo(用于cookie安全)
    deployCommand: './admin_script/hexo-generate.sh'(调用该脚本）

关于bcrypt加密具体的需要百度，我也没怎么弄懂，但是当时是用JAVA实现的，需要去下载一个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);

    }
}

在配置完密码后可以登录上面的网址访问管理主页了。
由于之前配置了deployCommand,所以现在还需要在_config.yml/admin_scripts创建一个deployCommand文件：

touch hexo-generate.sh;<br>
vim hexo-generate.sh;<br>
文件内容如下：<br>
#!/bin/bash sh<br>
hexo g<br>

退出文件后chmod +x deployCommand修改权限，然后启动hexo server, 再访问http://IP:4000/admin登录写文章并且到Deploy中点击deploy发布，发现前台页面生成即可表示成功
hexo server进程一直在后台运行的办法（执行hexo server -d &在一段时间后会停止hexo，此时无法打开后台）：采用pm2接管hexo进程
安装pm2:

npm install -g pm2

在博客的根目录下创建一个hexo_run.js的文件，文件内容如下:

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），需要重启刷新的时候执行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 #清除数据
hexo generate #生成静态文件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安装（网上教程很多，最简单的方式就是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,还请根据对应的修改
        }
    } //加入

修改hexo样式

到hexo官网寻找一款觉得满意的主题链接到对应的github，下面一般都有下载说明
下载的文件放到对应的theme文件夹下
修改/my-blog/下的_config.yml文件：

theme: 对应的theme下要选择的主题文件夹名

对相应的样式进行调整修改

hexo主页下的tag标签、category标签无显示找不到

解决办法：在主目录下执行 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: 关于我
type: "about-me"
date: 2018-10-02 19:36:51
comments: false
---

集成畅言评论系统：

注册，获取APP ID 和APP KEY
进入到theme下的主题下，打开_config.yml文件，找到comment那一段配置，我的配置如下(和具体的主题有关，有的可能比较复杂)：

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:

集成分享系统

去mob系统注册账号
进入后台管理
新建应用
进入hexo应用管理页面，添加ShareSDK功能
记录AppKey
到web集成文档
中找到集成代码，将appkey改成刚才生成的，copy代码待用
进入theme下的theme/XXX/layout/_partial文件夹下，新建一个shares.ejs,将刚才的代码拷贝进去
打开同目录下的article.ejs，在article body最后引用此代码：

<%- partial('shares') %>

重启即可

增加打赏功能

在layout/_partial目录下新建donate.ejs文件，输入以下内容：

<! -- 添加捐赠图标 -->
<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">
           &uarr;<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,内容如下：

.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中配置以下内容：

Alipay: /img/Alipay.jpg
#是否开启打赏功能
donate: true
#打赏文案
donate_message: 欣赏此文？求鼓励，求支持！

重启测试

参考链接：

https://www.cnblogs.com/conserdao/p/6876381.html

https://hexo.io/zh-cn/

https://www.jianshu.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

hexo搭建个人博客完整版

环境说明

安装NodeJS

nodejs升级或版本降级

安装hexo

安装hexo-admin

nginx配置

修改hexo样式

hexo主页下的tag标签、category标签无显示找不到

集成畅言评论系统：

集成分享系统

增加打赏功能

参考链接：

猜你喜欢

热点阅读