怎麼讓外網連結本地網站與伺服器？

#99

如何保持習慣動力？
#98

瀏覽器輸入 URL 搜尋後發生了什麼事？
#97

如何架構一個超讚的前端專案於 2025 年
#96

網頁東東 Threads 訂閱人數突破千人！
#95

學會新概念 Backend for Frontend (BFF)
#94

撰寫自動化發布語意化版本 TypeScript NPM 套件
#93

線上檔案結構 ASCII 圖生成器
#92

Git Pre-Commit Hook 是好是壞？
#91

網頁色彩對比度怎麼規範？
#90

什麼是 ARIA - Accessible Rich Internet Applications？
#89

什麼是無障礙網頁？
#88

怎麼讓外網連結本地網站與伺服器？

先看這兩個 Meme 怎麼解：

👉 誤以為其他電腦可以直接連接本地檔案

善用靜態網頁托管服務，上傳到 GitHub Pages、Netlify 或 Vercel ……等服務生成一個公共 URL，其他人便能透過該連結來查看網站。

👉 誤以為其他電腦可以直接連接本地伺服器端口

使用內網 IP 地址：在同一個內部網路（例如在同一個 Wi-Fi）下，可以使用本地 IP 位址來訪問伺服器，這樣其他同網段的裝置可以直接通過這個 IP 位址進行訪問。公開本地伺服器：如果希望在外網訪問本地伺服器，可以使用一些工具如 ngrok、LocalTunnel 或者 Cloudflare Tunnel 創建一個暫時網址，將本地伺服器映射到外網。

前端時常要在不同裝置與瀏覽器環境上測試，而常用的 VSCode 編輯器其實就有內建 Microsoft dev tunnels🔗，可以迅速幾個按鈕把開發伺服器放上網測試。

甚至 Nuxt 有內建支援 Cloudflare Quick Tunnels🔗
#87

開發者寫作三要素：清晰、個性、一致性
#86

為什麼 TypeScript 中 Object.keys 接受任何物件都只返回 string[] 型別？
#85

借助 GPT-4o 用不到 0.1 美元在 2 天內翻譯了 168 篇部落格短文
#84

即拿即用的數位花園模板 —— Quartz
#83

測試代碼應該與被測試系統有相同程度的抽象
#82

網頁黏性卷軸滑動 —— scroll-snap-type
#81

如何直接修改專案依賴套件原始碼（node_modules）？
#80

為什麼瀏覽器 Tab 按下去會顯示藍藍的外框？
#79

最有效率提升網頁速度的方式是改善內容，網站加載時間 -50% 也不是夢
#78

Editor.js 打造類似 Notion 的區塊編輯器體驗
#77

我的部落格 About Page 沒有用處，所以把它砍了
#76

前端怎麼看 SEO？
#75

瀏覽器縮放與顯示誤差
#74

Intersection Observer 真實案例：自動更新目錄
#73

用二維角度思考網頁布局
#72

開發者生產力迷思：估算 = 終點
#71

開發者生產力迷思：故事點 = 生產力
#70

開發者生產力迷思：低缺陷 = 生產力
#69

開發者生產力迷思：程式行數 = 生產力
#68

開發者生產力迷思：工作時數 = 生產力
#67

如何管理通用工具函式 (Utility Function)
#66

把 AI 放上 CI - PR Agent
#65

CSS blur() 在 Safari 上要留意的效能問題
#64

往返快取（bfcache）造成前後頁面狀態問題
#63

什麼是桶文件（Barrel File）模式？
#62

了解網頁元件化的未來：Web Components
#61

如果不知道自己在幹嘛，那大概也沒人知道。
#60

為什麼要替軟體進行測試？
#59

了解 ES6 JavaScript 當中的內建資料結構： Map
#58

前端最有感的的快捷鍵
#57

為什麼專案時間預估這麼難？
#56

管理 Tailwind 當中的變數可以這樣做
#55

具體來說可以怎麼建立與管理數位產品的 UI 變數
#54

不要告訴使用者「查看更多」
#53

如何透過 CSS Grid 讓元素跳脫容器
#52

生成假資料可以用 TestDataHub
#51

為什麼前端生態整體體驗邁向 😐
#50

CSS 屬性的最大值
#49

替文件增添互動性避免枯燥
#48

在 .gitattributes 設置 Linguist 改變專案語言統計
#47

用正確的方式製作深色模式（或任何網站風格🌞）
#46

前端與開發環境多樣性
#45

Cypress 與 jQuery
#44

關於 Low-code / No-code
#43

我透過網頁升學的故事
#42

「優雅降級」與「漸進增強」差異在哪？
#41

好奇不同種類色盲眼中的網站是長什麼樣子？
#40

解決問題的技巧
#39

已經 2024 了，會需要學 Sass 嗎？
#38

什麼事情在你的工作領域是 common sense 但別人知道了卻很訝異
#37

iOS Home Indicator 安全區域 CSS 處理
#36

發現特別是技術類作者會把文章放置在不只一個地方
#35

那個酷酷的網頁背景是怎麼做到的？
#34

為什麼要保持套件版本更新？
#33

你還記得瀏覽器引擎前綴 (Vendor Prefix) 嗎？
#32

Git 如何管理大型檔案？
#31

XML 和 AJAX
#30

重新思考如何建構 RWD 網頁，透過 CSS Container Queries
#29

聽名稱就感覺生產力 UP UP 的字體 —— Commit Mono
#28

近期發現不錯的免費英文網頁開發教學平台 —— Egghead.io
#27

為什麼會有 _ 在數字當中？
#26

如何從 Git 歷史中徹底移除機密文件？
#25

軟體園藝家 Software Gardener
#24

