<article>


上一篇文章中,记录了我通过hexo+github来搭建博客的过程,本文提供导航功能,介绍一些hexo的进阶用法,让博客显得更有范儿!不过我还是建议大家多关注博客内容,而不是沉迷于折腾中无法自拔 : )

</article>

如何应对错误?

在使用命令行搭建博客的过程中,不可避免的会出现错误,如果你是新手,不要慌,这种情况对于有经验的程序员来说,已经是家常便饭了: ) ,不过我可以教大家两个常用的应对错误的方法,错误代码同常在一大堆不知所云的英文字母开头几行,如ERROR balabala,can`t find/load balabala,在其后会跟着出错的文件位置,可以做以下两点:
- 去出错的文件,具体到行,列,如果你看得懂代码,你大概会知道错在哪
- 复制错误信息至搜索引擎寻求网友帮助

另外,在站点配置文件_config.yml中,如果你启用了插件plugins:,hexo server(简写为hexo s)命令会无法识别,我也不知道为什么,这是个bug,把相关代码用#注释掉就行了,不会影响到插件的使用。

配置你喜欢的hexo主题

hexo官网已经提供了一部分的主题,从中选择你喜欢的一个,为你的博客换件新衣服,不过还有许多主题并没有收录到官网里,这要靠你自己去发现了。每个主题都会有安装使用的介绍,有些是官方文档,有些在相应的github主页上,他们的使用大多是一样的:
- clone到本地hexo-site/theme
- 修改站点配置文件_config.yml里的theme字段为刚下载的主题文件夹名
- 修改一系列个人信息、集成插件、主题布局字段

具体以NexT主题官方说明文档为例,不懂的地方可以问我meetdevin.zh@outlook.com.

绑定独立域名

首先,我要给大家简单介绍下,这里面的思路。域名与IP有什么区别?

IP是每台主机的唯一标识,是一串数字,就相当于身份证,当我们的浏览器访问一个网站的时候,首先要找到IP,而域名是为了方便人们记忆而产生的符合人们语言习惯的标识DNS,而DNS就是他们两者的映射表,你可以理解为翻译官。现在你的域名是your_site.github.io,当你在浏览器键入这个地址,你想要浏览器显示github上你的网站资源, 你的电脑会先检查本地的DNS缓存,是否有这个地址的对应IP,如果没有,则会请求当前子网的DNS服务器,DNS服务器返回相应的IP地址,而如果这个DNS服务器也没有,它会把请求发给上一级子网的DNS服务器,层层递进,这就叫域名解析。现在我们的目的就明确了:把你的独立域名解析到github。具体来说:
- 购买独立域名
- 设置DNS解析
- 让github认可我们的域名

购买独立域名

域名提供商有很多,有DNSPodGandi阿里云等,都支持支付宝付款。我推荐DNSPod,因为他提供免费的DNS解析服务。

设置DNS解析

无论在哪里购买,都要设置DNS服务器,如果你使用DNSPod的域名解析服务,在控制台里把DNS服务器地址改为:f1g1ns1.dnspod.netf1g1ns2.dnspod.net,参考DNSPod 各个套餐的 DNS 地址

让github认可我们独立域名

在hexo-site/sourse下新建文本文档,重命名为CNAME,注意没有后缀,在里面写上你的域名,如:your_site.com,保存,然后编译上传:

hexo g -d
 
  • 1

优化你的博客加载速度

如果你使用了一个比较牛掰的主题,图片资源较多,或者大量使用了HTML5,这就比较吃性能了,你会发现在浏览器进你的博客比进小伙伴们的都要慢,那怎么办呢?不怕,我给大家挑出了几个靠谱的方案:
- 性能优化篇-joway
- Hexo博客优化-Jory He

这两篇博文都放了一些干货,如果你喜欢折腾,就去试试他们的方法,但你如果是像我这样比较懒的,那我也给你推荐一个立竿见影的方法:

站点配置文件hexo-site/_config.yml主题配置文件hexo-site/theme/theme_name/_config.yml中,需要用到的图片,还有你在博文里插入的图片,都放到七牛云-对象存储里。

其实,这个七牛云-对象存储,大家可以理解为:网盘(但其实不是的,七牛云是CDN,是一种缓存机制,CDN=多台服务器+智能DNS),因为github服务器在国外(之前还被墙过),而七牛云本身就是做云服务的,你从七牛云里拿图片,肯定是比从github拿图片要快的,还能为你节省github page存储,一举两得!

推广

既然搭了博客,那肯定要很多人看才有意思,第一步当然是要让搜索引擎发现我们,至于google在大陆的…科学上网跨过去就好了,让google收录是很简单的,百度反而有点矫情。

收录

百度-站长工具google提交入口先手动提交我们的网站,在提交之后,会验证网站所有权,这样才能收录我们的网站,他们都有这么几种验证方式:
- 文件验证
- HTML标签验证
- CNAME验证

我个人觉得HTML标签验证最简单,点击HTML标签验证,然后点击显示完整代码,将代码复制到你的最新一篇博文的开头,然后

$ hexo g -d 
 
  • 1

直接发布博文就好了。但是对于google,我试了好几次都没成功,最后用的文件验证:

下载该HTML文件,放到你的hexo-site/public目录,然后:

hexo g -d
 
  • 1

这时,可以在浏览器通过http://your_site.com/name.html访问该文件,这时再在google上点击验证。

提交sitemap

sitemap是你的站点地图,它列出你网站上的网页,将网站内容的组织架构告知搜索引擎。

安装插件:

npm install hexo-generator-sitemap --save 
npm install hexo-generator-baidu-sitemap --save 
 
  • 1
  • 2

站点配置文件hexo-site/_config.yml中添加以下代码:

# 自动生成sitemap
sitemap:
 path: sitemap.xml #注意前面有空格
baidusitemap:
 path: baidusitemap.xml #注意前面有空格
 
  • 1
  • 2
  • 3
  • 4
  • 5

编译上传

hexo g -d
 
  • 1

hexo/public目录下可找到sitemap.xmlbaidusitemap.xml文件,我们先验证下:

浏览器访问http://your_site.com/sitemap.xml
http://your_site.com/baidusitemap.xml

如果出现一堆代码,说明生成成功,然后进入百度站长工具
- 点击左侧链接提交
- 下拉,自动提交,选择sitemap
- 填写http://your_site/baidusitemap.xml,提交

同样进入Google站长工具提交sitemap.xml,吐槽一句,google比百度方便多了。

以后每次我们执行hexo g -d命令的时候,这两个站点地图文件就会更新,搜索引擎便能通过上面两个网址抓取我们的内容。

自动推送

这个功能只有百度有,上面步骤完成之后,再点击自动提交->自动推送,复制百度给出的代码,留着,以后每次写博文,就粘贴到博文结尾位置,对博文内容没有任何影响,这段JS代码的作用是:页面被访问时,页面URL将立即被推送给百度。

方便写作

hexo/sourse/scaffolds目录下,放的是我们的文章模板,有三个,默认是post,这个可以在站点配置文件hexo-site/_config.yml中更改,我们可以自定义post的内容以便符合我们的使用习惯。

你可以执行下列命令来创建一篇新文章。

$ hexo new layout title
 
  • 1

在命令中指定文章的模板,不写就默认为post,title指文章标题。

基本属性

Front-matter 是文章最上方以 — 分隔的区域,用于指定文章的变量,常用的有:

title: Hello World
date: 2013/7/13 20:46:25
tags:
 - 标签1
 - 标签2
categories:  
 - 分类1
 - 分类2  #hexo不支持多个同级分类,这样分类,会把分类2变成分类1的子类
comments: true #开启文章评论
---
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

我们可以把这些都写到模板中,不用每次都写,另外,我们之前复制的百度自动提交JS也可以放的文章模板里,是不是很方便?

标签

「标签」(Tag Plugin) 是 Hexo 提供的一种快速生成特定内容的方式。完整的标签列表可以参考内置标签。 另外,Hexo 也开放来接口给主题,使主题有可能提供给写作者更简便的写作方法。这里介绍一个常用的,插入图片,同时指定图片大小:

<!--指定大小图片-->
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
 
  • 1
  • 2

文章摘录

在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。某些主题有这样的功能集成,但还是推荐hexo官方的方法,这样除了可以精确控制需要显示的摘录内容以外,这种方式也可以让 Hexo 中的插件更好的识别:

在文章中使用 <!-- more -->手动进行截断

ba la ba la 
 <!-- more -->
ji xu ba la ba la 
 
  • 1
  • 2
  • 3

使用位置在一行的顶左空一行,不然无效,这是博主试了很多遍试出来的。

更多语法规则:

附录

折腾的过程中,会对站点配置文件hexo-site\ _config.yml改来改去,这有一份备份,配置参考配置-hexo官网

# Hexo Configuration

Docs: http://zespia.tw/hexo/docs/configure.html

Source: https://github.com/tommy351/hexo/

Site

title: my blog #站点名,站点左上角
subtitle: Walk steps step by step #副标题,站点左上角
description: Walk steps step by step #给搜索引擎看的,对站点的描述,可以自定义
author: zippera #博主
email: #你的联系邮箱
language: zh-CN #中文

URL #这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项

If your site is put in a subdirectory, set url as http://yoursite.com/child and root as ‘/child/’

url: http://zipperary.com
root: /
permalink: :year/
:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories

Writing 文章布局、写作格式的定义,不修改

new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
highlight:
enable: true
backtick_code_block: true
line_number: true
tab_replace:

Category & Tag

default_category: uncategorized
category_map:
tag_map:

Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文

2: Enable pagination

1: Disable pagination

0: Fully Disable

archive: 1
category: 1
tag: 1

Server 不修改

Hexo uses Connect as a server

You can customize the logger format as defined in

http://www.senchalabs.org/connect/logger.html

port: 4000
logger: false
logger_format:

Date / Time format 日期格式,不修改

Hexo uses Moment.js to parse and display date

You can customize the date format as defined in

http://momentjs.com/docs/#/displaying/format/

date_format: MMM D YYYY
time_format: H:mm:ss

Pagination 每页显示文章数,可以自定义,我将10改成了5

Set per_page to 0 to disable pagination

per_page: 5
pagination_dir: page

Extensions 这里配置站点所用主题和插件,暂默认,后面会介绍怎么修改

Plugins: https://github.com/tommy351/hexo/wiki/Plugins

Themes: https://github.com/tommy351/hexo/wiki/Themes

theme: light
exclude_generator:
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

Deployment 站点部署到github要配置,上一节中已经讲过

Docs: http://zespia.tw/hexo/docs/deploy.html

deploy:
type: github
repository: https://github.com/zippera/zippera.github.io.git
branch: master

  • 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
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84