設計師如何架設作品網站？從規劃到上線 — 流程 & 資源 (下)
這篇文章紀錄我的線上作品集架站流程、各項線上資源及工具，希望同樣非Dev，HTML、CSS只有基本了解的設計師可以更輕鬆的建立自己的線上作品集，同時也是記錄在2018年建立線上作品集的一些方式。
在上一章中介紹了作品集架設管道概覽➝ 規劃分析➝ 設計➝ Coding等四個部分，這章將介紹上線過程及應用資源。
上線
檔案夾 Commit至 Github
當完成你的網頁程式碼後，需要把它放到網路上，這樣人們才可以搜尋得到。首先要取得主機（hosting），可以向主機租借商（hosting companies）租借，或是使用免費的資源。
我所使用的是免費的 Github-Pages， Github-Pages支援 HTML及 CSS靜態網頁，同時也支援免費使用自己的網域名稱。但有每個 Repository 有 1GB的限制，每個月有 100GB頻寬限制，同時上傳在 Github的資料是任何人都可存取的。
- 首先，需要先註冊一個
Github帳號，接著建立一個Repository，Github提供的網域名稱會是yourusername.github.io。 - 填寫你喜歡的名字
yourusername，將會顯示在之後你的的網址yourusername.github.io - 勾選項目，之後可以編輯
Github介紹面。 - 完成創立一個
Repository！
再來將你的檔案夾 Commit上去，對於不熟悉 Git的設計師，有 Github Desktop可以很容易的 Commit & publish。Commit上去後，就可以開始從yourusername.github.io瀏覽你的網頁了。
使用Github-pages完整的流程可參考 Github-Pages連結或這裡。
- Tip：使用免費或付費網路主機端看你的需求，這篇文章(英文)介紹了各類免費與便宜的主機。
註冊個人網域
人們可以透過這個獨特的網址來尋找你的網站，像是
https://www.mozilla.org。你需要向網域名稱註冊商（domain registrar）租借網域名稱 （domain name）。
Github提供的網域名稱是 yourusername.github.io。如果你想要自己名稱的頂級網域，像是： .com、 .org、 .net就需要向網域名稱註冊商租借，或是使用免費的 .ml、 .tk、 .ga頂級網域後使用轉址服務。
這裡是Github的官方說明書，或是那裡的影片教學，如何在 Freenom免費註冊個人網域後將yourusername.github.io轉址到你的個人網域。
Freenom註冊網域後，到service下拉選單的My Domains，點選Manage Freenom DNS。- 接著在
Manage Freenom DNS頁面填寫A與CNAME，填寫方式參考第二張圖片。 - 回到
Github，在你的Repository頁面點選Setting標籤，往下滾動頁面 直到Custom Domain，在這裡填上你剛才註冊的網域就完成了。
service下拉選單的My Domains，點選 Manage Freenom DNS
Manage Freenom DNS頁面填寫 A與 CNAME
Repository頁面點選 Setting標籤
Custom Domain填上你剛才註冊的網域需要注意的是，免費網域不利 SEO，而且可能有註冊被註銷的風險，也不支援 HTTPS。
Freenom — 可以在這裡註冊免費頂級網域， Freenom也提供免費 DNS服務。
Godaddy — 可以在這裡購買頂級網域。Namecheap — 可以在這裡購買頂級網域。
Netlify
另一家較新的免費主機（hosting），快速發布靜態網站。與Github Pages相似，並可以直接將Github的Repository搬過來，介面更簡單快速，基本版免費。因為這篇文章以Github Pages為主機上傳網站檔案夾，為了不造成混淆，有機會再另外寫一篇文章介紹Netlify。
Google Analytics
網站成功上線後，你可以透過 Google Analytics持續追縱流量統計，只要在 Head的部分加入代碼就可以Google Analytics上看到各項數據。
另外，Google Optimize也提供免費的 A/B testing，視覺化的介面非常容易使用。可以輕鬆更改背景圖片、顏色、文字、連結等項目。
Google Optimize A/B testing最後，在 Search Console新增資源了解自己網站的收錄情況並優化其網站的曝光率。
- Tip：搜尋
site:可以檢視Google搜尋引擎收錄了的你的所有網頁。在Search Console提交Site map能夠改善網站的檢索結果，詳細可以參考Google的說明文件。
Google Analytics — Google所提供的網站流量統計服務。Search Console — 協助你衡量網站的 Google搜尋流量和成效、修正問題，並讓你的網站從眾多搜尋結果中脫穎而出。Google Optimize — 提供免費的 A/B testing, website testing等工具。xml-sitemaps — 免費的線上自動 Site Map產生器。
