Mac下使用Hexo和GitHub搭建静态博客

前言:

最近看网上有用Hexo和GitHub的搭建博客的教程,自己也学着搭建了一个,过程分享一下

注册GitHub账号

因为博客是托管于GitHub上,所以一个GitHub账户是必须的,注册的步骤就不介绍了,注册完以后选择免费服务即可。拥有一个GitHub账号以后,我们要新建一个仓库,点击首页右下角的 + New repository,就会出现如下界面:
QQ20160713-0@2x.png

安装Git

创建完仓库后,我们在电脑上安装Git,这样可以在本地建立项目并push到远程仓库上。

推荐使用Homebrew来安装Git。打开终端(Windows用户可以使用Git Bash等),输入以下指令安装Homebrew(Mac需要安装Xcode):

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

这样我们就安装好了Git。如果出现问题,尝试在指令前加入sudo,sudo可以获得root权限,执行带有sudo的指令电脑会要求你输入密码。

安装Node.js

接下来就是安装Node.js了,我对Node.js了解不多,Hexo是基于Node.js的,所以Node.js的环境是不可或缺的。
直接去Node.js官网下载安装就可以了。
有了Git和Node.js,Hexo就可以安装了,但是先别急,我们还有一些事情要干。

配置SSH keys

打开GitHub,在头像旁边有个向下的箭头,点击选择选中setting,点击左边的SSH and GPG keys,添加一个SSH keys。SSH keys的好处是让我们以后在本地进行操作并同步到GitHub上时不用输密码,那么如何配置SSH keys
打开终端,输入

1
$ cd \~/. ssh

这行代码能够帮助你检查电脑上现有的SSH key。
如果提示:No such file or directory说明没有key文件,输入以下代码生成新的key文件:

1
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"

这里的邮件地址填自己注册时的邮件地址,注意大小写,双引号不能省略,终端会返回代码让你确定文件名,回车就好。

1
2
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/DoubleD/.ssh/id\_rsa): //回车就行

接着会让你输入加密串,可以空着:

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

看到如下所示的输出,就代表你已经成功的创建了一个SSH key。
输出图
找到本机上的id_rsa.pub文件,在终端输入:

1
2
$ cd .ssh
$ .ssh open

打开它(建议使用Sublime Text)复制里面的代码,记得不要多复制空格或换行,添加到下图位置:
QQ20160713-1@2x.png
然后点击Add key就配置好了SSH key。输入下面的指令测试是否配置成功:

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 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

输入yes,就能看到

1
Hi YourID! You've successfully authenticated, but GitHub does not provide shell access.

这样你的SSH key就配置完成了。完成之后,我们设置好个人信息,用于提交代码说明是谁提交的,怎么联系。可以用以下指令完成:

1
2
$ git config --global user.name "你的名字"
$ git config --global user.email "你的邮箱"

安装Hexo

打开终端,输入以下指令:

1
$ npm install -g hexo

在电脑上你愿意的一个位置建立一个文件夹,名字任意,然后在该目录下执行以下指令(在终端中输入cd+空格+文件路径就可在该目录下执行指令):

1
2
$ hexo init
$ npm install

Hexo就会在该文件夹建立博客所需要的所有文件。本地的Hexo博客已经初步搭建起来,输入以下指令:

1
2
$ hexo generate//可以简写为 hexo g
$ hexo server//可以简写为 hexo s

就可以在浏览器中输入localhost:4000查看本地博客了。要注意的是,所有的hexo指令都必须在你所建立的目录下执行。

部署Hexo到GitHub上

本地的博客已经搭建好了,如何能让别人从网上访问到你的博客?只要将你的本地博客deploy到GitHub上就好。输入以下指令:

1
$ npm install hexo-deployer-git --save

然后打开博客目录的_config.yml文件,设置deploy的type为git,repository(repo)
https://github.com/你的id/你的id.github.io.git需要在type和repo后面加上一个空格再填写,一定要注意加空格,我就是在这里没加空格导致后面命令一直失败)。最后在你的Hexo目录中找到source文件夹,在其中新建一个文件CNAME,没有后缀名(建议使用Sublime Text新建),内容为你的域名(即XXXXXX.XXXXXX,不要加WWW之类的前缀),保存。输入以下指令:

1
2
$ hexo g
$ hexo deploy//可简写为 hexo d

在浏览器中输入你自己的域名就可以访问你自己的博客啦!

更改主题

这里是我使用的一个主题,包括使用方法上面已经介绍的很详细了 NexT

最后

建好的博客是可以绑定其他域名的,我这里并没有的做,有兴趣的朋友可以看我下面的参考文章上面有如何申请域名以及绑定域名。

最后附上我刚刚才搭好的博客,很简陋上面都没有,让大家见笑了 Lee2Go

参考文章

【1】hexo文档

【2】github+hexo写文章上传图片等常用操作记录

【3】hexo主题

【4】史上最详细的Hexo博客搭建图文教程

【5】使用Hexo搭建自己的博客

【6】Hexo搭建Github静态博客

【7】Mac下搭建Hexo博客教程