這一系列連載，我將要來分享怎麼在 30 天內，架出一個前後端分離的網站，並且透過自己寫前端與後端程式，在網路上打造一個真正屬於自己的家。為什麼是說屬於自己真正的家呢？想像一下我們在臉書、IG，或者是 Thread 上面註冊了一個使用者帳號，準備開始在社群網路之中大顯身手。但是服務提供者一再提醒我們：在做任何事情前，都必須遵守使用者規範，讓你有時候感覺綁手綁腳的。而且在這些服務上，個人頁面內容、排版，也不能隨心所欲地變成自己喜歡的樣子。服務的提供者掌管了我們帳號的生殺大權，在這些企業網路之中，我們其實只是租戶。
等等，你說你又不用付租金嗎？那可就錯囉。不過，我們不在這裡談論企業網路的問題，我們在這裡要談論的，單純只是怎麼 DIY 出一個自己的網路之家。至於這件事情有什麼價值嗎？當然，你我都會同意網路世界與真實世界的界線已經愈來愈模糊，一個人在網路世界中有能力做愈多事，往往可以很直接的被轉換為真實世界的權力。只是再精確一點說，在網路上有能力做什麼事情，和對網路技術是否熟捻，是兩件事，這點必須要事先強調。
坊間有很多服務讓我們自建網站，不用全部自己來。比如完全不寫程式也可以在痞客邦、Medium 上暢所欲言，有些網站還有提供模板，讓使用者刻出自己想要的部落格；對後端技術如果只是略懂皮毛，也可以透過 WorldPress 和 Firebase 假設網站。因此，自己架網站，全部 DIY，與其說有什麼價值，不如說是一種情懷（除非你是一名軟體工程師）。如果把軟體工程師看成是一名木工師傅，木工師傅當然可以去 IKEA 買一套現成的餐桌椅，但是他也可以選擇自己來，打造出一套獨一無二的手工木製桌椅。甚至還可以雕龍畫鳳，把這些傢俱昇華成藝術品。軟體工程師架網站這件事情，就如同木工師傅自己刻桌椅。而對於其他人來說呢？學架網站就像自己學做木工一樣，本身就是一件很酷的事情。
前後端分離顧名思義，就是一個網站的組成被分成了兩大塊，前端與後端。前端主要負責視覺呈現，以及一些通常是為了視覺化而做的簡單資料處理；後端負責資料儲存、水平擴展，以及確保安全性等工作，此外，負擔很重的資料處理工作通常也都由後端來處理。前端與後端透過 http, ftp, tcp 等協定相互合作，最後組成了一個網站。
讓我們先把話題岔開，也許你對程式開始有一點了解後，會問：「好吧，我現在知道前端後端各自的工作了，但是就我對程式碼的認識，他不就是輸出一大堆字串嗎？這和我在網頁上看到的那些酷酷的畫面有什麼關係？那些是怎麼變出來的？」這就牽涉到另一個非常重要的角色了，瀏覽器。其實，任何會讓電腦開出一個視窗，裡面有東西動來動去的技術，像是網頁瀏覽器或者安裝在電腦中的遊戲都是如此，背後牽涉到複雜的圖形渲染、3D 加速等技術。
簡而言之，故事大抵是這樣子的：瀏覽器透過 HTML 標籤與 CSS 來渲染畫面，而我們剛剛說的，前端與後端通力合作的目標，就是把想要呈現的內容轉換成瀏覽器讀得懂的格式，也就是 HTML 文檔，瀏覽器就可以把畫面呈現給使用者了。安裝在電腦中的那些遊戲也都是類似的原理，遊戲引擎會讀取特定格式的資料，渲染出畫面，而程式則負責把遊戲內的複雜資料運算，轉換成遊戲引擎可以讀懂的格式。
至於，如果我們特別強調了前後端分離網站，那就一定存在前後端不分離的網站了對吧？沒錯，前後端不分離的網站通常是傳統的網站架構，在傳統的網站架構之中，不特別去切分工作，而是同一支程式會同時負責處理我們上述提到的前端與後端的工作內容。
我們會把前後端分離與傳統的前後端耦合架構的比較與說明，放在整個系列的後半段。因為如果沒有實際動手做過的經驗，這裡說得再多，都只是鴨子聽雷而已。現階段我們只須了解，前後端分離架構是目前最主流的開發模式，它與快速迭代的敏捷開發非常契合。
在這 30 天之中，讓我們來架設一個網頁版的「小朋友下樓梯」，我們會用前端技術來設計遊戲，同時搭配後端服務，設計一個積分排行榜。這樣，你就可邀請好友到自己的網站中玩小遊戲，並挑戰紀錄。
對於初學者的你，你會在這個項目中學到：
對於專業工程師的你，這個挑戰本身可能沒有什麼難度，畢竟這一系列連載可以涵蓋的範圍有限。但是不妨讓我們跟著深掘並提出討論，一起朝大師之路邁進，比如我們可以在留言處聊聊：
相信 30 天後，我們都能透過這個項目收穫滿滿！
最後，在開始第一天以前，讓我們來清點一下需要準備哪些東西吧！
前端我們將會選用 Next.js，一個 ReactJS 的 meta framework，使用 JavaScript 開發。前端有三大主流框架，Angular, Vue, React，我是一名後端工程師，除了 React 以外沒有過多著墨。但是當初學習 React，也是看中它強大的生態系以及廣大的社群，從這角度來看，不失為一個優秀的入門選擇。
React 有一些缺點，不過先不用擔心，這是當你成為一個專業軟體工程師之後，才有機會煩惱的事情。至於為什麼選擇 Next.js，而不是直接 React 呢？因為我想要把 SEO 的問題也先一併考量進來。好不容易架起了一個網站，我們當然希望自己的網頁可以順利地被 Google 搜尋引擎找到，而 Next.js 運用了一些技術，可以保有前端框架，單頁 html 渲染的優點，又同時讓 Google 搜尋引擎的爬蟲、或者其他社群媒體的爬蟲，認出我們網頁裡面的分頁內容。
後端選用 Python，雖然 Python 是一個我很不喜歡的語言，但是在這種文章中，如果我忽視 Python 的優點，選擇其他不容易入門的語言來架設後端，就太做作了。我們會使用 Django 來架設後端服務，這同時也是我的第一次，因為我之前只有使用過 Flask 的經驗（為自己增添一點樂趣）。
另外，為了讓 Python 看起來變有趣，而且是其他人看得懂、可維護的樣子，我會全程用強型別的宣稱風格來寫這支程式。關於型別，我們會在後續的文章中討論到。這裡先簡單解釋，當我們在程式碼之中宣告變數時，其實也就是在告訴電腦，我們要在記憶體之中佔用一個空間。強型別語言在宣告變數時，需要同時宣告這個空間是什麼類型的空間（整數、浮點數，和字串等），並且不同類型的記憶體空間不可以彼此混用；而弱型別語言則完全沒有上述限制，比如 JavaScript 就是一個弱型別語言。Python 其實是一個強型別語言，可是卻只支援弱型別風格的寫法，也就是說，Python 變數被宣告時，無須宣告型別。後來透過 IDE 的支援，Python 才有了強型別的宣稱風格。
這在物件導向的程式設計之中，會產生一個很令人頭痛的問題，我們很常不知道一個 Python function 到底吃什麼型別的參數，又是回傳什麼型別的結果。此外，這個問題也導致初學者很容易拿一個整數與浮點數相加，噴出錯誤後卻苦苦看不懂原因。相反 JavaScript 則是一個亂七八糟的弱型別語言，我們甚至可以拿一個字串型別的變數，與一個整數型別的變數相加！
資料庫選用 PostgreSQL，psql 是一個強大且開源的資料庫，完全免費，很適合我們的小專案選用。
最後，也是最重要的，讓我們保持一個愉快的心，一起踏上這段自架網站之旅。
雖然是 30 天挑戰，鑑於作者本人工作與生活安排緊湊，而且沒有把這個當成鐵人挑戰，所以我只要求自己盡力快速的更新，並且有始有終。如果更新速度慢一點，要請各位讀者多多見諒了。
Thank you for reading. If you enjoyed this post, consider sharing it with others.