用Hexo+Github+Coding搭建静态博客（一）

为何搭建Hexo静态博客？

      Hexo是一款快速、简洁并且高效的博客框架，使用Markdown(或者其余渲染引擎)解析文章，在几秒内，既能够安装可利用的靓丽的主题生成静态页面

我目前只在window系统下面操做过，Mac和linux没有操做过，不过原理应该是同样的，欢迎你们点评，不过之后要是在liunx或者Mac折腾的话，相信会继续更新哒！！
关于Markdown的使用，请见这篇文章MarkDown学习笔记
那么创建Hexo,你要具有什么知识呢？

1. 知道npm包管理工具的基本使用

2. 了解Git原理以及使用Git

3. 知道Github page是如何实现的

4. 域名分流是如何操做的

其特色有:

• 超快速度：Node.js所带来的超快生成速度，让上百个页面在几秒内瞬间完成

• 支持Markdown：Hexo 支持 GitHub Flavored Markdown 的全部功能，甚至能够整合 Octopress 的大多数插件

• 一键部署：只需一条指令便可部署到 GitHub Pages, Heroku 或其余网站

• 丰富的插件：Hexo 拥有强大的插件系统，安装插件可让 Hexo 支持 Jade, CoffeeScript。

我以为用 大象无形，大道至简 形容最好了！Hexo太容易就运行了呢！
那还等什么，快开始Hexo探索之旅吧！！

勤能补拙是良训，一分耕耘一分才      ——华罗庚

在本地运行Hexo项目

撸码时刻，准备兴奋！！ 你的系统必须具有如下环境，不然，会安装失败的哟

• Node.js

• Git

安装Node建议用nvm,nvm是node版本控制工具
NVM安装成功后，执行 nvm install stable 就能够安装node了

一、全局安装hexo
    npm install hexo-cli -g
二、hexo命令生成一个博客雏形
    hexo init blog
三、进入blog文件夹
    cd blog
四、根据package.json安装依赖模块
    npm install
五、启动hexo项目
    hexo server

你的博客能够运行了吧，啊哈哈，有没有一种超快的赶脚？不过Hexo远不止于此，你离真正使用Hexo搭建一个个性化博客仍是很远的呢，待我慢慢道来吧。
若是想要自定义Hexo博客，请看我这篇文章哦 搭建Hexo博客进阶篇
运行成功以后，把目标转向安装的文件夹，文件夹目录以下所示：

.
├── _config.yml   //这里是网站的配置信息
├── package.json  //HEXO项目依赖
├── scaffolds     //模板文件夹
|   ├──post.md    //文章模板
|   ├──draft.md   //
|   └──page.md
├── source       //资源文件夹，
|   ├── _drafts
|   └── _posts
└── themes       // 主题文件夹。Hexo会根据主题来生成静态页面

目录文件解释以下：

目录/文件名	子文件名	做用	备注
_config.yml	---	这里是网站的配置信息	----
package.json	---	HEXO项目依赖	应用程序的信息，EJS, Stylus 和 Markdown renderer 已默认安装，您能够自由移除。
scaffolds	post,draft,page(.md)	模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来创建文件。	模板是指在新建的markdown文件中默认填充的内容。例如，若是您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source	_drafts、_posts	资源文件夹是存放用户资源的地方	除 posts 文件夹以外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其余文件会被拷贝过去。
themes	主题配置相关	主题 文件夹。Hexo 会根据主题来生成静态页面。	---

Hexo的基本使用

配置

网站基本信息在 _config.yml 中配置 :

网站

Site
title:       网站标题      
subtitle:    网站副标题    
description: 网站描述      
author:      您的名字
language:    网站使用的语言 zh-Hans,
timezone:    网站时区  America/New_York, Japan, 和 UTC

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，一般建议在其中包含您网站的关键词。author参数用于主题显示文章的做者
网站时区，详情请见时区列表

网址

url: http://yoursite.com   网址
root: /      网站根目录
permalink: :year/:month/:day/:title/   文章的永久连接格式
permalink_defaults:  永久连接中各部分的默认值

若是您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

目录

Directory
source_dir: source  资源文件夹，这个用来存放内容
public_dir: public 公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags 标签文件夹
archive_dir: archives 归档文件架
category_dir: categories 分类文件夹
code_dir: downloads/code include code文件夹
i18n_dir: :lang 国际化文件夹
skip_render:跳过指定文件的渲染，您可以使用 glob 表达式来匹配路径。

public,tags,archives,categories文件夹在hexo项目中是不可见的，只有执行Hexo generate命令时，生成public静态文件的时候才存在
咱们能够看一下public文件夹的目录信息

文章

Writing
新文章的文件名称
new_post_name: :title.md  //File name of new posts
预设布局
default_layout: post
把标题转换为 title case
titlecase: false Transform title into titlecase
在新标签中打开连接
external_link: true Open external links in new tab
把文件名称转换为 (1) 小写或 (2) 大写
filename_case: 0
显示草稿
render_drafts: false
启动 Asset 文件夹
post_asset_folder: false
把连接改成与根目录的相对位址
relative_link: false
显示将来的文章
future: true
代码块的位置
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

分类标签

Category & Tag
default_category: uncategorized
category_map:
tag_map:

时间/日期格式

