Python
HTML
Flask

Frozen-Flaskによる静的サイト生成

Flaskの具体的な例

Pythonの小規模なwebアプリのフレームワークであるFlaskを用いて静的サイトを生成します。このために、Frozen-FlaskというFlaskアプリを静的ファイルに変換するためのpythonツールを用います。

準備
$ pip install Flask
$ pip install Flask-Frozen

まずは、Flaskの単純な例を作ってみます。testというディレクトリを作成し、その中で以下のファイルを次のように配置します。

  • test/
    • hello.py
    • templates/
      • layout.html
      • pages/
        • index.html
        • taro.html
        • jiro.html
    • statics/
      • js/
        • test.js
      • css/
        • test.css
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フォルダの直下に用意します。

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)が含まれています。

参考サイト

Flaskの簡単な使い方
Frozen-Flask
Flaskへ ようこそ