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

2017-08-08  本文已影响0人  MoPoint
喜欢写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

<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

上一篇下一篇

猜你喜欢

热点阅读