基于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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
javascript获取当前ip的代码
May 10 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
Underscore源码分析
Dec 30 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 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 分页原理分析,大家可以看看
2009/12/21 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
如何在PHP中读写文件
2020/09/07 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python逆序打印各位数字的方法
2018/06/25 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
高二历史教学反思
2014/01/25 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2015年档案室工作总结
2015/05/23 职场文书
机械生产实习心得体会
2016/01/22 职场文书
自荐信范文
2019/05/20 职场文书