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

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

1、简介

Hexo

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

Github

若是是程序员确定知道，Github是开源代码库以及版本控制系统。在GitHub，用户能够十分轻易地找到海量的开源代码。

Github Pages

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

2、基础环境配置

安装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 来预览博客啦！

3、配置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帐户

一、复制ssh key内容

pbcopy < ~/.ssh/id_rsa.pub

二、点击Github帐户头像，点击设置进入Github设置

三、点击左边的SSH and GPG Keys

四、添加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.

4、关联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 就能够访问博客啦！

5、Hexo经常使用命令

一、新建文章

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

其中template是可选参数，我称之为文章模板，默认值为post。scaffolds路径下的文件就是模板文件，你能够新建或编辑现有模板。
执行命令后，在source/_posts/下会生成Title.md文件，固然，也能够手动建立后缀为“.md”的文件，并用喜欢的markdown编辑器编辑。

二、新建页面

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

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

hexo generate   //生成静态页面

四、本地预览

hexo server //启动本地服务，Ctrl＋C关闭

五、部署到Github

hexo deploy     //将博客部署到Github

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

hexo clean

6、美化

美化天然离不开主题，Hexo主题花样繁多，能够在Hexo_Themes找到你中意的主题。
试过几种主题，我的比较中意Yilia和Next这两款主题，本文主题使用的是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/ 来预览主题了。

7、写做

Markdown

写博客固然用Markdown，目前mardkdown工具备不少，找到适合本身的仍是要花点时间的，参考好用的Markdown编辑器一览找到你中意的吧。

做为一名程序猿，固然选择Sublime Text来装bility啦！

一、安装Package Control插件
　　详见官方教程

二、打开Package Control
　　按快捷键 Shift ＋ command(Ctrl) ＋ P -> 输入install -> 选择Install Package
稍等一会(左下角进度)，就能够安装你想要的插件啦！

三、安装插件
　　输入插件名，回车便可安装，插件请参考Sublime插件：Markdown篇。

四、开始用Sublime Text写博客吧～

图床

开始写博客才知道图床，为了博客稳定，须要选择一个可靠且免费的图床，推荐七牛，有10G免费空间，仅作图床足矣。可是七牛如今注册须要实名，这点比较使人纠结。
因此我更推荐以强大的Github为免费图床，虽然麻烦点，但稳定安心！！！
一、添加博客图片专用Repository，如BlogImages，这样有利于维护；
二、发布博客前，将博客中用到的图片push到BlogImages；
三、从Github里获取图片地址，如何获取我想你会的；
四、将地址中的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”

五、将修改后的地址用于博客便可，大功告成！

至此，博客基础框架搭建完毕，Enjoy it！

参考资料

一、hexo你的博客
二、HEXO+Github,搭建属于本身的博客
三、Github Help
四、小白独立搭建博客–Github Pages和Hexo简明教程
五、Sublime插件：Markdown篇
六、迁移博客图片者的福音：使用GitHub作免费不限流量图床

原创文章，欢迎转载，转载请注明出处

个人简书帐号是ConnorLin，欢迎光临！

欢迎关注个人微信