Frank's Doc

技術研究筆記

0%

Hexo -- Docker -- vscode

發表於 更新於 分類於

在 windows -- Docker -- vscode 中有提到使用 docker & vscode 的開發流程，因此本篇文章會將 hexo blog 也轉換成 container 的形式，方便本機的環境管理和專案的可攜帶性。

結果

  1. 專案從 github 拉下來: git clone ....
  2. vscode 彈出可以開啟 container，點選 reopen in container
  3. nodejs 和 hexo 的開發環境被建立起來了，可以開始寫 blog 了。

3 步驟建立好開發環境，不用裝 nodejs、不用裝 hexo-cli、不用下 npm install，只要將專案 pull 下來並透過 vscode 開啟就可以直接開發。

加入 .devcontainer

有兩種辦法:

  1. 用 vscode 的 control panel –> add development con.... 先選擇最接近的模板(ex: hexo 就是選擇 node)，然後再用模板修改成需要的 dockerfile 和 devcontainer.json。
  2. 用現有的 .devcontainer，其實和第一點差不多，但用久了之後複製在修改我覺得比較快。
    以下是我的 Dockerfile & devcontainer.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# Dockerfile
#到 dockerhub 查詢需要的 image
FROM node 

ARG USERNAME="frank"
ARG USER_UID=2000
ARG USER_GID=$USER_UID

#新增使用者
RUN groupadd --gid $USER_GID $USERNAME \
    && useradd --uid $USER_UID --gid $USER_GID -m $USERNAME \
    #
    # [Optional] Add sudo support. Omit if you don't need to install software after connecting.
    && apt update \
    && apt install -y sudo \
    && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
    && chmod 0440 /etc/sudoers.d/$USERNAME

# 設定時區
RUN DEBIAN_FRONTEND=noninteractive apt install -y --no-install-recommends tzdata
RUN TZ=Asia/Taipei \
    && ln -snf /usr/share/zoneinfo/$TZ /etc/localtime \
    && echo $TZ > /etc/timezone \
    && dpkg-reconfigure -f noninteractive tzdata 

#安裝需要的 package
RUN apt install -y \
    git 

#使用 npm 安裝 hexo
RUN npm install -g hexo-cli

USER $USERNAME
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.224.2/containers/javascript-node
{
	"name": "myBlog",
	"build": {
		"dockerfile": "Dockerfile"
	},
	// Set *default* container specific settings.json values on container create.
	"settings": {},
	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [],
	"containerUser": "frank",

    //可以參考 https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_lifecycle-scripts
	"postCreateCommand": "npm install && git clone https://github.com/theme-next/hexo-theme-next themes/next || true"
}

這樣就完成了，只需要加入這兩個檔案 vscode 就可以用 container 的方式開啟專案了 ヽ(●´∀`●)ﾉ 。

問題

使用 docker 寫 blog 有一段時間了，有碰到一些問題，以下做個紀錄

使用 hexo s 指令不會即時更新

我的解法是將專案放到 wsl2 中執行，準確的說是放在基於 wsl2 的 ubuntu20.0中，原因是:

  • 單純使用上述的方法會發現 hexo 相關的指令執行速度都很緩慢。
  • hexo s 的 server 不會同步更新更改的部分

因此讓我想到官方文件中有提到上述的 devcontainer 會使用 mount 將 windows 本地的資料接到 container 中，這時因為 linux & windows 的檔案結構差異會導致 I/O 效能十分糟糕。( 官方文件 )

Hexo Server does not update the content after page refresh #4571
文中有提到一些解法，但我認為有些本末倒置，但也可以參考看看。