5分鐘 0元搭建我的獨立博客網站 Hexo+Github pages

文/北媽 

首發原創來自 前端最帥的公衆號：前端你別鬧  請微信搜索關注 

前端你別鬧：多是妹子最多，和前端最帥的公衆號！

閱讀本文須要 3.5分鐘

一

直接入正題，先看北媽我的博客地址：http://www.guoxiaobei.com

這個時代，普通人擁有本身的獨立博客或網站有多麼重要不用再說了，更不用說咱們是程序員。

好久以前答應過你們，點贊超過200，就放出獨立博客教程，結果那篇文章直接到了300贊，無法逃了。

並且也足以證實，你們是多麼渴望擁有一個本身的網站。

但傳統意義上，創建網站是須要花錢的，服務器、數據庫等，並且價格還不菲呢，那怎麼辦？

聰明人早有辦法，那就是利用github + 自動生成程序+幾句命令直接組建網站，其實網絡有不少配置教程了。

若是以爲北媽寫的很差，能夠自行搜索，大同小異，只不過我寫的更爲清晰、易懂。

先看下個人博客在github的 開源地址：
https://github.com/xiaobei666/xiaobei666.github.io.git

因爲這個屬於教程系列，涉及到一系列命令、代碼、配置，因爲在微信公衆號很差展現，長篇也說不明白。

因此我把這個【5分鐘 0元搭建獨立博客系列】分爲3篇，今天先放出「一」。

但願你們多多轉發和收藏，好東西千萬不要捂着。

二

說明條件：Github Pages + Hexo + Node.js。

系統環境：我是MAC電腦的OSX系統，因此截圖和命令都是mac的，但和windows同樣，這個不用擔憂。

大致流程：其實簡單，就是命令

1. 擁有一個github pages

2. 在本地電腦裏配置hexo的環境（hexo與github pages綁定，寫博文修改博文等，生成靜態博客)

3. 綁定本身的域名（也能夠不用綁定，github pages有二級域名，只不過綁有一個屬於本身的域名，纔算真正的我的網站）

這是一篇有關如何使用Github Pages和博客程序 Hexo搭建本身獨立博客的入門詳細教程，裏面介紹瞭如何將Hexo部署到本身的Github項目中，而且能夠獨立訪問。

第一篇，先介紹 Github Pages + Hexo 是什麼，而且安裝命令和配置，達到本機訪問。

第一步：關於Github、Github Pages創建倉庫

1、Github的優勢

• GitHub是基於git實現的代碼託管。理論上能夠創建無限個網站。

• GitHub能夠無償使用，而且快速穩定。

• Github上面不少開源庫，因此你懂得。

2、什麼是Github Pages

Github Pages能夠被認爲是用戶編寫的、託管在github上的靜態網頁。

它是github官方提供的，靜態解決方案，就是爲了讓你展現本身的文檔和網頁效果

3、爲何要使用Github Pages

• 能夠綁定你的域名(但暫時貌似只能綁定一個)。

• 簡單快捷，使用Github Pages能夠爲你提供一個免費的服務器，免去了本身搭建、購買服務器和寫數據庫的麻煩。

• 因此，這個Github Pages 其實就是傳統意義的放網頁的服務器，明白了麼？

三
不用多問，按步驟開始

一、創建你的 Github Pages 倉庫

建立Github Pages比較簡單，只要你有一個github帳號在建立一個倉庫就好了，可是這個倉庫是有規則的，其格式必須爲：你的名字.github.io

好比個人：xiaobei666.github.io

而後根據提示一直下一步就行，很是簡單。

若是你連github 帳戶都沒有、不會建立，那麼請你先去熟悉下github，否則咱們無法往下玩兒了。

若是你沒聽過github，我以爲你能夠退出程序員行業了。

二、安裝 Hexo

前提：必須安裝Node.js ，也就是要用npm命令來安裝。若是你身爲2019年的前端，連npm 命令都沒用過，我請你趕忙學習了。

我這裏默認你安裝了node.js，若是我還交你怎麼安裝nodejs，是否是還要交你怎麼開機？

Hexo介紹

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

Hexo的安裝網上有不少教程，但不少都是粘貼複製，過期、過時的命令，並且版本不一樣，命令也有差別，因此最好的仍是參考Hexo官方的安裝教程來一步一步走。

Hexo安裝

安裝命令：$ npm install -g hexo-cli

打開你的系統終端，windows系統能夠鼠標右鍵點擊Git Bash Here，輸入npm命令便可安裝。

mac系統的不用介紹了吧。

npm install hexo-cli -g

npm install hexo-deployer-git --save複製代碼

第一句是安裝hexo。

第二句是安裝hexo部署到 git page的deployer，兩個都須要安裝。

建立Hexo文件夾

安裝Hexo完成後，根據本身喜愛創建目錄（如F:\Blog\Hexo），直接進入F:\Blog\Hexo文件夾下右鍵鼠標，點擊Git Bash Here，進入Git命令框，執行如下操做。

$ hexo init
 
$ npm install 
複製代碼

安裝 Hexo 完成後，Hexo 將會在指定文件夾中新建所須要的文件。整個過程都是自動化的。

執行 $ npm install 後，會根據 package.json 裏的信息，自動安裝插件，全部過程不用管。

這時候，其實hexo已經在你的機器上了，也就是咱們常說本地開發版。

若是你想看本地效果，就這樣。

執行下面語句，執行完便可登陸 localhost:4000 查看效果

hexo generate
hexo server複製代碼

到這裏，篇幅已經很長了，因此今天第一篇到這裏結尾。

已經實現了，讓你看到廬山真面目，只不過這個「廬山」 ，尚未正式對外發布。

但你已經能夠在本地服務器，經過傳統的 localhost:4000 查看而且修改了。

至於怎麼寫博客，你先看下這個hexo的官方說明記錄，先了解個大概，後面第二篇，很快上來。

hexo 中文官方文檔： https://hexo.io/zh-cn/docs/setup.html

三

天天金句：「哪裏有人喜歡孤獨，只不過不亂交朋友罷了，那樣只能落得失望」

延伸閱讀：

1. 年末了，當心這些現象。別再無動於衷

2. 找工做如何避免培訓機構騙局
3. 我爲什麼一直強調外包公司別去

天天只想聽大家說：小北最帥！

長按掃碼關注我

前端你別鬧

文/北媽

閱讀本文須要 5.1分鐘

一

接着第一篇 5分鐘創建獨立網站系列，戳這裏：《5分鐘 0元搭建我的獨立博客網站（一）》

這個Hexo、GitPages系列，其實網絡不少教程，但都不夠易懂甚至很亂，這個系列沒什麼技術含量，但對步驟的合理梳理，卻要求很高。因此，我應粉絲要求，抽空出一個這個系列。

本系列分爲三篇（說明一下：此係列，寫的很詳細、也很累，比網絡其餘教程都清晰易懂，因此每篇都會打破我，每個月底纔開一次讚揚的規矩，這幾篇我都會開讚揚，O(∩_∩)O）。

第一篇，我簡要介紹瞭如何在本機安裝、運行、預覽 hexo博客系統；還有和github的關係，github起了什麼做用。不明因此的，請去回顧第一篇，這裏不在闡述，

今天是第二篇，主要講解如何一鍵、一行命令發佈到github、gitpages；如何實現真正的外網訪問，也就是讓地球全部的人都能搜到你的網站。

第三篇講解，如何美化本身的博客頁面，畢竟「醜」，是咱們絕對不能容忍的；還有如何在靜態博客 ，一鍵添加 評論功能；並且不用你去開發；再加一個SEO 建議。

廢話不說，開始。下圖是我執行本機命令

hexo init，npm install， hexo g ， hexo s 的本地演示結果

hexo init  // 這個是：hexo自動初始化配置文件、包括全部paceage.json依賴包

npm install // 這個不用北媽解釋吧！安裝全部paceage.json裏的包

hexo g  // 這個做用是：自動將md文件，生成靜態html、css文件

hexo s  // 啓動本地hexo 服務器 http://localhost:4000/複製代碼

而後打開，http://localhost:4000 就出現了下圖本地樣式。

固然了，默認的網站title是 Hexo。我把它改了，改爲了個人標籤，做爲例子。

至於在哪裏改，下面會講解一個配置文件，一目瞭然，一看就明白應該。

二

認識目錄

若是你在第一篇的教學命令，都執行正常後，你本地hexo文件目錄應該是這樣。

先來介紹下幾個重要目錄做用，否則你會一臉懵比。

其中 _config.yml 這個很關鍵。是你博客的全局配置文件，包括和github上傳連接，都要在這裏配置。

還有，我剛纔說的網站title標題，就是在這裏

而下圖這裏， _posts 下面則是你要用makedown語法，寫的博客文章源文件。

看到了嗎？我本地第一篇文章標題是：

而後，在我本地的hello world.md裏是對應的。我寫什麼，他就更新什麼，美不美？並且他會自動刷新。

寫完，在命令行輸入執行 hexo g 以後，都會自動生成靜態文件 到 public 文件夾。而後在本地他會自動生成文章列表。

