# 網頁前後端架構

要講網頁排版跟動畫那些花俏東西之前，要先理解它到底是怎麼運作的，也就是網頁前後端分別在幹啥

## 前後端布局

我總共有一個伺服器，三個HTML頁面，每個頁面有各自的CSS、JS還有圖片，如下圖(因為每一頁的布局差不多，所以只做一頁的示意圖)


有一點當初搞了我很久就是HTML裡面的連結都不能只接寫相對路徑，要先用Flask裡面的url_for()函式連回server，不然會吃404

## 部屬至GitHub跟Heroku

然後要把網頁從本地部屬到GitHub上，要學寫Git，這裡我當初莫名學很久，但後來有整理出一個打法

//第一次push
git init
git add file
git commit -m "..."
git remote add origin HTTPcode
git push origin master

//之後push
git add file
git commit -m "..."
git pull --rebase //同步本地branch
git push origin master

再來是連線Heroku，辦帳號那些我就省略，把重點放在當初比較煩的地方，其實主要就是這額外給Heroku用的三個檔案
* requirements,txt - 告訴Heroku要裝那些函式庫
* runtime.txt - 標示python版本
* Procfile - gunicorn啟動dyno

這樣就能看到repo右下角的火箭寫active，就能在公開網域找到我的網站了好ㄟ

## 免費仔的小技巧
因為Heroku的免費專案每三十分鐘閒置就會進入休眠，這樣需要大量啟動時間，所以我需要網頁保持啟動，所以用UpTimeRobot每五分鐘戳一下我的網頁，就能大大改善啟動時間

| 加速前載入平均時間 | 加速後載入平均時間 |
| -------- | -------- |
| 14.895 | 2.463 |

## Tiny的結語

當初搞這一連串部屬其實用有點久，主要還是因為第一次打終端指令，現在已經能行雲流水地push了，接下來就介紹網頁版面吧

---

<ul style ="display: flex; flex-direction: row; width: 100%; justify-content: space-between;margin: 0; padding: 0;">
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/rJBpwRsut" >上一篇</a></li>
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/rJBpwRsut">主頁</a></li>
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/BJ6op5i0t">下一篇</a></li>
</ul>