Hexo+碼雲+git快速搭建免費的靜態Blog

做爲一個對技術有着熱情渴望的前端小白，對於寫Blog這種事也是躍躍欲試。因而乎趕忙從網上搜羅了一堆搭建我的Blog的方法，對比了下，最後傾心於Hexo這個博客框架，搭配Github/碼雲的page服務，能夠輕鬆搭建一個炫酷又不失優雅的靜態Blog（仍是徹底免費的）

前期準備工做

• 去Git官網，下載安裝Git（版本控制系統）
• 去Node.js官網，下載安裝Node.js（自帶NPM包管理工具，另外Hexo是基於Node.js的）
• 註冊一個碼雲或Github帳號（提供page服務）
• 有一個常常閱讀官方文檔的好習慣（一些簡單的安裝自行去看官方教程，這裏不會囉嗦）

爲何選擇Hexo+碼雲

• Hexo主打快速、簡潔和高效，安裝過程簡單，關鍵是它的模板主題很是華麗亮眼（這或許也是Hexo吸引了衆多妹子程序媛的緣由）

  咱們能夠看看Hexo官方對自家的定義：
  Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

• 至於碼雲 vs Github方面，碼雲做爲國內網站，訪問速度天然是比Github快一些，且更容易被SEO收錄提高博客的曝光率。

第一步：Hexo安裝與測試

1.請先安裝好Git和Node.js

2.安裝Hexo：使用cmd命令行，輸入下列命令

$ npm install -g hexo-cli

3.指定一個文件夾存放你的Blog文件（也就是根目錄）

$ hexo init <folder>  # <folder>替換成你的文件夾地址，在這個地址裏生成Hexo初始化文件
$ cd <folder>  # 進入這個文件夾
$ npm install  # 在文件夾內自動安裝Hexo所依賴的各類模塊

通過以上3步，Hexo就初始化成功了，下面咱們進行一下本地測試

4.生成靜態頁面

$ hexo generate

5.本地測試：開啓服務器

Hexo 3.0 把服務器獨立成了個別模塊，因此咱們必須先安裝 hexo-server 才能使用server

$ npm install hexo-server --save

安裝成功後，之後咱們只須要使用下面的命令就能夠開啓服務器了，開啓後默認的網站訪問地址爲：http://localhost:4000

$ hexo server

簡單的5步，一個最原始的本地Hexo博客就已經搭建好了。瀏覽器輸入http://localhost:4000就能夠看到相似以下效果。

第二步：Hexo部署前的準備工做

在localhost:4000新鮮夠了沒？接下來就是真刀真槍的幹了，咱們這裏使用碼雲進行Blog的部署(Github也是相似的方法)。

1.登陸碼雲，新建一個項目。

若是想以 http://xuek.gitee.io這種一級域名的形式訪問bolg，那麼咱們須要創建一個與本身個性地址同名的項目，如 https://gitee.com/xuek 這個用戶，在建立項目時 項目名稱應該爲 xuek。

2.在克隆/下載中，複製HTTPS裏的連接。

3.找到Blog本地的根目錄裏的_config.yml文件，找到deploy這一項，將以前複製的HTTPS裏的連接複製到repo後面，而後修改type的值爲git，而後保存便可。

通過以上3步，咱們就將碼雲和本地的Blog創建了鏈接，那麼咱們該怎麼將Blog部署到碼雲上呢？別急，接下來就到git登場了。

第三步：使用git對Blog進行版本控制

1.在Blog根目錄單擊右鍵，選擇Git Bash here

git bash就是模擬出來的小型Linux命令行

2.若是是第一次使用git的話，要先配置一下咱們git的基本信息

$ git config --global user.name+空格+你的名字(最好和碼雲的同樣)
$ git config --global user.email+空格+你的郵箱(最好和碼雲的同樣)

3.接下來咱們就能夠在Git Bash中初始化git，把Blog根目錄變成一個git能夠管理的倉庫

