# 静的サイトジェネレータ Hexo ## 概要 Hexoは、Node.js製の高速ブログ特化型静的サイトジェネレータです。シンプルなコマンドでMarkdownファイルから美しいブログサイトを生成し、豊富なテーマとプラグインエコシステムを提供します。中国圏を中心に高い人気を誇り、GitHubで38k超のスターを獲得しています。 ## 詳細 ### 主な特徴 - **高速生成**: Node.jsベースで軽量かつ高速なサイト生成 - **ブログ特化**: 記事投稿、カテゴリ、タグ機能を標準装備 - **豊富なテーマ**: 数百のテーマから選択可能、カスタマイズも容易 - **プラグインシステム**: 機能拡張のための強力なプラグインアーキテクチャ - **Markdownサポート**: GitHub Flavored Markdownに対応 - **デプロイ機能**: GitHub Pages、Heroku、Netlifyなどへの1コマンドデプロイ - **多言語対応**: 国際化機能でマルチ言語サイトに対応 ## メリット・デメリット ### メリット - ブログに特化した機能が充実しており、すぐに実用的なブログを構築可能 - テーマとプラグインの選択肢が豊富で、カスタマイズの自由度が高い - 学習コストが低く、Markdownの知識があれば即座に使い始められる - アクティブなコミュニティと豊富なドキュメント - 高速なビルドとホットリロード対応の開発サーバー ### デメリット - ブログ以外の用途には向かない構造 - 大規模サイトや複雑な要件には対応が困難 - Vue.js/ReactのようなモダンJSフレームワークとの統合は限定的 - プラグインの品質にばらつきがあり、メンテナンス状況の確認が必要 ## 参考ページ - [公式サイト](https://hexo.io/) - [公式ドキュメント](https://hexo.io/docs/) - [GitHub リポジトリ](https://github.com/hexojs/hexo) - [テーマ一覧](https://hexo.io/themes/) - [プラグイン一覧](https://hexo.io/plugins/) ## 書き方の例 ### Hello World (基本セットアップ) ```bash # Hexoのインストール npm install hexo-cli -g # 新しいプロジェクトを作成 hexo init my-blog cd my-blog npm install # 開発サーバー起動 hexo server ``` ### 記事作成とメタデータ ```bash # 新しい記事を作成 hexo new "私のはじめての記事" ``` ```yaml --- title: 私のはじめての記事 date: 2024-01-15 10:30:00 tags: [Hexo, ブログ, 初心者] categories: [チュートリアル] --- # Hexoへようこそ！ これは私の最初の記事です。**Markdown**で書くことができます。 - リスト項目1 - リスト項目2 [リンクの例](https://hexo.io/) ``` ### テーマの設定と設定ファイル ```yaml # _config.yml title: 私のブログ subtitle: 技術メモとライフハック description: プログラミングと日常について書いています author: あなたの名前 language: ja timezone: Asia/Tokyo # テーマ設定 theme: landscape # URL設定 url: https://yourblog.github.io root: / permalink: :year/:month/:day/:title/ # デプロイ設定 deploy: type: git repo: https://github.com/yourusername/yourusername.github.io.git branch: main ``` ### プラグインの導入と使用 ```bash # RSS生成プラグイン npm install hexo-generator-feed --save # サイトマップ生成プラグイン npm install hexo-generator-sitemap --save # SEOプラグイン npm install hexo-seo --save ``` ```yaml # _config.yml でプラグイン設定 feed: type: atom path: atom.xml limit: 20 sitemap: path: sitemap.xml # SEO設定 seo: enable: true auto_description: true auto_keywords: true ``` ### カスタムページとレイアウト ```bash # About ページを作成 hexo new page about ``` ```markdown --- title: About date: 2024-01-15 12:00:00 layout: page --- # 自己紹介 私について紹介するページです。 ## 経歴 - 2020年 大学卒業 - 2020年 エンジニアとして就職 ## スキル - JavaScript - Node.js - Vue.js ``` ### デプロイとビルド ```bash # 静的ファイルを生成 hexo generate # GitHub Pagesにデプロイ（デプロイプラグイン使用） npm install hexo-deployer-git --save hexo deploy # クリーンビルド hexo clean && hexo generate # 生成とデプロイを同時実行 hexo generate --deploy ```