使用GitHub和Hexo搭建免费静态Blog


前言

习惯自己写Blog的朋友一定不会陌生Wordpress,或许也曾在新浪博客和QQ空间留过脚印,但静心认真思考一下,似乎我们又总是向往更加简单自由的写作方式。GitHub给我们提供了一个无限的空间,我们需要珍惜使用,而Hexo的出现从某种意义上来说代替了Jekyll,让我们可以更专注于写作本身。

喜欢写Blog的人,会经历三个阶段。
第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

大多数Blog作者,都停留在第一和第二阶段,因为第三阶段不太容易到达:你很难找到俯首听命、愿意为你管理服务器的人。

但是六年前,情况出现变化,一些程序员开始在GitHub网站上搭建blog。他们既拥有绝对管理权,又享受GitHub带来的便利----不管何时何地,只要向主机提交commit,就能发布新文章。更妙的是,这一切还是免费的,GitHub提供无限流量,世界各地都有理想的访问速度。

今天,我就来示范如何在GitHub上搭建Blog,你可以从中掌握GitHub的Pages功能,以及Hexo软件的基本用法。更重要的是,你会体会到一种建立网站的全新思路。


概要

GitHub Pages 是什么?

如果你对编程有所了解,就一定听说过GitHub。它号称程序员的Facebook,有着极高的人气,许多重要的项目都托管在上面。
简单说,它是一个具有版本管理功能的代码仓库,每个项目都有一个主页,列出项目的源文件。

但是对于一个新手来说,看到一大堆源码,只会让人头晕脑涨,不知何处入手。他希望看到的是,一个简明易懂的网页,说明每一步应该怎么做。因此,GitHub就设计了Pages功能,允许用户自定义项目首页,用来替代默认的源码列表。

所以,GitHub Pages可以被认为是用户编写的、托管在GitHub 上的静态网页。

GitHub 提供模板,允许站内生成网页,但也允许用户自己编写网页,然后上传。有意思的是,这种上传并不是单纯的上传,而是会经过Hexo或Jekyll等程序的再处理。

什么是Hexo?

Hexo 是一个快速、简洁且高效的基于Node.js的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。作者是来自台湾的@tommy351

A fast, simple & powerful blog framework, powered by Node.js.

类似于jekyll、Octopress、Wordpress,我们可以用Hexo创建自己的博客,托管到github、Heroku或Coding上,绑定自己的域名,用markdown写文章。本博客即使用hexo创建并托管在github上。

为什么要用hexo

不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 Markdown
仅需一道指令即可部署到 GitHub Pages 和 Heroku
已移植 Octopress 插件
高扩展性、自订性
兼容于 Windows, Mac & Linux

  • 易用。不仅部署简单,平时使用中仅需要hexo new hexo generate hexo server hexo deploy四个命令。不像Jekyll需要很多繁琐的git命令。
  • 轻。文件少、小,易理解,方便自定义。
  • 用户多。虽然赶不上Jekyll和Octopress,但遇到什么问题都能搜索到答案,或者找到同样使用hexo的用户进行参考和咨询。

谁能使用hexo

这是一个免费开源的博客程序,任何人都可以使用和修改。但是不同于wordpress,hexo由于需要使用Github,Git,Markdown,Node.js这样的工具,好多插件、widget都需要自己安装、设置。所以适合那些有一定计算机基础,喜欢折腾的人。但是,不要恐惧,只要跟着本教程走,就能很方便地让自己的博客”飞起来”。

怎样搭建hexo博客

正题来了,请认真往下看吧。


准备工作

注意本文主要针对Windows平台和Hexo 3.x

安装GIT

下载 Git 并执行即可完成安装。
So Easy

安装Node.JS

在 Windows 环境下安装Node.js非常简单,仅须下载Node.JS并执行即可完成安装。
So Easy

安装Hexo

在任意位置右键,选择Git Bash Here

npm install -g hexo-cli
#如果命令无法运行,可以尝试更换taobao的npm源
npm config set registry https://registry.npm.taobao.org
#或者安装使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

Hexo初始化配置

创建hexo文件夹

安装完成后,根据自己喜好建立目录(如D:\hexo),在该文件夹下右键--Git Bash Here。执行以下命令

hexo init

安装依赖包

npm install

该命令会将hexo所需文件自动下载到hexo文件夹下。

#新建完成后,指定文件夹的目录如下
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|      ├── _drafts
|      └── _posts
└── themes

安装Hexo插件(可选)

npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-json-content --save
npm install hexo-deployer-git --save
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save

查看本地运行效果

现在我们已经搭建起本地的Hexo博客了,继续执行以下命令(在D:\Hexo),成功后即可登录localhost:4000查看效果,运行显示了相关页面,说明当前网站已经在本地建立。

hexo generate
hexo server

好了,至此,本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Github。


配置GitHub

注册Github账号

已有账号可以跳过,没有的,请登录GitHub进行注册,很简单,这里就不介绍了。

创建repository

在自己Github主页右下角,创建New repository
比如我的Github账号是viosay,那么我应该创建的repository名字应该是viosay.github.io
首次创建耐心等待10分钟左右审核,之后即可访问静态主页如http://viosay.github.io

配置部署

编辑_config.yml(在D:\hexo下)。你在配置时,要把下面的viosay都换成你的账号名。

deploy: 
  type: git
  repository: https://github.com/viosay/viosay.github.io.git
  branch: master

注意:type:空格git。都要使用空格,否则会出错。

配置本机的ssh key

通过ssh keys就可以将本地的项目与Github关联起来

检查本机ssh key

cd ~/.ssh

提示:没使用过Git就会显示:No such file or directory

生成新的ssh keys

$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>

注意:-C为大写的C接下来会让你输入密码

Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

注意:输入密码时是不会显示密码的,依次输入就好了如果显示为下界面,就说明设置ssh key成功了


添加ssh key到Github

  1. 搜索本机上的id_rsa.pub文件。或在C:\Users\用户名\.ssh路径下找到该文件,以记事本打开,复制其中的内容。
  2. 进入自己的Github,右上角齿轮setting---左边列表SSH keys---Add SSH key。将内容复制到文本框(不用取title名字)。
    注意:这时Github会给你的邮箱发送一封邮件,打开邮件确认下就好了。

测试通信

ssh -T git@github.com

如果是以下反馈

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

输入yes

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

这时候说明能够通过SSH链接到你的Github了,接下来完善一下你的个人信息。Git会根据用户的名字和邮箱来记录提交。
GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。

git config --global user.name "Tim" #用户名
git config --global user.email "tim@gmail.com" #填写自己的邮箱

使用Hexo克隆主题

自己使用的是Yilia主题,比较喜欢,以这款主题为例。

克隆主题

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

配置

修改hexo根目录下的_config.yml

theme: yilia

更新

cd themes/yilia
git pull

本地查看

hexo g
hexo s

浏览器输入localhost:4000,查看主题是否成功。

部署上传

hexo clean
hexo g
hexo d

会让你输入用户名和密码,依次输入就好。

部分Hexo主题推荐

选择主题建议遵循KISS原则

Hexo Themes -http://hexo.io/themes/
Themes · hexojs/hexo Wiki - https://github.com/hexojs/hexo/wiki/Themes

Yilia -http://litten.github.io/2014/08/31/hexo-theme-yilia/
Jacman -http://wsgzao.github.io/post/hexo-jacman/
NexT - http://theme-next.iissnan.com/


绑定域名和DNS设置

设置CNAME

  • 打开Github--空间Repository的根目录下--点击“+”creat a new file--命名为CNAME,文本框中输入自己需要绑定的域名如inplus.top
  • 点击右下角的【Download ZIP】,下载项目,解压压缩包,将其中的CNAME文件复制到hexo根目录下。
hexo g
hexo d

DNS设置

注册登录DNSPod,先添加域名,然后添加记录,设置如下

主机记录 记录类型 线路类型 记录值 MX优先级 TTL
@ CNAME 默认 viosay.github.io. - 10
www CNAME 默认 viosay.github.io. - 10

域名推荐

GoDaddy makes registering Domain Names fast, simple, and affordable.
【推荐理由】两个字“靠谱”,支持支付宝,附优惠码链接
http://www.godaddy.com
http://www.gdcodecoupon.com

万网
【推荐理由】被阿里收入麾下,实力和价格都不错
https://wanwang.aliyun.com

DNS推荐

致力于为您提供最稳定、最安全的域名解析服务
【推荐理由】依然是两个字“靠谱”,被腾讯收入麾下以后扔不忘初心,感谢他们一直以来对于公益的坚持
https://www.dnspod.cn


开始写文章

hexo new "postName"

或路径D:\hexo\source\_posts下新建文件postName.md就可以了
文章内容和格式如下:

---
title: 标题
date: YYYY-MM-DD hh:mm:ss
tags: 标签                    #多标签时以[tag1,tag2]格式填写
categories: 类别              #多类别时以[category1,category2]格式填写
---
主页可显摘要
<!-- more -->                #阅读全文分隔符
展开余下全文

正文内容使用Markdown语法进行书写

图床推荐

七牛云
【推荐理由】体系完善,操作简便易懂
测试用户每月1G流量,实名后每月10G,小站够用。
需要注意的是未备案网站无法使用CDN,存在盗图和恶意刷流量的可能,而且七牛是先使用后付费,自己领悟吧。
http://www.qiniu.com

Simple Free Image Hosting
【推荐理由】免费,强大,无限制,用了都说好
缺点:后期无法对上传的图片进行管理
https://sm.ms
说明:https://www.v2ex.com/t/182703


其他相关

常见问题

  1. 修改配置文件时注意YAML语法,参数冒号:后一定要留空格
  2. 中文乱码请修改文件编码格式为UTF-8

Error代码:「warning: LF will be replaced by CRLF」
hexo deploy时,有时会出现这个提示信息warning: LF will be replaced by CRLF,虽然看起来挺乱糟糟的,但不影响使用,可以忽略不计。若想不提示,可以使用如下方法:

  1. 切换到博客的根目录,执行如下命令:git config --global core.autocrlf false
  1. 删除掉该目录下的.git文件夹(可能是隐藏的),命令:rm -rf .git
  2. 重新git init

再deploy试试吧,清新脱俗了。

Error代码:hexo deploy 没反应
好多网友遇到过这个问题,目前来看,主要问题出在config.ymldeploy配置上。注意缩进,同时注意冒号后面要有一个空格。
Error代码:hexo update -g 升级错误,hexo命令失效
我升级时遇到了这个问题,原因不详。这种情况下,可执行npm install hexo-cli -g重新安装一遍Hexo,效果跟升级一样。
Error代码:hexo指令无法执行
可能是升级方法不对,导致hexo generate指令也无法执行,后来索性重装了git和node,重新安装hexo,generate和server指令都能执行了,但是出现了“Deployer not found: github”。
Error代码:Deployer not found: git
更改_config.yml主配置文件为utf-8编码时导致的异常。
执行npm install hexo-deployer-git --save然后重新deploy即可。

各版本所做更新修正,请参考这里

如何迁移至Hexo

http://hexo.io/zh-cn/docs/migration.html

Hexo命令

hexo init <folder> #初始化一个网站目录 我是直接cd到目标目录执行hexo init的
hexo new "postName" #新建文章,或者source\_posts手动编辑
hexo new page "pageName" #新建页面 默认链接为:主页地址/pageName/
hexo clean #清除缓存文件db.json和已生成的静态文件public
hexo generate #生成public静态文件至public目录
hexo server #本地发布预览效果 http://localhost:4000 ('ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo --debug #在终端中显示调试信息并记录到 `debug.log`
hexo help #查看帮助
hexo version #查看Hexo的版本

Hexo简写命令

hexo n "postName" #新建文章,或者source\_posts手动编辑
hexo g #生成public静态文件至public目录
hexo s #本地发布预览效果 http://localhost:4000 ('ctrl + c'关闭server)
hexo d #将.deploy目录部署到GitHub

Hexo复合命令

hexo d -g #生成并部署上传
hexo s -g #生成并本地发布预览
hexo clean && hexo d -g #清空缓存然后生成并部署上传
hexo clean && hexo s -g #清空缓存然后生成并本地发布预览

本文部分说明来自互联网
特别感谢 @wsgzao @阮一峰 @TimFei @Litten @陈素封 @zippera @不如

推荐阅读更多精彩内容