我的第一篇文章！公開此網站建置的所有組合技

如果你是架站初新手，或是根本非工程領域的人，想要架設個人網站或部落格的話，可以直接使用架站工具 Wordpress，他是全世界市佔率第一的架站工具，整個過程只需要使用滑鼠就可以完成，非常適合拿來架設內容類型的部落格或新聞網站，而且 themeforest 還有非常多的主題或 SKIN 可以切換，非常方便。上述類型的網站有人稱它為 CMS(Content Management System)，但這篇文章主要是以「工程師」的角度來討論架設網站所需要的技術堆疊和組合技，非常適合想入門當網頁工程師的新手；然而非工程背景的人也可以了解一下網頁背後的運作原理，這對於微調或客製化 Wordpress 主題有不少的幫助。

如果你是網頁工程師或前端工程師的入門新手，未來也想以網站製作方面前進的話，GitHub 有非常多前端工程師的學習 Roadmap 可以參考，我這邊稍微截個圖給你參考一下，大致內容如下：

截圖其實只有秀出大概 1/4 的內容，沒錯！根本學不完！很多東西真的是腳底踩下去才知道水有多深，如果跟著這個樹狀圖走下去，走到底大概要花費兩年，但倘若只是要純手工打造的個人網頁，只需要走到第二站「HTML/CSS/JavaScript」，粗估一個月就可以學成下山，也許還不是非常精通，但對於打造第一個靜態網站的人來說，已經非常足夠，重點是還可以得到寫程式的那種滿滿的成就感？

以下我會盡可能的列出打造此部落格的網站技術名稱，並試著用一到句話來描述他的用途，也盡可能的跟 Roadmap 做對應，如果你對該主題有更深入的興趣，可以到該 Roadmap 網站了解一下，或是在這個部落格網站等我發佈。

HTML

他是所有網頁的基本架構，所有的文字和圖片內容都必須使用 HTML 來標記；如果你使用 Chrome 瀏覽器在瀏覽網頁，可以透過「點擊右上角 > 更多工具 > 開發者工具」來看到網頁的 HTML 程式碼。

CSS

他是幫網頁上樣式色彩或動畫的語言，可以想像是幫網頁上妝上色，如果少了 CSS ，那麽網頁看起來就只剩下素顏的 HTML，雖然可以瀏覽，但就會是黑白的，而且排版很醜。

JavaScript

他是負責處理網頁互動和商業邏輯的程式語言，常見的例子就是如果你去 SkyScanner 查詢出國的來回機票，滑鼠在點擊右邊的「搜尋」和上方的「登入」按鈕，其背後都是 JavaScript 在運作。

Git

Git 是幫程式碼做「版本控管」的工具軟體，所有的文字變動都可以被記錄下來，很像是玩遊戲的存檔，而 GitHub 則是全世界最流行的程式碼代管平台網站，也是存放程式碼的地方，通常工程師在存檔之後會上傳到這邊，除了讓其他的程式碼開發者瀏覽更動的內容以外，也可以直接在上面討論原始碼的內容；如果你想成為優秀的開發者，強烈建議你可以逛逛上面每天的熱門專案，這是直接與全世界的開發者交流的機會，透過討論的過程能讓你進步非常多。如果你不知道要往哪邊逛，或許可以看看我的 GitHub.

npm

他是可以讓程式碼自動化的開發者工具，或是可以直接下載其他人開發過類似功能的程式碼，直接拿來使用是最快最方便的；可以把它當作是軟體市集，透過它來安裝擴充套件。

SCSS

他是剛提到 CSS 的所謂「前置處理語言」，可以把它視為一種 CSS 的變體，但具有比 CSS 更多更強大的功能；他就是為了 CSS 能力不足的部分而存在的語言，雖然強大但瀏覽器是無法直接執行的，必須透過 npm 的自動化翻譯任務，讓它最終變成 CSS 才行。

ESLint

他是規範你編寫程式碼的輔助工具，例如程式碼的排版方式或是斷行習慣，通常在團隊合作的工作環境或專案非常有效，因為這個規範的存在，而讓不同的工程師寫出一樣排版的文章和內容。如果你未來想去軟體公司上班，這個是必備知識，如此一來才能讓工作團隊開發專案得以順利進行。

Prettier

這個是用來美化程式碼的輔助工具，例如所有的空白、斷行或排版，只要一觸發就會自動把你排得美美的；Prettier 通常會和 ESLint 協同合作，因為自動化排版的前提是不能抵觸專案的規範。

Webpack

這個是程式碼的打包工具，還包含非常多自動化任務的功能，例如上述的 SCSS 案例就會是使用 npm 呼叫 Webpack 將 SCSS 的程式碼一一轉譯並產出 CSS 檔案。

React

React 是全世界非常熱門的前端開發者工具，起初來自 Facebook 的開發團隊，目前已經有無數個網站使用它來打造 UI，當然包含 Facebook 本身，甚至是 ChatGPT。你可以想像如果 JavaScript 是徒手打造，而 React 就是鐵鎚、扳手或是尖嘴鉗了，他已經為前端工程打造出一系列的生態系專案或軟體。

我在我第一份公司工作時有分享過學習 React 的心路歷程，如果有興趣的讀者，可以來這裡逛逛我的簡報。

Bootstrap

Bootstrap 他是知名的 CSS 框架，透過預先定義好的「樣式名稱」讓前端工程師不需要撰寫 CSS 內容，只要在 HTML 上面標記名字就可以產生作用；如果 HTML 是素顏，寫 CSS 是在化妝的話，那麽 Bootstrap 就是現成的化妝包。

Next.js

Next.js 他是建立在 React 之上的開發框架，透過預先定義好的檔案結構或是語法，不足部分 React 所缺少的功能，讓你更能專心在開發 UI 本身。如果 React 是錘子、扳手等工具的話，那麽 Next.js 就是工具套組。

Lighthouse

Lighthouse 他是瀏覽器的測速工具，可以為你的網站做很多方面的評分，還可以針對不及格的部分提供效能上的建議。他一樣內建在你的 Chrome 瀏覽器，打開開發者工具後，找到"Lighthouse"分頁，"Analyze page load" 的按鈕直接給他按下去就開始了。以下是我頁面的分析截圖，你也可以試著啟動，看看結果有沒有一樣：

以上是基礎的架站知識，也提供了入門前端工程的學習渠道，我覺得內容已經夠多了，就暫時說到這吧。如果還想知道更多關於學習網站架設的相關知識，歡迎常來這裡逛逛，或也可以直接追蹤我的推特帳號，上面會分享我在軟體科技學到的新知識，也歡迎留留言交流一下囉。