在這個網路發達的時代,擁有一個個人部落格不僅是一種自我表達的方式,更是分享知識和經驗的平臺。本系列的教學文章將使用 Hexo,基於 Node.js 的靜態網站生成器,利用條列式的步驟帶著初學者一步一腳印,從頭開始打造一個屬於自己的部落格。
此次教學要來講解如何設置 Hexo 的開發環境,以及怎麼創建出第一個 Hexo 專案,此教學系列適用於 Windows 系統。
一、Hexo 簡介:
Hexo 是一個基於 Node.js 的快速、簡單且強大的靜態網站產生工具,主要用於創建個人網誌。它以極高的生成速度著稱,短時間內就能將數百篇文章編譯為網頁。透過使用 Markdown 撰寫文章,讓創作者可以專注於文章內容本身,而無需花費過多時間在排版和格式處理上。
此外,Hexo 擁有豐富的插件和主題,允許使用者創建出屬於自己獨一無二風格的網站。並且 Hexo 生成的靜態網站可以輕鬆部署到各種平台,如 GitHub Pages、Netlify 或其他任何支援靜態網站托管的服務。
更多 Hexo 相關資訊可以查看 Hexo 官方文件。
二、Hexo 開發環境設置:
文字編輯器
挑選一個順手的文字編輯器即可,比如 Vim、Visual Studio Code、Notepad++、Windows 內建記事本等等。筆者常用的文字編輯器是 Visual Studio Code。
Node.js
-
前往 Node.js 官網,點擊首頁下載 LTS 長期支援版本,Hexo 官網建議選擇 Node.js 10.0 及以上版本。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
開啟 Node.js 的安裝檔,點擊 Next 按鈕,接著勾選同意選項,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
選擇 Node.js 要安裝的位置,使用預設安裝位置即可,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
使用預設設定即可,接著點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
不勾選安裝必要的工具選項,直接點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
確認安裝設定都沒問題的話,點擊 Install 按鈕開始 Node.js 的安裝作業。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
Node.js 安裝成功後,點擊 Finish 按鈕結束安裝檔。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
開啟終端機之後,執行 node -v
或 node --version
指令,正常顯示 Node.js 版本的話,代表安裝成功,如果沒有顯示,可以重新開機電腦再試試看。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Git
-
前往 Git 官網,點擊首頁 Download for Windows 按鈕前往下載頁面,點擊 Click here to download 下載最新版的安裝檔。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
開啟 Git 的安裝檔,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
選擇 Git 要安裝的位置,使用預設安裝位置即可,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
根據自己的需求勾選設定選項,如果沒有特別需求的話,使用預設安裝設定即可,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
根據自己的需求更改 Git 資料夾在 Windows 開始選單顯示的名稱,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
根據自己的習慣選擇文字編輯器,這邊選擇筆者常用的 Visual Studio Code,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
建議選擇下面的選項,因為目前的開發者、社群和開發平臺逐漸使用 main 取代 master 當作初始分支名的名稱,改名的原因可以閱讀此篇文章,接著點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
Git 的 Path 路徑設定,選擇中間的建議選項即可,點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
除非自己有特殊的需求,接下來使用預設的設定即可,重複點擊 Next 按鈕。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
確認安裝設定都沒問題的話,點擊 Install 按鈕開始 Git 的安裝作業。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
Git 安裝成功後,點擊 Finish 按鈕結束安裝檔。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
開啟終端機之後,執行 git -v
或 git --version
指令,正常顯示 Git 版本的話,代表安裝成功,如果沒有顯示,可以重新開機電腦再試試看。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
三、Hexo 安裝:
-
開啟終端機之後,輸入下面指令來安裝 Hexo。
npm install -g hexo-cli
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
執行 hexo -v
或 hexo version
指令,正常跑出 Hexo 相關資訊的話,代表安裝成功。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
四、Hexo 初始專案:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
知識補給
在終端機中,想要更改資料夾的位置時,需使用 cd
指令。
終端機開啟預設會是 C:\Users\username
用戶資料夾,也就是存放檔案總管中常見的桌面、下載、圖片、影片等等資料夾的地方。
cd Downloads
cd C:\Program Files
-
選擇一個要來儲存 Hexo 專案的資料夾,執行下面的指令創建 Hexo 專案。
hexo init [folder name]
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
使用 cd
指令進入到剛創建好的專案資料夾。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
執行下面的指令安裝 Hexo 所需要的套件。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
五、Hexo 運行伺服器:
-
執行下面的指令,運行 Hexo 伺服器,如果要終止運行按 Ctrl + C
組合鍵。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
-
開啟瀏覽器前往 http://localhost:4000/,就能看到 Hexo 運行成功而顯示的首頁囉。
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
此篇教學到此告一個段落,讓我們一起為 Hexo 能夠正常運行感到快樂!但目前我們的部落格只能自己的電腦本地瀏覽,因此下次的教學將會講解如何將 Hexo 上架到 GitHub Pages 運行,讓世界各地的人們都能瀏覽您的部落格。
如果在學習過程中遇到什麼問題,歡迎加入 Discord 伺服器來討論、詢問問題。
Copyright © 2024 SmallShawn95. All rights reserved.