フリーランスエンジニアのポートフォリオをFlask＋GitHub Pagesで無料公開する方法【案件獲得に直結する構成とは】

「ポートフォリオを作りたいけど、サーバー代がかかるのがネック…」

そんな悩みを持っているフリーランスエンジニアの方、多いんじゃないでしょうか。

実は、FlaskとGitHub Pagesを組み合わせれば、無料でポートフォリオサイトを公開できます。しかも、ただ公開するだけでなく、案件獲得に直結する構成に仕上げることが大切なんですよね。

この記事では、フリーランスとして実際に案件を取りにいくための「見せ方」を意識しながら、Flask＋GitHub Pagesでポートフォリオを無料公開するまでの手順を丁寧に解説していきます！

対象読者：Python初〜中級者・フリーランスを目指しているエンジニア

Contents

なぜFlask＋GitHub Pagesの組み合わせなのか？
案件獲得に直結するポートフォリオの3つの必須要素
STEP1：FlaskでポートフォリオサイトのHTMLを作る
STEP2：FlaskのページをHTMLファイルとして書き出す
STEP3：GitHub Pagesへデプロイする
案件獲得につなげるための「見せ方」の工夫
まとめ

なぜFlask＋GitHub Pagesの組み合わせなのか？

portfolio website developer / Photo by Bibek ghosh via Pexels

まず構成のイメージを整理しておきましょう。

ポートフォリオサイトを公開する方法はいくつかあります。WordPressを使う・Wixで作る・Vercelにデプロイする、など。でも今回あえてFlask＋GitHub Pagesを選ぶ理由があります。

✅ 完全無料でホスティングできる
✅ FlaskでHTMLを動的生成して静的ファイルとして書き出せる
✅ GitHubリポジトリ自体が「技術力の証明」になる
✅ Pythonエンジニアとしてのスキルをアピールできる

つまり「ポートフォリオを作るプロセス自体」が、発注者への技術アピールになるんです。これ、地味に大きいポイントです。

なお、GitHub PagesはJavaScriptやPHPなどのサーバーサイド処理は動きません。そこでFlaskを使い、ローカルでHTMLを生成 → 静的ファイルとしてGitHub Pagesへ公開という流れを取ります。

案件獲得に直結するポートフォリオの3つの必須要素

公開方法の前に、「何を載せるか」が一番重要です。発注者が実際にチェックするポイントを押さえておきましょう。

① 成果物（作ったものリスト）

「何ができるか」を具体的に示すのがポートフォリオの本質です。以下のフォーマットで整理すると伝わりやすいです。

📌 プロジェクト名：何を作ったか
📌 使用技術：Python / Flask / Arduino など
📌 課題と解決策：どんな問題をどう解決したか
📌 GitHubリンク or デモURL：実際に見せられるか

② スキルセットの明示

「何が得意か」を発注者がパッと判断できるようにしておきましょう。「Python全般できます」よりも「Flask・データ分析・Arduino連携が得意です」のほうが刺さります。

③ 問い合わせ動線

これを忘れている人、意外と多いんですよね。せっかく興味を持ってもらっても、連絡先がわからなければ案件につながりません。フォームかメールアドレスを必ず設置しましょう。

STEP1：FlaskでポートフォリオサイトのHTMLを作る

まずはFlaskでページを構築します。プロジェクト構成はこんな感じです。

portfolio/
├── app.py
├── templates/
│   ├── index.html
│   └── projects.html
├── static/
│   ├── style.css
│   └── profile.jpg
└── build/  ← 静的ファイルの出力先（後で作成）

Flaskアプリの基本構成はこちらです。

# app.py
from flask import Flask, render_template

app = Flask(__name__)

# プロジェクト情報をPythonのリストで管理する
projects = [
    {
        "title": "Flask製在庫管理ツール",
        "tech": "Python / Flask / SQLite",
        "description": "中小企業向けの軽量在庫管理WebアプリをFlaskで構築。スプレッドシート管理からの移行を支援。",
        "github": "https://github.com/yourname/inventory-app"
    },
    {
        "title": "ArduinoIoT温湿度モニター",
        "tech": "Python / Arduino / Raspberry Pi",
        "description": "工場の温湿度をリアルタイム監視するIoTシステムをゼロから設計・実装。LINE通知機能付き。",
        "github": "https://github.com/yourname/temp-monitor"
    },
]

@app.route("/")
def index():
    # トップページ：プロフィールと代表プロジェクトを表示
    return render_template("index.html", projects=projects[:2])

@app.route("/projects")
def project_list():
    # 全プロジェクト一覧ページ
    return render_template("projects.html", projects=projects)

if __name__ == "__main__":
    app.run(debug=True)

ポイントをまとめるとこんな感じです。

プロジェクト情報はPythonのリストで管理するので、追加・更新が楽
render_templateでHTMLに動的に渡す
ローカルで確認しながら作れるのがFlaskの強みです

STEP2：FlaskのページをHTMLファイルとして書き出す

GitHub PagesはPythonを実行できません。そこでfrozen-flaskというライブラリを使って、Flaskのページを静的なHTMLファイルに変換します。

pip install frozen-flask

次に、書き出し用のスクリプトを作成します。

# freeze.py
from flask_frozen import Freezer
from app import app

# 静的ファイルの出力先を指定する
app.config["FREEZER_DESTINATION"] = "build"
app.config["FREEZER_RELATIVE_URLS"] = True

freezer = Freezer(app)

if __name__ == "__main__":
    # これを実行するとbuild/ディレクトリにHTMLが生成される
    freezer.freeze()
    print("✅ 静的ファイルの生成が完了しました！")

実行してみましょう。

python freeze.py

build/フォルダの中にindex.htmlやprojects/index.htmlが生成されていれば成功です。

STEP3：GitHub Pagesへデプロイする

生成した静的ファイルをGitHub Pagesに公開します。手順は以下のとおりです。

① GitHubにリポジトリを作成する

リポジトリ名をyourname.github.ioにすると、https://yourname.github.ioというURLで公開できます。これが一番シンプルな構成です。

② buildフォルダの中身をプッシュする

# buildディレクトリに移動
cd build

# Gitの初期化とプッシュ
git init
git add .
git commit -m "🚀 ポートフォリオを初回公開"
git branch -M main
git remote add origin https://github.com/yourname/yourname.github.io.git
git push -u origin main

③ GitHub Pagesの設定を確認する

GitHubリポジトリの「Settings → Pages」から、ブランチがmain・フォルダが/ (root)になっていることを確認しましょう。数分待つと公開されます。