如何优雅地发布Hexo博客

本文涉及的产品
.cn 域名,1个 12个月
简介: 次优雅的发布hexo博客方式,为什么说是次优雅,因为它是目前我自己所知道的比较优雅的发布方式,可能存在其他更好的方式,欢迎指教~转载请注明出处:http://blog.lzoro.com,谢谢~前言就目前而言,我所知道的发布Hexo的博客有如下几种:1、原始方式,也就是在服务器上编写md文件,然后利用hexo g来生成;2、利用github+hook来管理,小锅这里有一篇教程;3、其他(hexo-admin or other plugins);我所用的这个方式就属于第三种,略微改进版。

次优雅的发布hexo博客方式,为什么说是次优雅,因为它是目前我自己所知道的比较优雅的发布方式,可能存在其他更好的方式,欢迎指教~
转载请注明出处:http://blog.lzoro.com,谢谢~

前言

就目前而言,我所知道的发布Hexo的博客有如下几种:
1、原始方式,也就是在服务器上编写md文件,然后利用hexo g来生成;
2、利用github+hook来管理,小锅这里有一篇教程
3、其他(hexo-admin or other plugins);
我所用的这个方式就属于第三种,略微改进版。也许你已经看过[那么可以概览之后忽略],也许你没看过,那么请耐心看完,反正都点进来了,也许有福利呢,who knows...

环境说明

格子这里所使用的环境如下:

1、阿里云 Linux 3.10.0-514.6.2.el7.x86_64
2、NodeJs 6.10.3
3、Hexo-cli: 1.0.2
4、Hexo 3.3.7
5、Hexo-admin 
6、Nginx1.9.9

本篇博客的重点在于Hexo博客的优雅发布,所以其他必需环境的安装大部分会简短带过。如果还未安装过相关环境或者不会安装相关环境的请自行百度,网上有特别丰富的教程资料,这里只给出部分链接供参考。

重要说明:格子未直接使用hexo server启动hexo服务来对外提供博客的访问,而是通过nginx作为web服务器对外提供服务。

NodeJs

下载地址

http://nodejs.cn/download/

安装
请参考这里,注意自己选择的安装包。

Hexo

官网

https://hexo.io/

安装
请参考这里。需要注意的是,格子这里是将环境搭建在阿里云机器上,并不是通过GitHub托管,毕竟用GitHub的子域名感觉不够高大上,毕竟装(chui)比(niu)要装一整套的。所以我就花重金买了域名,买了云主机,买了oss,这样装备齐全之后,感觉逼格都提高了。


另:安装完博客之后,有很多主题可供挑选,点击 这里,找到自己喜欢的主题,并给hexo换上,舒舒服服地来一发吧。

Hexo-admin

主角登场了,前面也有提到过,管理Hexo博客,我所知道的有几种方式。用手动管理的方式未免显得太过于原始人,即便你用本地的Markdown编辑器洋洋洒洒地写完了一篇博客,还是得屁颠屁颠地连接到服务器,然后将文件上传到博客服务器,再然后谄媚地告诉服务器,乖,帮我执行一下hexo g,命令执行完,静态页面生成后一篇博客才叫告一段落。
也许你不嫌麻烦,觉得这样也挺好的,没那么多屁事儿折腾,那么就坚持自己的做法也未尝不可。
但是,如果你跟我一样嫌(tai)麻(lan)烦(le)的话,那么利用Hexo-admin插件,加上自己部分diy,也许一个自己比较满意的Hexo博客发布方式就到手了,岂不是一大爽事。

就是这个feel~倍儿爽

反正我就是懒,不要拉我,让我懒。其实有时候这种“懒”往往能促使人进步,如果不嫌麻烦甘于重复劳动,虽然会少掉很多折腾,但也会少掉很多发现和进步。
好了,鸡汤喝完,该说正事儿了。

hexo-admin官网
https://jaredforsyth.com/hexo-admin/

step 1

安装必要环境,请参照上面

step 2

初始化博客,一般到这里你应该是已经初始化自己的博客了,如果还没有的话,请看下面

cd /usr/local/
hexo init yourblog
cd yourblog
npm install

step 3

安装hexo-admin插件,并且启动hexo服务,打开浏览器访问能看到基本的界面

npm install --save hexo-admin
hexo server -d
open http://localhost:4000/admin/

登录界面


到这里,没进行配置的小伙伴可能还无法登录,请接着往下看。

step 4

在hexo的_config.yml配置hexo-admin

admin:
   username: zoro
   password_hash:be121740bf988b2225a313fa1f107ca1
   secret: hey hexo
   deployCommand: './admin_script/hexo-generate.sh'
  # expire: 60*1


1、password_hash就是密码,通过bcrypt hash,你可以用尽你一切手段对自己的密码做一个bcrypt加密,C/Java/Python都可以,做人嘛,重要的是嗨森;
2、secret用以cookies安全;
3、deployCommand就是一个关键点,不要着急,下面给出说明;

主页

  • Post:博客文章列表,包括已经发布的和还在草稿箱等待宠幸的;
  • Pages:就是诸如标签云之类的页面管理;
  • About:关于admin插件的说明
  • hexo-gen:这个原来是Deploy,被我修改了,关键节点;
  • Settings:配置;

step 5

