hexo搭建我的博客--基礎篇

寫在前面

基於hexo搭建我的blog的文章在網上已經有不少了，不過因爲時間的緣由有不少已經再也不適用或者說留下了不少坑，本文是基於我的這些天搭建的經歷，踩了無數坑把這些坑給填上後總結出的目前最簡易也是最靠譜的方法，相信小白看着也能直接搭建一個漂亮美觀可隨時訪問的我的博客，嘿嘿，先曬一曬本身的成果，我的仍是比較滿意的--個人blog。

hexo介紹

官網上的描述是Hexo是一個快速，簡單而強大的博客框架。您可使用Markdown（或其餘語言）編寫文章，Hexo能夠在幾秒鐘內生成具備美麗主題的靜態文件。

簡單來講它就是一個主打簡單快速的博客框架，這個能夠對比下知名度更高一些的WordPress，相對來講後者更強，不過更適合有服務器的人使用，好比你去購買個阿里雲什麼的建站那種，不過咱們此次追求簡潔，不想在服務器折騰，後文會介紹具體在哪裏架設咱們的博客，並且hexo能夠魔改...給愛折騰的人用也很不錯，另外hexo基於如今大熱的nodeJS，能夠配合學習一下，這也是我選擇它的出發點之一。

正文

聲明一下，本教程主要針對windows用戶，其餘平臺用戶在某些操做上可能有些不一致，能夠在評論區或者右下角留言交流。

若有須要本教程會持續更新。

Git安裝

下載並安裝git（安裝就是一直next就能夠）

git主要用於版本控制，另外這裏hexo的操做不少都須要在git bash進行，否則會出現奇怪錯誤，想要了解更多git知識能夠參考如下連接：Git教程--廖雪峯網站。固然，直接跟着本教程走也是徹底沒問題的。

NodeJS安裝

關於NodeJS的一些介紹能夠稍微看一下這篇文章--NodeJS簡介，在本教程中NodeJS主要用於管理下載第三方包，例如hexo，而這些工做都是npm在負責的。
1.下載並安裝NodeJS
這裏選擇最新的穩定版本v8.9.4安裝過程能夠一路next，不過推薦在選擇安裝路徑時選擇D盤，而後記住路徑名，通常狀況下是D:\Program Files\nodejs\
安裝後輸入Win+R輸入cmd打開控制檯輸入如下代碼：

node -v
npm -v

若是返回版本號即安裝完成，不然就須要配置環境變量（參考步驟2中的圖片）再測試

2.NodeJS配置
配置npm
咱們要先配置npm的全局模塊的存放路徑以及cache的路徑，最好在nodejs安裝路徑下創建"node_global"及"node_cache"兩個文件夾。以下圖：

啓動cmd，輸入

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

配置環境變量（win10能夠經過小娜查詢「環境變量」找到入口），以下圖打開

框中的三條記錄是必須的（路徑改成大家本身的路徑）

測試是否配置完成，能夠安裝express來進行測試，打開cmd，輸入

npm install express -g

完成後在node_global目錄下查看是否存在express目錄便可。

hexo安裝

打開git bash，爲了不出現錯誤後面的操做在git bash進行
首先新建一個存放hexo文件的目錄，例如在D盤根目錄新建hexo文件夾，而後cd到該目錄下，開始安裝

$ cd D:hexo/     #換成你的目錄
$ npm install -g hexo-cli  #安裝hexo腳手架
$ hexo init      #Hexo自動在當前文件夾下下載搭建網站所需的全部文件
$ npm install      #安裝依賴包

$ hexo g         #完整命令爲hexo generate，生成靜態文件
$ hexo s         #完整命令爲hexo server，啓動服務器，用來本地預覽

用瀏覽器訪問http://localhost:4000/，這時就能夠看到了一個比較漂亮的博客了，這個是hexo的默認主題landscape，而咱們會使用的是NexT主題，這個在後面會說到如何配置。

