我们为什么要使用hexo搭建个人博客?

在使用hexo搭建个人博客,我们首先应该知道,为什么我们要用hexo搭建个人博客? Hexo出自台湾大学生 tommy351 之手,是一个基于 Node.js 的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。正是因为这样,全静态的博客不存在后台,静态网页放到GitHub Pages等平台上,简单粗暴… 在写博客之前,推荐一篇别人的博文,也是一篇很好的文章如何搭建一个独立博客——简明Github Pages与Hexo教程 下面我要详细讲一下用hexo搭建博客的整个过程…

Hexo的安装

安装git

选择适合自己系统的git下载安装,我选择的windows。

安装node.js

node.js 同样选择适合自己系统的下载

安装编辑器(可选)

在后面配置文件的时候,系统自带的记事本支持很差,为了能够更方便的编辑,可以选择下载Sublime Text3或者Notepad++,方便编辑…

安装Hexo

打开刚才安装的git bash,输入下面的指令。

npm install -g hexo

更新Hexo

更新Hexo到最新版

npm update hexo -g

部署Hexo

在你想要放置hexo博客文件的位置建立一个名为hexo的文件夹,然后在这个文件夹中右键打开Git Bash。

$ hexo init

然后,hexo会自动在这个文件夹里生成你建立网站的所有文件。 到这里我们已经搭建起本地的博客了,执行以下命令,同样在hexo文件夹下右键Git Bash输入以下命令:

$ hexo g
$ hexo s

上面的hexo g就是hexo generate,hexo d就是hexo deploy,到这里本地的博客已经搭起来了,你可以执行以下命令开启本地服务:

$hexo server

打开浏览器输入 http://localhost:4000可以看到效果,如果没记错,初始的模板是挺丑的,所以不要急,下面我们还要优化,下面我们要把hexo博客部署到网络上面,这样就可以让别人浏览到…

hexo博客只支持ie8以上的浏览器,否则,后果你懂的。

配置coding

由于在国内,github并不是很好,于是我选用coding(学长用的gitcafe疑似被转移了)[这里是coding官网] 首先,注册coding账号

添加项目(在个人主页里可以新建一个新项目,名字自拟)

配置ssh密钥 coding官方文档 1.打开桌面git bash ,检查本机密钥。

$cd ~/.ssh

如果提示:No such file or directory 说明你是第一次使用git

2.如果不是第一次使用,执行下面的操作:

$ mkdir key_backup
$ cp id_rsa* key_backup    
$ rm id_rsa*

3.生成自己的密钥,记得把“”中间的邮箱改成自己的。

ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM"

生成过程中会出现以下信息,按屏幕提示操作,并记得输入 passphrase 口令(这里直接回车过去既可,以后出现这个都是空密码,直接回车即可)

$ ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM"
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/USERNAME/.ssh/id_rsa.
Your public key has been saved in /c/Users/USERNAME/.ssh/id_rsa.pub.
The key fingerprint is:
15:81:d2:7a:c6:6c:0f:ec:b0:b6:d4:18:b8:d1:41:48 YOUR_EMAIL@YOUREMAIL.COM

4.SSH 秘钥生成结束后,你可以在用户目录 (~/.ssh/) 下看到私钥 id_rsa 和公钥 id_rsa.pub 这两个文件,记住千万不要把私钥文件 id_rsa 透露给任何人。不然别人就可以以管理员的身份登陆,修改你项目中的文件(也就是你的博客)。 5.添加ssh到coding 使用任意文本工具打开公钥文件 ~/.ssh/id_rsa.pub,复制里面的所有内容。

进入 coding->账户->新增公钥,在 Title 文本框中输入你的id,在 Key 文本框粘贴刚才复制的公钥字符串,按添加按钮完成操作。

6.测试是否可以链接服务器,同样打开Git Bash输入:

ssh -T git@gitcafe.com

如果是第一次连接,会出现以下警告:

The authenticity of host 'gitcafe.com (50.116.2.223)' can't be established.
#RSA key fingerprint is 84:9e:c9:8e:7f:36:28:08:7e:13:bf:43:12:74:11:4e.
#Are you sure you want to continue connecting (yes/no)?

上面出现的其实是所谓的指纹,用来识别你接受到的是否和服务器发送的一致,来识别是否收到中间人攻击,这里直接yes既可。之后会提示出入passphrase口令,如果上面设置没问题,直接回车即可。

最后出现下面的字符,就说明成功了。