先解释一下上面配置的那个deployCommand的用处,目的在于页面上你点击了Deploy页面下面的Deploy按钮的时候,所执行的脚本,这里格子拿它来作为执行hexo g的载体。
说到这里,可能有些人不是很理解为什么要这么做,看官莫急,听我细细道来。
其实,当你以hexo server -d启动了hexo服务的时候,hexo-admin插件在你修改了 某篇博已发布博客,或者新发布博客的时候,会在后台帮你执行一系列操作,所以这个时候,你可以通过http://localhost:4000访问就可以看到刚才发布到博客了,看到这里,有读者应该就要心里问候格子声:那你是不是傻,为什么还要折腾?容我说一句,原因只有一点:以hexo server启动的hexo对外提供的服务,并不是特别稳定,访问略慢,毕竟不是专门的web服务容器,而且如果你不以nohup方式启动的话,一旦关掉Xshell等操作界面的时候,就会被迫关掉,所以带来了一系列令人不喜的体验,这就是我折腾的唯一原因。
因此,其实格子是以Nginx为web服务容器对外提供博客服务,每次将新博客生成静态Html放到Nginx配置的目录下,速度不要太快;格子的云主机只有1G内存 单核CPU,还是能有不俗的访问体验,所以觉得还算没白折腾。
有点走题,话说回来,大体的步骤是这样:
1、Nginx提供web服务
2、hexo-admin提供博客管理
3、利用hexo-admin在浏览器实现博客编写,或者自己本地md编辑器写好之后粘贴到hexo-admin,后者可能更为保险,防止丢失。
4、利用hexo-admin留下来的deploy按钮,去执行我们放在博客服务器上的脚本,来生成html页面;

所以,重点来了,在_config.yml里面填写好deployCommand的存储路径之后,在该路径下生成脚本;

touch hexo-generate.sh;
vim hexo-generate.sh;

输入以下内容

#!/usr/bin/env sh
hexo g

保存退出,并赋予执行权限

执行Shift+:,输入q,如下
:q
chmod +x hexo-generate.sh

step 6

验证效果,这里我没有贴出Nginx的配置,稍等给出,可以先行验证是否有效果
1、启动hexo server
2、访问http://localhost:4000/admin并登陆
3、进入Posts页面,新建博客并编写发布;
4、进入Deploy页面(如果你还没改掉改名称的话),点击下面的Deploy按钮
5、进入博客目录->public,查看相应的html是否有生成,如果有,那么恭喜你成功了。

这里有两个问题:
①、hexo-admin的作者将hexo-admin的服务依赖于hexo来运行[hexo s],个人觉得有点浪费资源,但有碍于没时间,只好暂时将就这样。有兴趣的人,可以去阅读源码,然后将hexo-admin处理成独立的服务。
②、Deploy页面的功能其实被我们diy成hexo generate的执行者了,所以有强迫症的小伙伴可以将页面内容改成具体含义的,比如格子改成了hexo-gen,修改路径在hexo目录下,node_modules/hexo-admin/www/bundle.js
差不多就是这样,突然觉得有点没头没尾,因为没有讲Nginx部分,下面给出,这样大家应该不会觉得特别乱;

Nginx

下载
http://nginx.org/en/download.html
安装
请搜索网上安装教程,特别多,这里不做重复劳动了。如果有什么问题可以留言指出。
配置

    server {
        listen 80;
        #域名,多个用空格隔开
        server_name lzoro.com blog.lzoro.com;
        #配置hexo博客目录
        root /usr/local/hexo/public;
        location / {
                index  index.html index.htm;
        }
        access_log /tmp/logs/nginx/hexo.access.log;
    }

启动nginx,访问自己的域名http://blog.lzoro.com,如果没出问题的情况下,会出现自己的博客,然后可以看到各篇博客的情况。

小结

发布Hexo博客的方式有好几种,每个人的喜好不一样,所以也无关优劣。
格子这里带来的方式是利用Nginx作为web容器,利用Hexo-admin作为web后台管理来管理hexo博客,然后通过hexo-admin留下来的脚本执行按钮执行hexo g生成博客静态页面,相当于,你只需要一个浏览器,无需远程连接博客服务器,就可以轻松发布自己的博客了。
如果文章对你帮助,无妨留个言让格子知道呗。

目录
相关文章
|
搜索推荐
hexo博客4:发布文章
hexo博客4:发布文章
64 0
|
Web App开发 域名解析 JavaScript
3分钟搭建个人Hexo博客
从账号的创建到一键部署,手把手教你零基础创建个人博客,后续可以继续根据网上的教程来修改代码对博客进行定制化的美化。
|
域名解析 JavaScript Linux
关于Hexo博客
关于Hexo博客
133 0
|
数据采集 数据挖掘 Shell
[Hexo]部署博客及更新博文
找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错。
YI
|
Shell 开发工具 数据安全/隐私保护
Hexo博客搭建2
上一篇介绍了博客的本地环境搭建,但这只能本地访问自己的博客。如果想让自己的博客被互联网上的其他人访问,我们还需要将博客项目进行线上部署。本文我将介绍将博客部署到github上的方法。
YI
73 0
YI
|
Shell
Hexo博客搭建3
之前的文章介绍了博客的本地搭建和线上部署。因为hexo的内置主题不够好看,所以我们可以选择加载其他主题来美化我们的博客页面。本文我将介绍基于hexo框架搭建的博客如何修改主题。
YI
78 0
YI
|
JavaScript Shell Linux
Hexo博客搭建1
暑假在家学习时,突然感觉学过的知识忘记的很快,所以决定搭建个人博客来记录学习过程。经过前期了解后,决定采用Hexo框架来搭建个人博客。本文将记录博客搭建过程。
YI
101 0
|
JavaScript 搜索推荐 程序员
使用Hexo 搭建你的技术博客
使用Hexo 搭建你的技术博客
257 0
|
JavaScript 安全 应用服务中间件
|
JavaScript Shell Linux
使用Hexo搭建自己的博客
之前一直在用typecho来做自己的博客,因为他操作比较简单,但是前几日修改一些配置的时候,看着满屏的php代码实在有些头疼,在朋友的推荐下,我成功的入坑了hexo,下面分享一些自己搭建博客的过程,尽量让读者避开一些坑。