Github/Coding

本地博客搭建好了接下來是要把它部署到網上，這裏能夠選擇github和國內的coding平臺，後者在打開本身網站時會跳出廣告，前者訪問速度比較慢，你們自行選擇，而後我如今的話是兩個同時在使用。
註冊部分我就不說了，若是兩個都註冊的話建議名字取相同的。下面詳細說一下github和coding的Pages服務如何建立
1.Github Page
打開github主頁，新建倉庫（repository），這裏要注意倉庫的名稱，好比個人賬號是alvabill，那麼倉庫名稱應該是：alvabill.github.io。

2.Coding Page
Coding的操做和github相差無幾

新建一個名爲 {user_name}.coding.me 的項目。{user_name} 指您本人的用戶名，例如個人用戶名爲alvabill

配置SSH

以上過程完成後就是把hexo生成的靜態頁面上傳了，覺得要結束了嗎，還沒呢，這裏還須要配置SSH，首先要本地生成公鑰私鑰

$ ssh-keygen -t rsa -C "你的郵件地址"

引號裏面的內容輸入你的郵箱地址，而後回車，會提示你文件保存的路徑，這時候按回車鍵確認，而後會提示你輸入密碼，輸入便可（輸入密碼是看不到的），而後會確認輸入一次，就能夠在剛剛的路徑看到生成了兩個文件，一個是id_rsa，另外一個是id_rsa.pub，用sublime打開id_rsa.pub而後選中裏面的所有內容，複製下來。
打開GitHub或Coding的SSH頁面
Github：setting-->SSH and GPG keys-->New SSH key

Coding：

發佈

打開D:\hexo，用sublime打開_config.yml文件，文件最後能夠看到

deploy:
  type:

修改（注意要換上本身的連接）

deploy:
  type: git
  repository: git@github.com:yourname/yourname.github.io.git   #發佈到github
  #repository: git@git.coding.net:yourname/yourname.git            #發佈到Coding
  branch: master

或者同時發佈到兩個平臺：

deploy:
  type: git
  repository:
    github: git@github.com:yourname/yourname.github.io.git,master
    coding: git@git.coding.net:yourname/yourname.git,master

ctrl+s保存修改。
打開git bash在當前目錄輸入如下命令：

$ hexo d         #完整命令爲hexo deploy，將本地文件發佈到page服務平臺上

如遇遇到異常能夠

$ hexo clean && hexo g
$ hexo d

若是出現如下異常

ERROR Deployer not found: git

嘗試輸入如下命令，而後從新執行剛剛的兩條命令

$ npm install hexo-deployer-git --save

這時候若是彈出一個對話框，輸入在github/coding上面的用戶名和密碼便可
這時候咱們就能夠在瀏覽器輸入https://yourname.github.io 或者https://youname.coding.me 打開

更改主題

D:\hexo目錄下的theme文件夾下存放的就是博客的主題，hexo即是依據主題來生成靜態文件的，挑選主題能夠在官網https://hexo.io/themes/ 查找，根據本身的喜愛來挑選。
下載主題的方式以下：

$ cd your-hexo-site  #eg:D:\hexo
$ git clone {主題連接} themes/{主題名稱}

啓用主題的方式也很簡單
sublime打開上文提到的hexo目錄下的_config.yml，ctrl+f輸入theme查找這個關鍵字，修改其主題名稱爲下載的主題名稱便可。

theme: {主題名稱}

以本人使用的next主題爲例：
下載最新版：

$ cd D:hexo/
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

修改hexo目錄下的_config.yml

theme: next

具體能夠到主題官網看看--NexT

域名申請

通過以上過程咱們已經實現了一個能夠即時訪問的我的博客，不過咱們想要的是一個更酷的更個性化的域名，下面就看一下如何申請一個免費的域名而後配置到咱們的github/Coding Page上面，實現以我的域名訪問本身的博客。
1.免費域名
這裏推薦一個網站Freenom，點進去註冊，註冊以後按照如下步驟進入下面這個頁面，而後就能夠在輸入框處輸入你喜歡的名字查找域名了

