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

一、安装新版本的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会自动调用之前的脚本,静态网页就有了

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

(0)

相关推荐

  • [将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客

    这里选用的操作系统是社区版Debian,Debian和Ubuntu的操作指令是一脉相承的,再加上之前玩过一段时间的Raspberry PI,个人比较熟悉,以下的安装过程其实同样适用于树霉派(安装node.js和NPM那一部分). 1) 注册并选型 在aws上注册并绑定信号卡后即可使用亚马逊的一年免费EC2主机,不过配置通常比较低,通常为0.612Mb(linux)和1G(Win)内存. http://aws.amazon.com/ 这里选用的是社区版Debian的版本是 Debian-squee

  • Node.js+jade抓取博客所有文章生成静态html文件的实例

    这篇文章,我们就把上文中采集到的所有文章列表的信息整理一下,开始采集文章并且生成静态html文件了.先看下我的采集效果,我的博客目前77篇文章,1分钟不到就全部采集生成完毕了,这里我截了部分的图片,文件名用文章的id生成的,生成的文章,我写了一个简单的静态模板,所有的文章都是根据这个模板生成的. 项目结构: 好了,接下来,我们就来讲解下,这篇文章主要实现的功能: 1,抓取文章,主要抓取文章的标题,内容,超链接,文章id(用于生成静态html文件) 2,根据jade模板生成html文件 一.抓取文

  • node.js博客项目开发手记

    需要安装的模块 body-parser 解析post请求 cookies 读写cookie express 搭建服务器 markdown Markdown语法解析生成器 mongoose 操作Mongodb数据库 swig 模板解析引擎 目录结构 db 数据库存储目录 models 数据库模型文件目录 public 公共文件目录(css,js,img) routers 路由文件目录 schemas 数据库结构文件 views 模板视图文件目录 app.js 启动文件 package.json a

  • Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

    VuePress vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档. 一个基于 Vue SSR 的静态站生成器,本来的目的是爽爽的写文档,但是我发现用来撸一个人博客也非常不错. 这是VuePress的官方文档 上手搭建 你可以跟着文档上的例子自己玩一玩,不过由于VuePress的文档也是用VuePress来实现的,所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍. 1.首先安装VuePr

  • 手把手教你用Hexo+Github搭建属于自己的博客(详细图文)

    在大三的时候,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近比较有空,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了? 哈哈,大概是为了装逼吧,同时自己搭建博客的话,样式的选择也比较自由,可以自己选择,不需要受限于各大平台. 转载请注明原博客地址:手把手教你用Hexo+Github 搭建属于自己的博客 大概可以分为以下几个步骤 搭建环境准备(包括node.js和git环境,gitHub账户的配置) 安装Hexo 配置Hexo 怎样将Hex

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

    一.安装新版本的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/probber

  • Node.js完整实现博客系统详解

    目录 一.项目功能说明 二.最终效果 三.文件目录结构说明 四.项目技术栈 五.核心技术 1. 使用Schema定义数据模型 2. mongoose 的操作 3. mogodb数据库的操作 4. 使用第三方插件 express-session:存取数据状态 5. 挂载路由 6. 使用md5对密码进行加密 六.遇到的问题 七.github链接 一.项目功能说明 登录.注册 新建博客 首页显示全部博客 查看博客详情页 查看博客评论区 修改.删除博客 二.最终效果 首页: 登录.注册: 详情页: 评论

  • node+js搭建时间服务器的思路详解

    目录 时间服务器 1.思路准备 1.1思路来源 1.2思路前提要求 1.3技术要求 2.实现 2.1实现准备 2.2搭建前台页面 2.3搭建后台服务器 2.3.1搭建后台 2.3.2后台处理要发送的数据 2.4前端处理获取的数据 2.4.1时间数据 2.4.2天气信息 2.5效果展示 3.总结 时间服务器 时间服务器 1.思路准备 1.1思路来源 这是在我的软件老师给的期末课程设计他要的是通过自己的知识储备,来设计一个前后端数据的展示与发送 1.2思路前提要求 1.搭建一个前台页面,要求简单易懂

  • 基于docker 搭建Prometheus+Grafana的过程详解

    一.介绍Prometheus Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prometheus,社会也十分活跃,他们便将它独立成开源项目,并且有公司来运作.Google SRE的书内也曾提到跟他们BorgMon监控系统相似的实现是Prometheus.现在最常见的Kubernetes容器管理系统中,通常会搭配Prometheus进行监控. Prometheus基本原理是通过HTT

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • pm2与Verdaccio搭建私有npm库过程详解

    目录 前言 一般私有化的npm仓库有以下几种方法实现: 下面对各个方案进行一个粗浅的对比: 为什么选用Verdaccio? 安装 修改配置 配置文件 权限把控 部署 docker部署 pm2部署 管理npm仓库源 npm包发布 注册 登录 发布 删除 前言 最近开会的时候讨论到前端组件库搭建,因为需要多人协作,使用npm link等都比较麻烦,且当业务规模较大了之后,我们一般会有自己的脚手架,自己的全局工具包等等.其中可能包含了自身的业务代码不能公开,因此我们都需要一个私有化的npm仓库. 一般

  • koa TS ESLint搭建服务器重构版过程详解

    目录 初始化项目目录 安装项目运行所需要的软件包 修改package.json 从.env中加载环境变量 配置路径别名 用法 目录规范 编码风格规范 Eslint 初始化项目目录 yarn init -y 安装项目运行所需要的软件包 生产依赖 yarn add koa koa-router cross-env module-alias dotenv koa:搭建 Koa 服务的核心软件包. koa-router:Koa 路由软件包. koa-bodyparser:解析 POST 请求参数的软件包

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • 使用Webpack 搭建 Vue3 开发环境过程详解

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js webpack.config.js '

  • Elasticsearches的集群搭建及数据分片过程详解

    目录 Elasticsearch高级之集群搭建,数据分片 广播方式 单播方式 选取主节点 什么是脑裂 错误识别 Elasticsearch高级之集群搭建,数据分片 es使用两种不同的方式来发现对方: 广播 单播 也可以同时使用两者,但默认的广播,单播需要已知节点列表来完成 广播方式 当es实例启动的时候,它发送了广播的ping请求到地址224.2.2.4:54328.而其他的es实例使用同样的集群名称响应了这个请求. 一般这个默认的集群名称就是上面的cluster_name对应的elastics

随机推荐