基于Hexo框架+GitHub Pages搭建个人博客


这篇文章最初发表在我的个人博客上:dukecui技术博客,欢迎大家访问!

作为一个程序猿,或者立志希望在程序猿的道路上有所发展的骚年们,相信都应该有一个属于自己的技术博客。至于为什么需要有自己的技术博客,Android大神stormzhang的这篇文章,已经讲的很清楚了,大家可以去学习下,相信你读完肯定会有感悟,而我自己也深受其影响和鼓舞。于是花了两三天的时间,折腾了一个自己的博客出来,同时写下这篇文章记录和总结自己搭建博客的过程,并希望能为后来者提供一个较为完善可用的参考。

说起博客的搭建,从萌生这个想法开始到现在基本的搭建完成也有将近快一个月的时间。这期间,不得不再次感叹下自己的执行力。首先从3月份自己做的两个小的demo说起,这个过程学习到了很多Android开发APP的知识,自己在开发的过程中遇到不少的问题,也花了很多时间去解决。期间曾想记录下学到的一些关键知识点和收获,并希望通过晚上的时间搭建好自己的博客,但在项目做到关键的时候,总是会晚上加班到比较晚,还有一种今天不解决这个问题就不结束的纠结。这就导致搭建博客的事情一拖再拖,直到两个demo做到自己基本满意之后,开始休假,终于到清明假期回来才算真正开始完成这件事情。

搭建博客,我首先想到的是Strikingly,一个自动建站的工具,虽说该公司原来的主要业务和服务器均在国外,但他们团队目前在发展国内的业务,在国内的产品“上线啦”仍在测试阶段。有兴趣可以了解下这个公司,履历还是非常牛逼的,第一个获得YC孵化的中国团队。但是在使用的过程中我发现,博客编辑系统似乎有些薄弱,无法插入代码文本,也不支持MarkDown编辑,这使得我最终放弃了这个方案。于是开始尝试在简书上撰写自己的第一篇博文,不得不说简书满足了我的对博客的大部分需求,MarkDown编辑,简单易用,干净清爽,还有丰富的社交系统等等,因此也为很多技术达人所喜爱。但建成之后总感觉缺了点什么,怪怪的,对,我怎么向别人推荐我的主页呢?域名的参数居然是一个字符串,连我的id都没有啊,这也太low了吧,万一我以后出名了可怎么办?梦想还是要有的对吧。。。于是索性下决心搭一个自己的博客,也算是一个尝试的过程,而且还能接触到前端的一些知识,做互联网做技术的就是要多尝试多接触多折腾,多学习最前沿的知识。。。

好吧,废话终于说完了,下面是正题,如何通过Hexo+GitHub搭建个人博客。

首先,这里有Hexo的官方网站,上面有非常详细的内容,大家可以直接参考:Hexo

一、环境的配置

  1. Node.js
    因为Hexo是一个基于Node.js的静态博客框架,因此需要先安装Node.js环境,下载地址:Node.js
  2. Git
    此处为Windows平台下的下载地址:Git
    或者可以选择直接下载:GitHub Desktop。 (冒着有可能会被嘲笑的风险。。。)
    Mac及其他操作系统请参考Hexo官方提供的下载链接。

二、安装Hexo

完成以上环境配置之后,通过下面的命令安装Hexo

npm install -g hexo-cli

出现下图所示信息表示Hexo安装成功。


三、建站

安装完成之后,选择一个目录作为建站所需文件的存放路径,如我选择d:\work\blog,执行以下命令完成hexo的初始化:

hexo init d:\work\blog

然后命令行进入该目录下

cd d:\work\blog

执行下面的命令,系统会可以根据package.json文件中dependencies的配置安装所有依赖包

npm install

新建完成之后,根目录文件夹下各个目录的含义,可以参考Hexo官网的解释:目录信息

四、启动

在建站工具的根目录(如上d:\work\blog)下通过以下命令启动服务器,之后访问网址 http://localhost:4000/ 即可看到我们刚刚建立的博客,Hexo会默认生成一个Hello World的博文。

hexo server

这样我们就已经可以在本地浏览我们自己的博客了。以后每次对博客进行修改,都可以先通过这种方式进行本地的预览,满意之后再部署到GitHub Pages上。

五、部署到GitHub

  1. 首先在你的GitHub上新建一个Repository,仓库名的固定写法为 your_user_name.github.io
  2. 配置SSH-Key,网上有很多方法可供大家参考
  3. 修改根目录的网站配置文件_config.yml,搜索deploy字段,修改成如下所示的格式。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@github.com:DukeCuiChen/DukeCuiChen.github.io.git 
    branch: master
