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

Githubに下記のサンプルを上げました。
https://github.com/NomuraS/qiita-frozen-flask


# Flaskの具体的な例
Pythonの小規模なwebアプリのフレームワークであるFlaskを用いて静的サイトを生成します。このために、[Frozen-Flask](http://pythonhosted.org/Frozen-Flask/)というFlaskアプリを静的ファイルに変換するためのpythonツールを用います。



```sh:準備
$　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



```py: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)
```

```html: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>
```

```html: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 %}
```

```html: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 %}
```

```html: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 %}
```

```css:test.css
h3{
	color:red;
}
```

```js:test.js

window.addEventListener('DOMContentLoaded', function() {
  console.log("js_test")
});
```

一応、cssやjsなどミニマムな形で導入しています。これに対して、

```console:console
$　python hello.py
```
と使用します。これでローカルサーバーが起動し、[http://127.0.0.1:5000/](http://127.0.0.1:5000/)にアクセスすることで、上で作成したサイトが見れると思います。

# Frozen-Flask
Flaskで作成されるサイトは基本的に動的サイトを想定しています。そして、これを静的サイトに変換するツールがFrozen-Flaskです。使い方は単純で、次のようなpythonファイルをtestフォルダの直下に用意します。

```py: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:console
$　python freeze.py
```
これで、buildというディレクトリが作成され、その中に静的サイトの一式(htmlやcss)が含まれています。

# 参考サイト
[Flaskの簡単な使い方](https://qiita.com/zaburo/items/5091041a5afb2a7dffc8)
[Frozen-Flask](http://pythonhosted.org/Frozen-Flask)
[Flaskへ ようこそ](https://a2c.bitbucket.io/flask/index.html)