皆さんのポートフォリオをgifアニメにして、一覧できるサイト作った【Flaskで静的サイト】

　自分もポートフォリオサイト作ろうかなと、レイアウトの参考に[GitHubの#portfolio-website](https://github.com/topics/portfolio-website)を見ていましたが、何とも効率が悪いので、スクレイピングしてgifにまとめました。**約5000件のポートフォリオをgifで見れます。改めて、皆さんの技量と熱量スゲェと思いました。**
https://portfoliohub.umihi.co/

特にデザイン優れるものをピックアップし、こちらで紹介しています。
[https://qiita.com/umihico/items/b12e03d073405a00b94e](https://qiita.com/umihico/items/b12e03d073405a00b94e)

参加はレポジトリにURLとハッシュタグ#portfolio-websiteを貼り付けるだけ。数日以内にクローリングしてくれます。ずっと拾われなかったらissueくださいませ。

<img width="1203" alt="スクリーンショット 2020-08-07 23.26.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256466/eaf60a57-6a68-3bac-f2d8-73b802bae4a8.png">


**月日が経ち、現在はPortfolioHubとしてリニューアルしました。Flaskは使用してません。** 

　こんな感じで、トップのスター数、フォーク件数、アップデート順に回覧できます。gifなので下までのスクロールと、アニメーションも感覚が掴めると思います。みなさんが、数多くのデザインを参考にしたい時に便利だと思うので、使っていただければ幸いです。

　日本人ポートフォリオはこの検索では中々ないので、#portfolio-websiteが流行ればいいなと思います。掲載増→回覧件数増の流れにしたいので、良いと思ってくださった方是非スターお願いします。

　本当は件数の多い[#portfolio](https://github.com/topics/portfolio-website)もクローリングしたいのですが、スキルセット・経歴以外の意味のポートフォリオも多数挙がってしまうので、断念しました。

　今回の技術ポイントは、Github pagesの静的ページ縛りに対して、今回のような定期的に集計されソートされる動的に本来やりたい動作の変換、それをpython・Flaskが使えるなら学習コストの無いFrozen-Flaskの紹介です。以下サンプルスクリプトの紹介です。

```:コマンドライン
pip install Flask
pip install Frozen-Flask
python test.py
```
```:フォルダ構成
qiita
│  test.py
├─files (test.py実行後)
│      filename_one.html (test.py実行後)
│      filename_two.html (test.py実行後)
└─templates
        test_dynamic.html
```
```test.py
from flask import Flask, render_template
from flask_frozen import Freezer

app = Flask(__name__)
data = {
    'filename_one.html': 'value_one!',
    'filename_two.html': 'value_two!'
}

@app.route('/<path>/')
def dynamic_index(path):
    value = data[path]
    return render_template('./test_dynamic.html', value=value)

def generate_static_files(dynamic_paths):
    freezer = Freezer(app)
    app.config['FREEZER_RELATIVE_URLS'] = True
    app.config['FREEZER_DESTINATION'] = '../qiita/files'
    app.config['FREEZER_DESTINATION_IGNORE'] = [".git", ]

    @freezer.register_generator
    def product_url_generator():
        for path in dynamic_paths:
            yield "/" + path
    freezer.freeze()

if __name__ == "__main__":
    dynamic_paths = [
        'filename_one.html',
        'filename_two.html',
    ]
    generate_static_files(dynamic_paths)
```
```test_dynamic.html
<html>
  <head></head>
  <body><h1>{{ value }}</h1></body>
</html>
```
### 結果
<img width="289" alt="result.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/256466/a0f0327b-f1fa-d2c4-15fe-656bee844545.jpeg">

### 解説
- dynamic_pathsを自由に設定して、好きなだけ動的なパスを与えられる
- @app.routeが動的でない場合は自動で生成される
- 動的なパスに対して、辞書dataで対応する値を好きに用意できる
- app.config['FREEZER_RELATIVE_URLS'] = True　で相対に
- app.config['FREEZER_DESTINATION'] = '../qiita/files'で出力先設定。省略可(='build')
- app.config['FREEZER_DESTINATION_IGNORE'] = [".git", ]で出力先の指定ファイルを保護できる。

### 参考
- [Frozen-Flask 0.15 documentation](https://pythonhosted.org/Frozen-Flask/)
- [Frozen-Flaskによる静的サイト生成 - Qiita](https://qiita.com/NomuraS/items/1bab07bdfdf33c38eaae)
- [フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話 - Qiita](https://qiita.com/plus_kyoto/items/a01578b782f17f573510)
- https://www.resume.id/trends
- https://qiita.com/kiwatchi1991/items/58b53c5b4ddf8d6a7053