三

本地直接上傳到Github

還記得北媽在第一篇讓你在gayhub，創建的那個 xxx.github.io.倉庫嗎

這裏就要起到做用了，它要做爲你免費的服務器，來存你的博客文件了。

如今免費的服務器有了，那麼咱們寫完了文檔，怎麼從本地直接上傳呢？不可能一個文件一個文件的去上傳吧？

有方法，按個人配置好後，一行命令就能夠自動上傳到 git倉庫了。

一、執行命令 安裝 deploy git 插件

npm install hexo-deployer-git --save

// 這個是：hexo 和git自動對接上傳的關鍵組件

複製代碼

WARN 不用管它，那是建議，出現下面的提示，包就是安成功了。

二、在主題配置文件_config.yml中修改倉庫地址。

拉倒 _config.yml 最下面一行。配置

deploy:
  type: git
  repository: 
    github: git@github.com:<username>/<username>.github.io.git
  branch: master複製代碼

下圖這是個人 地址

三、配置提交 github 認證方式

注意這裏，執行hexo d，會直接提交github倉庫，若是你沒有認證github和本地的關係，會提示你輸入用戶名、密碼，已驗證你的身份。

我是推薦SSH公鑰方式認證，但其實https 方式也行。只不過每次你往上更新，可能要輸入你github 的用戶名、密碼。

就像這樣

若是不想每次更新都輸入，那你就要學會配置SSH全局公鑰了。至於怎麼配置全局ssh，我這裏原本不想講解了，就從其餘地方直接放個連接吧，大家按照這個走就好了。

在 github 上添加 SSH key 的步驟：
https://www.cnblogs.com/ayseeing/p/3572582.html

配置好你倉庫地址和認證方式後，請執行 hexo d 這個命令是把你本地的hexo博客靜態文件，一鍵上傳到github倉庫。

若是成功 會是這樣，生成一堆。

也就是把我本地的 http://localhost:4000/ 的文件，發佈到xiaobei666.github.io 倉庫。

原本這個倉庫剛創建是空的。而後執行 hexo d而且成功後，刷新後是這樣的。

那麼ok，這裏你們夥都熟悉了，就是經常使用的 css html img這些，純淨的靜態資源。

裏面有一個index.html.那麼這個就是你主頁的訪問地址。如今你和其餘人在瀏覽器輸入 ：https://xiaobei666.github.io (固然是你本身創建的名字)

就能夠直接在線訪問，本身的博客了。

四

這裏說明一下：

其實 GitHub Pages 這個服務，是github官方給你們的福利，只要你創建的倉庫 名稱符合 xxxx.github.io 這個規則名字，就默認開啓 GitHub Pages。

而後你這個倉庫，只要有index.html 命名文件，理論上均可以經過 https：//xxxx.github.io 直接訪問到，懂了嗎？

至於爲什麼繞這麼大一圈，介紹那麼多命令和hexo，那是由於hexo 能夠直接美化頁面（下篇講），還有支持最便捷的makedowm 語法，一件生產靜態文件，最主要能一鍵提交到github，你想一想省了你多少時間？

彩蛋操做～ 配置真正的域名

如今默認的域名仍是 xxx.github.io，是否是很沒有感受？想不想也像我同樣有一個專屬域名呢？

北媽我的博客地址：

www.guoxiaobei.com

一、首先你須要去域名註冊商（阿里雲騰訊雲等）買一個域名，看你我的了。反正價格都差很少。

三、本機先ping github.io ，獲得真實的IP地址。

而後前往域名控制檯解析此域名到github.io的數字 ip 地址，即185.199.109.153




以個人阿里雲域名爲例，以下圖所示，添加兩條解析記錄：添加 A 記錄指向 185.199.109.153 便可。

按個人記錄，自行添加便可。

三、去根站點下source目錄中添加名稱爲 CNAME 的文件。就叫作CNAME，這裏不能錯.

文件內容是你剛纔購買的域名guoxiaobei.com，不要添加www、不要添加www、不要添加www。

四、命令行執行hexo d發佈站點到 GitHub 庫，這時在 Git 庫應該就能看到 CNAME 文件，至此自定義域名設置完畢，過個幾分鐘，使用xxx.com便可訪問站點。

ok，這篇到這裏就齊活了，完美實現了 訪問 xxx.com讓全世界的人都能看到你了。你若是還不會，請仔細研究吧。

北媽累死了，我想你應該知道怎麼作。

五

天天金句：「孤獨一人也不要緊，只要能發自心裏地愛着一我的，人生就會有救。哪怕不能和他生活在一塊兒。」