Hexo 簡略教學

發表於 更新於 分類於 閱讀次數： 閱讀次數： Disqus： 文章字數： 3.8k 所需閱讀時間 ≈ 3 分鐘
建立 hexo blog 完整教學、過程 with Next 主題

搭建 hexo 紀錄

此篇會慢慢補齊，還在動工階段 !

有想知道的可以直接底下留言

Hexo 是我目前 Blog 所使用的一個框架，使用上自由度算是挺高的
過去在巴哈和 Blogpost 都覺得還是很難用

有鑑於想要推廣 hexo 給朋友，寫了此相關系列文章

同時也分享給各位過客，若有幫到您的話就更好了 : )

若有遇到問題，也歡迎在下方留言告訴我 !

本篇教學 :

  1. 基礎環境設定
  2. hexo 的簡單指令介紹
  3. next 安裝 (無更多設定)

想要其他進階教學請移駕本站其他系列教學文~

注意注意注意 !!!

這篇文章中，只要有提及像是 <something> ，代表可以輸入任意名稱。
請自行替換上面 <> 這個東西。
不要輸入 < > 這兩個符號

舉例 ---
hexo init <folder>，這邊的 <folder> 可以替換成你創建的資料夾名稱
像是 hexo init MyBlogFolder

另外，這篇文章如果有使用到 $ 這個符號，
$ 這個符號無須輸入。只代表他是一個指令。

在 Github 上面建立一個 Repository

記得名字一定要是 <username>.github.io
例如我的 github 帳號如果叫做 riko，那這個 repo 就叫做 riko.github.io

如果你不會使用 Github，那個流程建議

  1. 先安裝下面的 Git
  2. 參考 這篇教學，試著 註冊 -> 建立 Repository -> 然後再接下去。
  • 在跟著教學做的時候可以不要用 <username>.github.io 這個名字去創。
    先熟悉整個 git 的流程，然後再多額外創建這個 repo。
    (然後建議什麼都不要加 ex: Readme)
  • 上面這篇教學的 Add a license 可以不用，其他都可照做一次。

安裝

為了完成安裝 hexo 需要的環境，和之後部屬會用到的工具
請先到以下兩個網站去安裝這兩個套件。

安裝 Node.Js 就是一直按下一步即可，特別注意要看一下安裝到哪邊，記下來。
安裝 Git 建議參考 這篇教學
安裝 Sublime Text 是為了更好的編輯一些檔案。

編輯系統環境變數

安裝完之後要把 Node.Js 的執行位置加到系統環境變數

  1. 搜尋 編輯系統環境變數
  2. 找到這個，按
  3. 點一下 Path，按編輯
  4. 右上角有個編輯，把你剛剛記下來的位置寫到裡面。

初始化一個 Blog 資料夾

好，開始安裝了。先創一個資料夾吧，你甚至可以 git clone 你的 repo
然後直接在裡面做。

1
npm install hexo-cli -g

安裝 hexo

一旦 Hexo 完成後，請執行下列指令，Hexo 會在指定資料夾中建立所有您需要的檔案。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

跑完之後可以試著輸入

1
$ hexo server

接著在你的瀏覽器裡輸入 localhost:4000，就可以看到你的部落格了 !

到這個階段，你已經有一些基礎的東西。

整個檔案結構

了解檔案結構有助於找你要的東西，以及後面的設定都會需要切換資料夾。

建立完成後，專案資料夾會有下列檔案：

1
2
3
4
5
6
7
8
.
├── _config.yml ( hexo 的配置檔案，注意，這是最外層的，給 hexo 用的)
├── package.json
├── scaffolds
├── source
|   ├── _drafts (草稿)
|   └── _posts  (文章)
└── themes      (主題)

_config.yml

網站 配置 檔案，您可以在此配置大部分的設定。

特別注意 : config 這種檔案，裡面記錄的是各類設定，並且有特定的排版。
像是，冒號緊貼前面的詞；或是子設定前面會有兩個空白。

舉例

1
2
sitemap:                   # 冒號緊貼
  path: sitemap.xml        # 子設定，前面兩個空白

themes

看個人習慣，我個人推薦用 Next 這套。
阿，不如說，我有一些額外的教學是針對 Next 的，當然想要其他的也絕對沒問題
可以 Google hexo 主題

語言設定

以下開始編輯一些設定檔案，開啟這些檔案可以選擇使用 Sublime Text 開啟。
排版也許會好看一點。

在_config.yml中找到language欄位，設定為zh-tw

language: zh-tw

