網站部署與第三方服務整合
•
2 gefällt mir•1,816 views
在 2015 年 4 月至元智大學資訊傳播約系舉辦網站製作工作坊，讓參與的學員在 4 週內學會 HTML/CSS 基礎，並運用 Bootstrap 建置靜態網站。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie 網站部署與第三方服務整合
Ähnlich wie 網站部署與第三方服務整合 (20)
Mehr von Shengyou Fan
Mehr von Shengyou Fan (20)
網站部署與第三方服務整合
- 2. 單元主題 • 在這個單元裡將討論以下幾個主題： - 佈署前注意事項 - 如何部署網站⾄至線上環境 - 如何整合第三⽅方網路服務⾄至我的網站
- 3. 部署前檢查表
- 4. 上線前檢查 • 網站製作完成後，需進⾏行⼀一連串的測試，確 認網站上沒有錯誤或誤植的內容後，再進⾏行 部署，部署完成後才可拿到對外的公開網址 • 若在測試過程中，有發⽣生任何錯誤，則將其 紀錄成⼀一張清單。待逐⼀一除錯修正後，為求 完整，需重新再測試⼀一次以免缺漏！ • 以下列出幾個上線前的檢查表，請務必檢查 完後再部署！
- 5. 檢查各⾴頁⾯面標題 • 逐⾴頁檢查所有⾴頁⾯面的標題是否正確？ • 常⾒見的標題格式 • {⾴頁⾯面名稱} | {網站名稱} • 逐⾴頁檢查各⾴頁⾯面使⽤用的 favicon 是否正確？
- 8. 檢查⾴頁⾯面連結 • 確認各⾴頁⾯面的連結是否都可以彼此連結無誤 • 在檢查連結的同時，也要確認連結點擊後的 動作 (另開新視窗) 是不是正確？ • 除了檢查站內連結外，也要檢查站外連結是 不是連結到正確的網⾴頁？
- 9. 網站部署
- 10. 使⽤用的網路服務 • DIVSHOT (https://divshot.com/) - ⼀一個專⾨門存放靜態網站的網路主機服務 - 可直接上傳 zip 檔佈署、也可透過指令 - 預設就有三種發佈階段 - 每次部署都有版本紀錄 - 可⽤用帳密保護開發與測試階段版本 - 可對應⾃自⼰己的網址
- 11. 註冊帳號
- 12. 新增網站
- 13. 為網站命名 (網址)
- 14. 上傳網站
- 15. DIVSHOT 平台 發佈階段 [ development ] 開發⽤用、測試⽤用 [ local ] 本機端開發 [ staging ] 階段性發佈 [ production ] 正式上線 在本機端進⾏行開發， 開發完成後送⾄至版本 控制系統 [version control] 原始碼管理 定期將成果部署⾄至 DIVSHOT 上進⾏行測 試 階段性完成時，可先 發佈給客⼾戶測試、確 認實作細節 專案完成後部署⾄至正 式主機，對外公開上 線 密碼保護 密碼保護
- 16. 測試成果
- 17. 階段發佈
- 18. 不同階段的網址 • 開發預覽 -‐ http://{version}.development.{app_name}.divshot.io • 階段測試 -‐ http://{version}.staging.{app_name}.divshot.io • 正式上線 -‐ http://production.{app_name}.divshot.io -‐ http://{app_name}.divshot.io
- 19. 密碼保護
- 20. 持續循環的開發流程 開發 測試 部署 上線測試 發現錯誤 發現錯誤 內容更新
- 21. 第三⽅方服務整合
- 22. 豐富網站內容 • 我們已經將各⾴頁⾯面基本的內容和功能完成了， 在這個階段裡，我們可以試著增加更多元素 來豐富我們的網站，包括： - 增加網站 favicon - 增加動態元素 (Youtube影⽚片、Google地圖) - 增加社群外掛 (Facebook 整合)
- 23. 增加 favicon • 先準備⼀一張 250 x 250 px 的正⽅方、背景透明 的圖⽚片 • 上傳⾄至 http://iconifier.net/ 製作成 favicon • 把 favicon.ico 放在網站根⺫⽬目錄底下 • 在 <head> 區塊增加語法： <link rel="shortcut icon" href="favicon.ico">
- 24. 增加Youtube 影⽚片
- 25. 增加 Google Map
- 26. 增加 Google Map
- 27. FB 社群套件 • Facebook 提供了⼀一系列的社群套件，讓我們 可以將部份 Facebook 功能搬到⾃自⼰己的網站 上，讓網站有更多社群功能 • 要注意的是，在安裝 Facebook 社群套件時， 需設定網站真實的 URL。所以在使⽤用前，要 先取得網站佈署後的 URL，且網站要佈署到 主機後，社群套件才能正確運作！
- 31. 安裝程式碼 放在 <body> 後第⼀一⾏行 放在 套件 要出現的位置
- 32. 單元⼩小結 • 在這個單元裡，我們討論了： - 部署前需注意的檢查事項 - 如何部署⾃自⼰己的網站⾄至 DIVSHOT - 如何透過第三⽅方服務豐富我們的網站內容
- 33. 動⼿手做 • 請學員現在就開始將⾃自⼰己的專案部署⾄至 DIVSHOT • 部署完成測試無誤後，請將⾃自⼰己的網址貼在 本⼯工作坊的粉絲專⾴頁上 • 15 分鐘後我們將進⾏行成果發表！
- 34. 問與答 學員可開始練習、實作