Cloudflare 免費部署 · 免安裝 · 免資料庫
🎬 影片介紹:部署流程與軟體操作
如果不想看文字步驟,這段影片從 GitHub 下載程式、免費部署到 Cloudflare,到教室裡的實際操作示範,都完整走過一遍。
教室大屏工具(Cloudflare 版)部署與教室應用
🌱 軟體由來:我想要一個「打開就能上課」的頁面
這幾年教室裡的大屏、電子白板與投影機愈來愈普遍,但實際站在講台前操作時,常會遇到一種很瑣碎的困擾:白板要開一個程式、計時器要開網頁、抽籤用另一個工具、PDF 講義又得切到別的視窗。工具本身都不難用,難的是它們彼此不相干,一堂課上下來,老師有一半的注意力都花在切換畫面。
所以我一直想做一個很單純的東西:一個網頁,就是一整套上課工具。按鈕要大、圖示要清楚,因為在大屏前常常是站著、隔著一段距離用手指點;工具列平時要收在畫面邊緣,不能擋住教學內容;而最重要的是,這節課排好的畫面,下次要能原封不動地開回來。
後來我把它搬到 Cloudflare。原因很實際:免費方案不需要信用卡,也不用另外申請資料庫,設定一次之後就能一直使用。對一位想把時間留給教學的老師來說,這樣的門檻剛剛好。
🧰 七大類工具,涵蓋一整堂課的需求
工具列依用途分成七類,需要什麼就到對應的分類裡找,不必在一長串按鈕中翻找:
白板
畫筆、橡皮擦、幾何圖形,還能在任何內容上直接圈選、寫算式。
班級
抽籤、轉盤、計分板、待辦清單,處理點名、分組與班級經營。
遊戲
複習用的互動小遊戲,讓暖身與觀念檢核多一點參與感。
資源
PDF 講義、圖片、教學影片清單,以及 AI 大綱轉心智圖。
多媒體
實物投影、鏡像、凍結、截圖,把學生作品即時放上大屏。
雲端
整個課堂畫面的存檔、載入與分享,換教室也不必重排。
系統
時鐘、跑馬燈、噪音偵測、聚光燈等課堂節奏輔助。
🏫 課堂教學應用:一堂課的節奏
我習慣把「一堂課」當成一個單位來準備,而不是一個一個功能分開想。實際使用時,大概是這樣的流程:
把這節課排成一個「畫面」
先把 PDF 講義、圖片、教學影片加進清單(YouTube 網址會自動轉成嵌入格式),也可以把 AI 產生的大綱貼上,一鍵變成心智圖。只把一開始要用的東西放到畫面上、排好位置,存成「七年三班 第五課」這樣的名稱。下次上課一打開,就是你當初排好的樣子。
收心與預告
把時鐘放大顯示,需要時開整點報時;跑馬燈打上今日提醒;待辦清單列出這節課的流程,完成一項勾一項,學生自然知道現在進行到哪裡。
講義、板書與重點標示
PDF 按下播放就全螢幕,點左右兩側或用簡報遙控器換頁,還有雷射筆可以指重點。畫筆能直接在任何內容上圈選、寫算式;國語課換成田字格、英文課用四線格、音樂課用五線譜。要聚焦某一題時,用聚光燈把其他地方變暗。
計時、計分與音量提醒
小組討論時,計時器有大大的倒數環,最後十秒會有提示音,時間到會響鈴、畫面閃爍。計分板可以幫六個小組加減分,適合搶答和競賽;噪音偵測用麥克風偵測音量,以綠、黃、紅燈提醒學生控制音量。
把學生的作品放上大屏
實作與發表時,用投影功能把學生的作品即時投到大屏上,可以鏡像、凍結、截圖。複習時用轉盤或抽籤隨機點人回答,暖身又公平。
自動存檔與分享
下課前不用擔心,畫面會自動雲端存檔。按「分享」會產生網址和 QR Code,可以貼到班級群組,讓學生回家複習同一個畫面。
🖱️ 使用詳細教學:幾個常用的操作
工具列與視窗
- 📌工具列平常縮在左邊:滑鼠移過去或手指點一下就會展開,不擋住教學內容。
- ⭐釘選常用工具:按右上角的星星,常用的工具就會固定顯示。
- 🪟每個工具都是一個視窗:可以拖曳、縮放;連點兩下標題列就能最大化,全班都看得清楚。
建立並保存一堂課的畫面
加入教材
在「資源」分類中把 PDF 講義、圖片、教學影片加進清單。貼上 YouTube 網址會自動轉成嵌入格式;貼上 AI 產生的大綱則可以一鍵變成心智圖。
排出上課要用的樣子
只把一開始會用到的視窗放到畫面上,調整大小與位置。需要時把某個視窗最大化,或先縮小收著。
存成好記的名稱
在「雲端」分類按下存檔,命名為「七年三班 第五課」之類的名稱。下次上課從清單載入,視窗位置與白板內容都會回來。
分享給學生
按「分享」會產生這個畫面的網址與 QR Code。貼到班級群組,學生用手機或平板掃描就能看到同一個畫面;學生端是唯讀模式,不會改到老師的存檔。
🤖 上傳 HTML:讓 AI 做的教材直接變成一個網址
現在很多老師會用 AI 幫忙做互動教材,像是小測驗、小遊戲或模擬動畫,做好就是一個 HTML 檔。以前要讓學生打開來用,還得自己想辦法上傳到 GitHub 之類的免費網站空間,步驟多又麻煩。
現在只要打開「上傳 HTML」,選擇檔案就上傳完成;按「放到畫面」,就能直接在大屏上示範給全班看。接著按「分享」,馬上產生這份教材專屬的網址和 QR Code。
🚀 佈署說明:免費架在 Cloudflare 上
整套工具架設在 Cloudflare 免費方案,不需要信用卡,也不用另外申請資料庫。部署前只要準備兩件事,而且只需要做一次:
- 1️⃣註冊一個 Cloudflare 免費帳號(不需要信用卡)。
- 2️⃣安裝 Node.js,選 LTS 版,安裝時全部按「下一步」就可以了。
取得程式
到 GitHub 下載 ZIP
開啟專案頁面,按綠色的「Code」按鈕,再按「Download ZIP」,下載後解壓縮。
找到正確的資料夾
打開解壓縮後的資料夾,看得到 wrangler.toml 這個檔案的那一層,就是我們要操作的地方。
(可選)換一個自己喜歡的網址名稱
用記事本打開 wrangler.toml,把第一行的 webscreen 改成你喜歡的名字。只能用英文小寫、數字和減號。
登入與部署
在這個資料夾打開命令視窗
在資料夾上方的網址列輸入 cmd,按 Enter,就會在這個資料夾打開命令視窗。
登入 Cloudflare
輸入下列指令。第一次會問要不要安裝套件,輸入 y。
瀏覽器會打開 Cloudflare 授權頁面,按 Allow 允許。看到 Successfully logged in 就登入完成了。
開始部署
輸入下列指令:
第一次使用時會請你設定一個 workers.dev 子網域,取個好記的英文名字就好。完成後畫面會顯示一個網址,這就是你的網站了!
deploy.bat,它會自動幫你登入和部署。部署完成後的第一件事
立刻設定管理者密碼
打開網址後,先設定管理者密碼(至少四個字元)。在設定好之前,請先不要把網址分享出去。
以後程式有更新,只要再執行一次部署,原本的存檔都不會遺失。
📝 結語
這套工具沒有什麼艱深的技術,出發點只是一個很普通的觀察:上課時,老師的注意力應該留給學生,而不是留給切換視窗。把常用的工具收在同一個頁面裡,把排好的畫面存下來,下一節課就能少一點準備、多一點從容。
本作品採用創用 CC 姓名標示—非商業性—相同方式分享授權,歡迎老師們在教學上自由使用、修改和分享。如果在使用上有任何問題,或是有想新增的功能,都歡迎留言告訴我。