github+hexo搭建本身的博客網站（一）基礎入門

 github提供的page，hexo提供的靜態博客文檔，這樣能夠搭建一個本身的一個博客網站。

使用github pages服務搭建博客的好處有：

1. 全是靜態文件，訪問速度快；
2. 免費方便，不用花一分錢就能夠搭建一個自由的我的博客，不須要服務器不須要後臺；
3. 能夠隨意綁定本身的域名，不仔細看的話根本看不出來你的網站是基於github的；
4. 數據絕對安全，基於github的版本管理，想恢復到哪一個歷史版本都行；
5. 博客內容能夠輕鬆打包、轉移、發佈到其它平臺；

 

1、github相關設置

一、在github上建立一個項目

注意：項目名稱必須爲本身   github的用戶名.github.io

 二、代碼庫的設置

開啓gh-pages功能，點擊界面右側的Settings，你將會打開這個庫的setting頁面，向下拖動，直到看見GitHub Pages。

以前是須要：點擊Automatic page generator，Github將會自動替你建立出一個gh-pages的頁面。 若是你的配置沒有問題，那麼大約15分鐘以後，yourname.github.io這個網址就能夠正常訪問了~ 若是yourname.github.io已經能夠正常訪問了，那麼Github一側的配置已經所有結束了。

如今不須要設置page generator。就能夠訪問https://saucxs.github.io/

 

2、安裝hexo

一、全局安裝hexo-cli指令

npm install hexo-cli -g

查看hexo版本

hexo -v

 

二、初始化hexo

hexo init

hexo會自動下載一些文件到這個目錄，包括node_modules，目錄結構以下圖：

 

三、開始體驗hexo

hexo g

生成靜態文件到public文件夾，沒有public文件夾就會自動建立，若是有了就會覆蓋public內容。

public文件夾的內容是要提交到github上的。

四、開啓本地服務

hexo s

hexo s是開啓本地預覽服務，打開瀏覽器訪問 http://localhost:4000 便可看到內容，不少人會碰到瀏覽器一直在轉圈可是就是加載不出來的問題，通常狀況下是由於端口占用的緣故，由於4000這個端口太常見了，解決端口衝突問題。

 

 3、如何將hexo與github page聯繫起來

 分爲3步：

一、配置SSH key

二、設置Git的user name和email

三、配置deployment

 

一、配置SSH key

若是你以前已經配置好git我的信息，請跳過這一個 步驟，直接來到

爲何要配置這個呢？由於你提交代碼確定要擁有你的github權限才能夠，可是直接使用用戶名和密碼太不安全了，因此咱們使用ssh key來解決本地和服務器的鏈接問題。

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

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

ssh-keygen -t rsa -C "郵箱"

而後連續3次回車，最終會生成一個文件在用戶目錄下，

 打開用戶目錄，找到.ssh\id_rsa.pub文件，記事本打開並複製裏面的內容，打開你的github主頁，進入我的設置 -> SSH and GPG keys -> New SSH key：

剛複製的內容粘貼到key那裏，title隨便填，保存。 

 

測試一下是否成功

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

看到這個信息說明SSH已配置成功！

 

二、設置Git的user name和email

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

設置這個是爲了便與以後上傳到github的page上。

 

三、設置deployment

配置_config.yml中有關deploy的部分：

正確寫法：

deploy:
  type: git
  repository: git@github.com:saucxs/saucxs.github.io.git
  branch: master

錯誤寫法：

deploy:
  type: github
  repository: https://github.com/saucxs/saucxs.github.io.git
  branch: master

後面一種寫法是hexo2.x的寫法，如今已經不行了，不管是哪一種寫法，此時直接執行hexo d的話通常會報以下錯誤：

Deployer not found: github 或者 Deployer not found: git

須要安裝一個插件

npm install hexo-deployer-git --save

再次輸入hexo d，就ok了。

 

 

本身的github的page，顯示以下

 

同時，你的github上的項目，代碼已經更新。

 

4、保留CNAME、README.md等文件

提交以後網頁上一看，發現之前其它代碼都沒了，此時不要慌，一些非md文件能夠把他們放到source文件夾下，這裏的全部文件都會原樣複製（除了md文件）到public目錄。

因爲hexo默認會把全部md文件都轉換成html，包括README.md，全部須要每次生成以後、上傳以前，手動將README.md複製到public目錄，並刪除README.html。

 

5、修改hexo的主題

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 自己的配置；另外一份位於主題目錄下，這份配置由主題做者提供，主要用於配置主題相關的選項。

爲了描述方便，在如下說明中，將前者稱爲 站點配置文件， 後者稱爲 主題配置文件。

PS：須要特別注意的地方是，冒號後面必須有一個空格，不然可能會出問題。

舉個栗子：

1. 安裝 NexT

載主題

若是你熟悉 Git， 建議你使用 克隆最新版本 的方式，以後的更新能夠經過 git pull 來快速更新， 而不用再次下載壓縮包替換。

在終端窗口下，定位到 Hexo 站點目錄下。使用 Git checkout 代碼：

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

2. 啓用主題

與全部 Hexo 主題啓用的模式同樣。 當 克隆/下載 完成後，打開 站點配置文件， 找到 theme 字段，並將其值更改成 next。

啓用 NexT 主題

theme: next

到此，NexT 主題安裝完成。下一步咱們將驗證主題是否正確啓用。在切換主題以後、驗證以前， 咱們最好使用 hexo clean 來清除 Hexo 的緩存。

hexo clean

hexo s -g      //生成靜態文件，啓動本地服務

 

6、 寫博客

定位到咱們的hexo根目錄，執行命令：

hexo new ‘HelloEveryone’

咱們只須要打開這個文件就能夠開始寫博客了，默認生成以下內容

 

 固然你也能夠直接本身新建md文件，用這個命令的好處是幫咱們自動生成了時間。

 

默認狀況下，生成的博文目錄會顯示所有的文章內容，如何設置文章摘要的長度呢？

答案是在合適的位置加上<!--more-->便可，例如：

 

7、訪問個人hexo+github博客

能夠訪問個人git博客來查看效果： https://saucxs.github.io/