自從我看了 ESP8266 的 SD Web Server Youtube 教學之後，我一直都很想要自己做一個來玩玩看。你想想看，有一根可以隨身攜帶（？）、足夠便宜到可以送人而且能夠把虛擬的東西（網站）實體化，不是一件很有趣的事情嗎？ 可是之前一直都沒有時間研究這個東西，其中一個原因是以前的焊接技術還沒足夠讓我可以直的完成這個 project，另外就是因為那個時候我對燒錄器設計還是沒有甚麼概念，導致到當我要做到跟一片 Wemos D1 mini 同等效能的 ESP8266 的時候，完全沒辦法好好的設計和焊接成成品出來。 開坑 早在 2018 年，我就已經買來了一片 Wemos D1 mini 跟超級難買的 SD shield 來當小型網頁伺服器。當時的我對網頁編程和嵌入式開發還是非常的入門，結果做出來的東西就是長這樣 Wemos D1 + SD Shield + 小容量 SD 卡 雖然是能用，而且我也把它用 USB 供電吊在我的桌面旁邊當作實驗品開發了一段時間，但是由於用的是別人的 code 加上當時我並不是太熟悉 Arduino C++ （和當時還沒有 ChatGPT），導致最後開發出來的東西不但不好看而且很難用 設計嘗試，失敗收場 之後一年我試著把這個設計弄成一片真正的電路板。由於當時我還沒有開發燒錄器的能力（特別是要想辦燒焊那兩個超小的 BC817 transistor），因此我的想法是先把 ESP8266 焊到板子上，再透過現成的燒錄器對它進行開發（見下面那一排燒錄用排針），然而後來我弄著弄著就覺得不對勁，而且這種每次都要插燒錄器才能寫東西的系統感覺開發起來就很麻煩，應該不會有人想用，所以最後還是沒拿來生產。 第一代的 ESP8266 網頁伺服器，最後沒做生產真是一個明智的決定 5 年之後，我終於做出了 WebStick 原型機 WebStick 這東西其實在我腦海中已經卡住很多年了。但是一直就軟硬體技術原因無法開坑。直到最近開始學會了 drag soldering 跟找到了一款可以讓我進行超精密焊接（但是缺點是一次性）的烙鐵頭後，我終於把這個封塵多年的 project 重新抓出來做。 首先：燒錄器 網上有很多不同的設計，有自動的也有半自動（燒錄的時候要按 FLASH 按鈕）。半自動的能省下兩顆 transistor 跟兩顆電阻，但是由於編程的時候每次都要按 FLASH 和 RESET 有夠麻煩，所以我在設計的時候便選擇了自動燒錄器。以下是我參考的設計圖： 燒錄器設計圖 但是這設計圖差了點東西，就是圖裡沒有標注到 GPIO15 應該要 PULL LOW。在設計電路板的時候記得把 GPIO15 經電阻（如 10k）接地，這樣 SPI CS 才能正常使用。 為甚麼我會知道？ 這真是個他媽的好問題（被坑） 這顆電阻雖然不加也可以，但是會無法使用 SPI 另外這兩顆 BC817 的 routing 也弄得我懷疑人生，不過後來還是在板上 route 好了。 我都不知道自己當晚是怎樣發神經想到可以這樣 route 的，嘛總之能動就好了。 其次：SD 卡 ESP8266 有內置的 SPI 針腳可以用來讀取 SD 卡。很多人以為 SD 卡模組上面有特別 IC 去把 SD 卡轉換成 ESP8266 可以讀取的信號，然而實際上的讀取方法聽上去有點奇妙，就是直接把 SD 卡當成 SPI Slave Device 來讀取。 那你會好奇，如果 SD 卡可以直接接 ESP8266，那外面在賣的 SD 卡模組上面那顆 IC 是幹甚麼用的？這是個好問題，那是防呆用的（不對） 你看，不是所有 MCU 都是在用 3.3V Logic Level 的說。例如說 Arduino UNO 在用的 Atmega328 就是支援 3.3v - 5v 輸入。SD 卡只能用 3.3V 讀取，過高的通訊電壓會把它弄壞，因此很多模組為了相容更多的開發板，只好加上一顆用來轉換信號線電壓的 IC，通稱 LLC （Logic Level Converter ，大陸好像叫 「電平轉換器」）。但是由於我在用的 ESP12E 只支援 3.3V，所以剛好與 SD 卡需要的電壓一樣，所以就不用轉直接接 MCU 就好啦。 不說不知道，如果你走去翻 Wemos D1 SD shield 的設計電路圖，它基本上就只有一個 SD 卡插槽，跟一顆差不多看不見大小的電容來做 ripple filter。真的有夠簡單欸 把兩個東西整合理起 當兩個電路都有了，剩下的部分就是把電路給整合到同一片板子上。我本來是打算用名片大小的設計，這樣做不但能有一種「這是送你的見面禮」感覺，而且也有更多的空間來寫使用教學，有點像國外嵌入式工程師大神做的能跑 Linux 的名片一樣 國外工程師做的，能跑 Linux…