Illustration by Vera Chang

設計師如何架設作品網站?從規劃到上線 — 流程 & 資源 (下)

Vera Chang
Nov 6, 2018 · 7 min read

這篇文章紀錄我的線上作品集架站流程、各項線上資源及工具,希望同樣非Dev,HTML、CSS只有基本了解的設計師可以更輕鬆的建立自己的線上作品集,同時也是記錄在2018年建立線上作品集的一些方式。


在上一章中介紹了作品集架設管道概覽➝ 規劃分析➝ 設計➝ Coding等四個部分,這章將介紹上線過程及應用資源。

上線

檔案夾 Commit至 Github

當完成你的網頁程式碼後,需要把它放到網路上,這樣人們才可以搜尋得到。首先要取得主機(hosting),可以向主機租借商(hosting companies)租借,或是使用免費的資源。

我所使用的是免費的 Github-PagesGithub-Pages支援 HTML及 CSS靜態網頁,同時也支援免費使用自己的網域名稱。但有每個 Repository 有 1GB的限制,每個月有 100GB頻寬限制,同時上傳在 Github的資料是任何人都可存取的。

  1. 首先,需要先註冊一個Github帳號,接著建立一個 RepositoryGithub提供的網域名稱會是 yourusername.github.io
  2. 填寫你喜歡的名字yourusername,將會顯示在之後你的的網址yourusername.github.io
  3. 勾選項目,之後可以編輯Github介紹面。
  4. 完成創立一個Repository

再來將你的檔案夾 Commit上去,對於不熟悉 Git的設計師,有 Github Desktop可以很容易的 Commit & publish。Commit上去後,就可以開始從yourusername.github.io瀏覽你的網頁了。

使用Github-pages完整的流程可參考 Github-Pages連結或這裡

  • Tip:使用免費或付費網路主機端看你的需求,這篇文章(英文)介紹了各類免費與便宜的主機。
Github Desktop

註冊個人網域

人們可以透過這個獨特的網址來尋找你的網站,像是 https://www.mozilla.org 。你需要向網域名稱註冊商(domain registrar)租借網域名稱 (domain name)。

Github提供的網域名稱是 yourusername.github.io。如果你想要自己名稱的頂級網域,像是: .com.org.net就需要向網域名稱註冊商租借,或是使用免費的 .ml.tk.ga頂級網域後使用轉址服務。

這裡Github的官方說明書,或是那裡的影片教學,如何在 Freenom免費註冊個人網域後將yourusername.github.io轉址到你的個人網域。

  1. Freenom註冊網域後,到 service下拉選單的My Domains,點選 Manage Freenom DNS
  2. 接著在Manage Freenom DNS頁面填寫 ACNAME,填寫方式參考第二張圖片。
  3. 回到Github,在你的Repository頁面點選 Setting標籤,往下滾動頁面 直到 Custom Domain,在這裡填上你剛才註冊的網域就完成了。
service下拉選單的My Domains,點選 Manage Freenom DNS
Manage Freenom DNS頁面填寫 ACNAME
在你的Repository頁面點選 Setting標籤
Custom Domain填上你剛才註冊的網域

需要注意的是,免費網域不利 SEO,而且可能有註冊被註銷的風險,也不支援 HTTPS。

Freenom — 可以在這裡註冊免費頂級網域, Freenom也提供免費 DNS服務。

Godaddy — 可以在這裡購買頂級網域。
Namecheap — 可以在這裡購買頂級網域。

Netlify

另一家較新的免費主機(hosting),快速發布靜態網站。與Github Pages相似,並可以直接將GithubRepository搬過來,介面更簡單快速,基本版免費。因為這篇文章以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產生器。

謝謝你看到這裡,有任何建議或是補充歡迎在下方留言,我將更新到文章中。架站愉快!

Hello,我是Vera,目前在 IT 產業工作的 Visual Designer。如果有任何建議或合作提案也可以透過以下這些方式聯繫。BehanceDribbbleWebsite

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Vera Chang

Written by

Visual/ UI Designer & Editor of VHS — Design vitamin for creative mind. 一本視覺設計與閱讀的線上誌|verachang.net

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade