glitch 的中文翻譯是格利奇，小差錯？？？

使用 glitch 的一大便利之處是可以省去本地搭建 web 開發環境的步驟，完成程式碼的自動部署，以及方便的將專案分享給其他朋友。這一切都發生在瀏覽器裡。

![](https://img-blog.csdnimg.cn/img_convert/7f731101dadfdbf3956499f8c66f2f0a.png)

點選 join today，可以直接用 Github 的使用者名稱和賬號登入。

使用 Github 賬號登入，每個月的 free quota 是 1000小時：
![](https://img-blog.csdnimg.cn/img_convert/4be21ed4fefde883a0c61c9ce3e23886.png)

每當一個專案被編輯時，或者被其他使用者訪問時，quota hour 就開始扣減了。

登入之後，當月剩餘的 quota 在 dashboard 裡檢視：

![](https://img-blog.csdnimg.cn/img_convert/e9d7e60835c3d1f00716ae531608e0fa.png)

每個應用在 container 裡執行，最多隻能消耗 200 MB 磁碟空間，以及 512 MB RAM.

![](https://img-blog.csdnimg.cn/img_convert/ce7342fc98ff07d5da680a94d329fbe5.png)

glitch 支援六種專案模板：
![](https://img-blog.csdnimg.cn/img_convert/fc3f684167c1681859add57994fe0bfa.png)

# Glitch In Bio

這是一個靜態 web 頁面的模板。

![](https://img-blog.csdnimg.cn/img_convert/68ba6203d44640a822ca533267634094.png)

新建一個專案：
![](https://img-blog.csdnimg.cn/img_convert/5fe4f446065db6c74ba5caae44b3af17.png)

glitch 會自動生成一個專案框架：
![](https://img-blog.csdnimg.cn/img_convert/6f541076860c249f2b8451459988cb89.png)

如果只是處於 demo 用途，這些 meta 標籤都可以刪除：
![](https://img-blog.csdnimg.cn/img_convert/1d334403d28ca533f3c4c0626d43dd94.png)

todo.md 裡提供了一些練習步驟，可以照著一步步在 index.html 裡逐步完善：
![](https://img-blog.csdnimg.cn/img_convert/9f33be95ca3b125ebe8543f871c05ea7.png)

比如 img 標籤包含的 illustration 類，

![](https://img-blog.csdnimg.cn/img_convert/c06912d25114475764a764dcd6a640e4.png)

在 style.css 裡定義了當元素處於 active 狀態時，

![](https://img-blog.csdnimg.cn/img_convert/ee273206ef8c4557a733b7d3b10d1c29.png)

active 選擇器除了 a 標籤外，還可以用於其它任何標籤上。

如果一個 glitch 專案沒有包含下列這三個檔案，這個專案就被認為是一個靜態專案：

- package.json
- requirements.txt
- glitch.json
https://help.glitch.com/kb/article/38-what-types-of-apps-can-i-make-on-glitch/

使用 Show in a new Window 可以在一個全新的視窗裡開啟頁面：

![](https://img-blog.csdnimg.cn/img_convert/1e75de445b887f57cfa83442633b6b32.png)

![](https://img-blog.csdnimg.cn/img_convert/72ac6531669b4b05e09d76f085352abf.png)

除錯的話，和普通 web 應用一樣，直接在指令碼里設定斷點即可。

![](https://img-blog.csdnimg.cn/img_convert/040757737c4f498ef01869f14e99f72b.png)

Sources 皮膚下的檔案很乾淨，沒有太多亂七八糟的 glitch 特定檔案。

點選這個 share 按鈕，就能將專案的 url 和專案編輯地址傳送給其他開發人員進行分享，非常方便：

![](https://img-blog.csdnimg.cn/img_convert/de47becdb9e994e7d6523005c8bddcc8.png)

web 應用線上編輯器 glitch 簡介

相關文章