hexo+github搭建独立博客简易教程

前言

作为第一篇文章,应当写些什么呢?还是把这个网站是如何搭建的说说吧,以后工作了,可能就没时间写了。

一直想有一个属于自己的小窝,在上面记叙自己的故事。从QQ空间到新浪、网易博客,接着又流浪过博客园和csdn。但都不是很满意,他们不是自定义内容过少就是漂亮的皮肤需要收费,总之就是可制定内容过于局限。

想做一个漂亮简洁的网页布局,而我又拥有最高权限。把自己的生活记录下来,把自己的所思所想编译成文字,把自己的所学分享出来。

那么为什么想写博客呢?这种已经过时了的东西。记录生活的话,微博、qq、微信不都可以吗?干嘛那么麻烦呢?最初看博客是在学unity和C#语言的时候,不懂的地方得益于他人的技术博客,于是自己也尝试着写关于unity的博客,在写的过程中感觉到写博客的多多益处。用四个字概括就是利人利己。

Reading makes a full man,conference a ready man,and writing an exact man.
阅读使人充实,交谈使人机智,写作使人精确。

为什么你应该(从现在开始就)写博客
为什么你要写博客

再后来接触到了git,于是看到有人用github pages和jekyll搭建独立博客,但那已经是比较老的教程了,后来一位台湾的大学生写出了hexo,使得在github上写文章极其简单。于是我就用了hexo+github的方式搭建了这样一个博客。网上的教程很多,可大部分教程都比较old了,所以绕了不少弯路,也遇到了很多问题。

但幸运的是,最终我成功了。下面就分享一下我的经验。

知识准备

可能你并不知道什么是git,什么是github,什么又是hexo……但其实如果只是想搭建一个博客,即使你什么都不知道也没关系,只要你跟着步骤一步一步来就可以搭建自己的博客了,然后选择你喜欢的主题,学一下几分钟就能学会的markdown,就可以写文章了。这并不是什么很困难的事。

当然,可能也有一些人想了解一下这些名词的意思,同时自己也做一下记录总结。下面给出了这些名词解释的链接:

什么是git

什么是github

什么是Github Pages(请看对应的Github Pages部分)

什么是Hexo:Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351。

如何搭建自己的博客

注意:此教程针对window用户,Linux和mac用户可以参阅hexo文档

搭建hexo环境

安装Node.js

下载并安装Node.js

安装git

下载并安装git
安装git的步骤

安装Hexo

在你喜欢的文件夹下创建一个路径(我的路径是:E:\Project\Blog),在空白处右击鼠标,选择Git bash

输入下面的代码

npm install -g hexo
hexo init
npm install hexo-deployer-git --save

好了,hexo环境已经搭建完成了。来看看我们的成果吧~
先输入下面的代码

hexo generate
hexo server

现在,在浏览器中输入http://localhost:4000/看看效果如何吧。
或者点击这里

现在是不是有点小惊喜,终于看到页面了,有木有~但别高兴太早,这只是本地的,也就是说别人是看不见的。接下来,我们就把这个本地的网页部署到github上去。

note:

  1. 用复制的快捷键ctrl+c可以断开localhost:4000
  2. 如果出现404或者空白的话,可以参考这篇文章
  3. 还是不行的话,把你的错误粘贴到百度里查查看,网上有没有解决方案

部署到github

注册github账号

在github官网上进行注册(github在国内墙不墙的问题也是有一段历史的),点击此处注册

note:注册名关系到你的网站域名,建议填写你喜欢的名字

配置ssh keys

ssh keys的设置方面我参考的是这篇博客

他是用github+jekyll完成的,不过你可以参考他的配置和使用Github部分,确实很详细,包括ssh key验证是否成功(我也偷个懒,O(∩_∩)O哈哈~)

note:

  1. ssh keys在github页面,你的头像下的setting中设置。

  2. 如果你的ssh设置还是有问题,可以参考官方的文档:
    Generating SSH keys
    Error: Permission denied (publickey)

  3. 在得到ssh keys时,github会发一封邮件,请注意查收

