盒子
盒子
文章目录
  1. 简介
  2. 准备
  3. 安装
  4. 启动
  5. 配置Git仓库
  6. 文件
  7. 常用命令
  8. 模板
  9. 报错
  10. Next主题

回顾Hexo


简介

Hexo 是一款基于Node.js、快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

准备

自定义安装git、自定义安装Node.js并根据此路径配置环境变量,以便cmd调用nodejs命令。

安装

cmd进入自定义目录,执行

1
npm install hexo -g

安装成功后,执行

1
hexo init

1
npm install

安装依赖完成

启动

1
hexo g
1
hexo s

执行完以上,进 http://localhost:4000 可本地预览

1
hexo d

执行以上,可发布博客(前提是配置好git仓库)

配置Git仓库

文件

scaffolds : 脚手架,用于存放我们创建文章时的模版
source : 用于存放我们用markdown编写的博文原文件、其他静态资源文件
themes : 用于存放主题,里面有我们博客的默认主题landscape
_config.yml : Hexo和站点的配置文件,里面可以设置博客的名字、标题、作者、链接格式等相关项

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
npm install hexo -g #安装
npm update hexo -g #升级
hexo init #初始化
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署
hexo server #Hexo 会监视文件变动并自动更新,您无须重启服务器。
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
hexo generate #使用 Hexo 生成静态文件快速而且简单
hexo generate --watch #监视文件变动
hexo generate --deploy #连用
hexo publish [layout] <title> #草稿,layout是布局的意思
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo new photo "My Gallery"
hexo new "Hello World" --lang tw

模板

title: 使用Hexo搭建个人博客
layout: post
date: 2014-03-03 19:07:43
comments: true
categories: Blog
tags: [Hexo]
keywords: Hexo, Blog
description: 生命在于折腾,又把博客折腾到Hexo了。给Hexo点赞。

报错

找不到git部署

1
ERROR Deployer not found: git

解决方法

1
npm install hexo-deployer-git --save

部署类型设置git(hexo 3.0 部署类型不再是github),_config.yml 中修改

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@***.github.com:***/***.github.io.git
branch: master

RSS不显示,安装RSS插件

1
npm install hexo-generator-feed --save

开启RSS功能,编辑hexo/_config.yml,添加如下代码

1
rss: /atom.xml #rss地址默认即可

开启评论,使用多说代替自带的评论,在多说 网站注册 > 后台管理 > 添加新站点 > 工具 === 复制通用代码 里面有 short_name,在根目录 _config.yml 添加一行 disqus_shortname: jslite 是在多说注册时产生的,复制到 themes\landscape\layout_partial\article.ejs,把

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.disqus_shortname %>'};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>

改为畅言评论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments){ %>
<section id="comments">
<!--高速版,加载速度快,使用前需测试页面的兼容性-->
<div id="SOHUCS" sid="<%= page.title %>"></div>
<script>
(function(){
var appid = '你的APP ID',
conf = '你的APP KEY';
var doc = document,
s = doc.createElement('script'),
h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement;
s.type = 'text/javascript';
s.charset = 'utf-8';
s.src = 'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid;
h.insertBefore(s,h.firstChild);
window.SCS_NO_IFRAME = true;
})()
</script>
</section>
<% } %>

上面的APP ID和APP KEY是在畅言设置中得到的,在每篇文章开头的front-matter中添加一句comments: true,然后刷新就可以看到畅言评论框了

disqus NB 之处在于:

评论集中保存(在 disqus 上),方便回顾
Comment feed 和 Subscribe via email 方便评论跟踪
有点论坛的意思,这篇文章就象楼主的1楼
webmaster 管理评论更方便
对垃圾留言的斗争让 disqus 去做吧(整合了 Akismet)
支持一切 openid 的帐号,留言者不用到处登陆了,直接开说即可
支持 黑白名单和关键字过滤
和 twitter facebook 等社会应用整合

类似网站还有 IntenseDebate Livefyre

Next主题

首先,那个主题太多人用了,所以我不想用吧啦吧啦

1
2
3
4
5
6
7
8
9
10
# Sidebar Position, available value: left | right
#position: left //控制sideba的位置 position: right
# Sidebar Display, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggler.
display: post //控制sidebar的显示时机 #display: always - 在所有页面中都显示
#display: hide - 在所有页面中都隐藏(可以手动展开)
#display: remove - 完全移除

修改主题配置文件

1
2
3
4
5
6
7
menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html

设置菜单图标

1
2
3
4
5
6
7
8
9
menu_icons:
enable: true // 是否显示图标
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat

next从哪来,gitbash到指定路径

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

支持一下
扫一扫,支持 填坑哥