Hexo＋GitHub 網誌和部落格架設（二）

發表於 2019-11-24 更新於 2019-12-09 分類於 Hexo

安裝 Hexo

如果電腦已經安裝過 Node.js 和 Git，就只要在終端機中輸入下面這一行，就能完成安裝啦！(灑花～)

1	$ npm install -g hexo-cli

指令說明：
npm install -g <套件名稱>：安裝 Global Package。也就是使用 npm 在全域層級去安裝套件。
npm：Node Package Manager，也就是 node.js 中負責相關套件的管理員。
-g：全域 (若移除則表示針對目前資料夾，也就是 Local 進行操作)。
hexo-cli：是我們要安裝的套件名稱。(hexo-cli 表示安裝了 hexo 和 hexo的命令。cli 表示可以透過命令行界面 (command-line interface) 來對 hexo 下指令。)

接著可以使用這一行來檢查，是否有正確安裝到 Hexo 和其版本

$ hexo -v

安裝完畢後，還有很長一段路要走 Q皿Q

準備「使用 Hexo 建立網誌的專屬資料夾」

需要為你的網誌或部落格建立一個特別的資料夾，為什麼說特別呢？因為只有這個資料夾裡面的文章，才能用Hexo處理並部署到網路中、網站上。

所以要怎麼「準備」這個資料夾呢？

1. 初始化 (init) 資料夾

在終端機中輸入 hexo 我們可以看到各種指令碼，我們要選擇的是 init

記得到目標資料夾裡面，輸入下面其中一行

1 2	$ hexo init $ hexo init <資料夾名稱>

如果沒有輸入資料夾名稱，如第一行，表示直接對所在資料夾進行初始化動作。
如果有輸入資料夾名稱，如第二行，表示直接在所在資料夾，建立一個新的資料夾，並進行初始化動作。

通常 Windows 和 Mac 系統的終端機一打開就是使用者底下的名稱的位置(不知道怎麼形容，哈哈哈)，如下圖。
記得使用下面這一行，一層一層移動到你的目標資料夾後，輸入上面第一行或第二行指令碼。

1	$ cd 資料夾1/資料夾2/.../資料夾n/目標資料夾

指令說明：
cd：移動到"xx資料夾"

例如我是在桌面裡建一個 JeniferCodeWorld 資料夾，在裡面進行init。

當你的資料夾有順利初始化完畢，就會出現如下這些東西(稍後說明他們的用途)：

這樣就結束了！！！(灑花～)

那第二步驟是幹嘛的？

如果安裝的過程中有出現錯誤資訊 Failed to install dependencies. Please run 'npm install' manually! 表示安裝相依套件失敗，必須手動輸入 npm install 去安裝相依套件；或是你不放心，擔心有套件沒有安裝好，就進行下面第二步。

2. 在已初始化的資料夾安裝相依套件

在終端機中，使用 cd 移動到Hexo目標資料夾中，例如我就是要移動到 JeniferCodeWorld 資料夾中，輸入下面這一行

1	$ npm install

指令說明：
通常會在專案(資料夾)裡面輸入此行。
npm install：安裝 Local Package。表示使用 npm 依據 package.json(一種套件檔案列表，不同的軟體需要的相依套件不同) 對本地層級安裝所有相依套件。

此後開始，所有的指令碼操作，都是在 Hexo 目標資料夾中輸入，例如我就是在 JeniferCodeWorld 資料夾中輸入。

本地端預覽 RUN 起來！

因為在安裝 Hexo 時，有內建一篇使用文章，就先來 Run Run 看預覽這篇文章吧！

在終端機中輸入 hexo 這次可以看到稍微不同的各種指令碼，我們要選擇的是 server

輸入下面其中一行

1 2	$ hexo server $ hexo s

指令說明：
server：開啟伺服器。
s：server的縮寫。

通常預設是 http://localhost:4000/。如果萬一 4000 連接埠(port) 被佔用了，可以輸入下列指令來更換 port。

1	$ hexo server -p 5000

指令說明：
-p：指定其他連接埠。

伺服器成功開啟後，在瀏覽器中輸入網址，就可以看到如下這樣的網頁啦！同時在 Hexo 目標資料夾中產生一個快取檔案 (db.json)。

要關掉伺服器，請在終端機介面，按 Ctrl+C。

建立一篇新文章

當然我們會寫自己的文章。寫文章前要先打開一個新的編輯頁面，像是開一個新的 Microsoft Word 一樣。有三種方式：

使用指令碼新增
複製 scaffolds 資料夾的 post.md 到 source/_posts 資料夾中
在 source/_posts 資料夾中建立一個 .md 檔案

1.使用指令碼新增

1	$ hexo new [layout] <title>

指令說明：
new：建立一個新的貼文
layout：用來指定文章的佈局。可以不寫，預設為 post。可以透過修改 _config.yml 中的 default_layout 設定來指定預設佈局。
title：文章的標題。

補充說明：
_config.yml：用來設定網站的各種配置，例如：網站標題 (title)、網站描述 (description)、網站的網址 (url)等，其他可以參考官方的配置和我的設定 Hexo 基本配置這篇。

2.複製 scaffolds 資料夾的 `post.md` 到 source/_posts 資料夾中

scaffolds 資料夾裡面裝的是文章的模板，官方是寫佈局 (layout)，Hexo 有三種預設佈局：post(文章)、page(首頁) 和 draft(草稿)。

而 source 資料夾的 _posts 裡面裝的是我們要發佈的文章，之後會被產生成靜態檔案的一部分，其他可以參考官方的寫作。

3.在 source/_posts 資料夾中建立一個 `.md` 檔案

建立新的檔案時，直接在檔案名稱後面加 .md 如下圖。

編譯：產生靜態檔案

之前有提到使用 Hexo 必須先編譯 (將 Markdown 轉換成 HTML 文件)，才能丟到遠端伺服器 (GitHub) 上。

如果選擇不編譯，只想在本地端(自己的電腦上)自己觀看，當然也是可以。但是大多數人會看到這邊，應該還是想不同的人都能隨時觀看你的網站對吧？

輸入下面其中一行，就能產生產生靜態檔案了

1 2	$ hexo g $ hexo generate

此時會生成一個 public 資料夾。

一樣使用 hexo server 開啟 http://localhost:4000/，就可以看到產生的新文章。

下一站，前往 GitHub 囉～ >> 建立 GitHub 儲存庫

Hexo＋GitHub 網誌和部落格架設系列文

Hexo＋GitHub 網誌和部落格架設（一）- Hexo 是什麼？
Hexo＋GitHub 網誌和部落格架設（二）- 安裝 Hexo ← 你在這～
Hexo＋GitHub 網誌和部落格架設（三）- 建立 GitHub 儲存庫
 Hexo＋GitHub 網誌和部落格架設（四）- 部署到 GitHub