[toc]
#### 安装Hexo
npm install hexo-deployer-git --save

初始化创建博客框架
hexo init blog

进入博客目录
cd blog

进一步安***r /> npm install
#### 本地部署测试
启动本地,查看是否合意
hexo server
#### 部署到Github Pages中
修改配置文件  _config.xml
```
deploy:
 type: git
 repo: https://github.com/leopardpan/leopardpan.github.io.git
 branch: master
```
#### 修改主题
```
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-cyanstyle/
```
修改theme的值。然后将主题文件clone到themes目录下。例如在theme目录下执行如下指令。
```
git clone git@github.com:luuman/hexo-theme-spfk.git
```
将hexo中的文件复制到这个git clone的文件中
### 新建博客
```
hexo new blog_article
```
新生成的文章会保存到/source/_post目录下。
```
---
title: testMyBlog
date: 2017-08-23 11:01:26
tags:
---
```
在分割线下,按照正常的Markdown格式进行写作即可。
#### 部署到服务器上

每次部署的步骤,可按以下三步来进行。
````
hexo clean
hexo generate
hexo deploy
````
加入;可以一次性持续进行操作


#### 一些常用命令:

hexo new"postName" #新建文章

hexo new page"pageName" #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)

hexo deploy #将.deploy目录部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本


hexo server #本地查看

#### 对之的美化


##### 自动截断
用md写的话,在文章里加<!-- more --> 会自动截断
在需要截断处添加下方代码。
```
<!-- more --> 
```

##### 添加标签
title: 标签测试文章
tags:
  - Testing
  - Another Tag
---
# 优雅发布
前言

就目前而言,我所知道的发布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/


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

Hexo

官网

https://hexo.io/


安***r />
请参考这里。需要注意的是,格子这里是将环境搭建在阿里云机器上,并不是通过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

安***r />
请搜索网上安装教程,特别多,这里不做重复劳动了。如果有什么问题可以留言指出。

配置

    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博客

解决

# yili主题设置

1.草稿相当于很多博客都有的“私密文章”功能。
会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上,链接也访问不到。也就是说如果你想把某一篇文章移除显示,又不舍得删除,可以把它移动到_drafts目录之中。
$ hexo new draft "new draft"

如果你希望强行预览草稿,更改配置文件:

render_drafts: true
或者,如下方式启动server:
$ hexo server --drafts
下面这条命令可以把草稿变成文章,或者页面:
$ hexo publish [layout]

2.文章显示局部的更多不现实全文。
md文件加入
3.新建md文章时候会有默认的模板。修改默认的模板
其中layout是可选参数,默认值为post。有哪些layout呢,请到scaffolds目录下查看,这些文件名称就是layout名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如post的layout默认是hexo\scaffolds\post.md
title: { { title } }

date: { { date } }

tags:

修改为:

title: json520博客001 #文章标题

date: 2015-02-05 12:47:44 #文章生成时间

categories: 必须写 #文章分类目录 可以省略

tags: 必须写 #文章标签 可以省略

description: 问题描述必须写 #你对本页的描述 可以省略

这样每次新建都不用手动添加属性了

4. 设置404页面
选用腾讯
GitHub Pages 自定义404页面非常容易,直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的

5.常用命令

hexo new"postName"#新建文章hexo new page "pageName"#新建页面hexo generate #生成静态页面至public目录hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)hexo deploy #将.deploy目录部署到GitHub

6. 常用复合命令:

hexo deploy -ghexo server -g

7. 简写:

hexo n == hexo newhexo g == hexo generatehexo s == hexo serverhexo d == hexo deploy

8. 搜索引擎
你可以到屈站长提交你的站点给搜索引擎。其他内容如添加站点或页面的description,提交Sitemap,添加百度统计,Google Analytics等等,参考本文其他章节的内容,不再一一阐述。
9. 设置网站ico
去比特虫只做icon图标
把图片放到hexo/source/img文件夹下面,在其它地方用/img/图片名引用就可
找到hexo\themes\modernist\layout_partial\head.ejs,设置为
<% if (theme.favicon){ %>    <linkrel="icon"href="/img/favicon.ico"><% } %>

10. 添加百度统计

