用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/