臨夜寫稿，將一直規劃很久遲遲沒有動筆的這一系列落實，也為今日清晨就要舉辦的前端社區活動做干貨分享準備。我的這個學習模型，每當有一個技術主題出現，常常伴隨著以下幾個
- 線上社區宣傳主題
- 博客寫作
- 加班加點的制作相關 ppt
- 微信訂閱號的文章推送配合并群發宣傳
每一次的技術分享都走遍了所有流程，回首看來，著實挺累，但也還算值得。
這一系列便來講講 Github Pages+ Hexo 搭建專屬靜態博客站點。
1 博客與靜態博客？
正如我之前的這篇文章 《如何寫一篇優質的博客》 畫圖所示，網絡博客在短短的幾十年間得到了巨大的普及，傳遞著每一個故事。博客有一個最忠實的群體，那就是發明他們的人：程序員，或者叫做極客、黑客和軟件工程師更能生動的形容他們對新技術的激情。
寫博客的好處是我們用博客表達自己、升華自己。在我們學會寫博客的同時還能提升我們的演講、辯論能力。寫博客的前期準備便需要我們能夠對自己、對博客主題進行明確的定位以及對博客敘述的把控，達到最好的效果。
Weblog = Web + Log;
那靜態博客是什么？通俗來講，靜態博客站點便是沒有數據庫沒有后臺交互的純前臺博客站點，哪怕是評論系統也是由第三方提供數據支持。靜態博客站點常常作為 HTML 頁面出現，可用博客制作器制作，Hexo 便是其中之一。相比有數據庫有后臺交互的動態博客站點來說，靜態博客站點有如下好處：
- 省錢。靜態網站占用的系統資源少。如果掛到github pages上，只要注冊一個域名就可以了。
- 速度快。不經過php解析器，不用數據庫，速度自然比動態網站快
- 安全。由于靜態網站的簡潔，免疫很多web攻擊方式。
- 服務器端配置簡單。只需要一個web server（apache、nginx）。
- 非常容易維護。
Git、Github 和 Github Pages？
Git 是一個版本控制系統，可以用來隨著時間變化跟蹤一個項目中文件的改變。Git 代表性的功能就是記錄文件有什么改變、誰做出的改、改變者對這次改變做出了怎樣的闡述和說明等。Git 主要被各類軟件開發項目所使用。
如下圖所示，每一個文件代表著一次“保存”，沒有了 Git，你就不能隨意退回到曾經的某次修改之中。
有了 Git，改變將是多方向的，每一次修改都會得到保存，每一個保存都可以引發新的時間線，版本回退、分支管理、協作開發等功能都有了發展條件。
--everything-is-local
在基于 Git 的眾多管理系統中， Github 是最突出的一個。Github 上有成千上萬激動人心的卓越項目，我們可以輕松的下載項目源代碼或
克隆這個項目到自己的倉庫并進行自己的開發。目前最火的開源項目便是 freeCodeCamp，一個 JS 全棧在線學習平臺。
Github Pages 是面向用戶、組織和項目開放的公共靜態頁面搭建托管服 務，站點可以被免費托管在 Github 上，你可以選擇使用 Github Pages 默 認提供的域名 github.io 或者自定義域名來發布站點。Github Pages 支持自動利用第三方靜態站點生成工具生成站點，也同樣支持純 HTML 文檔，將你的靜態站點托管在 Github Pages 上是一個不錯的選擇。
Hexo？
有很多靜態站點的主題可供我們選擇，根據這些主題所用的開發語言可以分為如下幾類，可見我這里選擇 Hexo 的原因在于 Hexo 基于 Node.js ，與我的前端技術棧相匹配且有一定的用戶量，主題倉庫里會得到很多及時的更新。
- Ruby：Jekyll，Octopress、Middleman
- Node.js：Hexo、Metalsmith、Wintersmith
- GO：Hugo
- Python：Pelican
開始實戰
搭建 Node.js 開發環境
Node.js?是一個基于Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用高效、輕量級的事件驅動、非阻塞 I/O 模型。Node.js 之生態系統是目前最大的開源包管理系統。Hexo 博客制作器需要 node 和 npm 的環境。
安裝 Git 客戶端
官網下載：https://git-scm.com/
一般來說，Linux 和 MaxOS 都會默認集成 Git 的功能，進行版本控制。而在 Windows 下，常常需要下載 Git 客戶端 -- Git Bash 來進行命令行操作。
安裝過程中一路默認即可。
解決 git bash 中 node、npm 命令不存在的問題
安裝完 Node.js 和 Git，發現在 Git Bash 中輸入 node -v 和 npm -v 提示命令不存在的報錯信息，是我們在 Windows 下沒有鏈接環境變量的緣故。打開環境變量的設置，在 PATH 變量后加入 Node 安裝的目錄即可。
安裝初始化 Hexo
現在有了 Node 的 js 環境和 Git Bash 提供的命令行環境，開始著手安裝 Hexo。
npm install -g hexo
以上命令會用 npm 的 node 包管理器將 hexo 安裝到本地，-g 參數表明安裝目錄為本地的全局 npm 包中，而不是某個項目的 npm 包中。這時我們就可以使用 hexo 命令了。
新建一個文件夾，并在這個文件夾中初始化 Hexo 站點。
mkdir test
cd test
hexo init
初始化過程較為緩慢，hexo 將會把核心站點倉庫從遠程服務器拉到本地，并默認配置好 landscape 主題，這個主題可以根據自己的愛好來去官網主題倉庫挑選。hexo init 命令會在當前文件夾下生成如下目錄：
.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態網頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件，404、favicon、CNAME 都應該放在這里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json
有了 Hexo 的本地博客站點，在可以進行快速的博客發布前，我們還得配置當前目錄下的 _config.yml 文件，具體配置及簡介如下。
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site # 站點信息
title: 韓亦樂の博客集 # 標題
subtitle: 做最好的自己，影響該影響的人 # 副標題
description: 韓亦樂の博客集 # 站點描述，給搜索引擎看的
author: 韓亦樂 # 作者
email: hylerrix@gmail.com # 電子郵箱
language: zh-cn # 語言
timezone:
# URL # 鏈接格式
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://hylerrix.github.io/Blog # 網址
root: /Blog/ # 根目錄
permalink: :year/:month/:day/:title/ # 文章的鏈接格式
permalink_defaults:
# Directory # 目錄
source_dir: source # 源文件目錄
public_dir: public # 生成的網頁文件目錄
tag_dir: tags # 標簽目錄
archive_dir: archives # 存檔目錄
category_dir: categories # 分類目錄
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # 新文章標題
default_layout: post # 默認的模板，包括 post、page、photo、draft
titlecase: false # 標題轉換成大寫
external_link: false # 在新選項卡中打開連接
filename_case: 0
render_drafts: false
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:
# Archives
# 2: 開啟分頁
# 1: 禁用分頁
# 0: 全部禁用
archive: 2
category: 2
tag: 2
# Server # 本地服務器
# port: 4000 # 端口號
# server_ip: localhost # IP 地址
# logger: false
# logger_format: dev
# Date / Time format # 日期時間格式
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination # 分頁
## Set per_page to 0 to disable pagination
per_page: 10 # 每頁文章數，設置成 0 禁用分頁
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: freemind.386 # 主題
plugins: # 插件，例如生成 RSS 和站點地圖的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:hylerrix/Blog.git
branch: gh-pages
配置好
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
hexo init Blog
cd Blog
npm install hexo-server --save
npm install hexo-deployer-git --save
git clone git@github.com:blackshow/hexo-theme-freemind.386.git themes/freemind.386
rm -rf themes/landscape
vim _config.yml
選擇 Hexo 主題
- https://github.com/hexojs/hexo-theme-landscape
- https://github.com/wzpan/hexo-theme-freemind
- https://github.com/blackshow/hexo-theme-freemind.386
- https://github.com/giscafer/hexo-theme-cafe
Hexo 拓展
- 插件之向百度主動提交鏈接
- Hexo 第三方評論系統
- Hello，我是韓亦樂，現任本科軟工男一枚。軟件工程專業的一路學習中，我有很多感悟，也享受持續分享的過程。如果想了解更多或能及時收到我的最新文章，歡迎訂閱我的個人微信號：韓亦樂。我的簡書個人主頁中，有我的訂閱號二維碼和 Github 主頁地址；我的知乎主頁 中也會堅持產出，歡迎關注。
- 本文內部編號經由我的 Github 相關倉庫統一管理；本文可能發布在多個平臺但僅在上述倉庫中長期維護；本文同時采用【知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議】進行許可。
