Vic's Blog

遺忘x回想x自動化

0%

Hexo教學(二) 環境建立與安裝 hexo

發表於 更新於 分類於
hexo安裝並嘗試啟動它。

基礎環境建立

  1. 開啟 VScode後，按下快捷鍵 ctrl+~，會打開終端機
  2. 輸入 node -v
    • 確認 node.js，若成功會出現版本編號
  3. 輸入 npm -v
    • 確認 npm，若成功會出現版本編號
  4. 輸入 npm install -g hexo-cli
    • 正式安裝 hexo

node.js與 npm

自己對它們的了解， node.js是一個執行 JavaScript的環境，如同要運作 python時必須安裝 python的執行檔，npm則是一個線上的套件資源庫，可以輸入指令 npm install 套件名稱 來安裝額外套件，可以在網路上搜尋這兩個關鍵字，會有更多開發者的說明。

初始化 hexo

上一階段已安裝完 hexo所需的基礎環境，接著要在電腦中新增一個空的資料夾來存放 hexo的檔案。

  1. 新增資料夾
    • 可以直接在桌面上新增一個資料夾，接著將它拖曳至 VScode，終端機的路徑就會是該資料夾的路徑了
    • 或者輸入終端機指令來新增一個空的資料夾並進入該資料夾中
  2. 輸入 hexo init 自訂部落格名稱
    • 為了方便說明自訂部落格名稱簡化為 hexoblog
    • 確認終端機路徑已在新建立的空資料夾中，我們要在這個資料夾中下載 hexo的初始檔案，也就是 hexo的初始化
    • 資料夾名稱可以跟部落格名稱不同，可以在 hexo的設定檔中更改部落格名稱
    • 若只輸入 hexo init，很可能會遇到安裝錯誤
  3. 確認 hexo初始資源
    • 此時資料夾結構應該會是 桌面\新增資料夾\hexobolg
    • 輸入 cd hexobolg，路徑會從 桌面桌面\新增資料夾 變更為 桌面桌面\新增資料夾\hexobolg
    • 可以在 VScode的左邊檔案視窗檢查，確認 hexobolg的資料夾已有 hexo的初始相關檔案

舉個範例，若在桌面上新增了一個資料夾，那麼最終資料夾結構應該會是 桌面\新增資料夾\hexoblog

修改基礎設定

剛下載好的 hexo有些設定是預設的，所以我們要修改成自己的。
找到 hexoblog\_config.yml這隻檔案，可以先修改以下資訊

1
2
3
4
5
6
7
8
# Site
title: Help One Percent
subtitle: '遺忘x回想x自動化'
description: '哪怕是1%也好，只怕自己停佇不前'
keywords: 前端,CSS,JavaScript,Vue.js,git,演算法入門
author: Vic
language: zh-TW
timezone: ''

啟動 hexo

接下來，我們可以先使用預設主題模擬上線情況。

  1. 輸入 hexo generate
    • 會產生靜態檔案
  2. 輸入 hexo server
    • 啟動 hexo內建的模擬網頁伺服器
  3. 在網址列輸入提供的網址，預設會是 http://localhost:4000

若成功看到預設主題以及第一篇文章標題 “Hello World”，恭喜你已經完成一半了!

接下來我們要新增一篇文章並調整主題以及其他設定。

參考來源

  1. Ray - (3)試著學 Hexo - 如何安裝 Hexo
  2. Ray - (4)試著學 Hexo - 認識 Hexo 目錄結構