使用hexo在GitHub搭建个人博客

hexo是一款快速、简洁、高效的博客框架,底层基于node.js,博客编写文章采用markdown语法,网上也有很多针对hexo开发的开源博客主题,直接使用,就可以让博客变得美观。GitHub Pages免费提供静态页面托管的服务,容量为300M,对于一个博客来说,容量已经足够了,但其中也存在一个问题,github毕竟是一个国外的网站,国内访问速度有限,而且万一github被墙,我们也可以用国内的gitcafe来托管博客。
hexo在升级中很多地方发生了变动,很多Google的教程都是针对老版本的,自己的安装部署的时候参照老教程踩了一些坑,因此将新版本的安装具体的步骤记录下来,以飨读者:

环境

  • Ubuntu 14.04 LTS
  • OS X EI Capitan

OS X EI Capitan安装hexo方法

在mac下,可以使用包管理器brew来安装一些软件,方便快捷,brew管理器安装方法链接,Mac安装软件过程中,如果失败,可尝试在命令前加sudo

在终端中粘帖下面代码,然后回车:

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1、安装node.js

终端中输入:

1
brew install node

node.js也可以自己去官网下载,自行安装

2、安装git

安装git的目的是方便自己将博客同步到github、终端中输入:

1
brew install git

git也可以自己去官网下载,自行安装

3、安装hexo

node.js安装成功后自带了npm,因此我们用npm来安装hexo,终端中输入

1
npm install -g hexo    #-g为全局参数

在终端中依次输入,如果正确显示版本号,则安装成功

  • node -v
  • git varsion
  • hexo version

4、本地测试博客

在基本的环境搭建好以后,打开终端,cd到自己测试的文件夹中,依次输入如下命令:

1
2
hexo init <floder>   #<floder>代表你要创建的博客文件夹
npm install #安装必要的依赖库

安装成功后,可以看到自动生成的文件目录为:

1
2
3
4
5
6
7
8
node_modules
scaffolds
source
-posts
themes
-landscape #默认博客主题
_config.yml
package.json

接着,在终端中运行博客程序:

1
hexo server   #或者输入 hexo s

在终端中会显示:

如果以上没有发生错误,在浏览器中打开localhost:4000可以看到生成的博客。
此处有一个大坑需要注意(特别对于不细心的同学)

终端显示程序运行在0.0.0.0:4000,如果自己不小心就会用鼠标复制粘帖打开,或者右键直接打开url,但是此时在
浏览器却发现网页无显示!!!一开始我以为是环境没有配置好,少了一些依赖库,一这折腾环境,后来发现是localhost的原因,你本机上的localhost不一定是0.0.0.0,特别是你翻墙用了一些代理工具时。
同时,我还遇到过在safari上能正确显示网页,chrome上却无显示的问题,这都是因为localhost。

如果网页能正确的显示,就可以来设置博客的主题了,主题可以自己写(愿意折腾的话),也可以直接用一些开源的主题
github上有很多,比如这个博客,就是用的开源hexo主题nexT构建的。

关于主题,因为每个人用的都不尽相同,这里就不做过多介绍,每个热门的主题都有相应的document,可以直接用,也可以自己diy

Ubuntu 14.04LTS 安装hexo方法

ubuntu中可以在终端直接用apt-get来安装,安装各个软件也需要注意是否需要 sudo 的问题

1、安装git

1
sudo apt-get install git

2、安装node.js

1
sudo apt-get install nodejs

此种方法安装的nodejs可能版本会较低,具体看自己系统配置的软件源
如果担心过低,可在安装之前输入:

1
2
sudo add-apt-repository ppa:chris-lea/node.js 
sudo apt-get update

然后再安装

3、安装hexo

在终端中输入

1
sudo npm install -g hexo

4、本地测试博客

如果上述都安装好,就可以在本地测试建立博客了,方法和在OS X EI Capitan中一样,唯一需要注意的是是否需要sudo权限的问题,方法见上文

配置git

1、设置ssh key,

ssh key是git提交代码到github的通行证,我们在终端中设置ssh key步骤如下(以在mac上为列):

