如何使用Hexo + Github page架設專屬免費部落格(教學)

發表於 | 更新於 | 分類於

教學

．資料參考來源

．建立環境

我的系統是 windows10，mac的不會QAQ，google上非常多資訊，只是可能要再自己消化。

Node.js

Git

文字編輯器，個人使用sublime3

  • 下載 + 序號 這是免安裝版本，序號的填入就請自行Google一下拉~ 相信不會很難的!

記得，在下面的code中，發現太長不好找時，ctr+F5 是你的好夥伴^.^

終端機

Ctr+r <- 開啟搜尋，鍵入cmd，歡迎看見你的終端機。="" 至於資料夾存放位置的部分，自行決定(個人放在d槽)。如果有c、d槽，系統一開始會再`c:\user\xxx="">，要進D槽，請鍵入D:。 進哪個資料夾就鍵入cd 位置`，這樣講還不行，Google吧。

GitHub帳號

  1. 申請完帳號後，到右上方+字符號，點選new repository。
  2. 進入後，輸入repository name，隨你喜好，只要右邊有綠色勾勾就可以。
  3. 按下create repository後出來的畫面。

    好了 ，就這麼簡單，你的repository就建好了，剩下，對於不熟悉code的人來說有些可怕，不用怕，關掉它吧!
    接下來的設定文件，先把git要設定的關鍵詞先放在這裡，等等要用時直接回頭複製貼上。

關鍵詞整理Github

url: https://username.github.io/repositoryname
root: /repositoryname/
type: git
repo: https://github.com/username/repositoryname.git
branch: master

其中 username就是你申請github時的username，repositoryname就是上面第二步你所填的名稱

．安裝Hexo + Hexo-hey(視覺化後台)

$ npm install -g hexo-cli(安裝hexo)
$ cd 進想要存放blog的位置
$ hexo init yourname (產生一個yourname的 hexo網站)

此處yourname請自行命名。

$ cd yourname
$ npm install(將網站安裝上去)
$ npm install hexo-hey --save(安裝hexo-hey 視覺化的後台，為了之後po文時編輯的方便)
$ npm install hexo-deployer-git --save(這是為了之後將hexo deploy上github pages上所需安裝的套件)

好了，需要安裝的差不多了。

個人是習慣先把必須安裝的安裝完再一次性進行設定，雖然出錯風險高，但按照步驟不會錯的。

接下來，開啟文字編輯器(sublime3)，使用方法這邊就不教。

open folder，找到資料夾，按下確認。(歐 我還是教了Orz)

．設定

最重要、最重要、最重要(大坑)： (我特別拉一區給它，雖然位置應該要下去，但，實在太重要，先放在上面)

  1. 你所有的設定，例如 title: taki blog 冒號後面，必須必須要加上一個空白，
    仔細看sublime3，編輯文字時，你便會發現區別。

  2. 在這裏面的設定，所有都只能夠有一個空白，任何少或者多都會造成無作用，因此，這點必須注意!
    如同你所看到的，deploy下面的子選項type，跟母選項，只含有1個tab的距離，任何多或少，都會Boom，搞到死都不知道錯在哪…。

    deploy:
    type:

第一步 設定基本資料

點開yourname/_config.yml(這個，便是整個網站設定的核心部分，至於詳細各個設定請參閱Hexo文件)
在最上面會看到這個

以下是我已經改過的，屬於部落格的個人資料，可以自行改動。

title: Taki Blog
subtitle: Taki Blog
description:
author: Taki
language: zh-tw
timezone:

第二步 設定部屬(deploy)

在往下一點點看
便會看到這個

下面的也是經過改動的。

url: https://username.github.io/repositoryname/
root: /repositoryname/
permalink: :year/:month/:day/:title/
permalink_defaults:

接下來，拉到最下面找到這個

deploy:
    type:

改成

deploy:
  type: git
  repo: https://github.com/username/repositoryname.git
  branch: master

有沒有發現什麼? 沒錯，就是複製貼上剛剛在上面做的事情，其實是我跌坑跌最慘的，所以才會先做一下筆記Orz
需要更改、新增的地方便是url, root, type, repo, branch(這個可有可無，系統也會自己抓，但我還是用master，因為我不想讓它使用其他分支，這個大概只會用來做我的網站用。)

第三步 設定後台

下面一行再新增這個，這個是做為後台所需要的

# Admin
admin:
    name: hexo
    password: hey
    secret: hey hexo
    expire: 60*1
    # cors: http://localhost:3000

太棒了，基本上的設定，就差不多這樣!

．寫下自己第一個的文章吧!

注意：以下所有指令，都必須再yourname這個資料夾底下進行

常用指令

後面()部分為簡寫。以下排列是有意義的，前三步，基本上是對文件做任何改動後必須做的流程，hexo d 就做為當你認為你的網站已經可以上去了就把它deploy上去吧。

$ hexo clean 清除public。對於每次的改動，都必須要先做一次這一個
$ hexo generate (hexo g) 生成靜態文件，會於當前目錄下產生一個public的資料夾，這個資料夾將來會是deploy上Github 的一個文件夾，裡面包含你整個網站。
$ hexo server (hexo s) 開啟本地web服務，讓你可以先不用deploy到Github上，就可以先行預覽你的網站。
$ hexo deploy (hexo d) 部屬(deploy)到Github上