其中,repo是我们刚刚建立的远程仓库,换成你自己的id,同时因为刚才配置了SSH-Key,所以必须是SSH形式的URL。值得注意的是,每一个: 后面都必须有一个空格,否则会引起错误。
  1. 安装Git包,执行以下命令
npm install hexo-deployer-git --save
  1. 部署到GitHub上,执行以下的命令
hexo deploy

现在我们可以通过访问 http://dukecuichen.github.io/ 来访问我们自己的博客啦!到此,我们的博客已经基本建立完成,当然,下面要讲怎么使用喽~

六、使用

  1. 新建一篇博文可通过以下的命令
hexo new "name"

其中name为博文的名字,建立完成之后,可以在./source/_posts文件夹下发现我们刚刚建立的 name.md文件。使用你熟悉的编辑器打开,便可以进行博文的撰写。博文支持MarkDown语法的编写,下面是一个示例文件的内容

---
title: name
date: 2016-04-06 10:34:21
tags: 
- 开始
- 日志
categories: 
- 日志
---
我的第一篇博文。。。。。。
  1. 博文写好之后,在每次发布之前,我们要先将写好的博客生成静态文件,执行以下命令
hexo generate
之后生成的文件会放在./public目录下,这便是我们将要部署到GitHub上的全部内容。
  1. 静态文件生成之后,便可以部署到GitHub上
hexo deploy

再重新打开我们的博客 http://dukecuichen.github.io/ 已经可以看到刚刚新加入的博文

七、主题

Hexo提供了丰富的主题可供我们选择和使用,在./themes目录下存放主题。刚才默认生成的博客用的就是默认的主题landscape。这里有在GitHub上Hexo所有的主题,可以访问https://github.com/hexojs/hexo/wiki/Themes 另外我们总是站在巨人的肩膀之上,感谢前人的归纳总结,推荐两篇Hexo主题推荐的文章:

  1. 一篇是知乎上的:有哪些好看的 Hexo 主题?
  2. 一篇是简书上的:Hexo博客主题推荐

我自己的博客采用了知名度最高的Next主题,其他主题没有过多的尝试,也不敢评论。Next主题集成了非常多的第三方服务可供选择,例如评论系统,统计系统,分享服务,搜索服务等。这些第三方的服务可以极大的提高博客的体验。

八、设置域名

博客搭建好之后,我们可以通过http://dukecuichen.github.io/ 类似的域名进行访问,而且GitHub提供这样的服务是完全免费的。当然我们也可以通过我们自己的域名来进行访问,这就需要首先购买我们想要的域名。我是在DNSPod上购买的域名并进行管理操作的,具体的购买方式可以去DNSPod的主页查看。购买成功后,下面来看如何绑定我们的域名。在DNSPod的控制台,我们点击添加记录,设置主机记录为@,类型为A,到IP 192.30.252.153(固定值)。

设置完成保存后,可能等几分钟生效。可以通过ping我们的域名来检验设置是否生效。而后,在./source目录下新建文件CNAME(无后缀名),文件中写上我们要绑定的域名,例如dukecuichen.com,再hexo generate生成静态文件,并hexo deploy部署到GitHub上。这时就可以通过http://dukecuichen.com/ 访问我们的博客啦

九、一些建议

Hexo同样具有良好的扩展性,你可以安装很多第三方的插件,例如sitemap,安装sitemap插件之后,你可以生成自己的站点地图,然后将你的sitemap提交给谷歌或者百度,让这些搜索引擎可以抓取到你的博客的内容,提高访问量。

  1. 安装sitemap插件
npm install hexo-generator-sitemap --save
  1. 设置启用sitemap插件,在根目录打开配置文件_config.yml,增加以下内容
#sitemap
sitemap:
  path: sitemap.xml

之后再执行hexo server,访问 http://localhost:4000/sitemap.xml ,即可看到站点地图,说明我们的设置生效。

总结

以上就是通过Hexo搭建个人博客的全部流程,但是对一些具体的细节文章可能并没有阐述,同时在实际的操作中可能会遇到各种各样的问题,大家可以自行参考网上大量的解决方案。因为我自己并不是做前端,对前端的知识也知之甚少,通过搭建博客的过程也多少了解了一些,因此可能存在理解或操作上的错误,欢迎大家批评指正。最后,在搭建整个博客的过程中,大量参考了以下三篇文章,在此对原文的作者表达感谢!
HEXO+Github,搭建属于自己的博客:
http://www.jianshu.com/p/465830080ea9
Hexo搭建Github静态博客:http://www.cnblogs.com/zhcncn/p/4097881.html
Hexo在github上构建免费的Web应用:http://blog.fens.me/hexo-blog-github/

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

推荐阅读更多精彩内容