Hashnode と Blog Starter Kit によるスタマイゼーション

https://daisuke.masuda.tokyo/article-2025-11-03-1222

このプレゼンテーションは、Hashnode の Blog Starter Kit を使用した技術ブログの構築とカスタマイズに関する包括的なガイドです。Hashnode プラットフォームの紹介から始まり、6つのコア機能、革新的なヘッドレスモード、3つのテーマオプション（特にPersonalテーマに焦点）、完全なセットアッププロセス、TailwindCSS と Next.js を使用した詳細なカスタマイズ方法、GraphQL API の活用、デプロイと運用のベストプラクティス、実際の企業の成功事例までをカバーしています。各スライドはエンジニアリングチーム向けの技術プレゼンテーションに最適なプロフェッショナルなデザインです。

Transcript

1. Hashnode: Blog Starter Kit による サイトカスタマイゼーション Next.js + TailwindCSS で自由にカスタマイズできる ヘッドレスブログの構築 2025-11-03
2. Hashnodeとは何か Hashnodeは、開発者とチームのために設計された次世代のブ ログおよびドキュメント作成プラットフォームです。世界中の 100万人以上の開発者に利用され、月間350万人のユニーク読 者を抱えています。コンテンツとドメインの完全な所有権を維 持しながら、グローバルな開発者コミュニティにアクセスでき ます。  完全無料で利用可能。広告やペイウォールは一切なく、独自ド メインでの運用が可能  FreeCodeCamp、Vercel、MindsDBなど著名な企業やコミュ ニティが採用  技術ブログのデファクトスタンダードとして、開発者の生産性 を最大化
3. Hashnodeの6つの主要機能 ブロック型エディタ 高速公開・SEO最適化 AIアシスト機能 リアルタイムコラボ 公開GraphQL API 大規模トラフィック実績  WYSIWYG + Markdown対応  開発者向けブログに最適  執筆支援とコンテンツ生成  チームでの共同編集  拡張性の高いアーキテクチャ  月間350万ユニークリーダー
4. Hashnodeの主要機能 WYSIWYG Markdownエディタ AI支援ライティング SEO最適化 チームコラボレーション Hashnodeは開発者の生産性を最大化する機能を提供していま す。直感的なエディタ、AI支援、SEO最適化、チームコラボレ ーションにより、プロフェッショナルなブログを数分で構築で きます。  ブロックベースのエディタで、コードブロック、画像、埋め込み コンテンツを直感的に配置できます。  コンテンツの生成、リフレーズ、リサーチを編集画面内で完結。 生産性が大幅に向上します。  メタタグ、構造化データ、高速読み込みにより、検索エンジンで の可視性が向上します。  リアルタイム編集、インラインコメント、複数の執筆者管理で共 同作業を効率化します。
5. 3つのテーマの詳細 Enterprise Hashnode Personal Blog Starter Kitはモノレポ構造になっており、用途に応じた3つ のテーマから選べます。デプロイ時にいずれかを指定するだけで 簡単にセットアップ可能です。  企業サイト向け堅牢UI。多機能で洗練されたデザイン。チームやビ ジネス向けの機能を重視 # シンプルで汎用的なデザイン。Hashnodeの標準スタイル。多くの ユースケースに対応する柔軟性  個人開発者のブランディングに最適。シンプルながら表現力豊かな レイアウトでパーソナルブランドを構築
6. Personalテーマの概要 個人ブランドの確立 読みやすさ重視 適した用途 Personalテーマは、個人開発者のブランディングに最適化された テーマです。シンプルながら表現力豊かなレイアウトで、パーソ ナルブランドを効果的に構築できます。  プロフィール画像とソーシャルリンクで個人ブランドを強調し、読 者との距離を縮める  シングルカラムレイアウトで記事に集中でき、余計な装飾を排除し てコンテンツに焦点  個人開発者のポートフォリオ、技術記事の発信、副業やフリーラン スのプロモーションに最適
7. Personalテーマのデザイン特徴 ヘッダー レイアウト 記事リスト フッター  プロフィール画像、水平メニュー、ソーシャルリンク、RSSフィー ド  シングルカラムで記事リストが縦に並ぶミニマルなデザイン  大きく読みやすいフォント、日付・ビュー数・コメント数を表示  ブランディング表示、著作権表示、サイトマップリンク
8. Personalテーマのカスタマイズ方法 プロフィール画像とブランディング ナビゲーションメニュー カラースキーム レイアウト src="/avatar.png" alt="Profile" width={48} height={48} className="rounded-full" /> const nav = [ { href: "/", label: "Home" }, { href: "/blog", label: "Blog" }, { href: "https://hashnode.com/@yourname", label: "Hashnode" } ]; theme: { extend: { colors: { primary: "#3B82F6", secondary: "#10B981" } Personalテーマを自分のブランドに合わせてカスタマイズする具体的 な方法を紹介します。プロフィール、ナビゲーション、カラースキー ムなどを調整できます。  /publicフォルダに画像を配置し、ヘッダーコンポーネントで設定  components/Header.tsxでメニュー項目をカスタマイズし、外部リンク を追加  tailwind.config.jsでブランドカラーを定義し、ダークモードに対応  pages/index.tsxでホームページのレイアウトと記事リストのスタイルを 変更 ナビゲーションメニュー カラースキーム（tailwind.config.js）
9. ヘッドレスモードの革新性 GraphQL APIによる柔軟性 完全なデザイン自由度 トレードオフの解消 Hashnodeのヘッドレスモードは、強力なコンテンツ管 理システムとエディタを使用しながら、フロントエンド のデザインとユーザーエクスペリエンスを完全にカスタ マイズできる革新的な機能です。  コンテンツをAPIで提供し、好きなフレームワーク （Next.js、React、Vue）でフロントエンドを構築可能  ブランドアイデンティティを完全に反映したデザインを 実現しながら、コンテンツ作成の効率性を維持  デザインの自由度とコンテンツ管理の利便性を両立し、 インフラ管理の負担を軽減
10. Blog Starter Kitの概要 モダンな技術スタック 3つのプリセットテーマ GraphQL APIで連携 Hashnode Blog Starter Kitは、ヘッドレスモードを即座に活用 できるオープンソースのスターターキットです。GitHubで620以 上のスターと914のフォークを獲得し、活発なコミュニティに支 えられています。  Next.js、Tailwind CSS、TypeScriptを採用。Vercel、Netlify、 AWS Amplifyなど、あらゆるプラットフォームにデプロイ可能  個人ブログ向けの「Personal」、企業ブログ向けの 「Enterprise」、Hashnode公式スタイルの「Hashnode」を提供  Hashnode GraphQL Public APIを使用してコンテンツを取得。独 自のデザインシステムに適応可能
11. セットアップの準備: サブパス設定（オプション） 方法1: Vercel設定 方法2: Cloudflare Worker 検証方法 async rewrites() { return [{ source: "/blog", destination: "https://your-blog.vercel.app/blog" }, { source: "/blog/:path*", destination: "https://your-blog.vercel.app/blog/:path*" }]; } const subpath = '/blog'; const blogBaseUrl = 'https://your-blog.vercel.app'; addEventListener('fetch', event => { if(new URL(event.request.url) .pathname.startsWith(subpath)){ return event.respondWith(proxyBlog(event.request)); } }); 既存サイトの一部としてブログを統合する場合に有用です。例えば、 yourdomain.com/blogとしてブログを提供できます。  next.config.jsでrewritesを設定し、プロキシを構成  Worker scriptでブログリクエストをプロキシ  /blogと/blog/記事パスが正しく表示されるか確認。リンク、画像パス、 APIリクエストが壊れていないか検証 next.config.js（Vercel） Cloudflare Worker
12. セットアップ手順 1. GitHubフォーク 2. Vercelデプロイ 3. 環境変数設定 4. ヘッドレスモード有効化 5. ローカル開発 Starter Kitのセットアップは驚くほど簡単です。GitHubからフォ ークし、Vercelにデプロイするだけで、数分で本番環境レベルの ブログが完成します。  リポジトリをフォークし、3つのテーマから選択します  Vercelで新規プロジェクトを作成し、テーマディレクトリを指定  GraphQLエンドポイントとブログURLを環境変数に設定  Hashnodeダッシュボードでヘッドレスモードを有効化  pnpm install と pnpm dev でローカル環境を起動
13. カスタマイズ基礎: Monorepo構成 Monorepo構造 ローカル開発 主要編集ポイント packages/blog-starter-kit/themes/ ├── enterprise/ ├── hashnode/ └── personal/ $ cd packages/blog-starter-kit/themes/enterprise $ pnpm install $ pnpm dev app/layout.tsx # メタデータとレイアウト app/page.tsx # ホームページ構成 components/* # UIコンポーネント群 styles/globals.css # グローバルスタイル Blog Starter Kitは、Next.jsとTailwindCSSで構築された カスタマイズ性の高いオープンソースフレームワークです。 環境変数の設定や構成の理解から始めることで、自由度の高 いブログUIを作成できます。  3つのテーマが独立したディレクトリに配置  pnpm installとpnpm devで開発環境を起動  app/layout.tsx、app/page.tsx、components/*、 styles/globals.css ディレクトリ構造 セットアップコマンド 主要ファイル
14. カスタマイズ方法: カラーとテーマ プライマリカラーの変更 色パレットの活用 ダークモード対応 デザインの一貫性 module.exports = { content: ['./components/**/*.tsx'], darkMode: 'class', theme: { extend: { colors: { 'accent-1': '#FAFAFA', 'accent-2': '#EAEAEA', primary: colors.blue, // ← 変更 }, }, }, } Tailwind CSSを使用することで、tailwind.config.jsファイルを 編集するだけで、サイト全体のカラースキームを簡単にカスタマ イズできます。一貫性のあるデザインシステムを数分で構築可能 です。  primary: colors.blueをcolors.redに変更するだけで、サイト全体 の配色が変わります  Tailwindの標準色パレットを使用して、一貫性のあるデザインを 実現  darkMode: 'class'設定により、手動でのテーマ切り替えが可能  アクセントカラー、背景色、テキストカラーを一元管理 tailwind.config.js
15. カスタマイズ方法: コンポーネントとレイアウト 独立したコンポーネント Tailwindクラスで調整 新規コンポーネントの追加 TypeScriptサポート 各コンポーネントは独立しており、Tailwindクラスを調整するこ とで細かくカスタマイズできます。カード、ボタン、ナビゲーシ ョン、フッターなど、すべての要素が編集可能です。  各UIエレメントは独立しており、他に影響を与えずに個別に編集 可能  各コンポーネントのTailwindクラスを変更して、スタイルを自由 にカスタマイズ  components/ディレクトリに新しいファイルを作成し、簡単に機 能を拡張  型安全性が保証され、開発体験が向上。エラーを事前に検出
16. 具体例: ヘッダーコンポーネント Next.js Linkコンポーネント TailwindCSSクラス backdrop-blur効果 レスポンシブデザイン import Link from "next/link"; const nav = [ { href: "/blog", label: "Blog" }, { href: "/docs", label: "Docs" }, { href: "/about", label: "About" } ]; export default function Header() { return ( <header className="border-b border-brand-500/20 bg-white/70 backdrop-blur"> <div className="max-w-5xl mx-auto px-4"> {nav.map(item => ( <Link key={item.href} href={item.href} className="text-brand-600"> {item.label} </Link> ))} </div> </header> ); ナビゲーション、ロゴ、テーマ切替などをブランドに合わせてカスタ マイズできます。Next.jsとTypeScriptを使った実装例を見ていきま しょう。  SPA遷移を実現し、ナビゲーション項目は配列で定義  border-brand-500/20やtext-brand-600でブランドカラーを参照  セミトランスパレントな背景でモダンなスクロール体験  max-w-5xlで中央寄せし、あらゆる画面サイズに対応 p
17. 具体例: 色とフォントの変更 1. tailwind.config.jsでブランドカラー定義 2. globals.cssでGoogle Fontsを読み込み 3. コンポーネントで適用 theme: { extend: { colors: { brand: { 500: "#1E3A8A", 600: "#1E40AF" } }, fontFamily: { sans: ["Noto Sans JP", "sans-serif"] } } } @import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP:wght@400;700&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; <h1 className="font-sans text-3xl text-brand-600"> ブログタイトル /h1> Tailwind設定とCSSを組み合わせて、ブランドに合わせた配色とタ イポグラフィを実現できます。日本語フォントも適切に設定可能で す。  colors.brandでブランドカラーを定義し、fontFamilyで日本語フォント を設定  Noto Sans JPをインポートし、@tailwindディレクティブを追加  font-sansとtext-brand-600クラスでスタイルを適用 globals.css コンポーネント
18. カスタマイズ方法: テーマスイッチャーの実装 パッケージのインストール ThemeProviderの設定 SVGアイコンの作成 スイッチャーコンポーネント import { ThemeProvider } from 'next-themes' export default function MyApp({ Component, pageProps }) { return ( <ThemeProvider attribute="class"> <Component {...pageProps} /> </ThemeProvider> ); } next-themesパッケージを使用することで、数行のコードでダー クモードとライトモードの切り替え機能を実装できます。ユーザ ーエクスペリエンスが大幅に向上します。  pnpm install next-themes でテーマ管理パッケージを追加  pages/_app.tsxにThemeProviderを追加し、attribute="class"を 設定  太陽と月のアイコンをSVGコンポーネントとして作成  useThemeフックで現在のテーマを取得し、クリックで切り替え pages/_app.tsx
19. GraphQL API: 実践的なユースケース 1. ブログ記事の取得 2. 特定記事の詳細取得 3. ユーザー情報の取得 エンドポイント https://gql.hashnode.com 4. タグ別記事の検索 5. 記事の公開（Mutation）  自分のポートフォリオサイトに最新記事を自動表示。publication クエ リで記事リストを取得  記事の全文、メタデータ、統計情報を取得。post クエリで詳細なコンテ ンツにアクセス  プロフィール、SNSリンク、公開記事を取得。user クエリで著者情報を 表示 認証: Personal Access Token (PAT)  特定トピックの記事を検索。searchPostsOfPublication で条件に合う記 事を取得  プログラムから記事を公開。publishPost ミューテーションで自動投稿 が可能
20. GraphQL API: Next.jsでの実装例 fetch関数でクエリ実行 React Componentで使用 ページネーション対応 const ENDPOINT = 'https://gql.hashnode.com'; export async function getRecentPosts(host) { const query = ` query Publication($host: String!) { publication(host: $host) { posts(first: 5) { edges { node { title brief url } } } } } `; const res = await fetch(ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query, variables: { host } }) }); Next.jsでHashnode GraphQL APIを実装する具体的な方 法を紹介します。  標準のfetch APIを使ってGraphQLエンドポイントにPOST リクエスト  useEffectフックで記事データを取得し、stateで管理  カーソルベースのページネーションで無限スクロールを実装 lib/hashnode.js - データ取得関数
21. デプロイと運用のコツ 環境変数の更新 パフォーマンス監視 チーム協業フロー Blog Starter Kitを長期的に運用するための重要なポイントを把 握しましょう。環境変数、パフォーマンス、協業のベストプラク ティスを理解することで、スムーズな運用が可能になります。  Vercelの環境変数を更新した後は手動で再デプロイを行う必要があ ります。自動デプロイは環境変数の変更を検知しません  Web Vitalsスコア、404/500エラー、画像最適化を定期的に確認。 サブパス導入時はCanonicalとOG設定を必ず検証  GitHubでPRを作成→Vercel Previewで視覚確認→マージ後に本番 反映。GraphQLスキーマ変更には注意
22. GraphQL APIの活用 コンテンツの取得 カスタムクエリの作成 柔軟な機能拡張 Starter Kitは、Hashnode GraphQL APIを使用してコンテンツを 取得します。記事一覧、個別記事、コメント、タグ、検索機能な ど、すべてがAPIを通じて利用可能です。  記事、コメント、タグ、検索結果をGraphQLクエリで効率的に取得  特定の条件でフィルタリングし、必要なデータ構造を自由に定義  独自の機能やウィジェットを追加し、標準的なブログを超えた体験 を提供 query Publication { publication(host: "yourblog.hashnode.dev") { posts(first: 10) { edges { node { title brief } } } } }
23. 実際の活用事例 FreeCodeCamp 公開ワークフローで書籍やチュートリアルを共 同作業。「生産性が向上し、大幅な時間節約に なった」 Outerbase 「ドキュメント作成とコラボレーションが10倍 簡単に。エディタは最高クラスで、UIは美し い」 MindsDB APIドキュメントと製品ガイドにHashnodeを採 用。開発者向けドキュメントの品質が向上 Vercel CEO Guillermo Rauch氏「開発者が独自ドメイ ンでブログを立ち上げる速さに驚く」 Pangea Cloud 企業ブログの基盤として採用。セキュリティ企 業が信頼するプラットフォーム
24. まとめと次のステップ Hashnodeの執筆・コラボ環境とBlog Starter Kitのカスタマイズ 性を組み合わせることで、理想的なブログ環境が構築できます。 最新のNext.js技術をフル活用しましょう。  まずはデモをFork → Vercelデプロイ → ヘッドレスモード有効化 で即座にスタート  TailwindCSSで配色・余白・タイポグラフィをブランドに合わせて 調整  コンポーネント拡張（Header/Footer/Card）・AI検索・テーマ公 開で独自性を追求 今日から、あなた自身の技術ブログを構築しましょう。 docs.hashnode.com で詳細を確認できます。