在上一篇文章中,记录了我通过hexo+github来搭建博客的过程,本文提供导航功能,介绍一些hexo的进阶用法,让博客显得更有范儿!不过我还是建议大家多关注博客内容,而不是沉迷于折腾中无法自拔 : )
如何应对错误?
在使用命令行搭建博客的过程中,不可避免的会出现错误,如果你是新手,不要慌,这种情况对于有经验的程序员来说,已经是家常便饭了: ) ,不过我可以教大家两个常用的应对错误的方法,错误代码同常在一大堆不知所云的英文字母开头几行,如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认可我们的域名
购买独立域名
域名提供商有很多,有DNSPod , Gandi,阿里云等,都支持支付宝付款。我推荐DNSPod,因为他提供免费的DNS解析服务。
设置DNS解析
无论在哪里购买,都要设置DNS服务器,如果你使用DNSPod的域名解析服务,在控制台里把DNS服务器地址改为:f1g1ns1.dnspod.net
和 f1g1ns2.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.xml
和baidusitemap.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