從發佈第一篇 什麼是 Render 至今，轉眼三個多月過去了，說好的更多範例和介紹持續 富奸 拖稿中。假如在公司，三個月足夠做出一些功能，但是自己寫興趣的東西卻沒有進度，這一定是...工具的問題！（咦）

為了用更好用的 Markdown 編輯器寫文章，這篇我就來介紹如何用 Render 部署自己的 HackMD，啊！不對，是部署 open source 的版本，CodiMD 和 HedgeDoc。

HackMD 的知名度應該不用介紹了 用了就跟唐鳳一樣強。因為各種歷史理由，CodiMD 和 HedgeDoc 這兩個 open source 專案都和 HackMD 有關聯。本篇先以 CodiMD 講解，最後會附上 HedgeDoc 的範例。

TL;DR 字好多我懶得看

只要你有 Render 的帳號，這個直接按下去，自己的 CodiMD 就部署完成了。

或是這個按下去，自己的 HedgeDoc 就部署完成了。

打完收工！

不過假如你想要知道按下去之後的詳情，可以繼續往下看...

部署 CodiMD 的需求

從 CodiMD 的文件中知道，部署一套可以運作的 CodiMD 需要：

1. CodiMD 主程式，可以在 Docker Hub 找到主程式的 Docker 映像檔。
2. 資料庫，PostgreSQL 或 MySQL 都可以。
3. 假如要把上傳到編輯器的圖片儲存在跟主程式同一台機器，就需要掛一個磁碟機上去。假如打算上傳到 imgur 或 S3，這個可以省略。

接下來就看在 Render 怎麼完成這些需求。

用 Dockerfile 部署 CodiMD

之前的 Render 介紹文提過，Render 除了支援一些知名的程式語言和框架，也支援 Dockerfile。因此，任何 open source 專案只要有提供 Docker 映像檔，理論上都可以部署到 Render。
CodiMD 的映像檔發佈在 Docker Hub，我只要寫一個很簡單的 Dockerfile 把它放進來就好啦！連文字編輯器都不用開。

製作 Dockerfile

1. 在自己的 GitHub 開一個新的 repo，就叫做 deploy-codimd-to-render

Public 或 Private 都可以，我自己習慣會加上 README

2. 直接在 repo 新增檔案

3. 檔名是 Dockerfile，檔案內容就這一行

FROM hackmdio/hackmd:latest

4. 點下 Commit new file 就完成啦！

在 Render 建立 PostgreSQL 資料庫

既然可以部署 CodiMD 的映像檔到 Render，當然也可以部署 PostgreSQL 或 MySQL 的映像檔到 Render。不過這邊我用更簡單的方式，直接使用 Render 管理的 PostgreSQL 資料庫。

1. 登入你的 Render Dashboard，按下右上角的 New 選 Database

2. 輸入一個自己好懂的名字，這邊就取 codimd-db，其他都不用動

3. 按下 Create Database，等一下，資料庫就建立完成了

4. 記下 Internal Connection String，等一下會用到

可以按下右邊的小眼睛顯示隱藏的內容，或是用左邊的按鈕直接複製內容到剪貼簿

在 Render 建立 Web Service

1. 按下右上角的 New 選 Web Service

2. 輸入之前建立的 GitHub repo 的網址，並且點選下方列出的 repo

假如你建立的 repo 是 private 的，你需要先按下 GitHub 授權 Render 去讀你的 repo

3. 接下來做一些設定。首先，先取一個好懂的名字，這邊我用 my-codimd，其他都不用動

假如你的預設 branch 不是 master（比如說 main）要記得改

4. 往下拉，展開 Advanced，按下 Add Environment Variable，輸入下列三組環境變數

• Key 填 CMD_DB_URL，Value 是之前建立資料庫時記下的 Internal Connection String
• Key 填 CMD_IMAGE_UPLOAD_TYPE，Value 是 filesystem
• Key 填 CMD_PROTOCOL_USESSL，Value 是 true

5. 按下 Add Disk，取一個好懂的名字，並且在 Mount Path 填入 /home/hackmd/app/public/uploads（CodiMD 預設路徑，不能改）

這個就是用來儲存上傳圖片的磁碟機，假如存在其他地方例如 imgur，這一步可以省略

6. 剩下都不用改，捲到最下面，按一下 Create Web Service，接下來會進入 service 的部署畫面。當狀態從 In progress 變成綠底白字的 Live 就完成囉！

7. 部署後的 service 會被分配一個在 onrender.com 底下的網址，以這個例子來說是 my-codimd-yyde.onrender.com，點下去就可以連到熱騰騰的 CodiMD

用 YAML 部署 CodiMD

「怎麼這麼麻煩啊！」

我聽到你內心的吶喊了，沒辦法，要讓一個 service 跑起來就是有這些必要的設定。不過，有沒有辦法一次設定完呢？當然可以，Render 支援 IaC (Infrastructure as Code)，可以用一個 YAML 就寫完所有設定。

建立 render.yaml

在 GitHub 同一個 repo 再建立一個檔案，檔名是 render.yaml，貼入以下內容

databases:
- name: my-codimd-db
  ipAllowList: [] #建立一個其他人都不能連的資料庫

services:
- type: web
  name: my-codimd
  env: docker #從 Dockerfile 建立一個 Web Service
  envVars:
  - key: CMD_DB_URL
    fromDatabase:
      name: my-codimd-db
      property: connectionString # 直接把資料庫的 connecion string 填進這個環境變數
  - key: CMD_PROTOCOL_USESSL
    value: true
  - key: CMD_IMAGE_UPLOAD_TYPE
    value: filesystem
  disk:
    name: my-codimd-upload
    mountPath: /home/hackmd/app/public/uploads # 直接把磁碟機掛在這個路徑上
    sizeGB: 1

用 render.yaml 部署

1. 登入 Render Dashboard，在左邊的列表選 YAML，接著點下 New from YAML

2. 輸入之前建立的 GitHub repo 的網址，並且點選下方列出的 repo

3. 輸入好懂的名字，按下 Apply，完成！接下來就等資料庫和 service 部署，自己的 CodiMD 就上線了

一鍵部署 CodiMD

既然 YAML 只要照抄就好，那也不用每個人抄一份吧？所以我就寫好放在這個 repo了。可以注意到這個 repo 除了 Dockerfile 和 render.yaml，在 README 中還有一個 DEPLOY TO RENDER 的連結。按下去就會直接連到 Render Dashboard 裡面 YAML 的介面，這應該是最輕鬆的部署方式了。

部署 HedgeDoc

因為 HedgeDoc 和 CodiMD 在部署上很像，所以不管是 Dockerfile 或是 render.yaml 都幾乎一樣。我就把部署 HedgeDoc 到 Render 需要的檔案放在這個 repo，也包含一鍵部署的連結。

結語

其實...雖然很像是在打臉，單純就 Markdown 編輯器的需求來說，HackMD 免費版就很好用，最近推出 prime 也不貴，那幹嘛自己部署 CodiMD/HedgeDoc 啊！

我也不知道。還是希望這篇可以幫助到人 順便業配 Render 的服務。也希望下一篇寫出來的 Render 介紹文會更有用一點XD