hexo 是一个“快速、简洁且高效的博客框架”。其最大的特点是在本地直接生成静态文件,将静态文件上传到服务器端,这样服务器端只有静态的文件,给网站的 SEO 优化带来了极大的便利,同时,网站的安全性也有了很大的提高,由于静态的网页对环境要求非常小,在流量较小的情况下,甚至可以不需要独立的服务器而直接丢于 GitHub 或虚拟主机上,对个人博主来说,能够有效的节省服务器开支;markdown 的支持让写作更加方便快捷;同时,hexo 拥有强大的插件系统与优质的主题(Alliot 就是因为 NexT 这个主题才知道的 hexo),高度可定制。官网:hexo.io
文章面向的是不熟悉的新手朋友,所以篇幅较长,不免有些啰嗦,还望各位大佬朋友绕道勿喷。
注意:
在hexo的配置文件中注释符号为’#’,本文为了方便查看(其实是我自己的习惯),在下文中将使用’//‘做注释,实际中,为避免发生报错,请使用’#’注释,望悉知。
安装(以windows中为例)
hexo可以安装在PC上,也可以直接安装在网站服务器上,区别在于:安装在PC上,等于在PC上生成静态文件后,再将其静态文件上传至服务器的网站根目录,用户只能在该PC上写作;而安装在服务器上则等于在服务器上生成静态文件(也可以直接监听4000端口实现),用户可以通过shell或者FTP来实现在不同的PC上写作并发布。大家可以自行选择,Alliot推荐前者,原因有三:一是由于文章使用的是markdown语法,在PC上写作,有更多的优秀的编辑器可以选择,如markdownPad、notepad++(可参考notepad++中实现markdown语法高亮与实时预览); 二是hexo提供了快速方便的一键部署功能,只需一条命令就能将网站部署到服务器上;最好的做法是,在PC上生成静态文件,通过git直接将网页部署在免费的GitHub或CodingPages上,省去购买服务器的费用。
安装git
众所周知的原因,某天朝下载需要代理,所以这里以及下文用到的工具,Alliot将其上传到度盘,这里只提供了Windows x64下的安装包,其他环境下的朋友可自行搜索。
(Git-2.11.0.3-64-bit)链接:http://pan.baidu.com/s/1cfa5VC 密码:rng9
安装是一路下一步,不做过多说明。
安装node.js
(node-v6.9.4-x64)链接:http://pan.baidu.com/s/1jIdytQQ 密码:4gsc 同上。
安装hexo
安装完node.js后,会在开始菜单-所有程序中生成一个”nodejs”文件夹,展开将“Node.js command prompt”发送到桌面快捷方式(稍后有用) 双击打开进入命令提示符窗口。
如图, 输入
(这里天朝由于众所周知的原因,下载可能较(非常)为缓慢,建议挂上代理操作。)
出现下图所示, 然后执行
出现下图所示, 则右键桌面的“Node.js command prompt”快捷方式,属性,将”起始位置”中的路径改为刚才初始化hexo的路径。
双击打开“Node.js command prompt”,执行
安装完成后的目录结构是这样的:
部分引用于官方文档:hexo.io/docs/setup.html
使用命令
命令可以通过node.js的命令提示符窗口输入:
新建文章
|
|
新建会在 source/_posts/
中生成对应的 .md 文件,编辑该文件即可。默认支持 markdown 与 HTML 语法
删除文章,则只需要删除对应的 .md 文档即可。
启动服务器
要能够在本地预览自己的博客,需要本地启动服务器。这里应先安装 hexo server 模块(hexo 3.0后版本,server 变成了独立的模块) 在命令提示符窗口执行:
安装完毕后执行:
浏览器输入: http://localhost:4000 (IE浏览器必须需要http前缀才可打开) 即可实时预览(注意是实时,修改文章与修改配置,保存后刷新网页都能看到效果)。Ctrl+C 关闭服务器。
生成静态文件
|
|
这里生成静态文件在根目录的 public
下,将此目录内的文件上传到服务器网站根目录即可。
清理
|
|
清理缓存与 public
目录,推荐每次执行 hexo s
之前都执行一次 hexo clean
,避免出现一些奇怪的问题(主页未同步等)。
部署发布
hexo提供了一键部署功能,通过简单的配置能够一键部署到网站服务器上。
开始之前需要修改根目录下的 _config.xml
配置文件,这里只举例 git:
使用git部署需要先安装 hexo-deployer-git
插件,执行:
然后修改配置文件_config.xml中的
这里以 Coding 中操作为例:
Coding Pages 是一个免费的静态网页托管和演示服务,您可以使用 Coding Pages 托管博客、项目官网等静态网页
(正准备写然后没想到好友 Lu尼玛 同学已经写出来了:点这里,大家可以参考他的做法)
配置基本信息
在根目录下的 _config.xml
中修改。(注意区别于 themes 下主题的 _config.xml 文件)
网站信息
参数 | 描述 |
---|---|
title | 网站标题 |
subtitle | 网站副标题 |
description | 网站描述 |
author | 作者名 |
language | 网站语言 |
timezone | 网站使用的时区 |
url | 网站url |
root | 网站根目录 |
前3个参数主要用于SEO优化。 这里将Alliot’s blog 的这部分配置信息列出如下,各位朋友可以参照本博客来修改:
主题设置
Alliot’s blog 博客用的是 “NexT”,具体使用方法可以参照主题官网 ,(官方文档已经很清楚、详细,这里就不多说),各位朋友可以按需求配置。
下面是我的主题配置文件(安全起见,已省略部分内容),可以直接拿过去用。点击下载
搜索功能
推荐使用 Local Search 作为站内搜索,搜索速度快,同时比较简洁,启用方法如下:
1、安装插件
安装 hexo-generator-searchdb 插件
打开 Node.js command prompt,在站点的根目录下执行以下命令:
2、更改配置文件
更改站点配置文件,新增如下内容于任意位置:
更改 NexT 主题配置文件,开启 Local Search 作为站内搜索:
社会化评论
待添加…(之前多说死了,网易云跟贴出来了,然后接着网易云跟贴也死了,国内好用一点的剩下畅言,不知道何时GG,so,暂时不更教程,大家可以使用国外的DISQUS,不过国内用户无法正常使用,有需要的朋友方法参考主题官网)
部分Markdown语法注意点
在 hexo 中,一些 Markdown 语法与我们平时所用的有些不同。
这里列举几个常见的:
部分优化
Nginx开启Gzip压缩
Nginx的部分优化见此文:链接
取消Google字体库加载
主题调用了Google字体库,天朝的GFW下,会导致字体库加载极其缓慢甚至无法加载。这就导致博客在加载时会有很长的等待时间(F12选择network可以查看加载时间)
解决方法: 修改主题配置文件 _config.xml
中的 font 字段。将 true 改为 false。(网上有朋友使用360的公共库,我试了觉得还是不够快。。这里索性改为 false 反而更快了)
CDN等设置能明显加速博客的打开速度,同时能够抵御一些小型攻击,由于操作简单这里就不过多赘述,需要注意的是,在同时开启了SSL(Nginx开启SSL与重定向优化)的时候,应该将回源设置为 HTTPS 回源方式。
SEO优化设置
虽说写博客不是为了搜索排名来写,但是,一定的搜索引擎流量或许能够让博客被更多的人知晓,也就有可能认识到与你志同道合的朋友~ 这里记录一些简单的SEO做法
1、添加robots.txt
robots.txt
是搜索引擎中访问网站的时候要查看的第一个文件。robots.txt
文件告诉蜘蛛程序在服务器上什么文件是可以被查看的。
这里推荐我这种写法(当然,hexo 的版本不同可能文件目录有所不同)
这里会出现一些安全隐患(其实是360网站检测提示 robots.txt
可能泄露站点目录结构,实际上并无大碍),可以参考此文解决。
2、安装sitemap插件
sitemap 在 SEO 过程中有着十分重要的地位,同时也能限制蜘蛛对某些特定目录的爬取。 具体概念不多赘述。 hexo 有很方便的自动生成sitemap的插件,打开 Node.js command prompt,在站点的根目录下执行以下命令:
然后在站点配置文件 _config.xml
中添加:
3、安装nofollow插件
减少出站链接能够有效防止权重分散,hexo 有很方便的自动为出站链接添加 nofollow 的插件。
这里@liuzhichao 感谢其开源的 hexo-autonofollow 插件,打开 Node.js command prompt,在站点的根目录下执行以下命令:
|
|
该插件会将博客中的出站链接自动加上 nofollow属性
,例外请在站点配置文件 _config.xml
中添加如下字段
|
|
这样,例外的链接将不会被加上 nofollow属性
。
插件自动添加的属性为 ‘external nofollow noopener noreferrer’ 一般来说标准的 nofollow属性
只需要 external nofollow
即可,noopener noreferrer 估计是新闻上说的钓鱼漏洞的补救方法,不过这条属性会影响站长工具的友链检测,大家如果需要去掉这一条属性,可以在/hexo根目录/node_modules\hexo-autonofollow\lib中修改filter.js中
将 ‘noopener noreferrer’ 去掉,重新 hexo g
即可。
文章密码
2017年11月11日更新: 原文点此 这里搬运过来做备份 (这种方式是不安全的,详情请点击hexo文章密码访问的”破解”方法)
第一步
找到 themes->next->layout->_partials->head.swig
文件。添加如下代码(推荐加在所有的 <meta>
标签之后):
第二步
写博文的时候顶部的页面变量添加 password: 密码
即可,如:
添加豆瓣读书、电影
添加鼠标点击动画
(从TXisfine扒下来的2333)修改themes/next/layout/_layout.swig在底部添加:
给代码添加复制按钮
来源于 Devin
项目地址: https://github.com/zenorocha/clipboard.js 下载到本地。
第一步
在 themes/next/source/lib/
,新建文件夹 clipboard
,将下载的文件下 src
文件夹下的文件复制到刚才新建的文件夹 clipboard
下。
第二步
打开 themes/next/source/js/src/
,新建文件 custom.js
,代码如下:
第三步
打开 themes/next/layout/_custom/
,新建文件 custom.swig
,代码如下:
第四步
修改文件 themes/next/layout/_layout.swig
,在标签 </body>
上面插入如下代码:
即可。
文末添加本文结束标记
第一步
在 /themes/next/layout/_macro
中新建 passage-end-tag.swig
文件,并添加以下内容:
第二步
打开 themes/next/layout/_macro/
下的 post.swig
文件,添加:
第三步
然后打开主题配置文件 _config.xml
,在末尾添加:
添加文章书写样式
文字增加背景色块
如:
站点配置文件
主题配置文件
站点配置文件
主题配置文件
打开 themes/next/source/css/_custom
下的 custom.styl
文件,添加属性样式
在你需要编辑的文章地方。放置如下代码:<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> 主题配置文件 </span>
下载按钮样式
如:
Download Now
打开 themes/next/source/css/_custom
下的 custom.styl
文件,添加属性样式
在你需要编辑的文章地方。放置如下代码<a id="download" href="https://www.iots.vip" target="_blank"><i class="fa fa-download"></i><span> Download Now </span> </a>
简化部署命令
每次更新博客都需要 hexo clean
hexo g
,太繁琐,我们可以通过 node.js 的 scripts 来简化部署命令,打开 `` 在末尾的 } 前添加:
,
"scripts": {
"g": "hexo clean && hexo douban && hexo g"
}
这样我们执行 npm run g
就相当于执行了 hexo clean && hexo douban && hexo g
重装系统后博客处理
重装系统前,记得备份好整个目录,这样会避免很多麻烦事情。安装对应版本的 nodejs,重新执行 npm install -g hexo-cli
即可。
声明
本文收集并整理于网络,许多方法并非原创,文中绝大部分的转载内容会加上原作者的链接,望悉知。如有侵权,请原作者提醒,Alliot一定在第一时间内删除并致歉,各位朋友如果有什么其他好玩的或者棘手的问题,可以在本文结尾留言,我会和大家一起寻找解决方法的~