• 以下指令如未特別說明,皆是在部落格資料夾的 root 輸入的,eg: D:\hexo_blog_in_shoka_theme
  • 此處僅列一些必要指令,詳細內容請至官方文件詳閱。

# 小技巧 & 指令

# 下載 Hexo

  • Install hexo
    npm install -g hexo-cli
  • Initial hexo blog
    # 1. 初始化新的 Hexo,會在當前路徑建立一個叫 name 的資料夾 (名稱可以隨意取)
    hexo init name
    # 2. 進入剛剛建立的 name 資料夾
    cd name
    # 3. 安裝 git 部署套件,以便等會更新主題時使用
    npm install hexo-deployer-git --save

# Shoka 主題配置

  • Install shoka theme官方安裝文件
    git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka
  • # Uninstall
    npm un hexo-renderer-marked --save
    # Install
    npm i hexo-renderer-multi-markdown-it --save
    npm install hexo-autoprefixer --save
    npm install hexo-algoliasearch --save
    npm install hexo-symbols-count-time
  • #上傳索引
    hexo algolia

以上指令配置過一次即可,而以下指令則是常用指令,有需求時就會使用。

# 常態執行三步驟

  1. 刪除 public 資料夾
hexo cl
  1. 產生 public 資料夾
hexo g
  1. 在本地端啟動 Hexo 伺服器
rem 也可以輸入 hexo server
hexo s

# Run hexo using batch file

I have created a batch file run_hexo.cmd on desktop, in order to open the hexo blog more conveniently.

run_hexo.cmd
@echo off
title Run hexo automatically
rem change path
cd /d "D:\git repos\hexo_blog_in_shoka_theme"
echo [1] - Run hexo server only
echo [2] - Run hexo cl, g and server
choice /c 12 /n /m "Your choice: "
rem mode 1: run just server
if "%ERRORLEVEL%" == "0" goto :eof
if "%ERRORLEVEL%" == "1" goto ser
rem mode 2: run hexo cl, g and server
start cmd /c "hexo cl && hexo g"
pause
:ser
rem run hexo server
start cmd /k "hexo server"
pause
rem (open a blank cmd is use to create new page.etc)
start cmd
rem open current folder
start .
timeout 5
rem open home page
set url="http://localhost:4000/"
start msedge --inprivate %url%
goto :eof

# 建立文章相關

  • 建立文章

    如果沒有設定 layout,則會使用 _config.yml 中的 default_layout 來設定 (預設為 post )

    hexo new [layout] <title>
    hexo new <title>
    # eg: hexo new "python app"
  • 建立草稿 (draft)

    • 在建立時會被儲存於 source/_drafts 資料夾,可透過 publish 指令將草稿移動到 source/_posts 資料夾
    • 這項指令的使用方式與 new 十分類似,也可在指令中指定 layout 來指定佈局。
    • 草稿預設不會顯示於頁面中,可在執行時加上 --draft 選項,或是把 render_drafts 設定改為 true 來預覽草稿。
    hexo publish [layout] <title>

# 部署至 GitHub

  • # 1. 清除之前建立的靜態檔案,也可以輸入 hexo clean
    hexo cl
    # 2. 建立靜態檔案,也可以輸入 hexo generate
    hexo g
    # 3. 部署至 Github Pages,也可以輸入 hexo deploy
    hexo d
    # 4. 運行 hexo algolia 上傳索引
    hexo algolia

# 同場加映:在手機端 run localhost

Step 1. Find IP Address (like ipv4) of your PC

# open cmd and type:
ipconfig

Step 2. Open browser on your device, and go to {IP Address}:{Port} to access the server.
Example for hexo server:

192.168.113.37:4000

注意:要用其它裝置連結 web server 的前提是要在同一個網路之下
如:分享網路給筆電的手機 & 連到同一個網路分享的平板

# 懸而未解的問題

    • 暫時解法:編輯 markdown 時除了記得加上 mermaid: true 外,還要把宣告嵌入語言的 mermaid 改成 Mermaid 。(來源)
    • 另解:加入以下程式碼
      流程圖
      <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      </script>
      <pre class="mermaid">
      flowchart LR
      	A((youtube))
      	B(python file)
      	C(folder selector)
      	D{download\nsuccessful?}
      	E((done))
      	A -- copy stickers' html --> B
      	B -- run and paste --> C
      	C -- select the folder --> D
      	D -- success --> E
      	D -- fail --> A -- manual download --> E
      </pre>

# References & Link

  • 官方 Hexo 文件: https://hexo.io/zh-tw/docs
  • 官方 Hexo 建立文章: https://hexo.io/zh-tw/docs/writing.html
  • 官方 Shoka 文件: https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/
  • 官方 Shoka 特殊功能介紹頁面: https://shoka.lostyu.me/computer-science/note/theme...
  • 非官方 Algolia 配置流程: https://docs.kaitaku.xyz/guide/config.html# 配置流程
  • 非官方 Accessing a localhost server on another device
  • Link 預設啟動路徑: http://localhost:4000/