不想成为CEO的程序员,不是好菜鸟!
一、瞧瞧兵器
前端主题:Next,效果参考http://zanelove.github.io
域名购买:类似万网的平台都可以,你可以选购自己名字的域名,一年几十元左右,两杯咖啡的钱。
SSL:CloudFlare
二、抄起家伙
1、GitHub Pages
在不购买服务器的前提下,我们的网站需要挂在GitHub Pages上!
需要拥有一个GitHub账号
进入GitHub Pages,按照上面所说的步骤一步一步做,完成后就能在浏览器上打开像http://zanelove.github.io了。
- 注意:
第二步Git命令需做修改:
命令修改前:
命令修改后:
$ git clone git@github.com:username/username.github.io.git
至此,我们已经利用GitHub Pages搭建好了个人博客雏形了。下面要做的,就是个性化了。
2、安装Hexo博客框架
经过上面步骤,我们已经拥有了一个初步域名:http://username.github.io 和 一个免费网络空间了,下面我们需要把空白的博客丰富起来。
放心,不需要你手写一大堆html、css文件,也不用找jQuery来实现酷炫的页面效果。Hexo是一款博客框架,它会帮我们搭建。
安装Hexo
1.1 前提:
安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。
$ npm install -g hexo-cli
1.2 注意:
如何使用npm命令,你只需要在任意位置点击鼠标右键,选择Git bash即可!
如果,你出现了一下的问题:如图
请您放心,这不是问题,这是正常的现象!到此为止,Git、Node.js和Hexo就都安装成功了!
GitHub管理
为了让自己未来的博客和代码处在git管理之下,我们要把刚刚在Github上博客项目拉到本地。首先,在本地创建文件夹,名字任意,此处设为zaneblog,进入该文件夹,把项目代码clone下来。
$ git@github.com:ZaneLove/zanelove.github.io.git
好了,此时会自动在zaneblog目录下创建子文件夹zanelove.github.io,那里就是我们博客的代码,以后的操作都在git的管理之下了,此时默认的branch为master。
初始化Hexo
在目录下(我这是zaneblog/zanelove.github.io目录)执行以下指令(在该目录内点击鼠标右键,选择Git bash),Hexo 将会自动在目标文件夹建立网站所需要的所有文件。
$ hexo init
或者不在该目录下执行,而是任意地方执行该命令,但必须指定目录。
$ hexo init
3、配置NexT主题
Hexo主题非常多,可以参考丰富多彩的Hexo主题,本文选Next为主题,样式参考我的博客。
进入配置阶段,最好的文档还是NexT主题的官方文档,简单得不能再细致了。
下面我还是提几点注意:
第三方评论系统。评论系统很重要,你可以与读者进行更多交流,配置也简单,建议采用DISQUS,更国际化一点,配置见此。另外,前期建议开启不登陆评论,即在Disqus的Comment Rule里允许Guest comment。
创建留言板。熟悉page的创建与使用,参考这里。
给自己博客做SEO。有好的SEO便于搜索引擎索引你的网站,随着以后读者增多,他们可以更好搜索到你的网站。具体方法见此。
4、专属域名
购买域名
速速前往万网或相关域名购买网站,按自己名字挑选一个闪闪发光的个人域名吧!
域名解析_1
以购买的域名wingjay.com为例,我们希望在访问这个域名时能自动进入Github Pages,所以我们要在万网建立一个CNAME纪录来帮我们做一个域名跳转:wingjay.com -> wingjay.github.io,www.wingjay.com -> wingjay.github.io。添加方法参考这里,添加后可以看到两条记录:
然后万网会在世界各地的DNS服务器上添加这两条记录,当用户访问wingjay.com时会自动去访问wingjay.github.io。
域名解析_2
但是,此时并不能成功访问,因为Github Pages是有限制的,它不允许任意域名都跳转过来,而是只限制一个域名,而且这个域名必须声明在CNAME文件中。
所以,我们需要添加一个CNAME文件到项目的master中才行,参考这里。读者可以参考本人的CNAME文件内容。
不过,对于Hexo 3,这里有一个坑要注意:大家应该还记得上文说的,master分支里的内容都是自动生成的,而且会完全覆盖之前的内容。如果我们直接创建一个新文件CNAME,填好域名。但会发现在下一次部署后这个文件就消失了。不用惊讶,因为hexo并不会自动生成CNAME文件,所以在部署时被覆盖删除了。
所以,我们就需要这个CNAME工具hexo-generator-cname,这时会自动在public里生成一个CNAME文件,把你的域名加进去再部署一下吧!
HTTP -> HTTPS
HTTPS是安全版的HTTP协议,它在http协议与TCP之间加入SSL层,采用端口443,不仅会对传输数据加密,还会进行身份验证。当然个人博客并没有强制性要求采用该协议,这也只是本人的好奇而为。
目前Github Pages已经支持https了,但是不支持自定义证书。不过我们可以利用CloudFlare来实现。具体实现可以参考这里。
说明:po主网站的https正处在申请中
5、总结一些Bug
有童鞋反应右键菜单中没有git bash选项,可以进入开始菜单找到git bash,然后通过cd进入相应目录执行命令。
在github部署完成之后,马上访问可能出现404错误,这是正常的,(最多)等待十分钟左右就可以访问了。如果还不行,那很可能是 github 发送给你的验证邮件你没有打开看,据多方反映,验证后就没问题了。
如果在hexo d之后出现fatal: ‘username.github.io’ does not appear to be a git repository,一是检查 repo 的名字是否合乎规范、是否含有大写字母、config.yml 中的 deploy 配置是否正确,二是把 git bash 关掉,重新打开再执行命令。
有的童鞋可能不是 IT 界的,或者对shell 命令不太了解。在要求输入密码时,你输入之后密码是不显示的,这是为了安全,并非是你没输上。
出现乱码的,不要使用 windows 中的「记事本」打开并编辑文件,推荐使用 sublime text,很简单。如果已经在「记事本」中编辑过,需要使用 sublime text 转码为「utf8」。
安装 hexo 时卡在那儿不动,很可能是网络不给力,能全局 break wall 就好了。
遇到什么其他的问题,不妨删除.deploy 和db.json 再重新生成试一试。
执行命令:npm install -g hexo,报错如下:
莫非是因为被墙了?换国内镜像源试试。
$ npm config set registry=”http://registry.cnpmjs.org”
然后再次执行npm install -g hexo,成功!
- 执行命令:hexo d,报错如下:
执行命令:npm install hexo-deployer-git –save,再次执行hexo d,如果再次报错:
估计必须要在GitHub上配置SSH,然后才可以上传文件。
配置SSH:
1、设置Git的user.name和user.email
在第一次使用Git时,你需要告诉你的协同开发者,你是谁以及你的邮箱,在你提交的时候,Git需要这两个信息。具体通过以下命令设置:
$ git config –global user.name “voidking”
$ git config –global user.email “voidking@qq.com”
需要注意的是,这里的name随意,邮箱是你的联系邮箱,与github完全无关。
查看配置命令:
$ git config –list
2、生成SSH密钥
$ ssh-keygen -t rsa -C “voidking@qq.com”,按3个回车,密码为空。
在C:\Users\Administrator.ssh下,得到两个文件id_rsa和id_rsa.pub。需要注意的是,命令中的-C参数,后面跟的内容是注释。也就是说,内容随意,与github完全无关。
3、在GitHub上添加SSH密钥
打开id_rsa.pub,复制全文。https://github.com/settings/ssh ,Add SSH key,粘贴进去。
4、测试
$ ssh git@github.com,提示:
5、再次部署
hexo d,根据提示输入用户名和密码,等待一会儿便成功了!