如何在一天之内搭建以你自己名字为域名且具备cool属性的个人博客

对程序员而言,最好的简历就是个人博客和GitHub

零、个人博客

每个优秀的程序员都会有个人独占的一方网络空间,那里是他个人的舞台,听说过他的人会逐渐汇聚进来,认识他,熟悉他,鼓励他,赞扬他。而对他个人而言,他有了一个可以畅所欲言的小房间,他可以专研学术,聊聊情怀。同时和喜爱他的读者成为好友,共同成长。

这难道不是一件很cool的事情吗?

一、先看成果

教方法前先来看看最终的效果吧。http://wingjay.com是本人搭建的个人博客,可作为模版参照,主要特性有以下几点:

1.个人域名: wingjay.com2.无需购置服务器,本站同时挂载在Github Pages 和 GitCafe Pages上,免服务器费的同时还能做负载均衡,想想还有点小激动3.在GitHub上同时管理你的博客和相应代码,再也不用担心博客遗失4.SSL支持,即"http://" -> "https://",更安全也更高大上

二、再看兵器

博客框架:Hexo 3,这是一款能快速、简洁且高效的博客框架,支持Markdown编辑,自动渲染出漂亮的静态页面。

前端主题:Next,效果参考http://wingjay.com

域名购买:类似万网的平台都可以,你可以选购自己名字的域名,一年几十元左右,两杯咖啡的钱。

SSL:CloudFlare

三、抄起家伙

本文写作方式是安装流程主线+优质参考文章。由于网络上关于Hexo搭建博客的教程玲琅满目,若读者完全自己动手则要一篇篇找,浪费时间走弯路;相反,若作者悉数摘抄进来,反倒未必符合各人情况,且不利阅读。

所以,主线讲解思路,参考深入阅读。

下文以搭建http://wingjay.com个人博客为例。

1. GitHub Pages

在不购买服务器的前提下,我们的网站需要挂在GitHub Pages上。

你需要拥有一个GitHub账号,去完成新手任务吧。

进入GitHub Pages,一步步做,完成后就能在浏览器打开http://wingjay.github.io了。

至此,我们已经利用GitHub Pages搭建好了个人博客雏形了。下面要做的,就是个性化了。

2. 安装Hexo博客框架

经过上面步骤,我们已经拥有了一个初步域名:http://username.github.io加一个免费网络空间了。好比房间有了,但还没有任何家具。所以下面我们需要把空白的博客丰富起来。

放心,不需要你手写一大堆html、css文件,也不用找jQuery来实现酷炫的页面效果。Hexo是一款博客框架,它会帮我们搭建。

i. 安装Hexo

参考中文文档英文文档。完成该步后,你的电脑便拥有了Git、Node.js和Hexo。

ii. GitHub管理

为了让自己未来的博客和代码处在git管理之下,我们要把刚刚在Github上博客项目拉到本地。如本人创建的https://github.com/wingjay/wingjay.github.io,在本地创建文件夹,名字任意,此处设为myblog,进入该文件夹,把项目代码clone下来。

gitclonehttps://github.com/wingjay/wingjay.github.io

好了,此时会自动在myblog目录下创建子文件夹wingjay.github.io,那里就是我们博客的代码,以后的操作都在git的管理之下了,此时默认的branch为master。

iii. 初始化Hexo

请参考文档。init命令中的就是文件夹wingjay.github.io。初始化后,wingjay.github.io里面就已经有完整的Hexo框架了。

iv. 熟悉Hexo

为了让读者快速了解Hexo,我作几个简单介绍吧。当然,更多的还是需要仔细阅读文档才能了解更详细。

Hexo目录结构

_config.yml是整体的配置文件,很多基础配置、插件配置等都需要在里面进行。要注意的是,该文件格式要求极为严格,缺少一个空格都会导致运行错误。小提示:不要用Tab缩进,用两个空格符。

layout,包括draft(草稿)、page(页面)、post(文章)。这个就是三种文件的基本格式,其中post是你发表的文章,会显示在你的网站里,一篇post会包括title标题、date日期、tags标签等信息;draft是草稿,只有你在本地能看到,必须要publish后才能成为post,draft和post差别是date,因为draft没有发表,所以不需要指定日期。page是一个页面,对应一个新的html页面,比如博客内容展示页是一个页面,留言本也是一个页面。

public文件夹,这个文件夹是最终会发布到网站上的真实内容。怎么理解呢?我们可以把public文件夹当作是真正的被用户看到的,而其他的source、themes等都是为public服务的。Hexo里有一个很重要的指令hexo generate,这个指令就是利用所有代码里的配置信息、source里写的文章、themes里的样式,共同生成最终的静态html文件,存入public文件夹内。在我们执行了发布指令hexo deploy后,就会把public的内容部署到GitHub Pages上。当用户在访问我们的博客时,他们会看到public里生成的html文件。这个概念非常重要,即代码和真实静态页面是独立的。

