[乾貨]如何在一天以內搭建以你本身名字爲域名且具有cool屬性的我的博客

對程序員而言，最好的簡歷就是我的博客和GitHub

我的博客

每一個優秀的程序員都會有我的獨佔的一方網絡空間，那裏是他我的的舞臺，據說過他的人會逐漸匯聚進來，認識他，熟悉他，鼓勵他，讚賞他。而對他我的而言，他有了一個能夠暢所欲言的小房間，他能夠專研學術，聊聊情懷。同時和喜好他的讀者成爲好友，共同成長。

這難道不是一件很cool的事情嗎？

先當作果

教方法前先來看看最終的效果吧。http://wingjay.com是本人搭建的我的博客，可做爲模版參照，主要特性有如下幾點：

1. 我的域名: wingjay.com

2. 無需購置服務器，本站同時掛載在Github Pages 和 GitCafe Pages上，免服務器費的同時還能作負載均衡，想一想還有點小激動

3. 在GitHub上同時管理你的博客和相應代碼，不再用擔憂博客遺失

4. SSL支持，即"http://" -> "https://"，更安全也更高大上

再看兵器

• 博客框架：Hexo 3，這是一款能快速、簡潔且高效的博客框架，支持Markdown編輯，自動渲染出漂亮的靜態頁面。

• 前端主題：Next，效果參考http://wingjay.com

• 域名購買：相似萬網的平臺均可以，你能夠選購本身名字的域名，一年幾十元左右，兩杯咖啡的錢。

• SSL：CloudFlare

抄起傢伙

本文寫做方式是安裝流程主線 + 優質參考文章。因爲網絡上關於Hexo搭建博客的教程玲琅滿目，若讀者徹底本身動手則要一篇篇找，浪費時間走彎路；相反，若做者悉數摘抄進來，反倒未必符合各人狀況，且不利閱讀。

因此，主線講解思路，參考深刻閱讀。

下文以搭建 http://wingjay.com 我的博客爲例。

GitHub Pages

在不購買服務器的前提下，咱們的網站須要掛在GitHub Pages上。

1. 你須要擁有一個GitHub帳號，去完成新手任務吧。

2. 進入GitHub Pages，一步步作，完成後就能在瀏覽器打開http://wingjay.github.io了。

至此，咱們已經利用GitHub Pages搭建好了我的博客雛形了。下面要作的，就是個性化了。

安裝Hexo博客框架

通過上面步驟，咱們已經擁有了一個初步域名：http://username.github.io 加一個免費網絡空間了。比如房間有了，但尚未任何傢俱。因此下面咱們須要把空白的博客豐富起來。

放心，不須要你手寫一大堆html、css文件，也不用找jQuery來實現酷炫的頁面效果。Hexo是一款博客框架，它會幫咱們搭建。

安裝Hexo

參考中文文檔或英文文檔。完成該步後，你的電腦便擁有了Git、Node.js和Hexo。

GitHub管理

爲了讓本身將來的博客和代碼處在git管理之下，咱們要把剛剛在Github上博客項目拉到本地。如本人建立的https://github.com/wingjay/wingjay.github.io，在本地建立文件夾，名字任意，此處設爲myblog，進入該文件夾，把項目代碼clone下來。

git clone https://github.com/wingjay/wingjay.github.io

好了，此時會自動在myblog目錄下建立子文件夾wingjay.github.io,那裏就是咱們博客的代碼，之後的操做都在git的管理之下了，此時默認的branch爲master。

初始化Hexo

請參考文檔。init命令中的<folder>就是文件夾wingjay.github.io。初始化後，wingjay.github.io裏面就已經有完整的Hexo框架了。

熟悉Hexo

爲了讓讀者快速瞭解Hexo，我做幾個簡單介紹吧。固然，更多的仍是須要仔細閱讀文檔才能瞭解更詳細。

• _config.yml是總體的配置文件，不少基礎配置、插件配置等都須要在裏面進行。要注意的是，該文件格式要求極爲嚴格，缺乏一個空格都會致使運行錯誤。小提示：不要用Tab縮進，用兩個空格符。

• layout，包括draft(草稿)、page(頁面)、post(文章)。這個就是三種文件的基本格式，其中post是你發表的文章，會顯示在你的網站裏，一篇post會包括title標題、date日期、tags標籤等信息；draft是草稿，只有你在本地能看到，必需要publish後才能成爲post，draft和post差異是date，由於draft沒有發表，因此不須要指定日期。page是一個頁面，對應一個新的html頁面，好比博客內容展現頁是一個頁面，留言本也是一個頁面。

• public文件夾，這個文件夾是最終會發布到網站上的真實內容。怎麼理解呢？咱們能夠把public文件夾看成是真正的被用戶看到的，而其餘的source、themes等都是爲public服務的。Hexo裏有一個很重要的指令hexo generate，這個指令就是利用全部代碼裏的配置信息、source裏寫的文章、themes裏的樣式，共同生成最終的靜態html文件，存入public文件夾內。在咱們執行了發佈指令hexo deploy後，就會把public的內容部署到GitHub Pages上。當用戶在訪問咱們的博客時，他們會看到public裏生成的html文件。這個概念很是重要，即代碼和真實靜態頁面是獨立的。

