你可以使用 webhook 加上極簡單的程式語法,將訊息 ( 留言 ) 送進指定 bloon。更具體地說,你能夠藉由對 webhook URL 發送 HTTP POST 請求,將訊息張貼於指定 bloon 的訊息面板。
首先,登入 BLOON 網頁版,開啟控制台。
點選控制台左側的「Webhook」,按下「新增 Webhook」。
選擇訊息要張貼的目的 bloon。
這樣就能取得 webhook URL。
對 webhook URL 發送 HTTP POST 請求,能夠將訊息送進指定 bloon 的訊息面板。POST 請求的格式如下:
POST https://api.bloon.io/webhooks/NjeoPlW3T7KbOYrZuPmQHw
Content-type: application/json
{
"content": "Hi~ 首次發言請多指教!"
}
許多程式工具都能送出 HTTP POST 請求,例如使用 cURL 的範例如下。其中 https://api.bloon.io/webhooks/NjeoPlW3T7KbOYrZuPmQHw
請置換為你所取得的 webhook URL。
curl -X POST -H 'Content-type: application/json' \
--data '{"content": "Hi~ 首次發言請多指教!"}' \
https://api.bloon.io/webhooks/NjeoPlW3T7KbOYrZuPmQHw
請求送出後,就會看到所指定的 bloon 訊息面板上出現標註有「BOT」字樣的留言出現。
直接存取連結是一個 HTTP URL,你可以透過它直接存取已透過分享連結所分享的內容。以檔案來說,「直接存取」的意思是你不需要在網頁上按下「下載」按鈕 —— 只要透過瀏覽器訪問直接存取連結,就會觸發檔案下載 —— 這代表你可以使用 wget 或是 curl 等指令取得檔案。
取得方式非常簡單:將任何分享連結中的子網域 (subdomain) 「www
」改為「direct
」就完成了!
例如,這是一個分享連結:
https://www.bloon.io/share/wH22n3SF
其直接存取連結則是:
https://direct.bloon.io/share/wH22n3SF
提示:可以參考此頁中段落「建立新的分享連結」,依指示建立、取得一個分享連結。
這是一個資料夾的直接存取連結範例:
https://direct.bloon.io/share/pXs4lp4H
如果使用瀏覽器開啟上述連結,你將會看到如下四行文字:
BLOON LOGO/
landscape-with-trees-and-mountains.jpg
toast.jpg
vintage-car-in-front-of-house.jpg
開啟並對照其分享連結內容:
https://www.bloon.io/share/pXs4lp4H
你會發現它們是此資料夾內所有收藏項目的名稱,並依循以下格式列表:
- UTF-8 編碼的純文字
- 每行顯示一個項目
- 每行皆以字元 '\n' 作為結尾
- 資料夾名稱結尾會串接 '/' 字元
你可以很容易地使用任意程式語言,根據以上格式解析出這些項目名稱。若將項目名稱以相對路徑的方式串接於原本的直接存取連結後方,你就可以訪問這些收藏項目。
舉例來說,你可以使用以下 URL 直接下載檔案「toast.jpg」:
https://direct.bloon.io/share/pXs4lp4H/toast.jpg
其中「BLOON LOGO」是一個子資料夾,你可以使用以下 URL 訪問其內容:
https://direct.bloon.io/share/pXs4lp4H/BLOON%20LOGO
同樣地,你會看到「BLOON LOGO」內的項目依循上述格式,以純文字方式列表。
提示:如果在「BLOON LOGO」內還有資料夾項目,你一樣可以再以相對路徑方式串接 URL,並向更下層訪問,以此類推。
提示:我想你一定知道,「%20」是「空格」的 URL 編碼。
你可以根據上述特性,快速建立一個客製化的、公開發佈的靜態網頁。嘗試跟隨以下步驟操作:
-
下載 BLOON 應用程式,安裝、註冊並登入 。
-
在任意 bloon 中建立一個新資料夾。
-
對此資料夾建立分享連結。
-
在此資料夾中加入一個空文字檔。
-
將文字檔命名為「test.html」。
-
使用任意文字編輯器,開啟 test.html 並加入以下內容,注意使用 UTF-8 編碼儲存:
<!DOCTYPE html>
<html>
<head>
<title>嗨,世界</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>嗨,空氣多清新,世界多美好
<span class="red-heart">❤</span>
</h1>
</body>
</html>
- 將剛才建立的分享連結改為直接存取連結,並且在後方串接「text.html」。完成後看起來應該像這樣:
https://direct.bloon.io/share/[分享連結 ID]/test.html
- 使用任意瀏覽器開啟以上連結,你就會看到你的第一個客製化網頁!
提示:別忘了,BLOON 雲端不會庫存你的檔案!你必須保持任何一個檔案複本所在電腦上的 BLOON 應用程式開啟,才能正常訪問以上客製化網頁。
補充:如果你對 HTML 語法不是那麼熟悉,這裡有些不錯的學習資源可以參考。
讓我們為以上網頁加入一點裝飾 ( 加入一個 CSS 檔 )。嘗試跟隨以下步驟操作:
-
在上一段落步驟 2 中新建立的資料夾內新增一個空文字檔。
-
將文字檔命名為「test.css」。
-
使用任意文字編輯器,編輯檔案「test.css」,使內容如下:
.red-heart{
color: red;
}
- 使用任意文字編輯器,在上一段落步驟 5 中所提及的檔案「test.html」中加入
<link>
標籤,使內容如下:
<!DOCTYPE html>
<html>
<head>
<title>嗨,世界</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>嗨,空氣多清新,世界多美好
<span class="red-heart">❤</span>
</h1>
</body>
</html>
- 同樣使用瀏覽器開啟此直接存取連結,你會看到圖中的愛心變成了紅色。代表「test.css」中定義的樣式已經生效。
請注意在此案例中,我們使用相對路徑的方式,在 HTML 文件中存取 CSS 檔。
你也可以使用免費版型來快速建置靜態網站。嘗試跟隨以下步驟操作:
-
在任意 bloon 中建立一個新資料夾。
-
對此資料夾建立分享連結。
-
下載這個免費的網頁主題 ( bootstrap theme ):開啟頁面後,點選「Free Download」以下載。
-
將下載後的 zip 檔解壓縮。
-
將解壓後的內容放到步驟 1 所建立的資料夾中:讓 index.html, README.md... 等檔案直接陳列於此資料夾中。
-
稍等待一段時間,直到 BLOON 應用程式在系統選單列 ( Windows 系統下稱為工作列 ) 中的圖示從載入狀態「」恢復為正常狀態「」。
-
將步驟 2 所建立的分享連結改為直接存取連結,並且在後方串接「/index.html」。完成後看起來應該像這樣:
https://direct.bloon.io/share/[分享連結 ID]/index.html
使用任意瀏覽器開啟以上連結,你應該會看到此版型的網站已經架設起來。如果你熟悉 HTML、CSS 與 JAVASCRIPT,現在就可以開始修改版型,客製化屬於你自己的網站!
最後請試試看,在瀏覽器的網址列中將以上連結末尾的「index.html」移除並訪問此連結 ( 資料夾的直接存取連結 )
https://direct.bloon.io/share/[分享連結 ID]/
你會發現依然能夠訪問此網站。這是因為資料夾的直接存取連結有一項特殊功能 —— 它會自動判斷其資料夾下是否存在檔名為「index.html」或「index.htm」的檔案,並使用資料夾連結直接訪問其內容,讓網站的網址更簡潔美觀。
提示:雖然並非靜態網站都一定使用 bootstrap,但是搜尋關鍵字「bootstrap theme」以找到更多其他免費靜態網頁版型,會是個好的開始。
網頁寄存服務讓你可以對直接存取連結「自訂網域名稱」,以及設定「網頁快取」。
如前述,當你建立了直接存取連結後,你就可以用它來存取你自製的網站。直接存取連結看起來是這樣:
https://direct.bloon.io/share/[分享連結 ID]/
但你也可以將直接存取連結「升級」為「寄存連結」,它看起來像是這個樣子:
https://kjy9vz.bloon.io
寄存連結比直接存取連結更簡短美觀;更重要的是,它本身完全由一個「子網域名稱」所構成。這讓你可以藉由它來設置客製化網域名稱 —— 也就是使用你所持有的獨特網域名稱來存取網站。並且使用寄存連結後也可以選擇開啟網頁快取。
你可以在 BLOON 控制台的網頁寄存設定頁,按下「新增設定」以新增一組網頁寄存設定。新增成功後,畫面上的「等效網址」欄位所顯示的 URL,就是此直接存取連結的寄存連結。
你可以在前述新增的網頁寄存設定組下勾選「開啟網頁快取」。一旦此項被勾選後,所有在此寄存連結下的資源,只要其尺寸小於 2 MB,都會被 BLOON 伺服器端快取 —— 也就是說,藉由此寄存連結存取檔案時,不會再每次到你的個人電腦上讀取,而會從 BLOON 伺服器端直接回傳。這樣會讓讀取速度快上許多。
提示:大於 2 MB 的資源還是會每次從你的電腦上讀取,不管是否有勾選「開啟網頁快取」。
網頁快取功能預設是關閉的,在你新增每一組網頁寄存設定時都需要手動開啟。由於 BLOON 在本質上是一個 P2P 的檔案傳輸與管理服務,BLOON 雲端預設不會以任何形式收存 ( 快取 ) 你的檔案,除非你明確指定要開啟相關功能。
有一點須注意,網頁快取純粹提供「讓寄存連結讀取速度加快」的輔助性能力,故若原始資源已無任何在線複本存在時,快取將被清除 —— 也就是說,即使有開啟網頁快取,若所有網頁資源 ( 檔案 ) 複本都在不可取得的狀態下,網頁一樣無法開啟。
寄存連結本身就是一個子網域名稱,這使得 DNS 服務可以用「CNAME」設定值將任意子網域名稱指向此網址。
一般而言,你可以在你所購買的網域名稱,例如「example.com」的 DNS 設定介面中,新增一筆 CNAME 設定,並將任意子網域名稱前贅字例如「www」或是「blog」指向你產生的寄存連結例如「kjy9vz.bloon.io」。這樣一來,你就可以使用網址「www.example.com」或是「blog.example.com」來存取「kjy9vz.bloon.io」的內容,也就做到了自訂網域名稱。
但是由於 BLOON 的寄存連結僅提供以 HTTPS 方式存取網頁。若僅依照上述方式設定 CNAME,你會發現以你所持有的子網域名稱開啟網頁時,會顯示憑證錯誤警示。這是因為網頁資料實際來自 BLOON 的雲端伺服器 ( 的 IP 位置 ),但是卻使用你所持有的子網域名開啟,與 BLOON 官方憑證紀錄不一致所致。
要解決上述問題,你可以選擇自行架設反向代理伺服器 (reverse proxy server),並在其上使用你所購買的私有網頁憑證 ( 或是使用 Let's Encrypt 來簽發免費的網頁憑證 )。如果你不想自行架設反向代理伺服器,也可以使用有提供 HTTPS 存取能力的 CDN 服務。例如 Cloudflare 這家公司的免費方案中,就有提供 HTTPS 存取與免費的網頁憑證簽發。
AWS CloudFront 是 Amazon 公司提供的付費 CDN 服務,可以搭配 AWS Certificate Manager 簽發免費的公有網頁憑證,也能夠做到以 HTTPS 存取你製作的網頁。 CloudFront 的存取速度極佳,且在流量不是非常大的狀況下,其實價格十分便宜。另外,若搭配 AWS Route53 管理 DNS 紀錄,還可以做到以「網域名」直接存取網頁,而不一定要用「子網域名」存取 ( 意思是說,你可以用例如「example.com」開啟網頁,而不一定要使用「www.example.com」來存取 )。
補充:以一般的 DNS 進行 CNAME 轉址時,想要使用自訂網域名稱存取其他網域內容時,只能使用「子網域」進行存取,若直接使用網域名存取將會失敗。而 CloudFront 搭配 Route 53 之所以可以做到直接使用「網域名」存取網頁,是因為兩者 ( CDN 與 DNS 服務 ) 都是由 AWS 提供,其在後端可以進行內部溝通。
關於使用 BLOON 網頁寄存功能建立網站以及自訂網域名稱的詳細實作細節,可以參考以下三篇文章說明:
- 使用 BLOON 網頁寄存建立網站 ( 一 )
- 使用 BLOON 網頁寄存建立網站 ( 二 ) —— 搭配 Cloudflare 自訂網域名稱
- 使用 BLOON 網頁寄存建立網站 ( 三 ) —— 搭配 AWS CloudFront + Certificate Manager + Route 53 自訂網域名稱