Hi USERNAME! You've successfully authenticated, but GitCafe does not provide shell access.

完成配置

到这里,基本的配置已经完成,在hexo的目录中打开git bash,输入:

$hexo g
$hexo d

ps:每次修改自己的任何配置文件,或者新建了博文,都必须输入这两个指令上传!

如果没有爆出错误,说明配置成功,可以打开xxx.gitcafe.io(xxx为自己的id)查看自己的博客主页。如果报错,请检查前面的配置有没有错误,如果找不到错误,请参见后面的hexo常见报错。 Hexo的优化

完成安装后,我们就能看到自己的博客页面,但是很明显页面中还是很简陋,那么我们怎么把页面改成自己想要的样子呢?

Hexo中的主题

Hexo的默认安装中提供了一个主题,如果不喜欢的话,我们可以下载自己喜欢的主题进行定制。由于更新了hexo3.0,所以很多主题可能都处于不支持阶段,识别的方式非常简单,如果在正常的环境下hexo g&d能够成功,但更换主题会爆出未知错误的话,这里就有很大的可能是因为主题不支持。 官网主题可以找到很多的主题,这里也贴出来我使用的主题地址 挑选好主题后,在hexo目录下打开git bash,输入:

git clone https://github.com/iissnan/hexo-theme-next themes/next
#在./_config.yml,修改主题为writing
theme: next
hexo g       #hexo generate简写
hexo s       #hexo server简写

这里每一个主题和主题的名字都有不同,但大部分主题,都会提供详细的书写方式,仔细查看既可。 hexo站点_config.yml的详细配置

这里比较复杂,甚至因不同的主题也会有不同,这里贴上我的全部配置信息作详解:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: ngc7293'blog
subtitle: 菜鸡的自救之路
description:
author: ngc7293
email: feizhaoye@163.com  
language: zh-Hans
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Flat
baidu_analytics: ngc7293
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@git.coding.net:ngc7293/ngc7293.git
  branch: coding-pages

主题的优化

这部分由于不同的主题配置可能完全不一样,我只能以我是用的next主题作为例子,next的官方文档地址 加入多说/disqus评论系统

1.首先我们注册多说,并登录账号,获取通用代码。 2.这里就会有一些不同,默认的多说插件代码在themes\landscape\layout_partial\article.ejs文件中, 这里是官方文档地址,只要照着文档做,大部分都会搞定。 3.但是有一部分主题并不存在article文件,就比如博主使用的主题,在\themes\next\layout_scripts\comments下能发现一个明显的duoshuo.swig,打开覆盖刚才复制的代码,然后保存并部署hexo,我们会发现多说插件已经出现,但是多说插件出现在页面的外面,并且长度颜色都不符合我们的要求,所以我们还要修改。 4.修改多说评论框的css文件,这里是官方文档,登录自己的多说,点开设置,设置中的基本设置,向下滑找到自定义css,修改添加参数,既可修改成想要的样子。下面是博主的css:

#ds-thread {width: 800px; text-align:center; margin-left:auto; margin-right:auto}

5.光是这样我们发现远远不够,首先就是评论框不会随着文章而单独,甚至会爆出data-thread-key错误,我们打开刚才的duoshuo.swig,把其中的前两行代码改为(不包括start和end那两行)

<div class="ds-thread" data-thread-key="{{page.path}}"  data-title="{{page.title}}" data-url="{{page.permalink}}"></div>

关于评论框调用参数,官方文档的地址 6.最后一步,这时候我们发现大部分地方的评论框已经正常了,但是位置仍然不符合我的要求,于是打开/themes/next/layout下的各个文件,寻找这样一条代码:

{% include '_scripts/comments/duoshuo.swig' %}

这条语句就是多说评论框的引用,博主的选择是加在post.swig文件中的这个位置:

7.这下发现大部分问题都解决了,如果你自认为nodo.js水平高,就可以自己寻找代码的位置,然后加到想要的地方 增加百度统计/google

1.首先同样是注册,注册百度统计站长版并登录,获得代码。 2.这里又一次遇到一样的问题,就是不同主题这里的设置会不一样,原版是在hexo\themes\light\layout_partial\after_footer.ejs里增加如下代码(这里是我的代码,注意修改):

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fcfedc723a9dc30bd7db67ad8e53a97fa' type='text/javascript'%3E%3C/script%3E"));
</script>

