使用Github+Hexo搭建属于自己的个人博客

任何成就都是从决定尝试开始

记得刚毕业那会经常混迹于博客园、CSDN之类的技术型网站,也一直想要给自己开通一个博客来记录自己所学知识。一方面可以自我总结,通过自己的角度来描述所学的知识是验证自己是否吃透此知识点的一个标杆;另一方面呢则是想借此训练自己的写作能力和表达能力,毕竟现在不是单打独斗的时代,团队意识要好,交流沟通是最总要的。如果表达不精准会影响整个项目的进度!哈哈,发了这么多牢骚,看官是否已经在心里默默地画圈诅咒我了。别急,马上进入正题!!!

工欲善其事,必先利器

在搭建hexo之前呢需要先准备一些工具,如下:

  1. git 这个主要是为了把本地hexo的代码提交到github上面。

    因为我是有安装过xcode的,而xcode是有自带的git的,所以,没有git的同学可以自行去app store 里搜索下载。

  2. node.js 使用它来生成静态页面。

    给上 node.js官网 链接,下载,然后一路安装搞定。

  3. github帐号 因为我们是打算使用 Github pages 来搭建属于我们的个人博,我们需要对其进行提交代码到远程仓库,绑定域名,服务器之类的操作。

如果你还没有github账号,那么可以通过 github 官网 进行申请注册。这里还需要说到的一点就是配置SSH。当然你也可以不用配置,只是每次改动自己的博客候提交到github时就需要输入帐号密码,如果你不嫌麻烦的话!至于怎么配置SSH,直接google一下一大堆。(我就不说直接百度)

好,现在已经把所需要的工具/帐号准备完毕,接下来我们就开始着手搭建博客吧!!!

安装hexo

首先呢我们需要创建一个文件夹,用来存放hexo的配置文件:

mkdir blog
cd blog

安装hexo(切记要在你所创建的文件夹内(如我创建的blog)执行安装):

sudo npm install -g hexo
之前不使用sudo的话根本下载不下来

初始化hexo:

hexo init

初始化完毕后整个hexo就搭建完成了。是不是觉得很简单,同时也很纳闷看我这么多废话就只执行了这几句命令就行了? NoNoNo,这只是初始化好了而已,接下来带你们撸一发操作!

生成静态页面

hexo generate

该命令是把项目中所有的md文件生成静态页面,也可以用 hexo g 简写来生成静态页面。切记,所有的操作都必须在blog文件夹总执行。

启动本地服务

hexo server

这个命令呢就是在本地运行并打开一个端口给我们本地调试预览,可以运行看看你写得究竟怎么样。看网上教程说需要配置环境变量才能运行,可我自己什么都没配也可以运行。不知道大伙你们有没遇到。

Github 配置

既然hexo本地可以可以运行,那么我们就开始着手如何部署到外网去。
至于如何申请Github pages,请查看这里: 如何搭建Github pages
首先我们需要跟Github关联起来,在blog文件夹中可以看到有一个 _config.yml文件,使用vim打开翻到最底部可以看到:
deploy:
type:
补全成以下样子(切记冒号后要打上空格)
deploy:
type: git
repo: https://github.com/jousts/jousts.github.io.git
branch: master
然后执行以下命令:

npm install hexo-deployer-git –save

最后一步:

hexo deploy

Ok,大功告成。现在已经成功地部署到Github上了。小伙伴们可以在浏览器上输入 http://XXXX/XXXX.github.io 来看自己的成功了!!!(注意:这里是以我的角度去操作的,你们只需要把XXXX部分更换成你们的github用户名部分)

更换hexo主题

虽然原生的hexo主题也挺不错的,但是我们总是想最求更好看、更简洁的主题。而hexo可以满足你这一点。好比如我现在在用的这款主题是yilia,喜欢它的简约大气,而修改主题只需要下载主题,然后配置文件中修改主题名就行了。是不是简单易操作!!!

git clone http://github.com/litten/hexo-theme-yilia.git themes/yilia

下载hexo-theme-yilia项目到blog/themes/yilia 文件夹中。
下载好yilia后我们修改_config.yml文件中的theme属性:

theme: yilia

更新配置到github上:

hexo g 部署
hexo d 提交

总结

其实只要是不熟成功过,那么我们接下来的每一次部署都只是重复三个动作:

hexo clean
hexo generate
hexo deploy

好了,hexo 入门基本操作就已经在这里了。还想深入研究的话可以google去查一下hexo的命令操作哦。

第一次写博客,略笨戳。有什么不对的地方还希望大伙多多包涵。谢谢