【教程向】——基於hexo+github搭建私人部落格

小舍先生發表於2019-03-27
HexoGithub

  • 前言

    1.github pages服務生成的全是靜態檔案，訪問速度快；
    2.免費方便，不用花一分錢就可以搭建一個自由的個人部落格，不需要伺服器不需要後臺；
    3.可以隨意繫結自己的域名，不仔細看的話根本看不出來你的網站是基於github的；
    4.資料絕對安全，基於github的版本管理，想恢復到哪個歷史版本都行；
    5.部落格內容可以輕鬆打包、轉移、釋出到其它平臺；

  • hexo、git配置和安裝

    ## 什麼是hexo？

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

    ## 安裝
    安裝hexo只需要幾分鐘，但前提是你的確保你的電腦中已經安裝了下列應用程式：

### 下載必須程式

  • node.js

    Node.js是一個Javascript執行環境(runtime)

  • Git

    Git是一個開源的分散式版本控制系統，用以有效、高速的處理從很小到非常大的專案版本管理。
    從上面連結下載git for windows最好掛一個代理，否則下載速度會十分緩慢，你可以參考這個頁面,其中收錄了儲存於百度雲的下載地址。

下載之後你可以在你想要建立部落格的位置新建一個資料夾，進行node.js和git的安裝，開啟安裝包，按順序安裝即可。
安裝完成後可以開啟cmd命令列檢查是否安裝完成：
cmd安裝檢查

### hexo安裝
開啟git命令列

開啟git命令列輸入以下程式碼安裝hexo

$ npm install -g hexo-cli

安裝成功

  • 建站

    安裝好hexo後執行下列操作來生成所需要的檔案

    初始化

    在你的電腦選取一個你想要存放這個網頁的程式碼的資料夾，然後在裡面新建一個hexo資料夾。

在git命令列中輸入：

$ cd /d/網頁設計/hexo
$ hexo init

初始化
初始化2

下載完成後，會在對應的hexo檔案中自動生成對應檔案。

生成檔案和啟用預覽服務

在git命令列中輸入以下命令：

$ hexo g # 生成
$ hexo s # 啟動服務

生成檔案
會在public檔案中生成相關的HTML檔案。

啟用服務
用來啟用本地預覽服務，啟用後就可以通過http://localhost:4000/來預覽部落格內容。
[站外圖片上傳中...(image-664f86-1553673077649)]
如果一切順利，訪問以上預覽連結應當出現這樣的一個預設部落格主頁。
至這一步，一個基於hexo的blog就搭建完成了。

如何將部落格部署到github

在生成部落格初始頁面後，我們的部落格還不算完成，因為我們只能看到的知識hexo提供的一個本地預覽網頁，別人是看不到的，那麼如何才能讓別人也可以訪問的到我們的部落格呢，那就需要我們把部落格部署到網上了，這裡，我選擇的是github。

註冊github賬戶和新建倉庫

首先，我們需要在github上有一個賬戶。

github官網

點選連結進入github官網註冊。
github註冊
註冊好之後點選sign in登入github。

新建倉庫
點選new repository新建一個名為你的使用者名稱.github.io的倉庫。如我的使用者名稱是gemuxiaoshe，那麼我就需要新建一個gemuxiaoshe.github.io的倉庫，這樣你之後的網站地址就可以直接使用https://gemuxiaoshe.github.io/訪問倉庫了。

配置SSH key

為什麼要配置這個呢？因為你提交程式碼肯定要擁有你的github許可權才可以，但是直接使用使用者名稱和密碼太不安全了，所以我們使用ssh key來解決本地和伺服器的連線問題。

我們在github命令列中輸入以下命令來檢測本機已存在的ssh密匙

$ cd ~/. ssh #檢查本機已存在的ssh金鑰

如果提示：No such file or directory 說明你是第一次使用git。

ssh-keygen -t rsa -C "郵件地址"

在github命令列中輸入以上命令，然後連續三次回車。最後會在你的使用者目錄下生成一個id_rsa.pub檔案,
找到並開啟它（可以直接使用記事本開啟），複製裡面的全部內容，然後開啟你的github主頁，進入個人設定 -> SSH and GPG keys -> New SSH key：
ssh key
將剛複製的內容貼上到key那裡，title隨便填，儲存。

輸入以下命令測試SSH key是否配置成功

$ ssh -T git@github.com # 注意郵箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，輸入yes

Hi liuxianan! You've successfully authenticated, but GitHub does not provide shell access.

看到這個資訊說明SSH已配置成功！

最後我們還需要配置：

$ git config --global user.name "liuxianan"// 你的github使用者名稱，非暱稱
$ git config --global user.email  "xxx@qq.com"// 填寫你的github註冊郵箱

部署程式碼到github上

在配置還SSH key之後，我們上傳程式碼就很容易了

這時候我們還不能直接使用hexo d 上傳程式碼，因為我們還有_config.yml沒有配置。
開啟_config.yml站點配置檔案,目錄為：D:\網頁設計\hexo_config.yml
找到deploy關鍵詞進行如下配置：

deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git #你的使用者名稱和你新建的倉庫名
  branch: master

配置成功之後，我們可以嘗試使用hexo d 來上傳我們的程式碼，但這個時候應當是無法上傳成功的。
它會出現以下內容：

Deployer not found: git

表示它沒有發現git

這是因為我們還需要安裝一個外掛：

npm install hexo-deployer-git --save

安裝成功後我們就可以開始上傳我們的程式碼了
首先我們用hexo g來生成一下檔案

$ hexo g

再輸入以下命令上傳程式碼到github上：

$ hexo d

上傳
上傳成功！之後你可以登入你的github主頁檢視程式碼是否上傳成功。
並且可以直接使用你之前設定好的倉庫地址https://gemuxiaoshe.github.io/登入到你的部落格主頁了。

部落格的進階學習主題的更改和優化以及部落格的建立和編寫

至此，部落格搭建才算正式完成，你的部落格將可以被訪問到。不過到目前我們只是剛剛建立了一個預設的部落格主頁，和一篇預設的部落格，且這個預設主頁當然是不可能讓我們滿意的，並且其功能也肯定會有所不足。那麼我們首先，我們還需要進行的最基本的工作就是學習如何修改和優化我們的主題，並且學習部落格的建立和編寫。

關於部落格的建立和編寫可以參考我的另兩篇博文

關於部落格主題的修改和優化可以參考下面的網站，在這裡就不進行詳細過程的介紹了

NexT 一款基於hexo的主題，NexT 使用文件詳細的介紹了基於hexo的主題NexT的使用方法，和NexT主題的配置方法，以及各種第三方服務的配置方法，同時也包括一些基本的站點檔案配置。其中配置方式是適用於多種主題的。

關於分享功能實現的補充

由於我使用的百度分享和jiathis分享均出現了問題，並且並沒有找到解決的辦法，於是使用了另外一個第三方分享服務sharesdk。

在最終嘗試了各種分享服務後還是發現我的分享功能還是沒能在基於github上實現，在網上也沒有找到相關的問題描述和解決方式。非常遺憾只能暫時放棄分享功能的使用。在之後的過程中再來補充。

# 參考

相關文章