0%

前言:

為何選用 Hxeo 來當作 Blog 框架?

  1. 因為建立於本地端,所以可以更方便離線進行編輯
  2. 使用 Markdown 語法撰寫 Blog,更方便、通用、容易上手
  3. 搭配線上CICD工具部署於 Github 上,完全零成本
  4. 中文文件資源多
  5. 支援多樣不同樣板,可隨心所欲切換風格
  6. 開源社群活躍
  7. 基於 NodeJs 擁有豐富的插件

建立自己的 Hexo:

安裝 Node.js

首先要安裝 Node.js

再來進入cmd

node -v

確認是否安裝成功

安裝 Hexo-cli

一樣進入cmd,使用下列指令安裝 Hexo

npm install hexo-cli -g

接著使用cmdcd指令進入 Hexo 資料夾的目錄中

使用hexo cli幫助我們快速建立 Blog 的環境

hexo init blog #建立一個 blog 資料夾, hexo 會複製對應的文件到此資料夾中

npm install #安裝相關套件

若要把 Hexo deploy 到 Github 上面,需要先安裝

npm install hexo-deployer-git –save

Hexo config.yml 設定說明

安裝完後再進入 Hexo 資料夾下的_config.yml檔案中
並將 type, repo, branch 設定如下

deploy:
type: git
repo: git@github.com:userName/blog.git
branch: gh-pages

寫作指令:

Hexo 替我們生成一個叫 “Post title” 的 Markdown 文件(post title 即為文章標題)

hexo new “post title”

輸入完指令後,進到 Hexo 資料夾中的 source 資料夾中,便會看到一個 post-title.md 的 markdown 文件,即可進行編輯。

若要生成草稿文件(draft):
(草稿頁面不會被 Hexo 渲染生成,但可以預覽其效果,也就是最後的靜態網站不會存在草稿文章。)

hexo new draft “Draft title”

若要生成純頁面(page):
(Hexo 文件夾中的 scaffolds 預設有三種形式的模板:草稿 draft、純頁面 page、文章 post)
(使用者也可以加入自訂的頁面格式,將指令後的 page, draft, post 改為自訂的模板名稱即可)

hexo new page “Page title”

清除快取檔案 (db.json) 和已產生的靜態檔案 (public)

hexo clean

輸入 Hexo 生成網頁的指令 (generate)

hexo g

輸入生成 Hexo 伺服器的指令 (server)

hexo s #會產生 Localhost 來提供使用者查看

若確定 blog 沒問題,則使用以下指令將更新過後的 blog deploy 至 GitHub 上

hexo d

此文作者:Walter Chang
此文地址: http://lazybonejc.github.io/blog/2021/12/29/HexoBlog寫作指令教學/
版權聲明:本網誌所有文章除特別聲明外,均採用 CC BY-NC-SA 3.0 TW 許可協議。轉載請註明出處!

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

此文作者:Walter Chang
此文地址: http://lazybonejc.github.io/blog/2021/12/25/hello-world/
版權聲明:本網誌所有文章除特別聲明外,均採用 CC BY-NC-SA 3.0 TW 許可協議。轉載請註明出處!