Hexo+github pages搭建我的獨立網站，綁定域名全教程

寫日誌能夠記錄咱們的學習、有趣的經歷等等，做爲一個程序員，寫博客更是顯得尤其重要，這不只能夠記錄咱們的技術學習過程，還能讓咱們在寫做的過程當中梳理本身的知識，若是可以與網友交流，那更是有利於雙方的技術成長。

1 爲何要選擇Hexo？

之前咱們常常在一些知名的博客平臺上面寫博客，如CSDN，博客園 ，51CTO等等。可是這些平臺功能都大同小異，可是有些專業化了，大部分都是寫技術博客，若是你想在上面分享個生活上有趣的事或者寫寫文學文章之類的，就顯得有點不太合適了。簡書其實也是個不錯的平臺，可是太偏向文學了。

所以我想搭建一個屬於本身的獨立網站，能夠在上面集中發佈和管理本身的日誌和其餘一些東西，另外一方面也能夠在後期進行個性化定製。

我的搭建網站基本上有三個選擇：

本身動手前端後端一步一步開發。
使用成熟的wordpress平臺。
託管在其餘平臺，好比GitHub。
複製代碼

若是你是一個大學在讀的學生，我以爲你有時間的話能夠選擇第一個，就是前端後臺一塊兒開發，在這個過程當中能夠學習到不少東西。博主以前就使用 springboot+thymeleaf+bootstrap+mysql 開發過一個我的網站，這個過程仍是很是不錯的，能夠對整個涉及到的技術進行了解學習，增長企業級開發的經驗。

可是一、2都須要花一筆錢去租用服務器，也是有點小貴的。所以能夠考慮如今比較成熟的Hexo，它是一個快速、簡單和強大的博客框架。你能夠用Markdown編寫文章，Hexo能夠在幾秒鐘內生成具備漂亮主題的靜態文件。而後託管在GitHub上面便可完成免費博客啦。

Hexo官網

2 準備工做（Windows 10系統）

2.1 安裝nodejs

由於Hexo須要nodejs環境，所以須要先下載安裝Nodejs。點擊NodeJs官網，下載最新版本。

下載好一直next，選擇一個文件夾位置在一直next便可完成，這個步驟很簡單，就不放圖了。

2.2 安裝git

點擊git官網，下載安裝包。

點擊next，選擇文件夾位置，而後一直next到底就好了，選擇默認配置就好，默認配置會將環境變量配置好的，不須要搞得花裏胡哨的。安裝好後鼠標右擊應該有下圖這兩個選項了，出現就表明安裝成功了。

3 使用Hexo

3.1 安裝Hexo

上面環境搭建好以後，在桌面點擊鼠標右鍵，點擊 「Git Bash Here」 ，輸入如下兩條命令。

$ npm install -g hexo-cli
複製代碼

提示：輸入的時候不要輸入 $ 了，由於命令行原本就已經有了。下載須要幾分鐘，請耐心等待一下。

能夠在複製以後在git窗選擇 Shift+Insert 粘貼。有一些警告WARN是不影響使用的，放心。

3.2 初始化Hexo

安裝好Hexo以後，新建一個文件夾，如 E:\HEXO ，而後在該文件夾內鼠標右擊，選擇 "Git Bash Here" ，輸入如下命令。

$ hexo init
複製代碼

稍等片刻便可完成，如圖：

文件結構如圖所示：

scaffolds是模版文件夾，當你新建文章時，Hexo 會根據 scaffold 來創建文件。

source文件夾是存放用戶資源的地方。

themes是主題文件夾，Hexo 會根據主題來生成靜態頁面，待會咱們會更換成比較流行的nexT主題。

而後再輸入命令行進行本地調試，便可看到初始效果啦~

$ hexo s --debug
複製代碼

訪問http://localhost:4000/便可看到效果：

4 更換主題爲NexT

上面雖然本地能夠調試成功了，可是默認的主題實在不是特別好看。你能夠選擇去官網選擇本身喜歡的主題，官網主題連接https://hexo.io/themes/

本篇教程選擇的是當前流行的NexT主題，這個主題是我感受用過的最好的一個了。

4.1 下載NexT主題

進入剛剛你建立的文件夾的themes裏，好比個人 E:\HEXO\themes ，鼠標右擊選擇「Git Bash Here」輸入如下兩條命令中的一個：（這兩個是同樣的，只是有同窗反應第一條命令不行，第二條就能夠。）

$ git clone git@github.com:iissnan/hexo-theme-next.git

$ git clone https://github.com/iissnan/hexo-theme-next
複製代碼

