網站的基本資料概述
明眼人會注意到，其實這個網站的截圖就是現在個人品牌「若芽」的形象網站。
用這個最一開始的網站來作為網頁作品集的打頭陣，相信是最好不過的了 嗎XD(?。
因為形象網站比起像是購物車的網站、線上課程的網站來說不需要有太多的功能，對於前後端資料的串接要求也不高，可以說是只要純粹的HTML、CSS跟一小部分的JS就可以完成了。
所以就沒有使用Wordpress來架站，而是單純使用HTML、CSS跟配合一點點的JS，想說趁著這一波磨練一下自己基本寫程式的能力。
如果不論後面一點一點上架新的東西跟內容所耗費的時間，單純就最一開始開啟codepen、設計基本的元件和圖片到上架伺服器對外經營，其實所花的時間大概就1個禮拜左右的時間。
因此真正比較花時間的，其實還是後面補足文章的部分Orz，整體的架構反倒還好。
而這個網站最主要的功能就是，把以前所學過的東西、想過的事情做一個整理，並且能夠放一些自己的生活記事等等。
與其說很像是一個部落格，不如說我最一開始期待這個網站的功用，就是一個作品集+記事本的感覺。
網站頁面配置
在思考網站的時候，每一個頁面要放一些什麼內容都是至關重要的。
每一個頁面跟頁面之間的超連結，會影響到資料夾的存放路徑，以及後面的相對路徑要怎麼抓。
當然對於頁面的內容也要有個基本的思考，至少要想一下是不是可能有哪些地方是需要寫JS的，可能要先額外把它寫起來之後再做插入。
另外就是要評估一下會需要多少的元件要用illustrator來做繪製，可能需要找哪些資料等等。
不過，如果是要跟委託做網頁的廠商報價的話，多半會有彩圖，跟幾乎是最後網站的完成靜態畫面，會看得比較清楚也比較好溝通。
但因為我是私人架站的關係，網站也是我自己要使用的，沒有其他第三方，自然就不需要畫一張完稿圖給自己看，如果架網站的過程中覺得不太好，就改一下其實也是個輕鬆的過程。
網站顏色配置與主題
如果是採用Wordpress網站的話，因為比較會把心力放在「功能」的呈現，走一個比較簡潔的風格，因此多數都是呈現白色底為主，頂多就搭配少量的顏色來當作點綴。
再加上Wordpress的限制會比較多，很多東西如果想要弄成自己喜歡的樣子的話，可能要寫大量的CSS來做調整，而這樣就失去了使用Wordpress網站的方便性了。
當然對於JS的部分也幾乎沒有辦法動，因此在配色上就比較不會去做安排。
不過，如果是純粹的coding的網站來說的話，那就有非常大的彈性跟空間可以做設計，因此在最一開始構思網站的時候，其實花最多時間的反倒是在挑顏色還有選網站主題。
那到底是先挑顏色還是先選主題？我的做法是先挑顏色。
而因為事實上我不是一個對於配色很有概念的人，所以我都會先從Color Hunt這個網站裡面來選顏色的靈感。
這個網站上面會有很多別人提供好的顏色搭配，以我自己來說大概都會選個5組喜歡的顏色搭配以後，再來決定網站想要走的主題風格。
而搭配這樣的選擇，我自己再思考了一下自己喜歡的東西，如果就天氣來說的話喜歡的應該是陰天或雨天，然後希望網站可以有一些植物搭配。
所以網站最後的風格基本上就是決定為「跟雨天有相關」以及放上一些跟文章有關的圖片或是喜歡的小生物或小物件，這種感覺...的嗎？
反正就且看且走吧(又是這種決定)，反正大不了我之後再重新改版網站RRR！
但是如果只有這樣的顏色配色，看起來又非常單調，因此我將這幾個顏色丟到illustrator裡面，利用HSB色彩模式去調整色度、飽和度、亮度，分別得到對應的另外兩組顏色。
基本上在色度不要調整太過的情況下，調整飽和度跟亮度得到的新組合，跟原本的顏色搭起來還是都會非常協調的。
這一系列的作法對於我這種可以說是色彩搭配的色盲，是非常好的SOP。而這一套做法是從之前Hahow的網頁課程上面看來的，說真的，那一堂網頁課真的能夠學到超級多的東西啊！
LOGO設計的想法與概念
其實思考LOGO設計的時間點，比架網站的時間稍微早了一點點。
因為最一開始是在要開Twitch實況時，覺得正式要開始對外經營「若芽」這個品牌，所以必須要有一個初版的LOGO。因此大概比網站的時間還要早了約莫1個多月開始設計的。
不過，一般來說雖然設計網站是不需要連同LOGO一起處理的，但是LOGO本身的配色其實會跟事業體對外的形象是有關聯，而這也會牽扯到網站的整體配色。
因此會比較建議如果廠商有特定的LOGO的話，在選擇網站配色時要優先考慮跟LOGO相近的色系。
因為是經營個人品牌的關係，所以就直接以「若芽」的文字作為LOGO的樣子。
而為了盡量要跟網頁的配色相近，因此主視覺的選擇上也是盡量以跟網頁的配色相近為原則。
想當然我就很懶惰地直接用相同的主視覺顏色了。
再來的話就是關於LOGO的理念，因為若芽本身在日文裡面就是「海帶芽」的意思，雖然一開始取名的用意是，1/31的生日色是若芽色，但就用這個詞去做發想。
而我自己本身是味噌湯的熱愛者，然後若芽本身又是海帶芽，所以就想到一系列在吃日本料理的時候會使用到的餐具以及味噌湯本人，稍微取代一下文字的部分就變成LOGO了。
就是這麼隨便的嗎？對。
記得朋朋第一眼看到我的LOGO設計以後表示：「你確定你的LOGO不會被認為是賣日本料理的嗎？」
我當時很理直氣壯的說：「我之後搞不好就斜槓日本料理餐廳啊！我這是未雨綢繆！」
如果是要使用特定的物品來做設計時，我多數會先在網路上找一下有沒有稍微好看的圖片來做修改跟重繪，如果真的還是太複雜的話我就會先用紙筆做設計，再掃描到電腦裡面用illustrator來做圖。
有參考過並且重新繪製的圖片，一方面除了可以調整成比較貼近本身網站的風格以外，也能巧妙的避開圖片是否可以商用的問題。
網站特色
純粹使用HTML、CSS和JS來做設計
你說，這也算是一種特色嗎？
算啊怎麼不算，這證明我有一定程度的coding能力(誤。
也不是啦，就像我前面說的一樣，回到最原始的HTML、CSS跟JS的話可以做出很多想要的效果，彈性也會比較大。
想要調整甚麼格式的話只要key程式碼就好了，其實完全不需要在使用手冊裡面找來找去，看看這個功能要怎麼調整會比較好。
但相較之下這個做法對於初學者來說非常不友善，而且能做到的功能很有限，如果沒有串接後端資料庫的能力，其實是非常不夠的。
不過就像我說的一樣，這個網站的管理者只有我自己，而且就是寫寫文章而已沒有什麼太複雜的功能XD。
學了一年多的網頁設計，不用白不用嘛你說是不是(眨眼。
全部的元件跟圖片都是自製
雖然說現在有很多免費商用的圖庫，如果是icon的話可以找flaticon，想要找大圖的話可以用unsplash或是freepik，都非常的方便。
大圖的部分是還好，像我自己網站裡面每一篇文章一開始的圖都是unsplash可以免費商用的圖。但是icon或是一些小插圖這種如果想要用免費圖庫的就會有問題了。
會有什麼樣的問題呢？
第一個會先遇到的就是icon線條粗細不同的問題，如果喜歡的icon分屬於不同粗細的類別，很有可能會造成同時放在網站裡面的時候，會有極度不協調的問題。
因此我自己在設計網站的時候，只要是icon類的我都會找比較偏愛的參考icon，然後配合網站的風格、統整線條的粗細以後重新繪製。
有些社群網站的icon不一定都是方形的，如果純粹採用原本的LOGO的話也會有不協調的感覺，所以思來想去還是重新繪製比較好一丟丟啦。
另一個使用外面圖庫的問題就是，風格差異。
像這個網站在設計的時候就比較偏向是區塊圖片的感覺，如果這個時候再有個一張像是手繪風、或是單純的水墨風格，那就會非常奇怪的吧？
因此所有的元件像是穿著雨衣的小朋朋、風鈴、各種樹叢等等，以及每一篇文章右下角的插圖，也都是自己用illustrator重新繪製的。
雖然非常搞剛，但至少讓整個網站的風格是非常統一的。
在設計或是繪製圖片的時候，或多或少一定會參考網路上的圖片的XDDD，目前功力還不夠到家，只希望未來可以用illustrator盲畫。
使用Bootstrap4.0的架構簡化coding的複雜度
一般來說要做網站的RWD時，純粹寫CSS、JS的時候會非常的麻煩，再加上有一些特定的功能像是這個網站常駐最上面的navbar，如果要自己寫的話真的是非常麻煩的一件事情。
Bootstrap本身是一個幾乎都把樣式寫好的一個像是外掛的東西，引入到網站裡面的時候可以純粹透過寫HTML就完成複雜的樣式設定。
他可以純粹只有寫HTML就可以弄出一個非常美跟專業的網站，但也保留一定程度可以使用CSS來做修改的空間，因此我在架網站的時候一定會以Bootstrap為基底，簡化寫非常多基本設定CSS的時間。
而既然是用別人現成寫好的CSS，自然就要不停一直翻使用手冊來找你需要的功能在哪裡。也需要理解最基本Bootstrap的網格系統。
不過比起從頭開始寫RWD的CSS設定，我寧可多花一點時間在翻手冊這完全是可以的XDDDDD。
你說，現在不是5.0版了嗎？怎麼還是用4.0版？
因為我好懶得去學新的版本嗚嗚嗚，有空有時間會再往上學的Orz。
用JS寫了一些簡單的小互動
因為是文章為主的網站，所以基本上在文章頁面裡面也沒有辦法用太多的東西，否則會很干擾閱讀。
因此跟使用者的小互動JS程式，就只有安排在首頁跟work的分類頁面裡面。
其實本來想要寫SVG的水面漣漪，搭配手繪的圖，但是想了一想好像跟網站的整體風格不太符合，就作罷了Orz
第一個和使用者互動的小程式，是在首頁的小童看雨傘。
主要的作法是，固定有一個雨傘的圖片是黏在滑鼠的旁邊。另外有一個小童，會根據滑鼠的不同位置截取不同的圖片，整體看起來就很像是小童在盯著雨傘看。
第二個則是滑鼠移上去以後會有不同的圖片，點下去以後又會是另外一張圖片的分類icon。
當然icon也是自己畫的，不過不同的是這些icon是手繪設計XDD。
CSS的特效
這個網站其實沒有用到太多的CSS animation，不過稍微想比較久的，最後也覺得想到一個還算不錯的解決方法的，就是在網站設計以及繪圖的彙整頁中，那個滑鼠移上去會變暗的特效。
這個CSS動畫的效果其實想了非常久，一開始想說用filter來做變暗的處理，但是稍微嘗試了一下filter的效果會連同上面的文字一起套上去，白色的字就會也變成灰灰的感覺了。
因此如何能夠同時使用filter的效果，但是卻避開文字不要也套上變暗的效果，著實想了非常久。
後來的解決方案是，把背景跟filter的效果全部都放在每一個元素的before裡面，然後把文字放在一般的div裡面就能避開這個問題。
看起來真的很神，但其實這也是去翻之前網頁課程的筆記才回想起來的Orz。在學的時候其實對於偽元素的操作就一直不是非常熟悉，所以想不到這個做法可能也是意料之內的事情。
伺服器選擇考量
這個網站選擇使用的伺服器是Cloudways，網域買的是Gandi。
其實形象網站在所有種類的網站裡面算是比較小的，因此伺服器的選擇可以優先以價格作為考量。如果是需要比較多功能的，像是線上課程或是購物車，就建議可能要找再上位一點主機了。
而當時因為我正在上另外一門Wordpress的網站課，Cloudways跟Gandi在那一堂課裡面剛好都有相關的折扣，所以就選擇這兩個主機了。
Cloudways同一個主機裡面可以容許有複數的網站，對於正在練習架站的初學者是滿好的，可以多練習。再加上他的後台介面相對來說是比較友善的，使用起來相當好入手。
而Gandi有提供一個以該網域為主的信箱可以使用，作為經營個人品牌的工作信箱也是非常方便。
網站使用者監控
要不要埋GA的code？一定要的吧！自從學會了GA相關的分析以後，不管架什麼網站一定給他代碼埋好埋滿。
不過因為就是個純文章的網站，所以不需要設定轉換的代碼，可惜可惜XD，有一種一身功夫無用武之地的感覺(欸。
雖然這個網站只是純粹放著不會拿來下廣告(也許未來可能會？)，但是觀察本身的網站在搜尋引擎裡面會有什麼關鍵字這是非常重要的。
因此網站每一次有更新的時候，我都會登錄到Google Search Console裡面，去觀察自己的網站都會在哪些關鍵字裡面跳出，看看需不需要多寫關於哪一方面的文章。
當然網站裡面埋Google Analytics的代碼也是不可少的，除了可以觀測到網站的瀏覽量以外，也能進一步的去看出來逛網站的人都是從什麼樣的平台來的，使用的是什麼裝置，在每一個頁面上面都做了什麼事情。進而去看對於網站有沒有要做調整的。
結語
學了這麼久的網頁設計，其實真正有弄上伺服器開始運作的，這個個人的形象網站是第一個。
雖然說目前還看不太到這些文章的內容能夠帶來什麼效應，但最少最少，能夠創造一個屬於自己的平台，寫一些屬於自己的東西。
雖然都是相對來說簡單的HTML、CSS跟JS的應用，但從原本0基礎到現在可以這樣寫出一個網站，也經過了大概有1年左右的時間！
結果搞到最後也不太像是架站，反倒比較像是畢業成發的感覺XD。
