首頁 Blog

工欲善其事，必先利其器
一個關於我如何架站的故事第一章：起源與準備

這篇會跟大家分享我架站第一天的歷程，主要是決定出「該如何架站」的過程
幾個關鍵字如下：

  1. Dynamic Site vs. Static Site
  2. Static Site Generator
  3. Hexo Theme

# Introduction

要架一個網站一開始最頭痛的除了怎麼開始，就是去想「我想要看到什麼樣的網站」，總是要有一個雛形之後才比較好製作，至於我的流程大致上如下

  1. 選擇工具
  2. 選擇主題
  3. 安裝各種工具
  4. 把範本更新成我想要的樣子

# 工具選擇

這邊先說一個概念：什麼是 static site 什麼是 dynamic site

Static site 是指網站架出來，東西都寫好了，訪客會看到你寫好的東西，但不能進行更多的互動，這樣看有點模糊，看看 dynamic site 的意思應該會更了解
Dynamic site 跟 static site 的差別就是提供更多互動，而這所謂的互動跟後端 server 很有關係，例如帳號密碼的登入就是一種互動，使用 dynamic site 可以做到這件事情，但 static site 就不行，當初看到這邊就開始猶豫自己是要用 static 還是 dynamic，但很快看到一個關鍵，如果使用 Github 佈署自己的網站只能支援 static site，完全沒有懸念！

既然決定使用 static site，就應該去看大家是怎麼架設 static site 的，這邊要在介紹一個名詞：Static Site Generator，顧名思義就是可以幫忙產生一個 static site，所謂 Static Site Generator 就是預先幫妳寫好一個 static site 的架構，你可以直接拿過來用，再根據自己需求進行修改，完全就是我想做的事情，而常見的 static site generator 有 Jekyll, Nuxt.js, Hugo 和 Hexo 幾個，而我這次使用的 Hexo 有幾個特色

  1. 使用 Node.js (JavaScript)，也就是說如果會寫 JS 基本上能做到任何想做的事情
  2. 支援很多 plugins，之後要擴充網站功能比較方便
  3. 提供很多其他開發者寫好的 themes，可以很快把一個網站架出來

之後的內容都會跟 Hexo 有相關，其他 static site generator 暫時不會在這邊提及（我也沒研究，耶）

# 主題選擇

選擇完工具，就可以來選擇要採用什麼主題，Hexo theme 提供很多主題供選擇，基本上就是挑一個喜歡的，點進去看怎麼使用就好，這邊分享我是如何找到喜歡的主題

第一個要做的事情是要縮小目標範圍，所以先列出需求是很重要的，分享一下我自己當初列出的需求

  1. Dark mode：深色主題是必須的！
  2. Tag：幫文章分類之後要搜尋相關主題比較容易
  3. Post List：可以顯示總文章列表，看到文章最好會統整文章數，看到的時候成就感會 up up！
  4. Profile：一個建立個人品牌的地方當然要放關於自己的資料
  5. Side bar：側邊面板方便切換頁面
  6. Support Chinese and English：基本支援中英文，至少不會因為編碼讓網站顯示出現問題
  7. Support Markdown：支援 markdown 語法可以讓文章顯示得乾淨

其實上面提到的現在的網站基本上都會做到，就我的經驗上看下來 Dark mode 是比較需要留意的，其他基本上就是看介面設計有沒有符合自己的 Style 而已

按照自己需求加上一些特殊偏好應該就能篩選出一些模版，要做選擇應該會方便許多，但這邊有一些小提醒

  1. Plugins
    有些功能或許可以從 plugins 自己加上去，所以就算模板沒用到，之後自己也可以加上去，這種就算小問題，選擇模板主要還是要找自己喜歡且修改容易的
  2. Content
    這是在之後設計時發現的議題，每個開發者對於模板的設計都不太一樣，像我選擇的 Shoka 裡面使用了 njk file 去做渲染 HTML 網頁，開發者所使用的設計手法也會影響到日後設計的難易度，不過這不會是太大的問題，畢竟自己架站的過程就是不斷學習，不管選擇到哪一個主題肯定都有要額外去學、額外克服的地方
  3. Popularity
    受歡迎程度肯定是會考量的點，如果很多人使用，網路上的教材就很多，自己設計時也比較不會遇到問題不知道怎麼辦
  4. Maintainance
    最後一個小細節是維護時間，可以從 Github 上的上次更新時間知道該主題目前的維護狀況，如果是十年內都沒有人動過的專案現在使用那很有可能會有問題，但如果是幾天前就有人在更新，甚至近期還有人在討論的主題就很適合拿來用

# 預告

下篇會跟大家分享如何使用 Hexo 這個 static site generator，並跟大家分享要怎麼將網站佈署到 Github Page 上！

References:
Cover from here