2016 年三月十五日，在朋友蛋元的介紹下，我決定自己架 McK & Note 網站。話題的開頭很簡單，我和蛋元抱怨 Facebook Page 的發文介面太簡陋，很難安排超連結、文章結構等內容，而且不是每個人都有閒在 Timeline 吸收這些內容，所以在考慮自己架站。
當時我的選擇是 Wordpress，但以前的經驗告訴我 WP 太肥、太難管理，很容易分心。我把想要單純寫作的想法跟蛋元說，他建議我試試看 GitHub + Jekyll，稍微研究以後覺得真的不錯，Markdown 格式也符合我力求簡單的寫作需求，所以就快速架了一個網站。不過之後陰錯陽差看到了超漂亮的主題 NexT 以及這篇知乎，所以就換用 GitHub + Hexo，之後幾天我把所有時間花在網址設定和版面調校上。
如果你看不懂我在寫什麼，沒關係，這很正常，換成是三月初的我大概也不知道這些是什麼，這幾週我幾乎是從零學習怎麼架站；不過如果你很想持之以恒地寫作，很想擁有一個簡單、強大、免費的平台，很想督促自己快快成長，請參考以下的教學，一天之內，你也能擁有如 McK & Note 一樣完整的網站。
「架站筆記」系列文章：
- 基礎篇：空間、系統、文章、主題和外掛
- 進階篇：域名設定、SSL 和 HSTS、信箱和短網址
空間：GitHub
架站第一步是先找到裝檔案的空間，GitHub 是個滿理想的選擇，因為它免費、穩定，功能用來應付靜態網頁（Static Webpage）綽綽有餘。本步驟需要完成的事情有：
注意 SSH Key
其中 SSH Key 應該是比較複雜而且容易碰到錯誤的步驟，如果看了 GitHub 官方的說明文件還是不清楚，可以參考愛流浪的小風（Windows）或 QA的雜七雜八筆記本（Mac）的圖文教學。完成了這個步驟，你就擁有免費的網站空間了。
系統：Hexo
McK & Note 使用的是 Hexo 系統，Hexo 有很多不錯的主題（Theme），安裝和維護也很方便。Hexo 的運作原理是「將 Markdown 格式的純文字文件處理成 HTML 以後，上傳到 GitHub 上」，所以一旦安裝完畢，日後使用者只需要專注在 Markdown 的寫作上。本步驟需要完成的事情有：
純文字命令和編輯器
需要注意的是這些工作大部分都在純文字命令的環境中，對某些人來說可能有點陌生，但基本上只要複製、修改、貼上 Hexo 的官方指令，就沒什麼問題。另外在「修改 _config.yml 中的設定」一步中，除了可以用系統內建的記事本（Windows）或文字編輯（Mac），也可以考慮用免費的 Notepad++ 或付費的 Sublime Text，這對使用者以後編輯文章或設定很有幫助。
Git 設定
最後，安裝 hexo-deployer-git 和在 _config.yml 設定 Git 非常重要，這關乎網站能不能上傳到第一步驟中設定的 GitHub 倉庫。執行 $ npm install hexo-deployer-git --save 以後，打開 _config.yml 找到 deploy 這行，確定下面有這些指令：
1 | deploy: |
Deploy!
完成上面五件事以後，網站就幾乎大功告成了！你只需要記下面四個指令，就可以時時更新、維護 Hexo：
1 | hexo d #發佈網站 |
現在你就可以執行 $ hexo d，然後用你的 GitHub 網址看看網站是否已經順利上線。如果遇到 git 錯誤，請確認是否安裝了 hexo-deployer-git；如果遇到 SSH Key 的問題，請參考第一步驟。
文章：編輯和發佈
現在你可以開始寫作了，Hexo 的文章原始檔都以 .md 格式存在 ~/source/_post/ 資料夾裡面，你可以直接用裡面的 Hello World 文件改寫，也可以執行 $ hexo new “標題” 指令新建空白檔案。我平常都是複製舊的檔案，改一改以下的開頭資訊，並貼上準備好的新內容。
文章開頭設定
一篇 Hexo 文章的開頭應該包括標題（Title）、分類（Category）、標籤（Tag）、發佈時間（Date）等等。以這篇為例，開頭資訊如下：
1 | --- |
特別注意 tags 是平行關係， categories 則有上下層關係。
Markdown 格式
至於內文採用的 Markdown 格式不難學，只需要記幾個常用的指令，遇到不懂的再上網查就好，用久了以後我甚至覺得比圖形化編輯介面（GUI Editor）更方便，不用反白文字調格式，也不用擔心各式各樣的技術問題，只需要簡單的輸入和轉換。我常用的指令有：
1 | 斜體： *斜體* |
註1：表格用法與範例在此。
除了上面的 Markdown 格式，Hexo 官方還有插入 Youtube 影片、引用文章等更多說明。編輯完 .md 檔以後執行 $ hexo s 就可以看到你的文章了。
其它：主題與外掛
如果你想讓網站看起來更好一點，可以裝個主題。McK & Note 採用的是 NexT，你可以參考官方安裝教學，這裡只提醒幾點要注意的事情。
安裝方法
如安裝教學所寫，你可以用 $ git clone 的方式安裝，也可以下載 .zip，把它解壓縮到 /themes/ 資料夾裡，記得要把資料夾名稱改成 next。接著編輯步驟一中的 _config.yml一，找到 theme 那行，把它改成
1 | theme: next |
這樣就成功變更主題，可以執行 $ hexo s 看看效果。需要注意的是 _config.yml 有兩個，一個是步驟一中的「站點配置文件」，一個是 next 資料夾底下的「主題配置文件」，不同的設定對應了不同文件，修改時要小心。「主題配置文件」中有很多好玩的設定，包括編輯目錄（Menu）、變換外觀（Scheme）等等，一樣可以參考官方配置說明。McK & Note 現在的樣式也是經過無數修改而來。如果你玩得夠深，還可以直接修改 /themes/next/layout 中的文件，我就是這樣將右邊的 Facebook 專頁框加在 sidebar.swig 裡面。
推薦外掛
Hexo 有各種外掛（Plug-in），但有些隨著 Hexo 更新變得不相容，安裝的時候要注意，並遵循 KISS 原則（Keep It Simple And Stupid）。你可以從 ~/node_modules/ 中察看自己裝了哪些外掛。以下是我認為有必要裝，而且裝起來沒什麼問題的外掛，安裝方法請參見各外掛官方說明：
| 外掛 | 功能 |
|---|---|
| hexo-deployer-git | 步驟二提過，上傳 GitHub 必備 |
| hexo-generator-index | 產生首頁 |
| hexo-generator-archive | 產生歸檔頁 |
| hexo-generator-category | 產生分類頁（註1） |
| hexo-generator-tag | 產生標籤頁（註1） |
| hexo-generator-feed | 產生 RSS Feed（註2） |
| hexo-renderer-ejs | 使 Markdown Renderer 支援 EJS Template（註3） |
| hexo-renderer-stylus | 使 Markdown Renderer 支援 Stylus CSS 處理（註3） |
| hexo-renderer-marked | 改善 Markdown Renderer 細節（註3） |
| hexo-math | 使 Markdown Renderer 支援 MathJax 和 KaTeX 格式的數學公式（註4） |
| hexo-pdf | 使 Markdown Renderer 支援 PDF、Slideshare 嵌入（註4） |
| hexo-admin | 建立本機文章管理介面（註5） |
| hexo-generator-sitemap | 建立搜索引擎用 Sitemap.xml（註6） |
| hexo-generator-baidu-sitemap | 同上，百度用 baidusitemap.xml（註6） |
註1：安裝後，需在「主題配置文件」中的 menu 啟用，McK & Note 目前的設定如下：
1 | menu: |
並在 ~/source/ 底下建立相應的 /tags/ 或 /catagories/ 資料夾，並在裡面新增一個 index.md，以 tags 為例內容如下：
1 |
|
註2：有意使用 Facebook Instant Article 功能的人可以安裝。
註3：這些都是為了讓文章更好讀、功能更強所裝的外掛。
註4：視需求而定，不一定要安裝。
註5：我有裝但很少用，大多時候我還是直接編輯 .md 文件。
註6：與搜尋引擎最佳化（SEO）有關，有意將網站收錄於搜尋引擎的可以參考這篇或這篇教學。
小結：網站設定完成！
設定完 GitHub、Hexo、主題和外掛，並發佈第一篇文章以後，你的網站寫作生涯就正式開始了！接下來的進階篇將介紹域名（Domain）的註冊、設定以及相關服務（SSL 、個人信箱、短網址）。還不考慮購買域名的人，也可以直接讀進階篇的結語。