設計師如何架設作品網站?從規劃到上線 — 流程 & 資源 (下)
這篇文章紀錄我的線上作品集架站流程、各項線上資源及工具,希望同樣非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
,在這裡填上你剛才註冊的網域就完成了。
需要注意的是,免費網域不利 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,視覺化的介面非常容易使用。可以輕鬆更改背景圖片、顏色、文字、連結等項目。
最後,在 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產生器。