既然是我的博客，那固然仍是找本身暱稱啦，例如個人暱稱，查找有免費的域名後就點擊加入購物車~

最後別忘了拖到最後點擊確認購買

這裏能夠選擇免費一年，域名快到期前的一個星期會發郵件提醒續期，續期也是不要錢的，也就是能夠一直無償使用了。點擊continue確認而後填寫一堆信息後就能獲取到了。

回到初始界面後查看本身的域名，能夠看到剛剛購買的域名已經在列表下了

2.使用第三方DNS解析工具
雖然freenom自身也能進行DNS解析，可是畢竟不適合國內的朋友使用。因此咱們使用國內的DNSPOD、CloudXNS等第三方DNS工具。
這裏介紹如何使用CloudXNS管理，一如既往的先註冊，這裏好像須要身份證驗證了，挺麻煩的，不過爲了咱們的域名能好好的用上，仍是隻能選擇原諒他啊。
進入控制檯-->個人域名，點擊添加域名，例如剛剛弄到手的alvabill.ga

而後會跳出這麼一個提示

意思就是要到freenom那邊把域名接管過來，好的，咱們先記住那一段藍色字

lv3ns1.ffdns.net
lv3ns2.ffdns.net
lv3ns3.ffdns.net
lv3ns4.ffdns.net

打開freenom剛剛的那個界面，點擊對應域名的manage Demain按鈕進入域名管理界面

進入NS服務器管理界面

選擇Use custom nameservers (enter below)，而後把剛剛記錄的那四段字符串複製粘貼進去，點擊change nameservers

完成，回到CloudXNS，等半分鐘刷新一下就有了，能夠如今就點擊開啓，或者以後配置好了點擊開啓。

域名綁定Page服務

1.添加記錄
以下爲個人域名的記錄，記錄值分別爲coding page和github page的網址，大家只須要修改這兩個值，其餘和個人同樣配置即可。若是是隻使用一個page服務就只須要兩條對應的記錄，而後記得要把線路類型都設置爲全網默認哦。

2.配置Page服務
GitHub：
進入{yourname}.github.io倉庫-->Settings，向下找到如下界面，在紅框處填入你的域名

到D:\hexo\sourse目錄下（即你安裝hexo的目錄下的sourse目錄下）新建文件CNAME，用Sublime打開填入你的域名，如alvabill.ml，保存。
而後到D:\hexo目錄下用sublime打開_config.yml，ctrl+f查找skip_render，而後改成

skip_render:
  - README.md  
  - CNAME

這個指令就是能夠跳過CNAME和README.md文件，防止每次hexo從新渲染把它們清除掉。這裏的README.md無關緊要，最好仍是有，由於每一個github項目都須要一個readme文件，添加位置和CNAME同樣。

Coding：
進入項目-->pages服務，填入域名，綁定~

最後從新佈置項目：

$ hexo clean && hexo g && hexo d -g
$ hexo g && hexo s   #如需本地預覽，執行這一條

瀏覽器輸入你的域名回車，就能夠成功訪問你的我的博客了！

總結

摸索了一段時間才完成的，仍是頗有成就感的，比較遺憾的是並無很好地記錄下本身搭建這麼一個網站的過程，教程寫完後總感受漏了什麼，當時遇到的問題應該仍是挺多的，再加上從新寫博客時沒法再次親身經歷那種由無到有的過程，不免會有很多疏漏的地方，歡迎你們在評論區或私戳我進行討論，遇到什麼問題也歡迎提出，我會及時地進行修正的。下一篇文章將介紹如何優化以及個性化Next.mist主題。若是你也喜歡這個主題的話，能夠繼續關注個人更新~~