一直以為 PowerShell 就是藍藍的 cmd
#23

分享一個我自己在預覽 GitHub 專案時常用的訣竅 —— 點
#22

追蹤瀏覽器版本支援程度 —— Can I Use 網站
#21

Chromium 開發者工具 —— Layers
#20

可視化 JSON 資料 - JSON Crack
#19

不知道不同團隊是如何鞏固與紀錄開發制度的？
#18

處理金錢、單位、時間的轉換原生 JavaScript 就辦得到
#17

關於純手工
#16

想要快速視覺化網頁元素之間的邊界可以怎麼做？
#15

資料庫圖示的來由
#14

想要及時編輯預覽網頁內容可以怎麼做？
#13

你能說明設計系統與元件庫在網頁領域中的差異嗎？
#12

舉例 Radix、Headless UI，為什麼無樣式元件這麼熱門？
#11

關於寫作
#10

建構正確的網頁 UI 不應該是個麻煩的問題
#9

AI 取代人類的恐懼
#8

如何驗證客戶端資料的正確性
#7

關於經營部落格
#6

製作了部落格想要額外添加文章搜尋功能該怎麼辦？
#5

推薦免費網頁圖片編輯器 —— Photopea
#4

你有多久沒有升級專案的套件版本了呢？
#3

與朋友的 TDD 觀念閒談
#2

你會如何解這個下拉式選單樣式問題呢？
#1

使用 Iconify 在網頁中加入各式各樣的圖示

如何保持習慣動力？

瀏覽器輸入 URL 搜尋後發生了什麼事？

如何架構一個超讚的前端專案於 2025 年

網頁東東 Threads 訂閱人數突破千人！

學會新概念 Backend for Frontend (BFF)

撰寫自動化發布語意化版本 TypeScript NPM 套件

線上檔案結構 ASCII 圖生成器

Git Pre-Commit Hook 是好是壞？

網頁色彩對比度怎麼規範？

什麼是 ARIA - Accessible Rich Internet Applications？

什麼是無障礙網頁？

怎麼讓外網連結本地網站與伺服器？

開發者寫作三要素：清晰、個性、一致性

為什麼 TypeScript 中 Object.keys 接受任何物件都只返回 string[] 型別？

借助 GPT-4o 用不到 0.1 美元在 2 天內翻譯了 168 篇部落格短文

即拿即用的數位花園模板 —— Quartz

測試代碼應該與被測試系統有相同程度的抽象

網頁黏性卷軸滑動 —— scroll-snap-type

如何直接修改專案依賴套件原始碼（node_modules）？

為什麼瀏覽器 Tab 按下去會顯示藍藍的外框？

最有效率提升網頁速度的方式是改善內容，網站加載時間 -50% 也不是夢

Editor.js 打造類似 Notion 的區塊編輯器體驗

我的部落格 About Page 沒有用處，所以把它砍了

前端怎麼看 SEO？

瀏覽器縮放與顯示誤差

Intersection Observer 真實案例：自動更新目錄

用二維角度思考網頁布局

開發者生產力迷思：估算 = 終點

開發者生產力迷思：故事點 = 生產力

開發者生產力迷思：低缺陷 = 生產力

開發者生產力迷思：程式行數 = 生產力

開發者生產力迷思：工作時數 = 生產力

如何管理通用工具函式 (Utility Function)

把 AI 放上 CI - PR Agent

CSS blur() 在 Safari 上要留意的效能問題

往返快取（bfcache）造成前後頁面狀態問題

什麼是桶文件（Barrel File）模式？

了解網頁元件化的未來：Web Components

如果不知道自己在幹嘛，那大概也沒人知道。

為什麼要替軟體進行測試？

了解 ES6 JavaScript 當中的內建資料結構： Map

前端最有感的的快捷鍵

為什麼專案時間預估這麼難？

管理 Tailwind 當中的變數可以這樣做

具體來說可以怎麼建立與管理數位產品的 UI 變數

不要告訴使用者「查看更多」

如何透過 CSS Grid 讓元素跳脫容器

生成假資料可以用 TestDataHub

為什麼前端生態整體體驗邁向 😐

CSS 屬性的最大值

替文件增添互動性避免枯燥

在 .gitattributes 設置 Linguist 改變專案語言統計

用正確的方式製作深色模式（或任何網站風格🌞）

前端與開發環境多樣性

Cypress 與 jQuery

關於 Low-code / No-code

我透過網頁升學的故事

「優雅降級」與「漸進增強」差異在哪？

好奇不同種類色盲眼中的網站是長什麼樣子？

解決問題的技巧

已經 2024 了，會需要學 Sass 嗎？

什麼事情在你的工作領域是 common sense 但別人知道了卻很訝異

iOS Home Indicator 安全區域 CSS 處理

發現特別是技術類作者會把文章放置在不只一個地方

那個酷酷的網頁背景是怎麼做到的？

為什麼要保持套件版本更新？

你還記得瀏覽器引擎前綴 (Vendor Prefix) 嗎？

Git 如何管理大型檔案？

XML 和 AJAX

重新思考如何建構 RWD 網頁，透過 CSS Container Queries

聽名稱就感覺生產力 UP UP 的字體 —— Commit Mono

近期發現不錯的免費英文網頁開發教學平台 —— Egghead.io

為什麼會有 _ 在數字當中？

如何從 Git 歷史中徹底移除機密文件？

軟體園藝家 Software Gardener

一直以為 PowerShell 就是藍藍的 cmd

分享一個我自己在預覽 GitHub 專案時常用的訣竅 —— 點

追蹤瀏覽器版本支援程度 —— Can I Use 網站

Chromium 開發者工具 —— Layers

可視化 JSON 資料 - JSON Crack