百度统计异步代码是以异步加载形式加载了网站分析代码,使用该代码能够大幅提升您网站的打开速度(目前使用百度统计异步代码会导致百度统计图标和代码检查功能的失效).使用这种方式需要将代码添加至网站全部页面的标签前, 因此只需要在 hexo\themes\light\layout_partial\head.ejs 里添加如下代码[这里添加的是我的代码, 请适当修改 cfedc723a9dc30bd7db67ad8e53a97fa 这部分成你的ID]

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?cfedc723a9dc30bd7db67ad8e53a97fa";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

如果记得没错,这里就是刚才复制的代码。

3.如果是博主所使用的next主题,百度分析的添加方式便是不同的,在\themes\next\layout_scripts\analytics中可以找到百度分析的文件,打开并对应覆盖复制的代码,保存打开站点的 _config.yml ,新增字段 google_analytics 或者 baidu_analytics(取决于使用的统计系统)

google_analytics: your-analytics-id
baidu_analytics: your-analytics-id

4.这里配置便完成了,然后在百度统计的地方,可以输入域名检查是否安装成功。 其他

1.如果想要修改边框,头像,边栏超链接地址,这个一般因不同的主题而异,所以不好详述,详细要参阅对应的官方文档。

2.其实hexo还能添加很多不同的插件,博主修为尚浅,所以就不写出不清楚的插件用法,这里贴上一些别人的博客。 Hexo 优化与定制 hexo Hexo的使用

上面密密麻麻的写了一大堆,我们终于建好了自己的博客,可是我们发现我们能看到博客,能浏览博文,却没有发写博客,这里介绍怎么使用

常用命令

hexo new "postName"                     #新建文章
hexo new page "pageName"                #新建页面
hexo generate                           #生成静态页面至public目录
hexo server                             #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy                             #将.deploy目录部署到GitHub

1.首先是第一个命令,也就是最常用的命令,postname可以替换为我们想要的文章名,文章名方便记忆就好,只是在书写的时候我们能够区分就可以了,别人是看不到的。

2.第二个命令比较复杂,但是如果仅仅是写博文的话,第二个是用不到的。

3.35命令就不用多解释了,每次写完博文,都需要这两个命令上传。

Markdown语法

1.当我们输入命令,新建了一个文章,我们发现在hexo文件夹下source/_posts下生成了一个md文件,md文件是什么呢?我们首先得了解Markdown语法。

2.这里有一篇文章简书,足够你得到你想要的左右信息。

3.下面我们需要下载一个编辑器,方便我们写博客,这里推荐的是Markdowmpad 2,左右分栏,你可以实时看到页面编辑出来的样子(有时候会有bug,不要在意)

4.文章的头:

title: postName               #文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2013-12-02 15:30:16     #文章生成时间,一般不改,当然也可以任意修改
categories: 
- example                     #分类,多个分类依次
tags:    
- tag1                        #文章标签,可空,多标签请用格式,注意:后面有个空格
description:                  #附加一段文章摘要,字数最好在140字以内。
---

要注意这里格式如果错误,上传时候会报错! 5.Markdown语法备忘 由于页面会编译,所以还是贴上链接 6.语法的神奇和强大远远超过你的想象,慢慢感受! 关于本地图片和所属路径的问题

当我们想使用我们自己的本地图片的时候,我们会纠结一件事,就是我们该把文件放在哪?路径又该怎么引用,我来解释下这个问题: 1.当我们编辑好我们的博文的时候,我们输入指令hexo g ,会自动生成所对应的html页面添加到hexo文件夹下的public,然后上传public,所以public便是我们的主目录。 2.但是我们发现public内的东西是修改不了的,所以本地图片不能存放在public中,所以我们要把图片放在source中,在source中新建img文件夹,然后建对应博文的文件夹,放置所属的图片,这样当我们需要引用本地图片的时候,则输入这样的路径(/img/Hexo_Blogs/1.png),然后我们就发现,图片没有问题了。 Hexo 常见问题以及解决方案

在搭配hexo的时候我们总会遇到各种各样的问题,下面汇总了所有的解决方案,在查阅之前,先检查是不是因为nodo.js的语法问题报错,这个错误占80%的错误!!

1.找不到git部署

ERROR Deployer not found: git 解决方法:

npm install hexo-deployer-git --save

2.由于引用不便,这里把解决方案的链接放上来,以供参阅

Hexo常见问题解决方案

根据土土学长的blog复现了一遍,期间多有波折,总的来说希望大家不要再踩到我掉进的坑