Githubに下記のサンプルを上げました。
https://github.com/NomuraS/qiita-frozen-flask
Flaskの具体的な例
Pythonの小規模なwebアプリのフレームワークであるFlaskを用いて静的サイトを生成します。このために、Frozen-FlaskというFlaskアプリを静的ファイルに変換するためのpythonツールを用います。
準備
$ pip install Flask
$ pip install Frozen-Flask
まずは、Flaskの単純な例を作ってみます。testというディレクトリを作成し、その中で以下のファイルを次のように配置します。
- test/
- hello.py
- freeze.py
- templates/
- layout.html
- index.html
- pages/
- taro.html
- jiro.html
- static/
- js/
- test.js
- css/
- test.css
- js/
hello.py
import flask
app = flask.Flask(__name__)
title='flask-frozen test'
name1 = 'Taro'
name2 = 'Jiro'
@app.route('/')
def index():
return flask.render_template(
'index.html',
title=title,
name1=name1,
name2=name2
)
# <page_name>でアドレスに変数を用いて一般化している
@app.route('/pages/<page_name>.html', methods=['GET'])
def hello_function(page_name):
return flask.render_template(
'/pages/%s.html' %page_name,
title=title,
name0=page_name,
)
if __name__ == "__main__":
app.run(debug=True)
layout.html
<!doctype html>
<html>
<link rel="stylesheet" href="{{url_for('static', filename='css/test.css')}}" />
<script src="{{url_for('static', filename='js/test.js')}}"></script>
<head>
<title>{{ title }}</title>
<body>
{% block content %}
<!-- ここに別ファイルで書いたコンテンツが入る -->
{% endblock %}
</body>
</head>
index.html
{% extends "layout.html" %}
{% block content %}
<h3>Index</h3>
<!-- hello_functionを呼び出して、これの引数にname1やname2にしてしている -->
<a href="{{url_for('hello_function', page_name=name1)}}">go to {{ name1 }}</a>
<br>
<a href="{{url_for('hello_function', page_name=name2)}}">go to {{ name2 }}</a>
{% endblock %}
taro.html
{% extends "layout.html" %}
{% block content %}
<h3>Hello message</h3>
hello! {{ name0 }}
<br>
<a href="{{url_for('index')}}">go to Index</a>
<br>
<a href="{{url_for('hello_function', page_name='Jiro')}}">go to Jiro</a>
{% endblock %}
jiro.html
{% extends "layout.html" %}
{% block content %}
<h3>Hello message</h3>
hello! {{ name0 }}
<br>
<a href="{{url_for('index')}}">go to Index</a>
<br>
<a href="{{url_for('hello_function', page_name='Taro')}}">go to Taro</a>
{% endblock %}
test.css
h3{
color:red;
}
test.js
window.addEventListener('DOMContentLoaded', function() {
console.log("js_test")
});
一応、cssやjsなどミニマムな形で導入しています。これに対して、
console
$ python hello.py
と使用します。これでローカルサーバーが起動し、http://127.0.0.1:5000/にアクセスすることで、上で作成したサイトが見れると思います。
Frozen-Flask
Flaskで作成されるサイトは基本的に動的サイトを想定しています。そして、これを静的サイトに変換するツールがFrozen-Flaskです。使い方は単純で、次のようなpythonファイルをtestフォルダの直下に用意します。
freeze.py
from flask_frozen import Freezer
from hello import app
freezer = Freezer(app)
app.config['FREEZER_RELATIVE_URLS'] = True
if __name__ == '__main__':
freezer.freeze()
FREEZER_RELATIVE_URLSのオプションをTrueに設定するのがポイントです。これがないとcssやjsなどのパスが絶対パスになってしまいうまく取得できません。あとはこのファイルを実行するだけです。
console
$ python freeze.py
これで、buildというディレクトリが作成され、その中に静的サイトの一式(htmlやcss)が含まれています。