Reason 原因

I write this tutorial for my best friend Mike.


Basic resources 基礎資源

Ubuntu 20.04 minmal is my choice.

Ubuntu 20.04 minmal 是我得選擇

  • Free Domain name and DNS nctu( need Taiwan’s ID)

  • Free Domain name and DNS freenom(.tk、.ml、.ga、.cf、.gq)

  • Free DNS cloudflare

Simple guideline for Freenom and Cloudflare

You must prepare 3 domain names like:

你必須準備3個 domain names 像是:

traefik.{DomainName}, code.{DomainName}, blog.{DomainName}

Software resources 軟體資源

  • Docker
  • Docker-compose
  • Hugo
  • Traefik
  • code-server(vscode online version)

Architecture diagram 結構關聯圖

graph TD Client[Client] subgraph Server subgraph Docker Traefik[Traefik:
Reverse Proxy&Load Balancer] Code[Code Server] Blog[Blog website] workspace((workspace)) end end Client --> |80&443| Traefik Traefik --> |code.DomainName| Code[Code Server] Traefik --> |blog.DomainName| Blog[Blog website] Code --> workspace Blog --> workspace

Installation instructions 安裝說明

All CODEUSER name need be same.

所有的 CODEUSER 名稱都要一樣。

Please type command one by one.



Please open 80 & 443 port on Oracle Cloud


sudo apt-get remove docker docker-engine containerd runc;
sudo apt-get update;
sudo apt-get install apt-transport-https  ca-certificates curl gnupg-agent  software-properties-common;
sudo curl -fsSL | sudo apt-key add -;
sudo apt-key fingerprint 0EBFCD88;
sudo add-apt-repository "deb [arch=amd64] $(lsb_release -cs) stable"
sudo apt-get update;
sudo apt-get install docker-ce docker-ce-cli;
sudo systemctl enable --now docker.service;

If you would like to use Docker as a non-root user, you should now consider adding your user to the “docker” group with something like:

如果你是 non-root 使用者想要使用 Docker, 你現在應該考慮通過以下方式將使用者加入到 Docker 的群組裡:

sudo usermod -aG docker {your-user} // echo $USER;

Please login again.



sudo curl -L "$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose;
sudo chmod +x /usr/local/bin/docker-compose;

Simple commands for docker-compose operation 用於docker-compose操作的簡單命令

Check your docker-compose.yml

檢查你的 docker-compose.yml

docker-compose config;

Launch your container from docker-compose.yml

從 docker-compose.yml 啟動你的容器

docker-compose up -d;

Stop your container from docker-compose.yml

從 docker-compose.yml 停止你的容器

docker-compose stop;

Remove your container from docker-compose.yml

從 docker-compose.yml 移除你的容器

docker-compose rm;


cd ~;
sudo apt install apache2-utils;
git clone;
mv myTraefikConfigByDockerComose traefik;
cd traefik;
echo $(htpasswd -nb {your-user} {your-password}); // copy that data. 
vim .env
CODEUSER=XXX # your name or what ever.
TRAEFIKDOMAINNAME='XXX' # 'Host(`traefik.{DomainName}`) || Host(`traefik.{DomainName2}`)'.
EMAIL=XXX # your email.
BASICAUTH='XXX' # use "echo $(htpasswd -nb {your-user} {your-password})" to generate your login data. do not forget ''
docker-compose up -d;


cd  ~;
git clone
cd code-server;
echo 'export GID=$(id -g);' >> ~/.bashrc;
echo 'export UID=$(id -u);' >> ~/.bashrc;
source ~/.bashrc;
vim .env
CODEUSER=XXX # your name or what ever.
CODEDOMAINNAME='XXX' # 'Host(`code.{DomainName}`) || Host(`code.{DomainName2}`)'.
SUDO_PASSWORD='' # default none, or you want
PASSWORD='XXX' # login password
docker-compose up -d;

Wait 1~2 mins.

等待 1~2 分鐘.

you can check your code server, please try to go to your URL.

您可以檢查你的 code server,請嘗試轉到您的URL。


Now we can see my code server, let us build a blog site in the code server.

現在我們可以看到我們的code server,讓我們在 code server 中建立一個 blog 站點。

Open a terminal.


Please select zsh be default environment.

請選擇 zsh 為預設環境

Please install Docker-compose in the environment.

請在這環境安裝 Docker-compose

git clone
cd myblog;
echo 'export GID=$(id -g);' >> ~/.zshrc;
echo 'export UID=$(id -u);' >> ~/.zshrc;
sudo chmod +x /usr/local/bin/docker-compose;
vim .env
CODEUSER=XXX # your name or what ever.
BLOGDOMAINNAME='XXX' # 'Host(`blog.{DomainName}`) || Host(`blog.{DomainName2}`)'.
docker-compose up -d

then you will see the folder which name is “blog”.

然後你將會看到名稱為 “blog” 的資料夾。

Don’t do below:


#sudo chown abc:abc blog;
#echo 'alias hugo="docker exec -ti -u abc ${CODEUSER}_blog hugo"' >> ~/.zshrc;
#source ~/.zshrc;
#hugo new site .



cd /config/workspace/;
sudo chown -R abc:abc blog;
cd blog
rm -rf public
echo 'BLOGPATH=/config/workspace/blog\nfunction hugo {\n  zsh <<< "cd ${BLOGPATH} && /usr/local/bin/hugo $@";\n}' > ~/.zshrc;
source ~/.zshrc;
hugo new site .

You can choose your theme now, add a theme under the folder path “blog/themes”.

您現在可以選擇主題, 在資料夾路徑 “blog/themes” 下添加一個主題。

Hugo theme

The command will add under the folder path “blog/content/posts”.

該命令將在資料夾路徑 “blog/content/posts” 下添加。

hugo new posts/

The command will generate static HTML files under the folder path “blog/public”.

該命令將在資料夾路徑 “blog/public” 下生成靜態HTML檔案。

hugo -D

Notice, the baseURL value must be "/" in the file path “blog/config.toml”.

注意,在當案路徑 “blog/config.toml” 中,baseURL值必須設置為 "/"