$ git init

這樣就可使用git管理你的Blog版本了，更多關於git的使用參見: 廖雪峯的git教程

第四步：部署Hexo到碼雲

萬事俱備，只欠東風。你有沒有發現githexo碼雲這三者已經關聯起來了？好了，下面咱們將用git把Hexo部署在碼雲上

1.在Blog根目錄下安裝Hexo的Git部署插件

$ npm install hexo-deployer-git --save

2.安裝好了Git部署插件以後，咱們就能夠輸入命令一鍵部署了

$ hexo deploy

以後會彈出一個對話框，讓咱們輸入碼雲的賬號和密碼（稍後咱們會配置網站的SSH，這樣就不用每次都輸入帳號密碼了）

第五步：使用碼雲的page服務

1.進入咱們碼雲的項目裏，會發現Blog的靜態文件已經上傳到項目中了

2.選擇服務—>Gitee Pages，咱們使用master分支，而後直接點「啓動」，便可啓動page服務。
更多關於碼雲page的說明可參考官網：碼雲Gitee幫助文檔

大功告成！點擊網站地址就能夠進入屬於你本身的Blog了！

不過咱們可沒有結束，一切纔剛剛開始..

第六步：配置SSH

有了免費的服務器(page)以後，咱們還能夠把它和咱們我的電腦做一個綁定，之後使用git通信就不用老是輸入帳號密碼，天然方便多了！

這裏不囉嗦了，最完美的配置SSH教程參見官網：生成並部署SSH key

第七步：安裝主題

Hexo使用者樂此不疲的地方就在於它各類炫酷的主題了，不過Hexo官網那點主題不夠看，更多的仍是移步這裏：有哪些好看的 Hexo 主題？

Hexo的主題基本是傻瓜式安裝，只須要將主題文件複製到Blog根目錄的themes文件夾下， 而後修改下_config.yml站點配置文件便可：

這裏咱們使用了Next主題，具體的安裝和使用方法參見官網：NexT使用文檔

第八步：新建文章

1.使用下面的命令生成一篇新文章

$ hexo new "title"

2.生成的新文章都在\source\_posts\title.md目錄下，打開後注意理解下頂部的模板參數，其餘自行編輯便可。

title: Hello World  // 文章標題
date: 2018-07-11 23:49:28  // 文章生成時間，通常默認便可
categories: text   // 文章分類目錄，可以使用[a,b,c]表示多個分類
tags: [Hexo,text]   // 文章標籤
---

// 正文部分，使用markdown進行書寫。

<!--more--> 

// 若是設置了閱讀全文選項，則more標籤如下的內容在首頁會被「閱讀全文」字樣隱藏

3.文章修改後可依照前面的方法先在本地 http://localhost:4000 進行預覽（每次須要從新啓動下sever），至於正式更新到網站上還須要看下一步。

第九步： 更新Blog

1.清除緩存文件 (db.json) 和已生成的靜態文件 (public)

$ hexo clean

2.從新生成靜態文件並自動部署到網站

$ hexo generate --deploy  # 能夠簡寫爲hexo g -d

總結

以上就是基於Hexo搭建Blog的一些基礎性內容。這個教程也只是把思路理順了一下，權當是一個分享，文章如有錯誤之處還請多多指點。

一個Blog的搭建過程看似簡單，但其中用到的知識卻很是普遍，也須要花費些時間仔細閱讀下各個官方文檔，不只要知道怎麼用，還要知道爲什麼這麼用，這也是咱們下一步要繼續研究的。

萬里長征才走了第一步，接下來就是有趣但也是很是具備挑戰性的事————個性化咱們的Blog。關於Blog主題的美化和個性化，就是一個浩大的工程了，網上關於Next主題優化的進階教程很是多，有興趣的能夠嘗試下，這裏就暫時不作討論了，往後有須要再另做一文。