前言
這是一篇指南，也就是說，我不會一個個步驟手把手教你解決所有的問題，而是會告訴你相關技術的名稱，去哪裡能找到操作方式的說明，如何組合各種的技術來達成目的。
這樣做的原因，一方面是我沒耐心說明每一個具體的步驟，另一方面也是因為相關程式和軟體在不斷更新，今日寫出的具體步驟可能明日就無法使用（儘管其中的差異可能只是一個標點符號、一個函數名稱）。所以，我想寫一篇適合NGO或社運組織工作者學習的指南，它長期具參考價值，也會告訴你去哪裡找哪些工具來達成現實目的。
如果有人很忙碌，不一定有空看完這篇文章，或者閱讀上有困難，可以參與「也許會開設」的線上課程。我設置了一個Google表單調查（點這裡）參與意願，如果填答者達到一定人數，會通知開課，免費。
本文將是實用導向，我們在能把事情辦成的基礎上可能會討論一些效率、成本以及背後原理的內容。但無論如何，用最少的學習時間、最容易達成的技術把網站架起來是我們的最重要目的。而你不需要懂計算機原理，不需要會任何一門程式語言就可以做到這件事。
關於本篇文章有什麼內容，可以先瀏覽右上方目錄。
為什麼我們還需要網站？
社交媒體時代已經成為事實，FB、IG、Line、微信、微博控制了大部分的傳播渠道，已經越來越少人透過網站來獲得資訊了。在這種情況下，NGO、社運組織架設網站的理由到底是什麼？
對於閱讀本文的人來說，這可能是個假問題。因為覺得不需要網站的人不會點進來看。但我覺得在討論具體的技術和方法之前，還是需要先明確一下我們架設網站的目的。因為相關的工具很多，我們需要配合目的去選擇相應的工具。
我給出的理由有下面四點：
對抗網路管制
這對於中國的組織工作者來說可能是最主要的原因。微信、微博等傳播渠道對於社會議題的討論封殺越來越頻繁，珍貴的資料頃刻間就被消失。獨立網站相對更難以被管制，可以增加一個額外的接觸受眾渠道。
資料完整性與結構
FB或微信公眾號是一個很方便的文章編輯、發佈平台。但是如果有一位積極的參與者或者記者想要完整瞭解組織的性質、過往的論述或行動，一則則貼文往下滑就不是一個好主意。缺乏分類，文章與短貼文混雜，沒有介紹頁面，這些都是社交媒體平台的短板。
增加搜索引擎曝光
人們只在遇到困難或者議題受到普遍關注的情況下才會用百度或Google搜索關鍵詞來瞭解議題和組織，這部分人說實話並不多，但卻是非常重要的。因為這些流量來源可能是來求助的個案、積極的支持者或尋求合作的其他組織成員。搜索引擎對於社交媒體平台的收錄非常不友好（微信公眾號更是完全收錄不了），沒有獨立網站的話將失去許多可能性。
會員資料登入與金流等服務
社交媒體平台作為一個發佈渠道很棒，但是一旦涉及資料的處理和傳輸，例如會員資料的登入、募款頁面，就不得不需要仰賴其他方式來完成。不少組織會選擇企業提供的電子化募款方案，例如backme或neticrm。但這些服務需要額外再加收服務費或手續費，其實可以透過自己架設獨立網站來完成這個功能。
本文是基於以上四個目的進行工具的選擇與介紹，所以如果你的目的不是以上四種，那你可能要小心參考。例如，你想建置網站是因為嫌FB過於醜陋，想做一個漂漂亮亮的網站介面來取代，那麼這部分我能幫得很有限，我是美學白痴。或者你想做一個論壇網站，本篇文章就提供不了什麼相關資訊，因為我個人覺得即時通訊軟體和社交媒體已經完全取代了論壇的功能，經營論壇費時費力對組織經營沒什麼幫助。
一點點技術原理
不要怕，相信我，真的只有一點點。而且這是必要的，不然到實際應用中會出現錯亂。
網路連接
以前有個說法叫做「網上衝浪」，聽上去很棒很爽。但這是錯誤的描述，瀏覽網站與衝浪完全不一樣，瀏覽網站其實更像是兩台電腦在打電話（沒錯，以前還有撥號上網）。網路連結本質上就是兩個電腦間在打電話互相傳送資料，然後把獲得的資料打印在屏幕上讓你看到。比如下面這張圖。
所以，網站是怎麼回事？網站就是有一個自動接電話的電腦（伺服主機），不停地接收世界各地打來的電話。這些打來的電話都大叫著：「我要看你那邊的資料，請給我。」於是，這個自動接電話的伺服主機就乖乖地把相應的資料傳送了回去（大部分情況下）。而拿到資料之後，打電話的電腦上有一個文書處理員（也就是瀏覽器，如Chrome）開始一五一十地把資料進行記錄、分析、排列，組裝成人看得舒服的樣式，然後呈現給瀏覽網站的用戶。
相應地，人類打電話有電話號碼，電腦之間打電話也需要號碼，這個號碼叫做ip地址（例如京都動畫的網站IP地址是59.106.218.87，在瀏覽器中輸入即可直接訪問）。但你肯定會疑惑：這個方式與我們日常的使用不符。因為我們從來不會在瀏覽器中敲入數字，而是英文的域名（例如www.facebook.com 或 www.baidu.com ）。其實也很好理解，我們忘記電話號碼時會撥打104給查號台，詢問某某單位或某某公司的電話，網站的域名 (Domain Name）就是你在查號台登記的ip地址對應名稱。你可以理解為，互聯網使用的年代人類退化了，所以大家都記不住電話號碼（ip地址），只記得網站名稱，所以每一通電話都需要打去查號台詢問。有一點不太一樣的是，域名的登記與使用需要網站方付費，而不是瀏覽者付費。
因此，網站建置需要這些東西：
- 一台作為「伺服主機」的24小時開機電腦
- 良好的網路連結
- 域名（最好是.com結尾，與搜索引擎收錄有關）
- 網站內容資料
那麼，為了建置網站，要買一台電腦去24小時開機嗎？算算機器費用、電費，有點可怕….但不是這樣的，請不要害怕，現在網站建置已經非常方便了。世界各地有許多商家提供網站主機的出租服務，一般只需要每個月5美元，成本非常低，24小時可用，網路連結一般免費。如果再加錢，可以獲得更好的電腦配置和存儲容量。
而域名的部分也同樣有提供商打理好了，我們只需要付款與簡單設定就行。價格與域名的長度、複雜度和尾綴有關，「.com域名」便宜的只要每年8.88美元。
網頁內容
所以，網站建置真正麻煩，需要花些心力的就是內容資料的部分。如何把網站各部分（網頁）的內容資料連接在一起，放到伺服主機上被呼叫，是我們主要處理的問題。幸好，在幾十年的網路發展之下，已經有許多方便的程式、套件可以協助我們完成大部分工作。我們只要學會怎麼把這些已有的工具拼接起來就可以。
這邊簡單說明一下網頁資料的三種主要類型：
HTML：拓展名為html的檔案。圖中最左邊那個。網站內容的本體，你可以想像成一種特殊格式的word文檔。有標題、有段落，也有超連結。HTML既包含了網站的文本內容，也透過標籤（帶括號的）標示了結構。範例如下。
1
2
3<h1>聲明稿大標題</h1>
<p>我們有話要說...</p>
<a href="https://www.google.com">點擊瀏覽Google</a>CSS：拓展名為css的檔案。有了HTML，該有的內容確實都有了。就像圖左邊的，兩個眼睛確實在了，白白的臉和嘴也有了。但是內容如何組織成一個方便閱讀的、好看的樣式。這需要CSS來規定文字大小、文字顏色、方框等等。簡單來說，CSS管理網頁的外貌。你可以看到，這個簡短的css代碼是在修飾HTML中的p標籤的顏色和文字尺寸。
1
2
3
4p {
color: red;
font-size: 14px;
}Javascript（簡稱JS）： 拓展名為js的檔案。JS是一種程式語言，與網頁上的「動作」有關。例如按按鈕旋轉圖片方向，點擊「繁簡轉化」的按鈕。許多這種需要動作的功能都是由JS來實現的。JS在三種網頁資料類型中是最複雜、最難學習的，所以本文不會做太多介紹，知道有這個東西即可，網頁不需要js也可以正常運作。如果需要用JS來實現一些小功能，例如點擊按鈕後改變文本顏色這種等級，可以簡單自學。範例如下，不用在意內容，一般會用script標籤包裹。
1
2
3<script>
document.getElementById("demo").style.fontSize = "25px";
</script>
靜態網頁與動態網頁
集齊以上三位法寶，你就可以做出任意內容功能的展示用網頁。所以這三位應該稱為御三家🤔（不對，沒有這個說法）。這種網頁一般被稱為「靜態網頁」。顧名思義，就是我只展示我的內容，靜靜地等著你來跟我要，我拿給你看。如同機構的介紹手冊、活動時發的傳單。只不過，因為有了JS，這個手冊上可以多加些互動的裝置（你可以想像一下那些有互動功能的兒童繪本）。
那與「靜態網頁」相對的就是「動態網頁」。什麼是動態網頁？你可以點擊這裡看詳細的說明。不想仔細看的話，我簡單解釋：動態的動是伺服主機在「動」。它動什麼？它去索要資料。剛才的打電話舉例中，我只說了伺服主機收到電話後就去拿相應的資料給索要者，但是它的資料從哪裡來？有兩種情況，一個是它印好了一大籮筐的制式資料，誰來要就從中拿一個，它不需要額外做什麼，這是靜態網頁。
而動態網頁則是，它手中沒有制式資料，需要它再打電話去叫後台的工人拿出相應的資料給它，它再遞給索要者。你一定想問，為什麼要費這番功夫叫工人拿來資料呢？直接準備好全部的不就行了嗎？試想這樣一個場景，有人上教育部的網站，查詢某某大學的學生人數，結果教育部網站的伺服主機把全國所有大學的資料全部倒給了它……我想，要麼伺服主機崩潰，要麼瀏覽者去投訴。
所以動態網頁除了HTML、CSS與JS之外，還需要一些額外的與資料庫溝通的工具以及資料庫本身。資料庫本身比較好理解，想像成Excel就可以了，也確實是跟Excel長得很像的多張表格，它裝在伺服主機上。資料庫的管理軟體有許多品牌，來自不同廠商，其中免費開源又最多人使用的叫MySQL。
而為了與主機溝通，這裡還發展出了一些工具，例如圖中的PHP、JSP、ASP。我們只要知道PHP就可以了，它跟JS一樣，也是一種程式語言，但JS是用戶與網頁資料溝通用的，而PHP是伺服主機與資料庫溝通用。至於為什麼我們選擇PHP，是因為它最簡單，最好上手，用戶也不少。PHP的圖標是一隻可愛的大象。
除了將網頁類型區分為靜態網頁和動態網頁之外，網站建置的過程中還會將網站的工作流程切分為「前端」和「後端」。前端負責網頁內容、樣式、互動的呈現，後端負責資料的撈取和運算。所以上面所說的HTML、CSS和JS都屬於前端，PHP與MySQL是後端的任務。職業上會切分為前端工程師和後端工程師，不過我們自己架設組織的小型網站就不必有這個分工了。
