使用Hexo+Github Pages 来搭建免费的专属博客

一、简介

Hexo

Hexo是一个开源的静态博客框架,基于node.js开发,作者是台湾大学生tommy351。

Github

如果是程序员肯定知道,Github是开源代码库以及版本控制系统。在GitHub,用户可以十分轻易地找到海量的开源代码。

Github Pages

Github Pages可以理解为用户编写的、托管在github上的静态网页,你只需将你的改动提交到Github,就可以实现更改你的网页。

二、基础环境配置

安装Node

Node.js官网下载对应的版本安装即可。

安装Git

Git官网下载对应版本安装即可。

安装Hexo

Node和Git都安装完毕后,在任意路径下新建一个文件夹(随意命名),如Hexo,作为你的博客专属路径,用于存放Hexo相关配置信息,之后终端进入到此路径并分别执行如下命令来安装和初始化Hexo

sudo npm install-g hexo
hexo init

至此,可以使用Hexo了,我们来实验一下。

分别执行如下命令来生成一个静态网页并启动本地服务来预览你的初始博客,

hexo generate
hexo server

或者简写

hexo g
hexo s

初始化后文件结构如图:


如图,启动本地服务后,即可在浏览器输入http://localhost:4000 来预览博客啦!

三、配置GitHub

首先你得有个Github帐号,到https://github.com 上注册个帐号,至于如何注册,相信你会的。

绑定Git & Github

//Github用户名
git config --global user.name "ConnorLin"
//注册Github的邮箱
git config --global user.email  "your_email@example.com"

创建博客仓库

注册帐号后,点➕来创建一个repository,该仓库必须以 "your_user_name.github.io" 的格式命名

配置SSH Key

首先查看本地是否已经有SSH Key, 终端输入如下命令:

cd ~/.ssh;ls

如果存在id_ras.pub,说明已经有SSH Key,否则需要重新创建。
使用如下命令生成密钥

ssh-keygen -t rsa -C "your_email@example.com"

按提示分别输入Key文件保存路径和密码(可以为空),完成会有如下提示即表示创建成功

The key fingerprint is:
01:0a:f6:3c:ca:95:d6:17:a1:7d:f0:65:9d:f0:a2:db your_email@example.com

将SSH Key添加到ssh-agent:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa

添加SSH Key到Github账户

1、复制ssh key内容

pbcopy < ~/.ssh/id_rsa.pub

2、点击Github账户头像,点击设置进入Github设置


3、点击左边的SSH and GPG Keys


4、添加SSH Key, 填写刚刚复制的密钥内容


测试SSH连接

ssh -T git@github.com

如果有如下提示:

The authenticity of host 'github.com (192.30.252.1)' can't be established.
RSA key fingerprint is nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

输入yes即可

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

四、关联Hexo 和 Github

配置Hexo

进入博客根路径,打开_config.yml,拉到最后,修改如下:

//注意冒号后面有空格
deploy:
  type: git
  repository: git@github.com:ConnorLin/Connorlin.github.io.git
  branch: master

安装Hexo git插件

npm install hexo-deployer-git --save

将博客部署到Github

hexo deploy

至此,在浏览器输入博客地址 http://connorlin.github.io 就可以访问博客啦!

五、Hexo常用命令

1、新建文章

hexo new [template] "Title"  //新建标题为Title的文章

其中template是可选参数,我称之为文章模板,默认值为post。scaffolds路径下的文件就是模板文件,你可以新建或编辑现有模板。
执行命令后,在source/_posts/下会生成Title.md文件,当然,也可以手动创建后缀为“.md”的文件,并用喜欢的markdown编辑器编辑。
本文使用作业部落的Cmd MarkDown编写的。

2、新建页面

heox new page "Page Title"  //新建页面

3、生成静态页面至public目录

hexo generate   //生成静态页面

4、本地预览

hexo server //启动本地服务,Ctrl+C关闭

5、部署到Github

hexo deploy     //将博客部署到Github

6、清理已经生成的静态文件

hexo clean

六、美化

美化自然离不开主题,Hexo主题花样繁多,可以在Hexo_Themes找到你中意的主题。
试过几种主题,个人比较中意YiliaNext这两款主题,本文主题使用的是Next。
Next有官方教程,讲解非常详细,包括添加评论、搜索等一应俱全,此处不再赘述。
至于如何应用主题,步骤大同小异,此处以next为例:

//进入博客根目录
$ cd your-hexo-site
//从Github上克隆主题到你博客theme里
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

然后打开根目录下的_config.yml文件,将theme的值改为主题名字:

theme: next

配置完毕,此时可以启动本地服务http://0.0.0.0:4000/ 来预览主题了。

七、写作

Markdown

写博客当然用Markdown,目前mardkdown工具有很多,找到适合自己的还是要花点时间的,参考好用的Markdown编辑器一览找到你中意的吧。
作为一名程序猿,当然选择Sublime Text来装bility啦!
1、安装Package Control插件
  详见官方教程

2、打开Package Control
  按快捷键 Shift + command(Ctrl) + P -> 输入install -> 选择Install Package
稍等一会(左下角进度),就可以安装你想要的插件啦!

3、安装插件
  输入插件名,回车即可安装,插件请参考Sublime插件:Markdown篇

4、开始用Sublime Text写博客吧~

图床

开始写博客才知道图床,为了博客稳定,需要选择一个可靠且免费的图床,推荐七牛,有10G免费空间,仅做图床足矣。但是七牛现在注册需要实名,这点比较令人纠结。
所以我更推荐以强大的Github为免费图床,虽然麻烦点,但稳定安心!!!
1、添加博客图片专用Repository,如BlogImages,这样有利于维护;
2、发布博客前,将博客中用到的图片push到BlogImages;
3、从Github里获取图片地址,如何获取我想你会的;
4、将地址中的blob替换为raw,必须替换,否则无法显示图片

如  
“https://github.com/ConnorLin/BlogImages/blob/master/2016:04:02/hexo_server.png”  
改为  
“https://github.com/ConnorLin/BlogImages/raw/master/2016:04:02/hexo_server.png”

5、将修改后的地址用于博客即可,大功告成!

至此,博客基础框架搭建完毕,Enjoy it!

参考资料

1、hexo你的博客
2、HEXO+Github,搭建属于自己的博客
3、Github Help
4、小白独立搭建博客--Github Pages和Hexo简明教程
5、Sublime插件:Markdown篇
6、迁移博客图片者的福音:使用GitHub做免费不限流量图床

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

推荐阅读更多精彩内容