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 | hexo init <floder> #<floder>代表你要创建的博客文件夹 |
安装成功后,可以看到自动生成的文件目录为:
1 | node_modules |
接着,在终端中运行博客程序:
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 | sudo add-apt-repository ppa:chris-lea/node.js |
然后再安装
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 | ssh-keygen -t rsa -C "邮件地址@youremail.com" #注意大小写 按回车可见下面内容 |
成功生成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 | he authenticity of host 'github.com (207.97.227.239)' can't be established. |
输入yes,最后继续配置git的用户信息,输入:
1 | git config --global user.name "your_name" |
博客上传等文章编写操作
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 | tags: "" #标签 |
这里值得一说的是,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数比较多的几个主题链接: