使用Coding和Hexo搭建免费静态Blog
喜欢写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等程序的再处理。
<font color=gray size=30>什么是Hexo?</font>
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上。
<font color=gray size=30>为什么要用hexo</font>
不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 Markdown
仅需一道指令即可部署到 GitHub Pages 和 Heroku
已移植 Octopress 插件
高扩展性、自订性
兼容于 Windows, Mac & Linux
- 易用。不仅部署简单,平时使用中仅需要hexo new hexo generate hexo server hexo deploy四个命令。不像Jekyll需要很多繁琐的git命令。
- 轻。文件少、小,易理解,方便自定义。
- 用户多。虽然赶不上Jekyll和Octopress,但遇到什么问题都能搜索到答案,或者找到同样使用hexo的用户进行参考和咨询。
<font color=gray size=30>谁能使用hexo</font>
这是一个免费开源的博客程序,任何人都可以使用和修改。但是不同于wordpress,hexo由于需要使用Github,Git,Markdown,Node.js这样的工具,好多插件、widget都需要自己安装、设置。所以适合那些有一定计算机基础,喜欢折腾的人。但是,不要恐惧,只要跟着本教程走,就能很方便地让自己的博客”飞起来”。
<font color=gray size=30>怎样搭建hexo博客</font>
正题来了,请认真往下看吧。
准备工作
注意 本文主要针对Windows平台和Hexo 3.x
<font color=gray size=30>安装GIT</font>
下载 Git 并执行即可完成安装。So Easy
<font color=gray size=30>安装Node.JS</font>
在 Windows 环境下安装Node.js非常简单,仅须下载Node.JS并执行即可完成安装。So Easy
<font color=gray size=30>安装Hexo</font>
在任意位置右键,选择Git Bash Here
1 npm install hexo-cli -g
2 #如果命令无法运行,可以尝试更换taobao的npm源
3 npm install -g cnpm --registry=https://registry.npm.taobao.org
Hexo初始化配置
<font color=gray size=30>创建hexo文件夹</font>
安装完成后,根据自己喜好建立目录(如D:\hexo),在该文件夹下右键–Git Bash Here。执行以下命令
1 hexo init
<font color=gray size=30>安装依赖包</font>
1 npm install
该命令会将hexo所需文件自动下载到hexo文件夹下。
1 #新建完成后,指定文件夹的目录如下
2 ├── _config.yml
3 ├── package.json
4 ├── package.json
5 ├── scaffolds
6 ├── scripts
7 ├── source
8 | ├── _drafts
9 | └── _posts
10 └── themes
<font color=gray size=30>安装Hexo插件(可省略)</font>
1 npm install hexo-generator-feed --save
2 npm install hexo-generator-sitemap --save
3 npm install hexo-generator-baidu-sitemap --save
4 npm install hexo-generator-json-content --save
5 npm install hexo-deployer-git --save
6 npm install hexo-generator-index --save
7 npm install hexo-generator-archive --save
8 npm install hexo-generator-category --save
9 npm install hexo-generator-tag --save
10 npm install hexo-server --save
11 npm install hexo-deployer-heroku --save
12 npm install hexo-deployer-rsync --save
13 npm install hexo-deployer-openshift --save
<font color=gray size=30>查看本地运行效果</font>
现在我们已经搭建起本地的Hexo博客了,继续执行以下命令(在D:\Hexo),成功后即可登录localhost:4000查看效果,运行显示了相关页面,说明当前网站已经在本地建立。
1 hexo generate #可简写为hexo g
2 hexo server #可简写为hexo s
好了,至此,本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Coding。
配置Coding
<font color=gray size=30>注册Github账号</font>
已有账号可以跳过,没有的,请登录Coding进行注册,很简单,这里就不介绍了。
<font color=gray size=30>创建repository</font>
在自己Coding主页中间上面,创建项目。比如我的Coding账号是MoPoint,那么我应该创建的项目名字应该是mopoint。然后都不用选择,直接点击最下方的创建项目,然后点击左侧的代码,图片,点击,右侧中间的点击这里快速初始化仓库,然后点击下方的启用README.md文件初始化项目,再点击他右侧的创建 。最后我们要创建一个进入页。点击当前页右侧上方的新建文件,22.png,最后点击右下方的提交到master分支。最后一步,点击左侧的Pages服务,再部署来源里面选择master分支,点击保存之后即可访问静态主页如http://mopoint.coding.me/mopoint