打开终端,输入命令:

1
cd \~/. ssh   #这条代码可以检查电脑上是否已安装ssh key 如没有,执行下面的步骤

生成ssh key,然后输入:

1
2
3
4
5
6
ssh-keygen -t rsa -C "邮件地址@youremail.com"  #注意大小写 按回车可见下面内容
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/DoubleD/.ssh/id\_rsa): #继续按回车可见

Enter passphrase (empty for no passphrase):\<输入加密串\>
Enter same passphrase again:\<再次输入加密串\>

成功生成ssh key

然后在本机上cd找到id_rsa.pub ,然后输入

1
cat id_rsa.pub

就可以看见ssh key了,将其复制备用。

2、github建立博客仓库

打开自己的github,新建一个仓库,仓库命名如下:

1
your_github_name.github.io  #一定要严格命名

然后在此github主页的 settings->ssh key 中可以添加生成的ssh key 将刚才复制的粘帖到输入框,保存。

3、git连接github

上述设置好了之后,可以继续测试连接,在mac终端下输入下面内容

1
ssh -T git@github.com

如果返回结果如下:

1
2
3
he authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is ×××××××××××××××××××××××××××××××××××××××.
Are you sure you want to continue connecting (yes/no)?

输入yes,最后继续配置git的用户信息,输入:

1
2
git config --global user.name "your_name"
git config --global user.email "your_email_address"

博客上传等文章编写操作

1、博客部署到github

在本地测试发现博客没有问题后,就可以部署到github。
注意:

博客上至少要有一篇文章,否则访问页面会出错。

部署时,在终端博客目录执行下面目录:

1
hexo clean   #清除数据以及public文件
1
hexo g     #生成网页的静态页面,部署到github的也就是这些静态页面
1
hexo d     #部署到github,这一步如果报错,则缺少依赖库,则首先执行下面操作
1
npm install hexo-deployer-git --save

最后,按照提示操作,就可以完成了,然后访问your_github_name.github.io就可以访问博客页面了。

2、博客文章编写等操作

在终端中输入

1
hexo new title   #title代表文章标题

就可以看到在博客source/_posts生成了一个title标题的md文件,这就是我们写文章的地方,可以用markdown语法对其进行编辑

里面可以编辑文章的相关信息如:

1
2
3
tags: ""  #标签
categories: ""分类

这里值得一说的是,hexo 3版本插入图像等文件已经不能用原来的markdown语法

1
![](/test.png)   #这样写是错误的

正确的写法是,在md文件里,插入这样的语法标签:

1
{% asset_img test.jpg %}

这样才能正确的显示图片。这里也算一个坑吧。

当你编辑博客文章的时候,你一定还会想,我的图像文件该放在哪里?这里作者提供了一个解决方法,
先找到博客站点的配置文件_config.yml,然后将post_asset_folder修改为true:

1
post_asset_folder: true

修改成功后,当你再运行hexo g生成博客文章的时候,就会发现在_posts文件夹下多生成了一个以你文章title命名的文件夹,这个文件夹就是用来存放图像等附加资源的。

购买域名和dns设置

1、购买域名

域名购买我选择了Go Daddy,它是全球最大的域名注册商,而且十分良心支持支付宝付款。虽然go daddy页面是英语的,但是注册,购买都很简单,这里就不多介绍购买了,主要介绍dns的配置

2、dns

域名解析可以使用DNSPod,可以用qq直接登录。登录后选择 域名解析->添加域名 。然后设置成如下

备注:手动添加的两个A记录都是github服务器的ip,然后添加一个CNAME记录。

登录go daddy 选择功能my products->点击已经购买的域名

然后手动设置dns server为DNSSPod提供的server,最后配置如下:

最后,在github博客仓库上增加一个CNAME文件,里面添加内容:

1
your_domia.com  #例如:ddragonever.com

附:博客主题

在本文中,没有介绍博客主题的具体配置,主要考虑到主题太多,而且每个主题都要相应的document,文档里面有很详细的介绍。这里附上github上star数比较多的几个主题链接:

热评文章