約在2020四月開始，我停筆了在WordPress上長達四年的部落格經營，將平台轉向架在Github Page上搭配Hexo來客製化自己的部落格。
至今已經過了將近8個月，是時候來寫一下架設這個部落格背後的過程，以及當初設計時考慮的各種面向，順便來回顧一下這幾個月部落格的成長。
從WordPress到Github Page + Hexo
當初會痛定思痛轉移平台的原因主要是因為WordPress的編輯器對於我實在很不夠用，我需要一個能夠讓我很方便的來撰寫程式碼以及數學公式的解決方案，想了許久還是Markdown最方便了，最後決定選擇對Markdown支援度很高的Hexo。
其實從國中開始寫部落格開始，到處流浪搬家換平台已經許多次了QQ，關於這段辛酸血淚可以至About這篇觀看。
使用Hexo架設部落格的過程
總之第一次使用Hexo然後又是自己架網站，網站功能、RWD、介面設計、SEO優化、流量分析…等都要自己來，我一直對前後端很不熟，所以這邊其實花了蠻多時間反反覆覆的修改。
下面簡單敘述了一下當初設計時考量到的幾個面向:
- 網站主題
- 深色主題的設計
- 便捷的的文章編輯
- 一鍵式的文章發布
- SEO優化、流量分析
網站主題
Hexo其實有許多現成Template可以用，所以只需要找到喜歡的模板後稍加修改就好了。但由於我想要找一個簡潔又是深色的主題，最後我挑的主題是hexo-theme-snail。
不像hexo-theme-next有廣大的維護以及開發者，我挑選的模板許多功能都不夠完善，介面什麼的也都需要自己去改，這部分為了熟悉Hexo也花了不少時間。
為什麼不用hexo-theme-next就好？ 因為不想跟別人撞版型呀xD
舉個例子，由於Hexo產生的只是一個靜態網站(static website)，他不像wordpress可以有後端平台或是資料庫來做留言板，所以留言功能就必須藉助第三方的外掛，像是現在看到的留言板就是DISQUS弄出來的，印象中Disqus的網站介面還不能選繁體中文，如果要使用繁體中文就必須透過一些小方式來操作
- 關於如何使用繁體中文見面可以參考【Day 8】如何安裝 Disqus 留言板
如果你留言的話，你的預設頭像還是一隻很可愛的貓咪在敲電腦喔，這麼可愛的頭像還不快留言嗎？
深色背景的配色 - Dark Mode UI
使用深色主題是我個人的偏好，但深色主題如果設計的不好又不容易長期閱讀，偏偏我的部落格定位又是技術導向居多，許多篇文章的閱讀時間都篇長，所以當初在設計部落格的深色模式花了一番苦心。
比方說其實現在文字的顏色並不是純白(因為對比太強眼睛會不舒服)，而是根據不同區塊的重要程度來調整白色的透明度。
當初為了深色主題的UI還去研究了很多文章，網路上有許多針對Google 2019年後支持的Dark Mode以及Apple的Dark Mode做的分析介紹，以這些這些文章為雛形去調整了整體的配色方案。下面這幾篇都是當初看到覺得很不錯的介紹文：
便捷的的文章編輯 - Markdown + VS Code
會看上Hexo的原因是它支援使用Markdown來撰寫我的文章，Markdown簡單好上手的特性使得我可以專注在自己的文章內容上，並且很方便的支援程式碼、數學公式(Latex)的編輯。而關於文章標題、內容的配色或字體等設計再透過css去設計就可以了。
有了Markdown，那接下來就只需要一個好的文章編輯器就可以開心撰寫部落格了！ 所以就用了輕量好用的VS Code，透過內建terminal可以直接下hexo server開啟local server，一邊寫文章一邊觀看寫完後的呈現，撰寫完還可以直接git push到github repo上部署，簡單好用。
一鍵式的文章發布 - Travis CI
Hexo搭配Github Page雖然方便，但必須有一個source repo來維護原始的檔案，然後透過hexo deploy產生出靜態網站的檔案資料夾，實際上github page連結的repo是靜態網站資料夾。如果上面文字敘述有點不懂的話，實際上的架構圖是這樣的:------------------ deploy -------------------
| hexo file repo | ------------> | Static Web repo |
------------------ -------------------
↕ Github Page
-------------------
| Website |
-------------------
如此一來就每次寫完文章就必須
- 將文章更新到hexo file repo
- 然後將deploy的檔案更新到static web repo
同時維護兩份repo實在是有點麻煩。所以我就讓Travis CI來幫我完成中間這段。Travis CI是一個分佈式的整合服務，可以用來建構和測試github上的repo，常被用來做CI/CD。
透過Travis CI簡化原本兩步驟發布流程，以後寫完文章將檔案更新到hexo file repo，Travic CI就會在他們的環境下把我的這個repo clone下來做deploy，然後再幫我更新到Static web repo上。
如此以後我只要將文章push到hexo file repo，其他就通通不用管了。
SEO優化、流量分析 - Google Analystics
其實我對SEO很不熟，以前WordPress都幫我弄好好的，現在突然通通都要自己來還真的花了不少的心力。
像是要產生可以讓搜尋引擎可以爬到的sitemap.xml，網站的結構該如何設計(標題以H2來標註、章節以H3…)，如何處理Paging所產生的重複內容…這些也花了蠻多時間在研究的，雖然現在已經暫且告一個段落，但或許還有許多不足的地方要修改。
而SEO的成效則是透過GCS(Google Search Console）來觀察網站在搜尋引擎上的排名和曝光度。
最讓我困擾的是Hexo沒有一個好的後台介面(由於是靜態網站)，所以無法觀察部落格的流量增減，於是就使用了Google Analystics，自從v4出來後見面更得更加好看也更方便使用了。
網站流量的成長
WordPress時期
當初WordPress的部落格在斷斷續續經營了四年多後，已經達到了76000多的瀏覽次數，在2020的四月平均每天已經有150多次的瀏覽數。儘管這數字並不高，但對部落客來說還是一種不小的肯定以及成就感。
Hexo時期
下圖是大約從2020/4月開始，使用Hexo在Github Page上架設網站的流量成長
這是從頭開始的成果，由於我沒有把Wordpress的流量導過來…當初用的是wordpress.com的方案，所以連302轉址外掛都不能用…就乾脆從頭來了，而且中途SEO還沒做好前成效也糟糕的一塌糊塗。
儘管現在流量還是很少，但看得出有慢慢在成長也算是一種小小成就。希望未來能繼續加油。