Portfolio Generator

シンプルな静的サイトジェネレーターです。ブログ記事とポートフォリオサイトを生成します。

🚀 使い方 (GUI)

コマンドライン操作が苦手な方向けに、GUIツールを用意しています。

1. gui.py をダブルクリックするか、以下のコマンドで実行してください。

   python gui.py

2. 「🔄 サイトをビルド」 ボタンを押すと、サイトが生成されます。
3. 「🌍 プレビューを見る」 ボタンを押すと、ブラウザで生成されたサイトを確認できます。

💻 使い方 (CUI)

コマンドラインから直接ビルドすることも可能です。

python build.py

生成されたファイルは dist/ フォルダに出力されます。

🎨 テンプレートのカスタマイズ

templates/ フォルダ内のHTMLファイルを編集することで、サイトのデザインを自由に変更できます。 テンプレートエンジンには Jinja2 を使用しています。

テンプレートファイル一覧

ファイル名	役割
index.html	ブログのトップページ
portfolio_index.html	ポートフォリオのトップページ
blog_post.html	ブログ記事の詳細ページ
tag.html	タグ別記事一覧ページ

利用可能な変数

テンプレート内で {{ 変数名 }} と記述することで、データを表示できます。

共通変数

• title: ページタイトル
• description: ページの説明文
• keywords: キーワード（カンマ区切り）

記事オブジェクト (article または a)

ループ内や記事詳細ページで使用できる変数です。

変数名	説明	例
article.title	記事のタイトル	初めての記事
article.date	投稿日	2025-11-16
article.summary	記事の概要	これは最初の記事です...
article.tags	タグのリスト	['Python', 'Tips']
article.cover	カバー画像のURL	https://example.com/img.png
article.html	変換されたHTML本文	<p>本文...</p>
article.slug	URLスラッグ	first-post
article.url	リンク先URL (ポートフォリオの場合)	https://github.com/...

カスタマイズ例

例: 記事の日付を表示する場所を変えたい

templates/blog_post.html を開き、以下の部分を好きな場所に移動してください。

<span>{{ article.date }}</span>

例: 記事一覧のデザインを変えたい

templates/index.html の {% for a in articles %} から {% endfor %} の間が、記事1つ分の表示エリアです。ここを自由に書き換えてください。

💅 スタイルの変更

CSSファイルは static/css/style.css にあります。 このファイルを編集することで、サイト全体の色やフォント、レイアウトを変更できます。

• build.py を実行すると、static/ フォルダの内容がそのまま dist/static/ にコピーされます。