跳至主要内容

關於沒有程式背景挑戰自架網站這件事

沒有程式背景，不懂程式語言，想要有自己的個人網站，選擇靜態網頁，用docusaurus及Netlify架設個人網站。

前言​

一開始文章是打在blog，但因為blog文章是依時間序列，找尋舊的文章或是特定功能時都要回想好一陣子，所以決定把自架網站的筆記另外放在這裡，因為是自架網站後才回頭寫這些筆記，所以是從原有基礎上增添內容，會有部分內容重複。

選擇要有個人網站是因為工作多年以後，除了記性不太好外，以前曾經做過的事情去過的地方，總記得大概，但細節卻模糊，所以便想著如果有一個地方可以記錄我的生活，不知道該有多好，這促使我開始尋找網路上相關資源。

我的背景是零基礎文組，不懂程式語言，想要有自己的個人網站，但不想要花錢，不想要有平台方的標誌，想要客製化有自己的特色，所以選擇靜態網頁，用docusaurus開源靜態網站生成工具及Netlify托管，來架設個人網站。

陸續打了幾篇文章，是因為在架設網站找資料時，發現的資源都是硬梆梆的程式語言，看到完全看不懂的天書(一堆英文和許多符號)，老實說有點打退堂鼓。

幸好最後能夠順利完成，也決定要有一個圖文並茂筆記，希望能讓跟我一樣沒有程式背景的人，萌生嘗試的想法。

事前準備​

在選擇架設平台前，有兩個問題要先思考：

  • 你的個人網站想要有什麼功能？

  • 你願意投入多少的時間或金錢？

功能取向不同，如果只是想要單純搭建個人部落格，只有靜態文字和圖片，是否需要一開始就投資大筆資金？

不知道自己能堅持經營個人網站多久，想要免費，又不想要接觸程式語言，現成的部落格網站很多，如果可以接受廣告和不能客製化，其實也不失為一種選擇。

然後，在網路資訊發達的現今，可以輕易找到各式各樣的答案，從現成平台、WordPress、自架網站之間換來換去的人也大有所在，嘗試之後更換平台雖然會有些麻煩，但我覺得都是很好的嘗試，要先有開始才會有過程。

架設平台選擇​

現成平台​

缺點​

一開始考慮過用現成的平台搭建部落格，例如痞客邦Pixnet、WordPress.com、Wix等，但後來沒有選擇這些方案的原因有兩點：

  • 現成平台本身會置入廣告，沒有廣告的版本需要收費或放入平台方的標誌

  • 版面套用後，不易進行調整

在瀏覽網頁搜尋資料時，常常被跳出來的廣告煩到不行，但沒有廣告就要花錢，而且是每月付費制，考量到畢竟只是想要簡單記錄自己的生活，所以沒有選擇現成平台。

另外，現有平台樣式有時候真的不太好看，尤其是痞客邦，我真心覺得提供的版面都很醜，要更動又很麻煩。

優點​

但當我真的自己架設個人網站，買了域名後，發現現成平台在流量上是有優勢的，平台本身的流量容易讓人們搜尋到文章，如果是從頭開始自架，需要花相當長一段時間，才能讓網站被搜尋到。

雖然現成平台對我而言缺點遠大過於優點，但特別適合可以接受廣告、版面固定、不想花時間的人。

WordPress.org​

缺點​

如果搜尋架設自架網站，絕多數推薦用WordPress.org，網路上能找到的教學資源也最多，看了許多文章後，沒有考慮用WordPress.org的最大原因是價格。

WordPress.org必須購買主機，很多部落客都說每月2.95美元至12美元很便宜，換算新臺幣一年約1,062元至4,320元，是必要投資，很快就回本，但在不知道自己能堅持經營個人網站多久，成本考量之下放棄使用WordPress.org。

當時曾做表格簡單比較購買主機和托管費用差異：

種類費用流量搬家與備份SSL
Netlify0元100GB檔案存在電腦，沒有搬家或備份問題有
B開頭主機2.95美元/月無有，但備份要加錢有
C開頭主機12美元/月1TB有有

上面提及的只有主機費用，有些主機費用會送免費網域，但更多是要自行購買主機及域名，所以價格會再增加，而自架靜態網站我是選擇Netlify托管，目前100GB容量很夠用，所以每年只有花錢買網址。

當我真的完成自架網站，回頭再去搜尋WordPress架設教學，我覺得WordPress應該和現成平台一樣應該歸類在零代碼(no code)。

因為會選擇WordPress的人，不負責任猜測大部分和我一樣屬於沒有程式背景，為了能夠更容易編輯版面和文章，裝了許多外掛程式，例如拖放編輯器、SEO優化、速度優化工具等，最後用WordPress.org自架的網站常常和現成平台一樣，網站速度變得很慢。

當然，也是有花錢請人架設網站、自己願意花時間研究、本身懂得程式的人，網站的功能就不是我這個不懂程式的人可以比擬的。

優點​