• generate和deploy，generate會把咱們的配置、文章和主題結合起來生成一堆酷炫的html靜態文件放在public裏面。但此時用戶還看不到本地public文件裏的頁面，咱們必須用後一個指令deploy才能把靜態文件部署到GitHub Pages上。不過，在部署前，須要配置讓它自動部署到咱們前面建立的Github項目中。

• deploy相關配置。爲了可以讓項目自動把public文件夾的內容部署到GitHub項目中，咱們能夠按部署文檔進行配置，其中選擇的branch爲master。此後，每次運行deploy後，項目就會自動把public文件夾內容所有覆蓋到當前的GitHub項目master分支上。

• 代碼和靜態文件分開管理。根據上面知道，每次部署後，public文件內容會覆蓋掉項目整個master分支。這樣能夠實現網站靜態文件的版本控制，可是，仔細對比這個master分支，咱們會發現裏面只剩下靜態文件了，咱們的代碼好比source、themes通通沒有了，這就致使沒法對代碼進行版本管理了。這意味着我換一臺電腦，我就再也找不到代碼了，只剩下一堆以前編譯出來的靜態文件。因此，爲了對代碼也進行版本控制，咱們建立一個新的分支：code，而後在這個分支裏進行代碼控制，master裏則保存部署的新的靜態文件。你們能夠自行比對這兩個branch的內容差別。

配置Hexo

作一些基礎配置便可，請參考配置文檔

小結

到這裏，咱們已經完成了hexo的配置，咱們能夠分別管理代碼和靜態文件。執行deploy操做後，刷新你的網頁 http://username.github.io 你就能看到默認的內容了。

但此時仍是默認主題，不夠美觀，因此下一步要配置Next主題。

配置主題Next

Hexo主題很是多，能夠參考豐富多彩的Hexo主題，本文選Next爲主題，樣式參考個人博客。

進入配置階段，最好的文檔仍是官方文檔，簡單得不能再細緻了。下面只提幾點注意：

• 第三方評論系統。評論系統很重要，你能夠與讀者進行更多交流，配置也簡單，建議採用DISQUS，更國際化一點，配置見此。另外，前期建議開啓不登錄評論，即在Disqus的Comment Rule裏容許Guest comment。

• 建立留言板。熟悉page的建立與使用，參考這裏

• 給本身博客作SEO。有好的SEO便於搜索引擎索引你的網站，隨着之後讀者增多，他們能夠更好搜索到你的網站。具體方法見此

替換本身的域名

好了，通過上面的步驟，博客已經擁有了一個全新的主題啦。

下面，咱們要對域名 http://wingjay.github.io 下手啦。

購買域名

速速前往萬網或相關域名購買網站，按本身名字挑選一個閃閃發光的我的域名吧！

域名解析_1

以購買的域名wingjay.com爲例，咱們但願在訪問這個域名時能自動進入Github Pages，因此咱們要在萬網創建一個CNAME紀錄來幫咱們作一個域名跳轉：wingjay.com -> wingjay.github.io，www.wingjay.com -> wingjay.github.io。添加方法參考這裏，添加後能夠看到兩條記錄：

而後萬網會在世界各地的DNS服務器上添加這兩條記錄，當用戶訪問wingjay.com時會自動去訪問wingjay.github.io。

域名解析_2

可是，此時並不能成功訪問，由於Github Pages是有限制的，它不容許任意域名都跳轉過來，而是只限制一個域名，並且這個域名必須聲明在CNAME文件中。

因此，咱們須要添加一個CNAME文件到項目的master中才行，參考這裏。讀者能夠參考本人的CNAME文件內容。

不過，對於Hexo 3，這裏有一個坑要注意：你們應該還記得上文說的，master分支裏的內容都是自動生成的，並且會徹底覆蓋以前的內容。若是咱們直接建立一個新文件CNAME，填好域名。但會發如今下一次部署後這個文件就消失了。不用驚訝，由於hexo並不會自動生成CNAME文件，因此在部署時被覆蓋刪除了。

因此，咱們就須要這個CNAME工具hexo-generator-cname，這時會自動在public裏生成一個CNAME文件，把你的域名加進去再部署一下吧！

HTTP -> HTTPS

HTTPS是安全版的HTTP協議，它在http協議與TCP之間加入SSL層，採用端口443，不只會對傳輸數據加密，還會進行身份驗證。固然我的博客並無強制性要求採用該協議，這也只是本人的好奇而爲。

目前Github Pages已經支持https了，可是不支持自定義證書。不過咱們能夠利用CloudFlare來實現。具體實現能夠參考這裏。

說明：po主網站的https正處在申請中

總結

通過上面的步驟，咱們已經可以經過訪問本身的域名進入本身酷炫的博客了。本文的任務也就告一段落。

除了上面的功能，本人還完成了支持雙域名同時登錄，其中，支持雙域名的解決思路是考慮到Github Pages的CNAME紀錄只容許添加一個域名，因此本人又在Gitcafe上部署了一套。不過考慮到這點你們不必定能用的上，就沒有作介紹，有須要的話能夠看下文的聯繫方式聯繫我。

關於做者wingjay

歡迎各位關注
個人Github https://github.com/wingjay
和
個人我的博客 http://wingjay.com
若是有問題，能夠給我留言或發郵件:yinjiesh@126.com

感謝！