你问我为啥不用CNZZ!因为!爱情!放心!不是对百度的爱!是对陈奕迅的爱!
进入主题对应的主题文件夹的配置文件下hexo\themes\yilia_config.yml,增加配置选项:
baidu_tongji: true //会检测到对应的js文件,true就使用
去百度统计注册登录获得代码。不会的你就洗洗睡吧!出教程很累的!还没报酬!
新建文件hexo\themes\yilia\layout_partial\baidu_tongji.ejs!为啥是.ejs文件结尾不是.js!我也不知道!里面都他妈是ejs!等我搞懂了就来解答!
里面内容为:

<% if (theme.baidu_tongji){ %><scripttype="text/javascript">#你的百度统计代码script><% } %>
编辑文件hexo\themes\modernist\layout_partial\head.ejs,在『/head』之前增加
<%- partial('baidu_tongji') %>

重新生成部署你的站点吧!不出意外就能在百度统计后台看到统计数量。刚布置好会有延迟!我是刚开始测试了代码设置成功但看不到统计,所以就去研究别的功能!过了半个小时去看!就有了!

不出意外的花,你在的站点的每个页面的左上角都会看到一个恶心的百度LOGO。你只能在『百度统计首页->网站列表->获取代码->系统管理设置->统计图标设置->显示图标』,把那个勾去掉。建议你去掉!

11.设置首页点击所有文章右滑动出现文章目录
请确保node版本大于6.2,输入node -v查看版本号,不符合的自己百度修改!
在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
在根目录_config.yml里添加配置:
jsonContent:    meta: false    pages: false    posts:      title: true      date: true      path: true      text: false      raw: false      content: false      slug: false      updated: false      comments: false      link: false      permalink: false      excerpt: false      categories: false      tags: true

按我的流程不实现我直播吃翔!有些功能你提交到github和本地看得不一样是浏览器缓存的问题!清楚浏览器的缓存或者用浏览器的隐身模式打开!不会的度娘!

12. 首页标题出现乱码的问题

困扰我很久!在根目录设置了

language: zh-CN

按说语言设置为中文就可以了!但是还是不行!今天在sublime打开才发现中文写的都是乱码!所有千万不要在text文件打开!要用编辑器打开!全部保存为utf-8的编码格式!

相关推荐:hexo 插入视频和音乐播放器

参考:地址## 背景

博客中插入音乐/视频,可以让博客的逼格瞬间提高。作为优秀的静态博客,Hexo 当然也少不了这些高大上的功能。

解决

我的博客插入视频和音乐实例

Markdown 通用音乐/视频插入方法

Markdown 作为轻量级的标记语言,兼容 html 语法,所以可以直接在 Markdown 文档中使用 html 语法。

标签举例:

标签举例:

"http://player.youku.com/player.php/Type/Folder/Fid/27690810/Ob/1/sid/XMTY1MTI3NjMyNA==/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash">embed>

### 插入图片
在用Hexo搭建博客时有时需要插入图片,但是原生Hexo对图片管理的支持不是很好。此篇博客记录利用插件和Hexo的配置解决这个问题。

_config.yml配置更改
在Hexo根目录下,_config.yml文件管理整个Hexo的配置设置。其中要开启post_asset_folder,即:

1
post_asset_folder: true
更改完成后,每新生成一片文章,就会在同级目录下生成一个名字相同的相对应的文件夹。图片存在该文件夹下即可。

安装插件
由于原生Hexo资源文件夹在生成真正博客时地址转换有问题,需要安装插件进行修正。执行如下命令安装插件:

1
$ npm install https://github.com/CodeFalling/hexo-asset-image --save
当安装完成后就可以在写Markdown时很容易的使用资源文件夹下的图片了。

使用教程
在插入图片时只要使用如下Markdown语法即可

1
![](文章名字/图片名字.后缀)
不知道我是不是因为在_config.yml中开启了relative_link,我采用如下方式插入图片:

1
![](图片名字.后缀)


# 常见问题
原搭建 hexo,在执行 hexo deploy 后,出现 error deployer not found:git 的错误

出现这种错误有两种解决方案:

(1)如果没有安装git需要安***r />

(2)检查是否在环境变量path中配置了git的路径

D:\program files\Git\bin;

D:\program files\Git\mingw64\libexec\git-core;

通过上述的步骤就可以解决了。

2、hexo问题

先hexo g再执行hexo d布署,也可使直接用hexo d -g

hexo 更新到3.0之后,deploy的type 的github需要改成git

在执行 hexo deploy 后,出现 error deployer not found:git 的错误处理

输入代码:
npm install hexo-deployer-git --save