來用Hexo建自己的Blog吧!
寫在頭前
想換個地方寫寫,Medium這邊應該多少會同步更新(吧?),它還是有好處啦,例如追蹤其他人的文章是方便的。
推力:Medium真的不好寫程式碼,沒有Markdown。
拉力:可以建立自己的網域,有Markdown。
前置安裝環境
以下我會盡量手把手教學。
有寫到 $
字號開頭的指令,是在終端機進行指令操作,與程式碼無關。
我的安裝環境,是macOS (Mojave 10.14.6),使用iTerm (oh-my-zsh)。
我們需要先安裝
1. Node.js
2. Git
如果是macOS,而且在編譯上出現問題,可能還需要
3. Xcode
這些我都裝過了,所以容我跳過,可能改天換電腦再來加入這系列的文章。
如果你是 Ruby on Rails 的開發者,可能已經安裝過這些了。
那我們用終端機指令檢查一下是否環境已安裝完成。
官方文件只說要Node.js,且限定在特定的版本以上,所以才會有些安裝教學的文章會先安裝nvm,但也要看使用環境有沒有需要經過那一步。
nvm (Node Version Manager) 是 Node.js 版本管理的工具。等同於Ruby的 rvm 。
npm (Node Package Manager) 是 Node.js 的一個線上套件庫,可以下載各式各樣的 Javascript 套件。
yarn和npm同樣功用 ,但它是facebook開源出來的套件管理工具。兩者皆等同於Ruby的gem。
安裝Hexo
1.環境和工具設置好了之後,接著開始安裝Hexo。
官網是用npm,雖然我對yarn的第一印象比較好,但官網這麼用,而且網路教學文章很多都是用npm,但兩者放全域的資料夾可能也是不同的,那我們就一路到底地給它npm裝下去。
$ npm install -g hexo-cli
安裝之後,用指令 $ hexo -v
檢查版本,確定有安裝好了。
應該會像這樣,版本號不同沒關係:
2.再來建立、初始化Hexo用的檔案夾,有兩套步驟,擇一。
一種方式是,進到你想放的母層資料夾,在這邊建立你的Blog用資料夾,輸入:
$ hexo init <file_name> # <file_name>就是你自己取的資料夾名稱
這邊的 <file_name>
資料夾名稱,如果是用windows+WSL安裝,檔名要記得用小寫。
可以先進去這資料夾查看剛剛hexo幫我們建了什麼,如果跟我一樣,那應該是有建好。
另一種方式是,先建立空的資料夾,資料夾名稱自己取,然後進去資料夾,輸入:
$ hexo init
$ hexo init
後面沒輸入資料夾名稱,會預設對現在所在的資料夾進行初始化,但資料夾要是空的,否則可能會報錯。
3.確定進到Hexo資料夾,並安裝相關套件
$ npm install
先到這裡,我們先看一下成果。
在終端機輸入:
$ hexo s # s是server的意思
訊息很明顯,我們要開瀏覽器,網址列輸入 localhost:4000
查看
成功一半了,接下來看看怎麼使用Hexo,其實在Hexo生成的這個資料夾裡,就已經有貼文檔案初步說明了,在啟動 hexo server
看到的這首頁第一篇“Hello World”,就有hexo的指令提示,這些開發者真的是很貼心。
簡單新增文章
試著直接用提示的指令,新增文章。
$ hexo new "文章標題"
上面建立 “hello world 2” 這個名稱滿順利的滿順利的,但另一個就沒有。
dquote>
以我這篇文的標題「 用Hexo建自己的Blog吧!」去新增文章,會跳出 dquote>
可能是因為標題最後有 !
符號,導致它以為我沒有打完 "
符號。
這時候打 q
或 exit
都沒用,只要補給它一個 "
就可以了;或者用Ctrl+C直接取消指令,修改標題,重做一遍。
完成之後,用你習慣的文字編輯器打開Hexo資料夾看看,我這邊用的是Visual Studio Code。
我們可以在第二個—--
之下編輯文章內容,且可同時開啟 Hexo server,像開發專案時一樣同步。
還有很多文章寫作的細節操作,有空再講。
我們先回過頭在剛剛建立hexo資料夾那邊,看看裡面生成的檔案和資料夾。
Hexo資料夾
_config.yml
網站配置檔案,可以在此配置大部分的設定。用 yaml 格式編寫。
yaml 檔裡 :
後一定要有一個空格。
主題(theme)、網站名稱,都在這邊設定。
這邊擷取幾個比較重要的來介紹:
# Site
title: Hexo # 網站標題
subtitle: '' # 網站副標題
description: '' # 網站描述,給搜索引擎看的訊息
keywords: # 網站的關鍵詞。支援多個關鍵詞。
author: John Doe # 您的名字
language: en # 網站使用語言,預設為 en。
# 看主題是否支持,具體書寫方式也因主題而異
timezone: '' # 網站時區,Hexo 預設使用您電腦的時區
# URL
url: http://example.com # 網站的網址,
# must starts with http:// or https://
root: / # 網站的根目錄
permalink: :year/:month/:day/:title/ # 文章永久連結的格式# Extensions
theme: landscape # 網站的佈景主題# Deployment
deploy: # 發佈型態,例如(git、heroku...)
type: '' # 部署位置,例如(git@github.com:帳號/REPO名.git)
node_modules
npm安裝的套件都在這。
scaffolds
鷹架資料夾。當您建立新文章時,Hexo 會根據 scaffold裡的檔案來生成文章或分類。
看到這名稱,Rails開發者會心一笑。
source
是放置內容的地方。在一開始只有_posts
文件夾,用來存放發表後的文章。
除了 _posts
資料夾以外,檔案 / 資料夾名稱開頭為 _
(底線) 、隱藏檔案會被忽略。
之後如果生成過草稿文件,就會多出來一個 _drafts
文件夾,用於存放草稿,同時如果生成過獨立頁面,還會生成與頁面名稱相同的文件夾。
themes
網站主題套件存放的資料夾,每個主題一個資料夾,具體名稱可以隨意修改,但修改後,一定要連同根目錄下的 _config.yml 中 的theme一起修改,不然會出現錯誤。Hexo 會根據主題來產生靜態檔案。
如果在theme資料夾下發現了 languages 文件夾,那麼說明這個主題是支持多種語言的。
可以將_config.yml 中的 language
修改為文件名中的<language_name> ,例如有zh-TW.yml,就將language 修改為zh-TW
。
Git 初始化
這邊很少人講到,但我覺得在修改主題之前,先commit起來比較好,等一下會上傳GitHub並部署,爽賺綠點點囉~
$ git init
$ git add .
$ git commit -m "git init"
$ git branch -M master main # 因為BLM社會運動,GitHub都建議改名main分支
Hexo主題套件 (themes)
學會建立文章之後,再來加點視覺風格。
到官網找主題,可以找自己喜歡的主體,點擊圖片可以參觀demo的網站,點擊文字會跑到這個主題在GitHub上的Repo。
我這邊本來打算用Cards這個主題做我的網站,但做下去之後,發現我能力不足,太難改了,怕會鑽研錯原本此文設定的方向,失去原本要做部落格的初衷。所以我決定隨波逐流,跟隨社群討論度最高的NexT 作主題。
點擊進到NexT的GitHub上,複製repo的位置,準備把它clone下來,如果不熟悉指令可以看看Git和GitHub教學。
終端機這時候在Hexo資料夾操作指令
$ git clone <URL> themes/next
<URL>是你剛剛複製repo的網址,後面的 themes/next
表示clone下來的檔案要放入的位置。
在文字編輯器找到themes資料夾下面有剛剛clone回來的主題資料夾,複製資料夾名稱,然後開啟 _config.yml 找到 themes:
進行修改。
修改完畢之後,記得要把Hexo server關掉 ( Ctrl+C )。
再次開啟Server,並查看瀏覽器。
$ hexo s
成功啦!
部署到GitHub Pages
我們接下來要做的事,是符合GitHub Pages的規定,也就是使用了GitHub的這項服務。
新增Repo
點擊 New repository
這個Repository命名,Hexo官網有規定,必須是 <GitHub用戶名>.github.io
,這點要特別注意!
按下 Create repository
看到這頁面,表示新增repo成功,截圖中標出的連結,把它複製起來。
回到Hexo資料夾,找到 _congfig.yml 的 Deployment
如圖示修改成這幾行:
type: git
repo: <剛剛在GitHub repo複製的那段連結>
branch: main # 我前面步驟已經把分支master改為main了
要注意的是,這邊 repo
要放的連結,如果是用SSH Key連結的網址,那應該要先設定好SSH Key的連結。
git config設定
如果你使用過 git push
指令,那這步可以跳過。
$ git config --global user.name "你的GitHub名字"
$ git config --global user.email "你的GitHub信箱"$ git config --list # 檢查有沒有設定好
GitHub部署
我們先到剛剛建立的GitHub repo查看 Settings
拉到下方的 GitHub Pages,記住現在顯示的樣子,什麼都沒有,先記著。
回到終端機,因為Hexo沒有預載一鍵部署的功能,需要安裝 hexo-deployer-git 套件幫忙。
$ npm install --save hexo-deployer-git
然後做部署
$ hexo generate # 生成
$ hexo deploy # 部署
或直接將上面兩行簡寫成:
$ hexo d -g # 生成靜態網頁並部署
會看到類似這樣的畫面,似乎成功了,再去GitHub看一下。
部署完成!接著把上圖中,GitHub Pages 給你的網址複製起來。
設定連結
回到Hexo資料夾
找到 _config.yml 的 URL
區塊,把剛剛GitHub Pages 提供的網址貼上。
再做一次 $ hexo s
應該就有了。
有空再講發文操作、Next的其他擴充工具、Markdown原始檔git版控、hexo指令……
References
Hexo官方文件
GitHub Pages官方簡介
從無到有的 Blog 建置教學 (含 domain 購買轉址)
Ray-歡迎來到網頁世界-Hexo 分類 ← 大推這系列,看完變Hexo小天~才!
喜歡yarn大於npm的,也可以看這些:
记录生活,分享点滴:通过 Hexo 搭建与使用个人博客
使用 Hexo 和 Github 快速搭建个人博客
如果有把Hexo資料夾做 git init
,且因為clone主題下來,導致Hexo資料夾裡有兩層git版控的話,可以看這篇:
在 hexo 中使用 git submodules 管理主題