搭建本身的 github.io 博客

一、前言

• github.io 是基於 Github 的 repo 管理，這意味着我們對其是有絕對的控制，這個跟放在第三方的平臺比，可控性要好太多。

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

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

1.1 準備工做

• 在開始一切以前，你必須已經：

  • 有一個 Github 帳號，沒有的話去註冊一個；
  • 安裝了 Node.js、NPM，並瞭解相關基礎知識；
  • 安裝了 Git 客戶端

二、建立倉庫

• 登陸 Github 新建一個名爲你的 用戶名.github.io 的倉庫，好比說，若是你的 Github 用戶名是 test，那麼你就新建 test.github.io 的倉庫（必須是你的用戶名，其它名稱無效，不區分大小寫），未來你的網站訪問地址就是 https://test.github.io 了。

• 因而可知，每個 Github 帳戶最多隻能建立一個這樣能夠直接使用域名訪問的倉庫。

• 幾個注意的地方：

  • 註冊的郵箱必定要驗證，不然不會成功；
  • 倉庫名字必須是：username.github.io，其中 username 是你的用戶名；
  • 倉庫建立成功不會當即生效，須要過一段時間，大概 10-30 分鐘，或者更久，個人等了半個小時才生效；
  • 建立成功後，默認會在你這個倉庫裏生成一些示例頁面，之後你的網站全部代碼都是放在這個倉庫裏啦。

2.1 建立項目文件倉庫

• 1）建立一個倉庫，存放咱們的項目文件。