常用組合鍵

$ hexo s -g 生成後預覽

那麼 遊戲開始(?)

第一步 產生我的網站

$ hexo g 產生靜態文件
$ hexo s 預覽網站

接下來，打開你的瀏覽器輸入http://localhost:4000/ ，由於上面的設定(url & root)，
所以你的網址會自動變成這樣http://localhost:4000/repositoryname/這是正常的。

恩 就這樣你的網站就這樣好了(！？)

文章(post) 與 網頁(page)差別?

好吧，這是我從網路上看到後記下來的東西，如果有錯，批小力點QQ

post 屬於日常、動態的，它有分類、標籤這些功能。(系統預先設定的便是這個)
page 屬於不會經常性更動的類型，因此，像是about, tags, categorys這類分頁，都屬於page的範疇

對了，其實指令也有這兩個 (中括號都要去掉 )
$ hexo new [title] 建立一個post 的 title文件
$ hexo new page [title] 建立一個page 的 title文件

至於為什麼不使用，原因很簡單，我們有後台拉(hexo-hey)~要這些做啥?有後台+markdown，寫一篇自己的部落格不難!

第二步 編輯我的文章

請於瀏覽器上方輸入http://localhost:4000/admin (<- 或用力戳它XD)

帳號：hexo
密碼：hey

恭喜你，看到了你的後台。(請自行摸索一下，它的功能實在是簡單到不想做這個筆記…)

沒有錯，其實我也只是第一次碰這個東西所以它除了learning markdown這個文章之外，根本就沒有其它東西

寫到目前的文章

上面有一個新建這個按鈕，接下來，就靠你的雙手，自學一下markdown這個簡單的語言吧(普通大概也就花個30-40分鐘就會了)~

第三步 deploy到你的Github pages上

終於到了這一步!

(這邊我都假設你是正常狀況下，如果不是正常狀況，你可能要在自己debug一下看看是不是哪裡做錯了，我這邊基本上都測過是可以的)

$ hexo d輸入吧，就是這樣。

你覺得這些很醜? 沒關係，有一個名人說過這類的話

如果你在發布你第一件產品的幾年後，回過頭來看，如果你不覺得很丟臉，那麼你起步得太慢了!
正確的方式應該是，做好準備後(不需要萬全)，就起步，然後再快速調整，穩定輸出。 – 給有完美主義的你

看吧(好吧，你應該是不會有大頭照、標籤、分類、關於以及theme也不是長這樣，但這些之後再說。)

恭喜啦! 基本上，po文必需的事情地做完了!

．Theme更換以及分類、標籤、關於頁面

第一步 clone 主題資料

這個也是在yourname資下夾下輸入
注意：在日後需要clone theme時 ，注意後面要加上一個 themes/主題名稱 ，這個是跟git說，我要clone到這個資料夾，如果資料夾不存在，它會自己生成。

$ git clone https://github.com/iissnan/hexo-theme-next themes/next (如果你很懶的話，那就跟著潮流走吧)

第二步 開啟主題

使用文字編輯器(sublime3)進yourname/_config.yml更改成

theme: next

第三步 分類、標籤、關於頁面、大頭照片的啟用

關於裡面所有的_config.yml都是指themes/next下的哦! 千萬別搞錯了

  • 建立分類頁面
  • 建立標籤

  • 建立關於頁面
    關於頁面，此頁面的編輯，請開啟文字編輯器(sublime3)，到source/about/index.md直接編輯，這個無法使用後台進行編輯。

    仔細看，它是.md檔，因此，它是markdown文件，你是怎麼使用Hey hexo後台的，就怎麼樣使用它，只是無法像hey hexo一樣及時看到呈現。

  • 大頭照片：先將你要的相片(我的相片名稱avatar.jpg)放到yourname/source/images底下，進yourname/themes/_config.yml下改成，他一開始是用#被註解掉的，請使用backspace變成底下

    avatar: /images/avatar.jpg

第四步 重要三指令

$ hexo clean
$ hexo g
$ hexo s

接下來，就細細的觀賞你的部落格吧，別忘了，欣賞完(沒問題後)要記得$ hexo d讓他上去讓大家也欣賞你個人的部落格囉。

．留言板設置

註冊與設定

  1. 選擇get start

  2. 選擇I Want to install Disqus on my site

  3. 填上自己想要的website name

  4. 請滑到最上面關鍵詞整理Github，把你的url輸入。

  5. 選擇你的website

6.找到你的shortname，並且複製起來(其實就是你剛剛註冊時填上的websitename)

接下來，開啟文字編輯器(sublime3)，開啟themes/你所設定的主題_config.yml，尋找disqus，並改成下列

#Disqus    
disqus:
  enable: true
  shortname: 你的shortname
  count: true

儲存後，於終端機鍵入三指令$ hexo clean $ hexo g $ hexo s
觀賞吧，你的網站。
至於 關於、標籤、分類頁面上都會有留言板，可以滑到上面教學，裡面有處理辦法，請再次回去看吧。