基于Node.js搭建hexo博客过程详解


Posted in Javascript onJune 25, 2019

一、安装新版本的nodejs和npm

安装n模块:

npm install -g n

升级node.js到最新稳定版

n stable

二、安装hexo

note: 参考github,不要去其官网

安装Hexo

npm install hexo-cli -g

Setup your blog

hexo init blemesh
cd blemesh

安装Cactus主题,众多开源主题中比较简洁的一个:

主题页

Cactus页

git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

修改主题配置:

vim _config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: cactus
theme_config:
colorscheme: white

Create pages and articles with the hexo new [layout] <title> command. For example, to create an "about me" page, run:

hexo new page about

This will create a new file in source/about/index.md Similary, you can create a new article with

hexo new post "hello world"

and add some interesting content in source/_posts/hello-world.md.

Start the server:

hexo server

8001 port:

hexo server -p 8001

三、安装hexo-admin并配置

安装:

npm install --save hexo-admin

打开目录下的_config.yml配置hexo-admin:

admin:

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

注:

1)其中password_hash是你自己的明文密码经过加密后的字符串,但是如果用类似下面的网址: https://bcrypt-generator.com/ 会生成:$2y$10$pJjIxxxxxfMn9U/xxxxxNuuA20kh1eoB7vZxxxxx/7WpeV7IOxxxx类似的加密串,但是运行会报invalid salt revision错误,其原因是:

➜ blemesh cat node_modules/hexo-admin/www/bundle.js | head -4851 | tail -10
if (salt.charAt(0) != '$' || salt.charAt(1) != '2')
throw "Invalid salt version";
if (salt.charAt(2) == '$')
off = 3;
else {
minor = salt.charAt(2);
if (minor != 'a' || salt.charAt(3) != '$')
throw "Invalid salt revision";
off = 4;
}

需要版本号是2a的加密方式,因此只能用python自己写了:

https://pypi.org/project/bcrypt/3.1.0/

>>> hashed = bcrypt.hashpw(password, bcrypt.gensalt(prefix=b"2a"))
>>> print(hashed)
b'$2a$12$PAoJr3USOBxxxxxxxxxxxxxxV/.h.QNbh/6q.xxxxxxxxxxxxxxxxcDcJ.'

2)其中配置中有个脚本: ./admin_script/hexo-generate.sh 需要自己创建:

➜ blemesh cat admin_script/hexo-generate.sh 
hexo g
➜ blemesh chmod +x admin_script/hexo-generate.sh

这个脚本有什么用,啥时候触发?可以参考: https://www.jianshu.com/p/68e727dda16d step 5,admin后台管理博客有个deploy按钮,点击这个按钮就会执行这个脚本,该脚本会将md文件生成静态网页,如果用nginx配置去访问静态网页,速度会快很多。

四、nginx配置

配置nginx:编辑 /etc/nginx/nginx.conf 插入下面代码:

server {
listen 3001;
server_name www.beautifulzzzz.com;
index index.html index.htm index;
root /root/App/blemesh/public; 
}

之后重启nginx:nginx -s reload

注:
执行nginx后会报错误:nginx 403 Forbidden,原因是配置文件nginx.conf文件的执行用户和当前用户不一致导致的,把之前的nobody改成当前用户root。

五、增加tag

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

解决办法: 在主目录下执行 hexo new page "tags"或者hexo new page "category"
在/source/tags/index.md中设置修改

➜ blemesh cat ./source/tags/index.md 
---
type: "tags"
comments: false
date: 2019-02-24 02:53:03
---

同理categories:

➜ blemesh cat ./source/category/index.md 
---
type: "category"
comments: false
date: 2019-02-24 02:53:34
---

或者about me:

➜ blemesh cat ./source/about/index.md 
---
title: about
type: "about-me"
comments: false
date: 2019-02-22 00:09:58
---

六、后台启动

hexo server进程一直在后台运行的办法(执行hexo server -d &在一段时间后会停止hexo,此时无法打开后台),采用pm2接管hexo进程:

npm install -g pm2

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

➜ blemesh cat hexo_run.js 
const { exec } = require('child_process')
exec('hexo server -p 8001 -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

最后附上 zhouwaiqiang 写的一个hexo重启脚本restart_hexo.sh(需要先配置好nginx),需要重启刷新的时候执行source restart_hexo.sh即可:

➜ blemesh cat 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

七、体验

  • 启动:sh ./restart_hexo.sh
  • 访问主页: http://www.beautifulzzzz.com:8001/
  • 访问nginx静态快速版网页: http://www.beautifulzzzz.com:3001/
  • 访问后台编写文章: http://www.beautifulzzzz.com:8001/admin/
  • 编写好之后点击Deploy会自动调用之前的脚本,静态网页就有了

基于Node.js搭建hexo博客过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
JS编程小常识很有用
Nov 26 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 #Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 #Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 #Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 #Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 #Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 #Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 #Javascript
You might like
php 移除数组重复元素的一点说明
2008/11/27 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP可变函数学习小结
2015/11/29 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
js获取Get值的方法
2016/09/29 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python opencv摄像头的简单应用
2019/06/06 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
硕士研究生自我鉴定
2013/11/08 职场文书
智能电子应届生求职信
2013/11/10 职场文书
公积金单位接收函
2014/01/11 职场文书
教师学习培训邀请函
2014/02/04 职场文书
七匹狼男装广告词
2014/03/21 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
党纪处分决定书
2015/06/24 职场文书