• 2）填寫倉庫的屬性，以下：(注意：這個倉庫名比較特殊，取名格式爲 userName.github.io，userName 爲 Github 的用戶名）。

• 3）進入設置後，往下拉，找到 GitHub Pages 設置界面。

2.2 選擇博客主題

• 1）選擇主題並提交。

• 2）選擇後會自動返回，這裏能夠編輯主題元素。

2.3 驗證建立的博客頁面是否成功

• 在瀏覽器地址欄裏輸入前面建立的倉庫名，驗證建立的博客頁面是否成功。

三、綁定域名

• 固然，你不綁定域名確定也是能夠的，就用默認的 xxx.github.io 來訪問，若是你想更個性一點，想擁有一個屬於本身的域名，那也是 OK 的。

• 這裏推薦阿里雲，畢竟國內大公司，既親切又靠譜。另外還有不少人推薦的 Godaddy 也能夠。本篇以阿里云爲例。

3.1 購買個性域名

• 1）首先註冊阿里雲帳號，若是有淘寶帳號的，能夠直接登陸。登陸之後，先進行實名認證（購買域名要用到）。認證信息提交完畢後，可能須要一兩天的審覈時間。

• 2）認證完畢後回到首頁，上方導航欄，產品 -> 企業應用 -> 域名與網站 -> 域名註冊，搜索本身想要的域名並進行購買（域名持有者選擇我的，這裏就用到以前的認證）。

• 3）購買完畢後，回到首頁點擊右上方的控制檯，進入後點擊上方導航欄的產品與服務，而後選擇域名，點擊進入域名解析列表，而後就能夠看到剛剛買的域名了，接下來進行解析配置（綁定）。

3.2 獲取博客 IP 地址

• 在終端中使用 ping 博客地址 指令獲取博客的 IP 地址。

  $ ping qianchia.github.io

3.3 綁定域名到博客

• 1）進入域名解析列表並對購買的域名進行解析。

• 2）刪除默認的並添加如下解析。第一個紅框爲前面建立的博客倉庫名稱，第二個紅框是上一步獲取到的你的博客站點的 IP 地址。

• 3）若是須要設置二級域名，則須要在主機記錄中添加二級域名的地址，如設置二級域名爲 blog。

  • CNAME 記錄須要設置爲 www.blog
  • A 記錄須要設置爲 blog （注：A 記錄中原來的 @ 表示空的意思）

3.4 設置博客域名

• 解析配置好了之後，登陸 Github，進入到博客站點對應的倉庫，對域名進行設置。

• 到這兒還沒結束，在你的本地博客站點路徑下的 source 文件夾裏，建立一個名爲 CNAME 的文件（注意要大寫），裏面寫上你以前購買的域名。

• 文件裏的域名前加不加 www 均可以，具體規則以下：
  • 若是你填寫的是沒有 www 的，好比 qianchia.cn，那麼不管是訪問 http://www.qianchia.cn 仍是 http://qianchia.cn ，都會自動跳轉到 http://qianchia.cn
  • 若是你填寫的是帶 www 的，好比 www.qianchia.cn ，那麼不管是訪問 http://www.qianchia.cn 仍是 http://qianchia.cn ，都會自動跳轉到 http://www.qianchia.cn
  • 若是你填寫的是其它子域名，好比 blog.qianchia.cn，那麼訪問 http://blog.qianchia.cn 沒問題，可是訪問 http://qianchia.cn ，不會自動跳轉到 http://blog.qianchia.cn

• 另外說一句，在你綁定了新域名以後，原來的你的 userName.github.io 並無失效，而是會自動跳轉到你的新域名。

四、配置 Github SSH key

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

• 1）在終端執行以下命令。

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

• 2）若是提示：No such file or directory 說明你是第一次使用 git。而後按照下面的步驟操做。

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

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

• 3）若是就沒有出現上面的提示，跳過上一步，在用戶目錄下，找到 .ssh\id_rsa.pub 文件，若是 id_rsa.pub 文件不存在，用上一步中的命令生成，記事本打開並複製裏面的內容。

• 4）打開你的 github 主頁，進入 我的設置 -> SSH and GPG keys -> New SSH key，將剛複製的內容粘貼到 key 那裏，title 隨便填，保存。

• 5）執行如下命令測試是否成功。

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

  • 若是提示 Are you sure you want to continue connecting (yes/no)?，輸入 yes，而後會看到
    Hi QianChia! You've successfully authenticated, but GitHub does not provide shell access.
  • 看到這個信息說明 SSH 已配置成功！

五、使用 Hexo 寫博客

5.1 Hexo 簡介

• Hexo 是一個簡單、快速、強大的基於 Github Pages 的博客發佈工具，支持 Markdown 格式，有衆多優秀插件和主題。

• Hexo 官網：http://hexo.io

• GitHub 倉庫：https://github.com/hexojs/hexo

5.2 Hexo 原理

• 因爲 Github Pages 存放的都是靜態文件，博客存放的不僅是文章內容，還有文章列表、分類、標籤、翻頁等動態內容，假如每次寫完一篇文章都要手動更新博文目錄和相關連接信息，相信誰都會瘋掉，因此 Hexo 所作的就是將這些 md 文件都放在本地，每次寫完文章後調用寫好的命令來批量完成相關頁面的生成，而後再將有改動的頁面提交到 Github。

5.3 安裝 Hexo

• 在終端中執行如下命令安裝 Hexo。

  $ npm install -g hexo

5.3.1 安裝注意事項

• 不少命令既能夠用 Windows 的 cmd 來完成，也可使用 git bash 來完成，可是部分命令會有一些問題，爲避免沒必要要的問題，建議所有使用 git bash 來執行；
• hexo 不一樣版本差異比較大，網上不少文章的配置信息都是基於 2.x 的，因此注意不要被誤導；
• hexo 有 2 種 _config.yml 文件，一個是根目錄下的全局的 _config.yml，一個是各個 theme 下的；

5.3.2 Hexo 常見命令

• 常見命令

  # 新建文章
  $ hexo new "postName"
  
  # 新建頁面
  $ hexo new page "pageName"
  
  # 生成靜態頁面至 public 目錄
  $ hexo generate
  
  # 開啓預覽訪問端口（默認端口 4000，'ctrl + c' 關閉 server）
  $ hexo server
  
  # 部署到 Github
  $ hexo deploy
  
  # 查看幫助
  $ hexo help
  
  # 查看 Hexo 的版本
  $ hexo version
  
  # 清理 public 目錄的內容
  $ hexo clean

• 縮寫

  $ hexo n == hexo new
  $ hexo g == hexo generate
  $ hexo s == hexo server
  $ hexo d == hexo deploy

• 組合命令

  # 生成並本地預覽
  $ hexo s -g
  
  # 生成並上傳
  $ hexo d -g

5.4 初始化 Hexo

• 在電腦的某個地方新建一個名爲 Hexo 的文件夾（名字能夠隨便取），好比目錄 ~/Hexo，因爲這個文件夾未來就做爲你存放代碼的地方，因此最好不要隨便放。

• 在終端執行下面命令。

  $ cd ~/hexo
  $ hexo init

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

• 執行如下命令以後，Hexo 就會在 public 文件夾生成相關 html 文件，這些文件未來都是要提交到 Github 去的：

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

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

5.5 修改主題

• 第一次初始化的時候 Hexo 已經幫咱們寫了一篇名爲 Hello World 的文章，默認的主題比較醜，打開時就是這個樣子：

• 既然默認主題很醜，那咱們別的不作，首先來替換一個好看點的主題。

  • 官方主題
  • 推薦 2 個主題：hexo-theme-jekyll 和 hexo-theme-yilia

• 以 yilia 主題爲例，首先下載這個主題：

  $ cd ~/hexo/
  $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

• 下載後的主題都在這裏：

• 修改博客根目錄 _config.yml 中的 theme: landscape 改成 theme: yilia，而後從新執行 hexo g 來從新生成。

• 若是出現一些莫名其妙的問題，能夠先執行 hexo clean 來清理一下 public 的內容，而後再來從新生成和發佈。

5.5.1 yilia 主題下顯示全部文章

• 1）請確保 node 版本大於 6.2。

• 2）在博客根目錄（注意不是 yilia 根目錄）執行如下命令：

  $ npm i hexo-generator-json-content --save

• 3）在根目錄 _config.yml 裏添加如下配置：

  # yilia 主題顯示全部文章列表
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

5.6 上傳到 Github

• 在上傳代碼到 Github 以前，必定要記得先把你之前全部代碼下載下來（雖然 Github 有版本管理，但備份一下老是好的），由於從 Hexo 提交代碼時會把你之前的全部代碼都刪掉。

• 若是你一切都配置好了，發佈上傳很容易，一句 hexo d 就搞定，固然關鍵仍是你要把全部東西配置好。
  • 1）首先，ssh key 確定要配置好。
  • 2）其次，配置博客根目錄 _config.yml 中有關 deploy 的部分，須要特別注意的地方是冒號後面必須有一個空格，不然可能會出問題。

• 正確寫法：

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

• 錯誤寫法：這種寫法是 hexo 2.x 的寫法，如今已經不行了。

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

• 不管是哪一種寫法，此時直接執行 hexo d 的話通常會報以下錯誤：

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

• 緣由是還須要安裝一個插件，執行下面命令安裝，其它命令不肯定，部署這個命令必定要用 git bash，不然會提示 Permission denied (publickey)。

  $ npm install hexo-deployer-git --save

• 打開你的 git bash，輸入 hexo d 就會將本次有改動的代碼所有提交，沒有改動的不會。

5.7 保留 CNAME、README.md 等文件

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

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

5.8 自定義 404 頁面

• GitHub Pages 有提供製做 404 頁面的指引：Custom 404 Pages。

• 直接在根目錄下建立本身的 404.html 或者 404.md 就能夠。可是自定義 404 頁面僅對綁定頂級域名的項目才起做用。

• 推薦使用騰訊公益 404。

5.9 寫博客

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

  $ hexo new 'my-first-blog'

• Hexo 會幫咱們在 _posts 下生成相關 md 文件：

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

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

• 通常完整格式以下：

  ---
  title: postName               # 文章頁面上的顯示名稱，通常是中文
  date: 2013-12-02 15:30:16     # 文章生成時間，通常不改，固然也能夠任意修改
  categories: 默認分類           # 分類
  tags: [tag1, tag2, tag3]      # 文章標籤，可空，多標籤請用格式，注意: 後面有個空格
  description: 附加一段文章摘要，字數最好在 140 字之內，會出如今 meta 的 description 裏面
  ---
  
  如下是正文

5.9.1 hexo new page 'postName' 命令和 hexo new 'postName' 的區別

• hexo new page "my-second-blog" 生成以下：

• 最終部署時生成：hexo\public\my-second-blog\index.html，可是它不會做爲文章出如今博文目錄。

5.9.2 如何讓博文列表不顯示所有內容

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

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

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

• 最終效果：