有些在 config 裡面做的調整，如果發現沒有成功套用
可以在更改完之後 

1
2
3
hexo clean
hexo generate
hexo s

再做查看

NexT

git 指令直接在當前目錄下 ... 也就是這個 project 底下的這個目錄做就可以。
你在哪邊下 hexo 指令，就在哪邊下 git 指令。

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

然後修改網站設定 _config.yml ( 修改 hexo 的 )

1
theme: next

重新啟動 server

1
$ hexo server

理論上就能看到新套用的畫面了 !

Scheme設定

NexT 提供多種 Scheme 選擇，其中 Muse 是預設的主題。
而我個人是選擇使用 Pisces 當做我的主題。

在主題設定 theme/next/_config.yml 裡找到 schema設定，把註釋 (#字符號) 去掉即可開啟。

記得把不要用的加上註釋。

Hexo 常用指令

創建新文章

1
$ hexo new "post name you want"

實際上，我只有第一個是建立的，其他都是直接複製第一個的 .md 檔案下去做更改。
改掉日期、標題之類的。

寫作

有了那個 markdown 檔案 (.md) 之後，可以對它做編輯
我個人在 Windows 習慣使用 Typora 這個程式 去做撰寫
相關語法建議查看網路上教學。

比較常用的也就 : 標題、粗體、影像、超連結、Code 區塊、項目區塊 這樣。
所以其實要學的東西也不會很多，真的忘了再去翻就好。

寫作的另一種做法

其實，只要找到 /source/_post 這個資料夾
在裡面新增 .md 檔案，這樣就可以直接寫作了。

但前面記得加上以下資訊當作開頭，這樣才能讀到一些資訊。

1
2
3
4
5
6
7
8
9
10
---
title: Hexo 簡略教學
date: 2000-01-01 00:00:00
tags: 
- A tag
- B tag
categories: [hexo]
description: "建立 hexo blog 完整教學"

---

常見的 Markdown 語法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

* 在前面加一個點可以產生小段落
  * 兩個空白後可以變成小段落

1. 也可以這樣，我是一
2. 我是二

`` 兩個上標號 這樣會是程式碼標註，換成三個可以不受限於一行``

# H1 標題 (以下不 demo 這個)
## H2 子標題 (以下不 demo 這個)

![圖片說明](圖片網址)
[超連結標題](超連結網址)

另外可以自己加一些 html code，如果有放，最好前後加 raw 標籤，像這樣
``{% raw %} 一堆 Code {% endraw %}``

以下是上述的 Demo

  • 在前面加一個點可以產生小段落
    • 兩個空白後可以變成小段落
  1. 也可以這樣，我是一
  2. 我是二

兩個上標號 這樣會是程式碼標註，換成三個可以不受限於一行
超連結標題

另外可以自己加一些 html code，如果有放，最好前後加 raw 標籤，像這樣
一堆 Code

佈署

佈署，也就是把你整個靜態的網頁放到網路上

這邊使用 Github 當作範例來說明。

首先你需要幾個步驟 :

  1. 把 Git 環境建立好，安裝 Git 等等。
  2. 在 Github 創建一個 repository，名稱叫做 <你的username>.github.io
    請自行替換上面 <> 這個東西。例如 example.github.io
  3. 把 hexo 的 _config.yml 設定好
  4. 用 hexo generate + hexo deploy 來做上傳的動作。

Git

  1. 安裝 hexo-deployer-git。
1
$ npm install hexo-deployer-git --save
  1. 修改 _config.yml 設定(下面的註解顯示了參數的範例)。
1
2
3
4
deploy:  
  type: git  
  repo: <repository url> # 像是 https://github.com/<yourAccount>/<repo Name>.git
  branch: <branch> # 通常是 master

範例 : 

1
2
3
4
deploy: 
  type: git
  repository: https://github.com/LoveLive/LoveLive.github.io.git
  branch: master

寫完之後要怎麼產生網頁檔案和上傳 ?

先做產生

1
$ hexo generate

然後部屬 (上傳) 

1
$ hexo deploy

More info: Deployment

額外其他設置

其他有太多太多可以去做優化和修改的設定。
我從最一開始到現在這個樣子，可是隔了一年多，
又學了一些相關知識才到現在這樣的。

不過也不用太擔心，接下來我會慢慢的把我設定過的紀錄一下
有想要達成的，不知道怎麼做到的，或是別人網站怎麼做到的，都能在底下詢問哦 !

其他部分將在其他文章慢慢說完，全部擠在一篇文章也太讓人難找了。

End
-----------------------------------

2019.08.26 更新