🚀

ZolaのHayFlowテーマでZenn RSS連携ブログを作る

に公開
ブログ
GitHub Pages
RSS
Zola
hayflow
tech

はじめに

Rust製の静的サイトジェネレーター「Zola」と、モダンなHayFlowテーマを使って、Zenn RSSと連携するブログサイトを作成する方法を解説します。

HayFlowはパーティクルエフェクト付きのダークテーマで、アニメーションが美しく、完全にMarkdownのみで管理できる点が特徴です。

🎯 完成イメージ

HayFlowテーマのスクリーンショット

  • モダンなデザイン: パーティクルエフェクト + ダークテーマ
  • 3つのカードタイプ: Simple、Columns、List形式で柔軟なレイアウト
  • Font Awesomeアイコン: ソーシャルリンクで使用
  • Zenn RSS連携: 記事を自動取得・表示

参考: ライブデモ | テーマ詳細

🛠 セットアップ

1. プロジェクト作成とテーマインストール

# プロジェクト作成
zola init myblog
cd myblog

# HayFlowテーマをクローン
git clone https://gitlab.com/cyril-marpaud/hayflow.git themes/hayflow

2. HayFlowテーマ設定

config.toml（重要な部分のみ）:

theme = "hayflow"

[extra]
# 名前設定
name = { first = "あなたの", last = "ブログ" }

# ソーシャルリンク（Font Awesomeアイコン使用）
links = [
   { icon = "fa-brands fa-github", url = "https://github.com/username" },
   { icon = "fa-solid fa-rss", url = "https://zenn.dev/username/feed" },
]

# セクション設定
sections = ["zenn"]

content/_index.md:

+++
[extra]
roles = ["Tech Writer", "Developer", "Zenn Creator"]
+++

3. Zenn記事セクション作成

HayFlowテーマのList card機能を活用して、Zenn記事を表示します。

content/zenn/_index.md:

+++
title = "Zenn記事"

[extra]
card_type = "list"
discover = "記事を読む"
+++

私がZennで投稿した技術記事の一覧です。

content/zenn/sample-article.md:

+++
title = "サンプル記事"

[extra]
link = "https://zenn.dev/username/articles/sample"
+++

**投稿日**: 2025-01-01

記事の概要がここに表示されます。

[→ Zennで続きを読む](https://zenn.dev/username/articles/sample)

🔧 Zenn RSS自動連携

Zenn RSSを取得してHayFlowのList cardに自動変換するスクリプトを作成：

scripts/fetch-zenn-rss.js（要点のみ）:

const ZENN_RSS_URL = 'https://zenn.dev/username/feed';

// RSS取得 → Markdown変換 → HayFlow List card形式で保存
async function main() {
  const rssData = await fetchRSS(ZENN_RSS_URL);
  const entries = parseRSSEntries(rssData);
  
  // content/zenn/ にMarkdownファイルを生成
  createZennSection(entries);
}

🚀 GitHub Pages自動デプロイ

.github/workflows/deploy.yml（最小構成）:

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
  schedule:
    - cron: '0 9 * * 0'  # 週次更新

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: taiki-e/install-action@zola
    - uses: actions/setup-node@v4
    
    - name: Fetch Zenn RSS
      run: node scripts/fetch-zenn-rss.js
    
    - name: Build with Zola
      run: zola build
    
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v4
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public

🎨 HayFlowテーマのカスタマイズ

HayFlowテーマでは3つのカードタイプが利用可能：

  1. Simple card: 基本的なテキスト表示
  2. Columns card: 3列のカード配置
  3. List card: リンク付きリスト（Zenn記事で使用）

Font Awesomeアイコンは無料版のみ使用可能。アイコンコードはfa-solid fa-envelopeのような形式で指定します。

まとめ

HayFlowテーマの美しいデザインとZenn RSS連携により、メンテナンスフリーなポートフォリオブログが完成しました。

  • Markdownのみでサイト管理
  • 週次自動更新でZenn記事を取得
  • モダンなUIエフェクトでプロフェッショナルな印象

Zennで記事を書けば、自動的にブログサイトに反映される仕組みが構築できます。

参考リンク

GitHubで編集を提案

Discussion