generate和deploy,generate会把我们的配置、文章和主题结合起来生成一堆酷炫的html静态文件放在public里面。但此时用户还看不到本地public文件里的页面,我们必须用后一个指令deploy才能把静态文件部署到GitHub Pages上。不过,在部署前,需要配置让它自动部署到我们前面创建的Github项目中。

deploy相关配置。为了能够让项目自动把public文件夹的内容部署到GitHub项目中,我们可以按部署文档进行配置,其中选择的branch为master。此后,每次运行deploy后,项目就会自动把public文件夹内容全部覆盖到当前的GitHub项目master分支上

代码和静态文件分开管理。根据上面知道,每次部署后,public文件内容会覆盖掉项目整个master分支。这样可以实现网站静态文件的版本控制,但是,仔细对比这个master分支,我们会发现里面只剩下静态文件了,我们的代码比如source、themes统统没有了,这就导致无法对代码进行版本管理了。这意味着我换一台电脑,我就再也找不到代码了,只剩下一堆之前编译出来的静态文件。所以,为了对代码也进行版本控制,我们创建一个新的分支:code,然后在这个分支里进行代码控制,master里则保存部署的新的静态文件。大家可以自行比对这两个branch的内容差异。

v. 配置Hexo

做一些基础配置即可,请参考配置文档

vi. 小结

到这里,我们已经完成了hexo的配置,我们可以分别管理代码和静态文件。执行deploy操作后,刷新你的网页http://username.github.io你就能看到默认的内容了。

但此时还是默认主题,不够美观,所以下一步要配置Next主题。

3. 配置主题Next

Hexo主题非常多,可以参考丰富多彩的Hexo主题,本文选Next为主题,样式参考我的博客

进入配置阶段,最好的文档还是官方文档,简单得不能再细致了。下面只提几点注意:

第三方评论系统。评论系统很重要,你可以与读者进行更多交流,配置也简单,建议采用DISQUS,更国际化一点,配置见此。另外,前期建议开启不登陆评论,即在Disqus的Comment Rule里允许Guest comment。

创建留言板。熟悉page的创建与使用,参考这里

给自己博客做SEO。有好的SEO便于搜索引擎索引你的网站,随着以后读者增多,他们可以更好搜索到你的网站。具体方法见此

4. 替换自己的域名

好了,经过上面的步骤,博客已经拥有了一个全新的主题啦。

下面,我们要对域名http://wingjay.github.io下手啦。

i. 购买域名

速速前往万网或相关域名购买网站,按自己名字挑选一个闪闪发光的个人域名吧!

ii. 域名解析_1

以购买的域名wingjay.com为例,我们希望在访问这个域名时能自动进入Github Pages,所以我们要在万网建立一个CNAME纪录来帮我们做一个域名跳转:wingjay.com->wingjay.github.io,www.wingjay.com->wingjay.github.io。添加方法参考这里,添加后可以看到两条记录:

域名解析

然后万网会在世界各地的DNS服务器上添加这两条记录,当用户访问wingjay.com时会自动去访问wingjay.github.io。

iii. 域名解析_2

但是,此时并不能成功访问,因为Github Pages是有限制的,它不允许任意域名都跳转过来,而是只限制一个域名,而且这个域名必须声明在CNAME文件中。

所以,我们需要添加一个CNAME文件到项目的master中才行,参考这里。读者可以参考本人的CNAME文件内容

不过,对于Hexo 3,这里有一个坑要注意:大家应该还记得上文说的,master分支里的内容都是自动生成的,而且会完全覆盖之前的内容。如果我们直接创建一个新文件CNAME,填好域名。但会发现在下一次部署后这个文件就消失了。不用惊讶,因为hexo并不会自动生成CNAME文件,所以在部署时被覆盖删除了。

所以,我们就需要这个CNAME工具hexo-generator-cname,这时会自动在public里生成一个CNAME文件,把你的域名加进去再部署一下吧!

5. HTTP -> HTTPS

HTTPS是安全版的HTTP协议,它在http协议与TCP之间加入SSL层,采用端口443,不仅会对传输数据加密,还会进行身份验证。当然个人博客并没有强制性要求采用该协议,这也只是本人的好奇而为。

目前Github Pages已经支持https了,但是不支持自定义证书。不过我们可以利用CloudFlare来实现。具体实现可以参考这里

说明:po主网站的https正处在申请中

四、总结

经过上面的步骤,我们已经能够通过访问自己的域名进入自己酷炫的博客了。本文的任务也就告一段落。

除了上面的功能,本人还完成了支持双域名同时登陆,其中,支持双域名的解决思路是考虑到Github Pages的CNAME纪录只允许添加一个域名,所以本人又在Gitcafe上部署了一套。不过考虑到这点大家不一定能用的上,就没有做介绍,有需要的话可以看下文的联系方式联系我。

            本文由“18369905255账号”发布,2017年4月15日

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容