因此，原本以為花錢就可以不用花時間的WordPress自架，其實意外地需要花滿多時間研究。

但不得不提，WordPress網路上中文資源真的非常非常的多，也比較知道要怎麼下關鍵字找答案，外掛程式如果運用得當，想要的功能基本都有，比較適合沒有程式背景、願意花錢、不想花太多時間研究的人使用。

開源靜態網站​

介紹​

如果搜尋靜態網站產生器，會有很多介紹，是想要架設輕量級網站的好工具，我最一開始以為動態網頁和靜態網頁的區別是：

  • 動態網頁：複雜、功能多(例如會員、購物車、留言板等)。

  • 靜態網頁：簡單、功能少(基本上只有文字和圖片)。

當真的開始自架靜態網站後，才發現上面原本我以為的動態網頁功能其實有些是可以達成的，動態網頁和靜態網頁差異原因是在有無資料庫，也因為不需要Database和後端處理，所以靜態網站速度相對較快，也沒有後台可以被駭客入侵。

現在其實有很多靜態網站產生器，例如Gatsby、Jekyll、Hugo、11ty、Docusaurus等，如果用英文static site generator去搜尋，有相當多的資源。

缺點​

如果說WordPress和現成平台屬於零編碼(no code)，靜態網站產生器就真的要面對代碼了，不會有區塊編輯讓你用拖曳方式把圖片拉到指定位置進行排版，不會有像Word一樣的功能可以下拉選項把字體放大變顏色等，甚至可能會因為一張圖片無法放到自己想到的指定位置而氣餒。

沒有程式背景的我，這個網站每年只有花費網址的錢，卻花了大量的時間，但老實說我做得很開心，自架網站意外地很有趣也很有成就感。

優點​

  • 內建布局和模板，不用從頭創造一個網站。

  • 適合部落格、文檔、個人履歷，可以在現有模板上做調整。

  • SEO友好。

  • 文檔和部落格多使用Markdown語言，簡單易懂好編輯。

開源靜態網站，除了需要克服看一堆代碼的恐懼外，還要看得懂基本的英文，比較適合願意花時間學習的人，能夠以低成本架設一個有一定水準的網站。

選擇Docusaurus架設靜態網站​

回到最一開始的問題：

你的個人網站想要有什麼功能？​

我的需求是個人網站記錄生活，不需要後台，所以決定朝架設靜態網頁方面著手，後來發現Docusaurus內建布局和模板，我相當喜歡：

  • 畫面簡潔：畫面簡單乾淨，淺色模式(太陽圖案)就是白色為底，黑暗模式(月亮圖案)就是黑色為底。

  • 切換電腦版和行動版：會隨著觀看者使用的設備不同，自由切換為電腦版或行動裝置版畫面。

  • 中文指南：完整中文指南教導如何創建，雖然寫的是中文，但其實剛開始我幾乎都看不懂，明明每個字都認識，組在一起我就很神奇地不認識了，但開始架這個網站後，必須說官網的教學真的寫得很詳盡。

  • 文檔和部落格：預設的介面有文檔和部落格，也可以單純只用部落格。

你願意投入多少的時間或金錢？​

我原先是設定在自架網站上一毛錢都不花，因為以為只是心血來潮，但沒想到三個月過去，發現自己還是很熱衷在寫部落格內容，所以後來決定花錢購買域名。

而花時間這件事我一開始就做好心理準備了，也慶幸自己有花時間，開始自架網站後才發現原來下班後可以如此充實，除了網站也另外嘗試了一些新事物，重複的上班日常卻擁有快樂的下班生活。

非常推薦使用Docusaurus​

上面種種原因，使我決定用Docusaurus架網站，如果你也使用Docusaurus架站，就會發現基本上這個網站基本功能和預設classic差不多，包含側邊攔、頂端欄、文檔、部落格/博客、自動切換電腦和行動版等，都是預設模板頁面就有。

純文組，高中念一類，大學念人文社會學院，畢業後從事辦公室行政工作，沒有程式背景的我都可以挑戰自架網站，如果你剛好喜歡這樣的網站布局，也符合心目中的需求，也許可以一起來嘗試靜態網頁。

最大挑戰​

  • 沒有程式背景，遇到問題又無法解決，想要的功能怎麼樣也無法做出來時，很容易便放棄。

  • 不能排斥英文和代碼，雖然我沒有程式背景，只是從英文推測語意也可以照樣照句修改，但一定會看到一堆英文和符號。

  • Docusaurus中文資源很少，大部分都要下英文關鍵字找解決方法，還要看的懂用英文寫的解決方法。

結語​

我陸續將版面設定寫下筆記，方便自己未來想要更改設定時，能快速找到對應的代碼。

網站架設一段時間後，發現會用靜態網頁的人，絕大部分都是資訊相關背景，所以別人用Docusaurus架設的部落格都寫得很技術，只有我寫得很生活。

好處是沒有程式背景的人也可以看得懂我那圖文並茂的版面設定筆記，壞處是如果觀念或代碼有錯誤那就只能將錯就錯了。