此時 themes 文件夾便多了一個next主題的文件夾。

4.2 修改配置

打開 E:\HEXO （你的hexo根目錄）下的 _config.yml 配置文件

找到下面這段代碼

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
複製代碼

將langscape替換成hexo-theme-next

theme: hexo-theme-next
複製代碼

從新在項目根目錄下進行本地部署調試

$ hexo s --debug
複製代碼

便可看到效果

5 部署到github

5.1 註冊GitHub

若是你尚未GitHub帳戶的話，去GitHub官網免費註冊一個就行了。 點擊sign up

儘可能取個好聽的名字

5.2 新建倉庫

新建的倉庫名必需要是 yourusername.github.io ，好比個人就是huangjianxian.github.io ，不然等下不能綁定GitHub pages 訪問。

5.3 配置SSH密鑰

爲了使本地能夠跟遠程的github創建聯繫，須要在本地配置SSH密鑰，這樣咱們就能夠在本地直接提交代碼到GitHub上。 若是你是第一次配置SSH，則配置一下git的username 和 email

$ git config --global user.name "你要設置的名字"
 $ git config --global user.email "你要設置的郵箱"
複製代碼

以後生成SSH密鑰：

$ ssh-keygen -t rsa -C "你剛剛設置的郵箱"
複製代碼

若是不須要設置密碼的話，連續三個回車就行了。在這以後會獲得兩個文件： id_rsa 和 id_rsa.pub 找到id_rsa.pub文件，用記事本打開，複製其內容。路徑： C:\Users\J（你的用戶名）\.ssh

5.4 在GitHub上添加SSH密鑰

登陸GitHub，在Settings裏面選擇 SSH and GPG keys ，而後點擊 New SSH Key

完成以後測試一下，在git bash輸入：

$ ssh -T git@github.com
複製代碼

若是看到了你的用戶名，則表示配置成功了。

5.5 初始化GitHub pages

打開GitHub上面的倉庫，點擊settings

拉到下面，在GitHub Pages那裏選擇一個主題，肯定以後便可經過域名來訪問啦~好比個人https://huangjianxian.github.io

5.6 將本地Hexo文件部署到GitHub上

登陸GitHub，打開以前新建好的倉庫 username.github.io ，clone，選擇SSH類型

打開本地站點配置文件，如E:\HEXO （你的hexo根目錄）下的 _config.yml 配置文件。

這裏整個項目有兩個_config.yml，文件。

一個是位於你的hexo根目錄下面的，叫作站點配置文件。

另外一個是位於你的主題文件夾目錄下面的，叫作主題配置文件。

這裏打開站點配置文件，找到deploy，好比個人是：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:huangjianxian/huangjianxian.github.io.git
  branch: master
複製代碼

將repo替換成你的GitHub倉庫的SSH連接便可。

在你的項目根目錄下使用git bash，輸入命令部署：

$ hexo d -g
複製代碼

若是有同窗是出現這個報錯：

ERROR Deployer not found:git
複製代碼

則在git bash輸入如下命令：

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

再從新hexo d -g部署一下應該就能夠了，若是還不行，多是node.js版本過低之類的（以前就有人踩過這個坑）

稍等片刻以後，輸入你的倉庫主頁地址訪問看看~好比個人是 huangjianxian.github.io

6 綁定本身的域名

有朋友可能以爲上面這種域名太難記了，並且很差看。這時候你能夠經過本身購買一個域名，而後綁定到GitHub pages上。

去阿里雲購買一個域名

查詢，選好以後加入清單付款便可。

買好以後去域名控制檯，選擇解析

以下圖所示，記錄值改成你的 username.github.io ，而後肯定。

而後在項目文件夾下面的source下面，好比個人 E:\HEXO\source ，新建一個文件 CNAME（注意是文件，不是文件夾） 而後用記事本打開，填寫你的域名。好比個人，hjxlog.com

再使用git bash部署一次

$ hexo d -g
複製代碼

這時候應該就可使用本身的域名訪問項目了（若是還不行多是DNS解析比較慢，稍等幾分鐘）。

7 總結

Hexo+github pages 是我認爲我的搭博客比較好的平臺了，不須要花費不少錢去維護服務器。只須要搭建好以後安心寫博客就好了。

這仍是我第一次寫這麼長的博客，寫完長舒了一口氣，寫了好幾個鐘頭，比我想象中的要久。不過仍是堅持了下來，但願之後也常常這樣！努力！奮鬥！寫做不易，你們轉載的話請註明出處，謝謝~ 若是你們在這個搭建過程當中有什麼問題，歡迎評論~