创建repository

好的,如果前面都还顺利的话,接着就是创建一个仓库了,github页面的右上角,头像旁边的+号,点击后有个new repository选项,点击后如下图:

我已经创建好了,所以名字相同会报错。

note:

  1. Github Pages的Repository名字是特定的,比如我Github账号是DemoniacCube,那么我的Repository name就是DemoniacCube.github.io
  2. 注意大小写,你的名字是什么就填什么。其他仓库名字可以随便取,但这个特殊的仓库必须这样。当博客搭建好后,这个仓库会自己创建一个Github Pages(在该仓库的setting中可以查看),所以你在其他教程中似乎看不到用了Github Pages。

名字填好以后点击Create repository,其他的默认就可以了。

修改_config.yml文件

OK,这一切都顺利完成的话,就可以编辑_config.yml文件了。

在你创建的根目录下(我的是E:\Project\Blog)找到_config.yml文件,如果你的电脑没有代码编辑器的话,可以用记事本打开。在代码的最后修改代码如下

deploy: 
  type: git
  repository: git@github.com:yourname/yourname.github.io.git
  branch: master

note:

  1. type:、repository:等每个后面都有一个空格,如果不加这个空格,提交时会报错
  2. yourname改为你Github上的注册名
  3. repository: git@github.com:yourname/yourname.github.io.git用到的就是ssh key值,如果ssh配置不正确会提交不上去
  4. repository: 后面的值其实并不需要你自己敲,可以通过复制仓库的ssh或者http(这也就是为什么上面要设置ssh值了,如果不用ssh,而用http的话,或许不需要设置ssh,由于ssh速度更快一些,我一直都用ssh的,如果你有兴趣,也可以试试http),如下图所示:

部署到Github

到这里,我们所有的本地工作都做好了,就等着提交了。如果之前你的git bash关闭了。你需要在你当时创建的根目录下(我的是E:\Project\Blog),再次右击鼠标选择git bash hear并输入下面的代码:

hexo generate
hexo deploy

我们的博客已经搭建完成了~,在浏览器中输入yourname.github.io看看你的成果吧!

更换皮肤

hexo中提供了很多主题,如果你不喜欢自带的主题,可以clone那些主题来改变默认的主题。

下载主题

点击进入hexo主题,选择你喜欢的主题。(我用的是next主题)(github上还有其他作品,你可以找找看,)
比如你选择了第三个主题Hueman,选择About可以看到

$ git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman
启用Hueman主题

在你创建的根目录下右击鼠标选择git bash hear并输入上面的代码。
当下载完毕后,你会在E:\Project\Blog\themes里看到一个hueman的文件夹,这就是刚刚下载的主题。
修改站点文件_config.yml中的theme属性,默认是landscape,改为hueman
ps: _config.yml有两个:根目录下的_config.yml叫站点文件;主题目录下的_config.yml叫主题文件

验证主题是否启用

运行 hexo s –debug,并访问localhost:4000,确保站点正确运行。

主题个性化

每个主题都可以在主题文件_config.yml中修改相应属性,来实现主题的部分个性化,比如:语言、字体、图标等等。
当然这些修改只是在原有基础上的小修小补。如果你有能力也完全可以自己设计一个网页,让别人来fork你的。

常见错误

  1. 在github部署完成之后,马上访问可能出现404错误,这是正常的,最多等待十分钟左右就可以访问了。如果还不行,那很可能是 github 发送给你的验证邮件你没有打开看,验证后就没问题了。

  2. 如果在修改_config.yml文件时,出现乱码,请转码为utf-8

  3. 右击鼠标没有git bash hear选项可以在开始菜单中找到,然后用cd进入相应目录

附录

hexo常用命令

hexo new "postName" //新建文章
hexo new page "pageName" //新建页面
hexo generate //生成静态页面至public目录
hexo server //开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy //将.deploy目录部署到GitHub
hexo help  //查看帮助
hexo version  //查看Hexo的版本


hexo deploy -g  #生成加部署
hexo server -g  #生成加预览

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy