建立自己的部落格：創建Hexo Blog初始的模板

安裝Hexo手把手教學

• 在你的桌面上建立一個資料夾

• 點進去資料夾之後在資料夾路徑的位置上輸入cmd按下Enter按鍵

安裝項目-hexo-cli

• 輸入以下指令安裝，讓你也能使用Hexo命令列功能

npm install -g hexo-cli

檢查hexo-cli安裝完成

• 確認顯示版本號代表已安裝完成

初始化Hexo檔案

• 輸入以下指令產生Hexo初始化需要的檔案及資料夾 如果出現黃色訊息的意外情況請點我

hexo init

檢查Hexo安裝成功

• 成功看到Start blogging with Hexo!代表安裝完成囉

• 可以看到剛剛的資料夾中出現了許多資料夾及檔案

部落格產生(預設版本)

• 在前面我們產生的cmd介面中輸入以下指令即可看到預設的版本 (指令意思是啟動本地服務器預覽部落格畫面，預設Port使用4000)
• 如果出現黃色訊息的意外情況請點我

hexo s

• 打開你的瀏覽器(Chrome、Edge)
• 輸入以下的網址

http://localhost:4000/

• 出現這個畫面代表你已經成功架設起屬於自己的部落格了

Hexo初始化資料夾講解

• _config.yml
  • 部落格的設定檔
• scaffolds
  • Markdown(md)檔案生成的模板
    • draft.md：草稿使用的文章模板
    • page.md：分頁畫面使用的網頁模板
    • post.md：正式區使用的文章模板
• source
  • 放置網站內容的地方(前輟帶有_會被Hexo忽略，僅有_posts不會) 這邊的所有md、html檔案在處理之後會放置/public
• themes
  • 根據不同的主題生成不同的靜態網頁風格。 快點擊我找一個自己喜歡的模板吧!!! (如果官方預覽不知道怎麼看到點我)

hexo init故障排除

• 這代表你的資料夾並非空的導致初始化失敗喔!!! 檢查一下你安裝Hexo的資料夾吧(以下是失敗可能範例)

官方主題看預覽畫面教學(選好的主題將在Day4進行更換)

• 通常點進去都會有對應的靜態網頁連結可以點擊
• leedom主題

• Tranquilpeak主題

• Oliver主題

hexo s故障排除

• 這代表port號被占用了
• 可以試著改用以下方式讓使用的port號改變

hexo s -p 6000

結尾

今天也好好的邁出第二步了，看到屬於自己的畫面，希望能夠幫助所有喜歡部落格的我跟你。

參考資料

1 Hexo官方文件