一般「純寫HTML部署到Netlify」網路上搜尋可以找到許多介紹、教學文章，那如果其中有很多網頁都有一樣的版型，可以選擇使用模板引擎，免除在每個頁面都要複製貼上一樣的內容，方便修改、維護。所以今天這邊會介紹使用Flask(預設Jinja2模板引擎)來在Netlify上創建簡單的靜態網站。
創建Project
我把專案名稱取作testweb，新增資料夾、安裝相關套件：
$ mkdir testweb
$ pip install Flask Frozen-Flask |
添加模板我們先新增一個存放HTML的資料夾(templates)。
在裡面新增一個基本的佈局templates/base.html：
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>
{% block title %}{% endblock %} | 測試網頁
</title>
</head>
<body>
<div>
<h1>測試網頁</h1>
<div>
{% block main %}{% endblock %}
</div>
</div>
</body>
</html> |
再來創建templates/home.html、templates/about.html當範例：
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block main %}
<p>使用Netlify架靜態網站。</p>
{% endblock %} |
{% extends "base.html" %}
{% block title %}About{% endblock %}
{% block main %}
<p>這是一個範例網站。</p>
{% endblock %} |
撰寫app.py (有包含Frozen-Flask生成靜態網頁的部分)：
# -*- coding: utf-8 -*-
import sys
from flask import Flask, render_template
from flask_frozen import Freezer
app = Flask(__name__)
freezer = Freezer(app)
@app.route("/")
def home():
return render_template('home.html')
@app.route("/about.html")
def about():
return render_template('about.html')
if __name__ == '__main__':
if len(sys.argv) > 1 and sys.argv[1] == "build":
print("Building website...")
freezer.freeze()
else:
app.run(debug=True)
|
文件結構：
測試網站是否能正常運作：
開啟瀏覽器http://127.0.0.1:5000/
![]()
測試凍結成靜態文件因為在Netlify上只提供部署靜態網頁，因此要用Frozen-Flask將Flask應用凍結成靜態文件：
文件結構：
成功產生build資料夾，確認沒有問題後即可將build資料夾刪除，因為我們要讓Netlify幫我們自動建構。
部署到Netlify*我這邊是使用Git部署，它好像也可以直接把檔案上傳部署，但我沒嘗試過。
在git之前需要準備requirements.txt，讓Netlify知道我們有使用那些套件：
| $ pip freeze > requirements.txt |
文件結構：
目前它提供連結Git的網站有GitHub、GitLab、Bitbucket。
我這邊是選擇我原本就有的GitHub，可以設定私人，不一定要公開。
創建好後將你的專案Push上去。
接下來請到Netlify註冊個帳號，點擊"New site from Git"，選擇你剛剛Git的網站。 *這邊第一次會需要一些權限的確認
選擇你的repository(儲存庫)。
這邊是要讓我們Git上來後，Netlify自動幫我們Build凍結成靜態文件的設定。完成後點擊Deploy site。
Build command：python app.py build
Publish directory：build
*如果你的網案原本就是純靜態HTML的話，這部分可以略過。
*如果這邊沒有設定到，之後也可以到專案內的Settings > Build & deploy > Build settings新增修改。
*而你如果是用其他像是Hugo、Hexo，相關設定可以參考官方教學。
在Deploys頁面能看到它正在Building。
完成後會顯示Published，也代表目前部署的是這個版本。
成功了！！
那我該怎麼看我的網站呢？點擊上方https://sharp-nightingale-15794a.netlify.com這串URL即可連結過去觀看。
其它設定與問題那串URL好醜、記不起來，沒關係，可以到Settings > General > Site information > Change site name 更改自己喜歡的，不過當然也要別人沒使用過的才行。
從Deploy選擇git版本能查看執行的Log紀錄，如果有發生錯誤，可以先來這邊看看錯誤訊息。
如果使用pipenv創建，不能將"Pipfile"、"Pipfile.lock"也git上去，會造成錯誤(這部分我還不確定原因)，可以使用.gitignore將其剔除。
當網址錯誤Netlify會有預設的404頁面，如果想換成自己的，只需加入404.html即可。
Netlify還有許多其他功能、設定可以自己去摸索
如以上有任何錯誤或問題，歡迎底下留言~
創作內容
使用Python、Flask和Netlify創建簡單的靜態網站
程式相關 (46)