hexo blog 搭建教程
什么是 Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
hexo 安装
在安装前,您必须检查电脑中是否已安装 Node.js 和 Git。如果已经安装,那么可以使用npm安装 hexo。
1 | npm install -g hexo-cli |
build site
安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件
1 | hexo init <folder> |
新建完成后,指定文件夹的目录如下:
1 | . |
- scaffolds: 模版文件夹。
- source: 资源文件夹是存放用户资源的地方
- package.json: 应用程序的信息
- _config.yml: 网站的配置信息.
具体的 config.yml 配置可以查看 官方配置doc
命令
new
1 | hexo new [layout] <title> |
新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
generate
1 | hexo generate | hexo g |
生成静态文件。
选项 | 描述 |
---|---|
-d, –deploy | 文件生成后立即部署网站 |
-w, –watch | 监视文件变动 |
publish
1 | hexo publish [layout] <filename> |
发表草稿。
server
1 | hexo server |
启动服务器。默认情况下,访问网址为: http://localhost:4000/
选项 | 描述 |
---|---|
-p, –port | 重设端口 |
-s, –static | 只使用静态文件 |
-l, –log | 启动日记记录,使用覆盖记录格式 |
-g, –generate | 启动服务器之前预先生成静态文件 |
deploy
1 | hexo deploy |
部署网站。
参数 | 描述 |
---|---|
-g, –generate | 部署之前预先生成静态文件 |
clean
1 | hexo clean |
清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
更多命令见 官方文档doc
NEXT 主题
reward 打赏
1 | reward: |
书签
1 | bookmark: |
安装插件
1 | cd themes/next |
阅读进度条
1 | reading_progress: |
安装插件
1 | cd themes/next |
页面 loading
1 | pace: true |
安装插件
1 | cd themes/next |
支持数学公式
1 | math: |
valine 评论系统 & leanvisitor 文章访问数
1 | valine: |
文章阅读排行
hexo n page top
新建页面,会生成 top 目录,编辑其中自动生成的 index.md 文件,将其中的代码替换如下:
1 | <div id="post-rank"></div> |
并将其中的 leancloud_appid、leancloud_appkey 替换为你的。
编辑主题配置文件 themes\next_config.yml,添加 top
1 | menu: |
新增菜单栏的显示名称 hexo/theme/next/languages/zh-CN.yml
,同样新增 top 对应的中文:
1 | menu: |
版权声明
1 | creative_commons: |
友情链接
1 | links_icon: link |
设置动态title
在 /themes/next/source/js/src
目录下新建 dytitle.js 。添加以下内容:
1 | var OriginTitile = document.title; |
更改 /themes/next/layout/_layout.swig
,在 </body>
之前添加:
1 | <!--卖萌--> |
动态背景-3d
1 | # three_waves |
安装插件
1 | cd themes/next |
动态背景-canvas_nest
1 | canvas_nest: |
安装插件
1 | cd themes/next |
文章末尾添加“本文结束”标记
在/themes/next/layout/_macro
中新建passage-end-tag.swig文件,添加代码至该文件中:
1 | <div> |
打开/themes/next/layout/_macro/post.swig
文件,在post-body后,post-footer前,添加下面内容:
1 | {#####################} |
打开主题配置文件(_config.yml),在末尾添加:
1 | # 文章末尾添加“本文结束”标记 |
添加页面点击出现爱心的效果
在/themes/next/source/js/src
下新建文件clicklove.js,接着把该链接下的代码拷贝粘贴到clicklove.js文件中。代码如下:
1 | !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document); |
在/themes/next/layout/_layout.swig
文件末尾添加:
1 | <!-- 页面点击小红心 --> |
访客总数统计
1 | busuanzi_count: |
文章底部的带#号的标签改为字体图标
修改 themes/next/layout/_macro/post.swig
搜索 rel="tag">#
,将 #
换成<i class="fa fa-tag"></i>
.
本地搜索
安装 package
1 | npm install hexo-generator-searchdb --save |
配置
1 | local_search: |
备案
1 | # icp 备案 |
在themes/next/layout/_partials/footer.swig
文件中,author 下面添加:
1 | <div style="width:300px;margin:0 auto; padding:5px 0;"> |
个人头像
1 | avatar: |
wordCount 和阅读时长
安装 package
1 | npm install hexo-symbols-count-time --save |
配置
1 | symbols_count_time: |
开启 SEO 优化
Next 提供了 seo 优化选项,在主题配置文件_config.yml中有个选项是seo,设置成true即开启了 seo 优化。
百度收录博客
打开百度站长平台,注册登陆后,在用户中心 > 站点管理下添加网站。根据提示输入站点地址等信息.在选择完网站的类型之后需要验证网站的所有权,有三种验证方式,文件验证、html 标签验证、cname 解析验证。详情见官网描述。
生成 sitemap 站点地图
站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知 Google 等搜索引擎。搜索引擎网页抓取工具会读取此文件,以便更加智能地抓取您的网站。
先安装谷歌和百度的插件,如下:
1 | npm install hexo-generator-sitemap --save |
在博客根目录的_config.yml中改url为你的站点地址:
1 | # URL |
在博客根目录的_config.yml中添加如下代码:
1 | baidusitemap: |
之后重新打包hexo g,若在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了,其中sitemap.xml文件是搜索引擎通用的文件,baidusitemap.xml是百度专用的 sitemap 文件。
之后就可以将生成的 sitemap 文件提交给百度,可加快爬虫抓取速度。还是在百度站长平台,找到网站支持 > 数据引入 > 链接提交。这里我们可以看到有两种提交方式,自动提交和手动提交,自动提交又分为主动推送、自动推送和 sitemap。从效率上来说:主动推送>自动推送>sitemap。
安装插件:
1 | npm install hexo-baidu-url-submit --save |
根目录配置文件_config.ym新增字段:
1 | baidu_url_submit: |
其次,记得查看_config.ym文件中url, 必须是百度站长平台注册的域名(包含www):
1 | # URL |
最后,根目录配置文件新增 deploy:
1 | deploy: |
以后每次执行hexo deploy,链接就会被推送给百度了。
hexo-abbrlink 链接持久化
hexo 默认的链接是 http://xxx.yy.com/2018/07/14/hello-world
这种类型的,这源于站点目录下的配置 _config.yml 里的配置 :permalink: :year/:month/:day/:title/
,这种默认配置的缺点就是一般文件名是中文,导致 url 链接里有中文出现,这会造成很多问题,如使用gitment,也不利于 SEO,另外年月日都会有分隔符。
hexo-abbrlink这个插件,猜测是根据时间点算出的最终链接,这样就确保了博文链接的唯一化,只要不修改 md 文件的abbrlink的值, url 就永久不会改变。如此 md 文件名和文件内容也可以随便改了。后面的层级更短,这样也有利于 SEO 优化。
安装
1 | npm install hexo-abbrlink --save |
站点配置文件里:
1 | permalink: post/:abbrlink.html |
生成页面
1 | # 注意一定要clean |
hexo-autonofollow
nofollow 标签是由谷歌领头创新的一个反垃圾链接的标签,并被百度、yahoo 等各大搜索引擎广泛支持,引用 nofollow 标签的目的是:用于指示搜索引擎不要追踪(即抓取)网页上的带有 nofollow 属性的任何出站链接,以减少垃圾链接的分散网站权重。
这里推荐 hexo-autonofollow 插件来解决。
安装:
1 | npm install hexo-autonofollow --save |
在站点配置文件中添加以下代码:
1 | nofollow: |
hexo-renderer-pandoc
1 | npm install hexo-renderer-pandoc --save |
hexo-filter-mermaid-diagrams
项目地址
1 | # 1. 安装package |
hexo-deployer-git
- 安装package
1 | npm install hexo-deployer-git --save |
- 修改配置
1 | deploy: |
参数 | 描述 |
---|---|
repo | 库(Repository)地址 |
branch | 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。 |
message | 自定义提交信息 |
hexo-deployer-rsync
- 安装package
1 | npm install hexo-deployer-rsync --save |
- 修改配置。
1 | deploy: |
参数 | 描述 | 默认值 |
---|---|---|
host | 远程主机的地址 | |
user | 使用者名称 | |
root | 远程主机的根目录 | |
port | 端口 | 22 |
delete | 删除远程主机上的旧文件 | true |
verbose | 显示调试信息 | true |
ignore_errors | 忽略错误 | false |
七牛云部署方案
1 | 在下载的qshell压缩包里选择和自己的系统选择相应的程序,不用安装,直接加到系统环境变量中即可. |
七牛是采用CDN缓存加速的,这里有个问题就是我们更新了文件但是七牛缓存使得我们看到的文件并不是最新的,所以我们得主动刷新七牛的缓存.
- cdnrefresh
- API cache-refresh
参考资料:
- hexo 官方文档