Date / Time format
date_format: YYYY-MM-DD
time_format: HH:mm:ss

分页

Pagination
per_page: 10
pagination_dir: page

扩展

Extensions
Plugins: https://hexo.io/plugins/
Themes: https://hexo.io/themes/
theme: yelee

一键部署

Deployment
deploy:
  type:

Hexo基本指令

• 新建文章：
  hexo new [layout] <title>

  注意：没有设置layout时候，默认使用 _config.yml 中的 default_layout 参数代替，若是标题包含空格，请用引号括起来

• 生成静态文件：
  hexo generate,简写 hexo g

• hexo g -d ,文件生成后当即部署网站

• hexo g -w(--watch), 文件生成后件监视文件改动

• 发表草稿
  hexo publish [layout] <filename>

• 本地启动服务
  hexo s 默认4000端口

• hexo s -p(--port) 8888 -s(--static) -l(--log)
  重设端口，启用静态文件，启动日记记录，使用覆盖记录格式

• 部署网站
  hexo delpoy

• 渲染文件
  heox render <file1> [file2] -o path path设置输出路径

• 从其余博客系统迁移内容
  hexo migrate <type>

• 清除缓存（通常主题改变后使用）
  hexo clean

  tips:清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些状况（尤为是更换主题后），若是发现您对站点的更改不管如何也不生效，您可能须要运行该命令。

• 列出网站资料
  hexo list <type>

• 显示版本
  hexo version

同步部署到Github Pages和Coding Pages

Github Pages原理

完成github部署，首先你得有一个github帐号,关于git的使用能够参考廖雪峰的git教程，讲的很详细，算是入门的好教程了，更详细的请参考git官网

在这里我默认你们已经有帐号，而且完成了SSH KEY配置，这个SSH KEY的做用在，让你的git识别你的电脑，这样你才能够推送远程。

好了废话很少说，我来说述Github pages运行原理啦

首先，仍是老样子，Github Pages官网,这里能够了解Github pages是什么，我在这里说说个人看法吧

//视频代码
<div align=center>
<p style="font-size:30px;color:green;">What is Github Pages?<p>
<iframe width="853" height="480" src="https://www.youtube.com/embed/2MsN8gpT6jY" frameborder="0" allowfullscreen></iframe>
</div>

以上视频说了什么是github pages,其实 github pages 是对一个静态资源的访问，至关于文件服务器，咱们用 node 也能够作一个文件服务器，Hexo经过生成静态资源文件目录 public，把 public 目录下的内容推送到 git 远程的 gh-pages 分支，就完成了 github pages 的操做，以后咱们能够经过 https://username.github.io/repos 来访问你的静态资源了，就是这么简单

注意点：要想经过github pages来访问你的资源，有两种作法：

• 新建一个仓库，把本地资源直接推送到远程仓库的gh-pages分支，此时你的站点就在https://username.github.io/repos，repos 子目录了

• 新建一个仓库，仓库名为username.github.io，把本地资源直接推送东master分支，此时你的站点是在https://username.github.io/就是根目录了，可是你的资源在repos目录下，因此记得引用本地资源要这么写 href='/public/xxx.img'

至于coding page跟github一样是采用git版本控制的，并且coding page操做简单，这里不说了，注意ssh key的配置，不然你是没法推送的。

购买域名

购买域名，在这里没什么好说的了，只知道腾讯域名的.top 1年只要4元，挺实惠的。
买了域名以后，咱们要把 github 和咱们的域名绑定在一块儿，进行双向绑定

• 域名绑定Github
  买了域名以后，都会有域名解析服务，咱们就把域名解析设置在你的https://username.github.io/repos网址就能够了，这样，当你访问xxxx.top的时候，就会解析到你的github地址上去。也就是说你买的域名能够用了哈。

• github pages 绑定你的域名
  这个作法，原理很简单，只要在仓库的根目录添加一个文件，文件名为 CNAME ,文件内容就写你买的域名，这样就OK了。

可是，注意了，由于你每次写完文章的时候，都要部署，因此建议把 CNAME 文件放在在 HEXO 的 source 文件夹内，这样，每次部署的时候，source根目录的文件就会放在public根目录下了，同样达到了目的

大功告成了吗？哈哈，并无，咱们作到这一步，不管是访问xxx.top仍是访问https://username.github.io/repos都会跳转到xxx.top，可是注意，服务器在国外

咱们为何要同时部署到两个地方呢？

距离阻挡不了相思，仍是得有备胎！

部署两个地方，如今是没什么好处了，以前由于Coding pages的服务器在国内，那么国内的用户经过域名分流能够访问Coding pages，而国外的用户，域名分流，能够访问到Github pages，可是如今Coding pages的服务器在香港，这样一来，也没什么好处了，还有就是百度爬虫是爬取不到github page的资源的，可是能够爬取到Coding page哟，因此，这样一来，咱们的网站离百度收录进了一步，具体要让咱们的网站被百度收录，仍是须要专门去研究SEO了，这里不介绍了。

下面介绍如何设置，还记得配置网站信息在那个文件吗？在_config.yml里面

这样咱们就能够经过hexo d -g一键部署啦
hexo g hexo d分红两步也能够

参考资料

1. Hexo官方网站 : https://hexo.io/

2. Github pages  : https://pages.github.com/