转眼三个多月没更博文了,并没有荒废只是有点忙。攒了很多想写的东西,先填个拖了很久的坑:我这个博客是怎么搭起来的。
总的来说,我的博客是由Github Pages维护,本地用Hexo管理的一个静态博客。这篇文里我将介绍搭建Github Pages+Hexo博客的过程。
在讲搭建流程之前需要铺垫一下,介绍几个基本概念,Github Pages、Hexo、域名和DNS服务。
Github Pages
如果想搭建一个自己的博客,首先你需要一个7×24不间断服务的稳定服务器。一般来说,geek们不会自己买一个,我们可以租一个云服务器。有更好的选择吗?有。我们也可以找到一些免费的云空间,比如新浪的SAE(以后没准就不免费了),还有我要讲的Github Pages。Github Pages是Github(如果你不知道Github是什么可以自己百度,这里我不太想解释)提供的一项福利,帮助广大geek们维护一个静态网站空间。静态网站就是页面内容不会随着数据库中数据的变化而动态的发生变化的网站,各大购物网站都是典型的动态网站。通常个人博客主要包含静态内容,就算需要修改更新,手动处理也完全足够,评论系统除外,但评论系统可以用第三方插件。于是这里有了分歧,一部分人选择了自己管理评论系统的数据库,还想偶尔在网站上玩点酷炫的动态网站花活,比如挂个网页游戏或者弹幕播放器,他们需要一个完全控制的云服务器,如SAE、百度云、腾讯云、Linode、Conoha等等;另一部分人希望让博客单纯一点,静态网站是更好的选择,Github向每一个用户帐号免费提供一个静态网站空间。
Github Page使用起来很简单,它的网站首页上有讲解,其实就是在Github新建一个repository,命名为username.github.io,其中username为你的Github用户名。这个repository就是你的静态网站空间了,访问它可以使用刚才的username.github.io,也就是Github Pages的二级域名。如果你是Github的用户,接下来你一定知道怎么更新网站内容了。
Hexo
Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351。这里我要提一句,node.js不是js,是基于谷歌v8引擎(js解析引擎)开发的一种服务端语言,语法与js没有什么两样,可以在http协议外(使用socket.io包)实现区别于AJAX的服务器主动推,鼓吹面向过程、基于消息机制的函数异步处理特性。Hexo封装了不止一种对免费服务器空间的接口,其中也包括Github的。这篇文里我准备介绍的是Github Pages搭配Hexo的搭建方式。
域名与DNS
要怎么访问一个网站?你当然可以直接访问网站的IP地址,但是这不方便,大家一般都使用域名(Domain)。域名最右边的一节是域名后缀,通常用于标识域名类型,域名最右边的两节xxx.xxx作为一个整体通常表示一个顶级域名。它的左边可以再加若干节,如果加了,那些就都是顶级域名下的子域名了。为了完成特定域名(包括子域名)到特定IP的映射,需要一个DNS(Domain Name System)服务器,它将对特定域名的请求转发到特定的IP地址。
Github Pages+Hexo环境搭建
Hexo有一些依赖环境,但是它没有现成的安装包,开源项目嘛,无可厚非。首先你需要安装node.js环境,大家系统平台多种多样,怎么装就自己去node官网上看吧;git客户端也是要装的,同理也自己去官网看。此外我们还需要分发个SSH证书,就是把你计算机的公钥在Github帐号里复制一份,这样通过SSH方式连接Github时就可以验证你的身份,就不用输用户名密码了。而Hexo连接Github的方式就是走的SSH方式,所以这个步骤是必要的。win平台通常用SSH Client管理SSH连接,或者也可以用终端形式的putty或者SSH Secure Shell;Ubuntu下是sudo apt-get install openssh-server
;CentOS下是sudo yum install openssh-server
;Mac OS自带SSH客户端。私钥公钥生成和端口配置什么的我不是很想全都介绍,说个Ubuntu的吧,比较简单。
没配git帐号的先配一下:
git config --global user.email "你的邮箱"
git config --global user.name "你的Github用户名"
生成SSH密钥对:
ssh -keygen -t rsa -C"前面配git时填过的邮箱"
然后一路回车,然后你在~/.ssh
目录下就有了id_rsa和id_rsa.pub两个文件,它们分别是你的私钥和公钥,你需要把私钥登记一下:
ssh-add id_rsa
接下来就是分发公钥了,你可以手动进id_rsa.pub复制公钥内容,也可以用系统工具复制:
xclip -selection c ~/.ssh/id_rsa.pub
然后登录Github并Add SSH Key,给新公钥起个名粘贴进去就好。然后测试一下:
ssh -T git@github.com
提示信息包含“successfully authenticated”就算成功了。如果有问题,可以重新设置,常见问题请参考:
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)
接下来是为node安装Hexo包:
npm install -g hexo
Hexo封装了一些博客管理接口:
hexo init <folder> # 初始化目录,可以指定目录地址,我更喜欢进入目录后hexo init一下
hexo n "title" # 创建新文章,你会在/source/_post目录下找到包含title的新md文档,你可以编辑它
hexo s # 在本地查起服务查看效果,默认是访问0.0.0.0:4000
hexo g # 为博客重新生成静态页面
hexo d # 同步到Github Pages空间
写博文
前面提到过,hexo n
之后我们就获得了一个新md文档,接下来你需要按照Markdown语法编辑这个文档。但Hexo的博文还需要包含一些必要内容以辅助页面关联及效果:
title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2016-4-25 11:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: #文章分类目录,可以为空,注意:后面有个空格
tags: #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意:后面有个空格
photos: #fancybox功能将要显示是图片集合
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
---
摘要
<!--more-->
这里开始使用markdown格式输入你的正文。
至于Markdown语法,读者可以自行百度,网上很多。写完保存之后可以先hexo s
一下,去0.0.0.0:4000看效果,如果觉得满意,再hexo g
生成静态页面并hexo d
同步到Github Pages。注意这里生成的整个静态网站页面都在/public子目录下,你完全可以起一个服务器把本地80口映射到这里。
主题安装
Hexo迄今为止已经衍生出了很多主题,主题列表Hexo Themes,我的博客使用的是Landscape plus,一个专为中国大陆用户做过调整的Hexo主题,别的Hexo主题读者可以自己百度一下。hexo init
一个目录之后,把选定的主题git clone
到Hexo目录的themes子目录下,然后编辑/_config.yml:
theme: themename
然后配置一下主题下的_config.yml:
menu: #配置页头显示哪些菜单
# Home: /
Archives: /archives
Reading: /reading
About: /about
# Guestbook: /about
excerpt_link: Read More #摘要链接文字
archive_yearly: false #按年存档
widgets: #配置页脚显示哪些小挂件
- category
# - tag
- tagcloud
- recent_posts
# - blogroll
blogrolls: #友情链接
- sitename: http://site.address
- sitename: http://site.address
- sitename: http://site.address
fancybox: true #是否开启fancybox效果,就是文章开头加一个电子相册的感觉
duoshuo_shortname: username #多说账号
google_analytics:
rss:
要更新主题只需要从Github拉取主题内容即可cd themes/modernist
然后git pull
。
评论插件
有很多免费的第三方评论插件提供商,你可以通过简单的配置使用他们的数据库管理你网站的评论数据,hexo默认集成的是Disqus,但是有GFW存在,所以我选择了国内的多说。直接用你的微博/豆瓣/人人/百度/开心网帐号登录多说,做一下基本设置。你也可以在多说后台自定义一下多说评论框的格式,比如评论框的位置,对于css设置,可以参考这里。如果你是有的其他第三方评论系统,将通用代码粘贴到/themes/themename/layout/_partial/comment.ejs里面:
<% if (config.disqus_shortname && page.comments){ %>
<section id="comment">
#你的通用代码
<% } %>
域名配置
国内域名服务商有万网、腾讯、阿里、美橙等等,国外推荐狗爹(godaddy)。
买完域名你需要给域名指定DNS服务器。DNS服务商非常多,一般域名服务商和云主机服务商都提供DNS服务,我选择的是国内的DNSPod,免费的,提供监测网站状态功能,还挺好用。
域名服务商和DNS服务商那边的配置它们各自网站都会提供教程,自己网站空间中给静态网站绑定域名很简单,在网站根目录放一个叫CNAME的文档,里面填上你的域名就行了。
参考文章
http://ibruce.info/2013/11/22/hexo-your-blog/(大大的教程写的真心详细,基本就是这篇领我进门)