Try   HackMD

在這個網路發達的時代,擁有一個個人部落格不僅是一種自我表達的方式,更是分享知識和經驗的平臺。本系列的教學文章將使用 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

  1. 前往 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 →

  2. 開啟 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 →

  3. 選擇 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 →

  4. 使用預設設定即可,接著點擊 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 →

  5. 不勾選安裝必要的工具選項,直接點擊 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 →

  6. 確認安裝設定都沒問題的話,點擊 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 →

  7. 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 →

  8. 開啟終端機之後,執行 node -vnode --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

  1. 前往 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 →

  2. 開啟 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 →

  3. 選擇 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 →

  4. 根據自己的需求勾選設定選項,如果沒有特別需求的話,使用預設安裝設定即可,點擊 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 →

  5. 根據自己的需求更改 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 →

  6. 根據自己的習慣選擇文字編輯器,這邊選擇筆者常用的 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 →

  7. 建議選擇下面的選項,因為目前的開發者、社群和開發平臺逐漸使用 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 →

  8. 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 →

  9. 除非自己有特殊的需求,接下來使用預設的設定即可,重複點擊 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 →

  10. 確認安裝設定都沒問題的話,點擊 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 →

  11. 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 →

  12. 開啟終端機之後,執行 git -vgit --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 安裝:

  1. 開啟終端機之後,輸入下面指令來安裝 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 →

  2. 執行 hexo -vhexo 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 用戶資料夾,也就是存放檔案總管中常見的桌面、下載、圖片、影片等等資料夾的地方。

# 【相對路徑】更改位置到 Downloads 資料夾
cd Downloads
# 【絕對路徑】更改位置到 Program Files 資料夾
cd C:\Program Files
  1. 選擇一個要來儲存 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 →

  2. 使用 cd 指令進入到剛創建好的專案資料夾。

    ​​​​cd [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 →

  3. 執行下面的指令安裝 Hexo 所需要的套件。

    ​​​​npm install
    

    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 運行伺服器:

  1. 執行下面的指令,運行 Hexo 伺服器,如果要終止運行按 Ctrl + C 組合鍵。

    ​​​​hexo server
    

    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 →

  2. 開啟瀏覽器前往 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 伺服器來討論、詢問問題。


📢 歡迎加入我的 Discord 伺服器
https://discord.gg/Jtd3eVrFJs

Copyright © 2024 SmallShawn95. All rights reserved.