Hero Image
HugoをMacにインストールする手順

こんにちは。フリーランスエンジニアの市原です。 HugoとGoとNode.jsをMacにインストールする手順を記載します。 本題前にコマンドを書いておきます。 brew install hugo go node 以上です。 ちなみにこのサイトは Hugo + toha + GitHub Pages + XSever Domainにより初年度1円で公開されています。 やってみたこと Homebrewを使ったソフトウェアのインストール(まだなら) ターミナルでHugoをインストールするコマンド Hugoのインストール確認方法 手順 Hugo公式インストールガイド 1. Homebrewをインストール すでにインストール済みの場合はこのステップをスキップしてOKです。 MacにHomebrewが入っていない場合は、Macで絶対に外せないパッケージ管理Homebrewの公式サイトにアクセスします。 表示されているインストールコマンドをコピーして、ターミナルに貼り付けて実行します。 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" これでHomebrewがインストールされます。 2. Hugoをインストール Homebrewが使えるようになったら、以下のコマンドをターミナルで実行してHugoをインストールします。 ついでなのでテーマをローカルで確認するのにGoとNode.jsが必要になるのでついでに入れておきましょう。 brew install hugo go node 以上! なお拡張版というのがあり、テーマによってはこちらが必要になるケースがあるようです。 試しに入れてみましたが、どちらにせよコマンド一発です。 CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest 3. インストールを確認 Hugoがちゃんとインストールされたか確認するには、以下のコマンドを実行します。 hugo version このコマンドを実行してHugoのバージョン情報が表示されればOKです。 ちなみに、which hugoコマンドを使うとHugoのインストール場所も確認できます。 GoとNode.jsの確認もしておきましょう。 go version Goのバージョン情報が表示されればインストール成功。 node -v npm -v node -vでNode.jsのバージョンが表示されれば成功。 npm -vでnpm(Node.jsのパッケージマネージャー)のバージョンが表示されれば成功。 まとめ Homebrewは便利: Macでソフトウェアをインストールするならこれ一択。 インストールコマンド: brew install hugo go node Hugoの確認コマンド: hugo version Goの確認コマンド: go version Node.jsの確認コマンド: node -v npmの確認コマンド: npm -v これでMacにHugoをインストールできました。 次はHugoを使って実際に静的サイトを作ってみましょう。Hugoの高速さと使いやすさをぜひ体験してみてください!

Hero Image
HugoをWindowsにインストールする手順

こんにちは。フリーランスエンジニアの市原です。 HugoをWindowsにインストールするのはめちゃくちゃ簡単でしたが、公式はあっさりしているし、いくつか手段があって結局どれやねん!てなるかもしれません。 ここでは、実際にやってみた手順をざっくりまとめてみます。初心者でも迷わず進められるはずなので、ぜひ試してみてください。 これからHugoを使ってみたい人の参考になれば幸いです。 ちなみにこのサイトは Hugo + toha + GitHub Pages + XSever Domainにより初年度1円で公開されています。 やってみたこと Windowsにビルド済みバイナリのHugoを配置 PATH環境変数を設定して、どこからでもHugoを使えるようにする のちのち必要になるGoとNode.jsも入れる Hugoインストール手順 Hugo公式インストールガイド インストーラではなく、ビルド済みのexeを置いてパスを通すスタイルです。 公式手順より詳細に記載しておきます。 1. フォルダを作る まず、Cドライブに「Hugo」というフォルダを作成。 その中に「bin」というフォルダも作成。 この「bin」フォルダにHugoの実行ファイルを入れ流予定です。 C:\Hugo\bin\ 2. Hugoをダウンロード 次に、HugoのGitHubリリースページにアクセス。 自分のWindowsに合ったバージョンをダウンロードします。 だいたいwindows-amd64です。 私みたいにMシリーズのMacの仮想環境でWindowsを使ったりするとarmだったりします。 3. ファイルを解凍して配置 ダウンロードしたZIPファイルを解凍。 「hugo.exe」を「bin」に移動します。 4. コマンドラインでHugoを動かしてみる コマンドプロンプトを開いて、作成した「Hugo/bin」フォルダに移動して以下を実行。 cd C:\Hugo\bin hugo version これでHugoのバージョン情報が表示されれば、一旦動作確認はOKです。 5. PATH環境変数を設定 どのフォルダからでもHugoを使えるようにするために、PATH環境変数を設定します。 「システム環境変数の編集」を開く(Windowsの検索バーで「環境変数」と入力すると出る)。 「システム環境変数」の「Path」を選択して編集をクリック。 「新規」をクリックして、「C:\Hugo\bin」を追加。 「保存」して完了。 6. 設定を確認 コマンドプロンプトを再起動して、フォルダ移動せずに以下を実行。 hugo version どのフォルダからでもHugoのバージョン情報が表示されれば、設定完了👌 以下のように、現在のブログ構成にGoとNode.jsのインストール手順を追加しました。Hugoの手順と同じトーンで記載しています。 GoとNode.jsのインストール手順 Hugoを使う際に、テーマのローカル確認やビルドでGoとNode.jsが必要になる場合があります。 ついでなので、WindowsにGoとNode.jsをインストールしてしまいましょう。どちらもインストーラでポチポチで終わりです。 1. Goをインストール まず、Goをインストールします。 Go公式サイトにアクセス Go公式ダウンロードページ にアクセスします。

Hero Image
Hugo入門:静的サイトジェネレータの魅力

こんにちは。フリーランスエンジニアの市原です。 このページでは、Hugoという静的サイトジェネレーター(SSG)について初心者目線で情報を整理しています。 これからHugoを使ってみたい人の参考になれば幸いです。 ちなみにこのサイトは Hugo + toha + GitHub Pages + XSever Domainにより初年度1円で公開されています。 静的サイトと動的サイトの違い まず、静的サイトと動的サイトの違いを簡単に説明します。 静的サイトとは? 静的サイトは、HTMLファイルをそのままサーバーに置いて配信するシンプルな仕組みです。 例えば、個人ブログやポートフォリオサイトなんかに向いています。 メリット: 高速、セキュア、ホスティングが安い デメリット: 動的な機能(ログインやコメント機能など)が難しい 動的サイトとは? 一方、動的サイトは、ユーザーごとに異なるコンテンツを生成する仕組みです。 例えば、FacebookやAmazonのようなサイトがこれに当たります。 メリット: 柔軟でカスタマイズ性が高い デメリット: サーバーリソースが必要で、管理が複雑 ログインで人によってコンテンツを変えたいとかなら別ですが、普通の個人ブログなら静的サイトで十分だと思います。 Hugoだと問い合わせフォームからメールを送るのが難しかったりしますが、これはGoogle Formsを埋め込んだりで代用できます。 Hugoの特徴 Hugoは静的サイトジェネレーターの中でも人気のあるツールの一つです。 以下の点が魅力的だと感じました。 超高速: Go言語で作られていて、ビルドがめちゃくちゃ速く自称世界最速。お作法に従ったファイル配置にすれば構造を勝手に解析してページやタグやリンクを作ってくれて超ラク。 Markdown対応: 記事はマークダウンで書けるので、普段資料等をマークダウンで作っている私にピッタリ。ローカルHugoサーバを立ち上げれば、書きながらホットリロードで即確認できます。 無料でオープンソース: 豊富なテーマが揃っていて、カスタマイズもお作法さえわかれば結構簡単。 柔軟性: テンプレートやレイアウトの自由度が高い。 他のCMSとの比較 WordPressなどと比較して、Hugoには以下のようなメリットがあります。 パフォーマンス: 静的サイトなので、ページの読み込みが速い。 セキュリティ: データベースを使わないので、ハッキングリスクが低い。 コスト: 無料で使える。GitHub Pagesとの組み合わせで0円運用可能。GitHub Pagesはカスタムドメインも対応可能。XServer Domainなら初年度1円でGoogleアドセンス可能。 他の選択肢まとめ その他の静的サイトジェネレータの選択肢を(GPTさんが)整理しました。 ざっくり上から人気順です。そもそもマークダウンで書いたろ!って人が少ないんでしょうね。。。 名前 特徴 公式サイト Next.js Reactベースのフレームワークで、静的サイトと動的サイトの両方を構築可能。SSRやSSGをサポートし、高度な機能が豊富。 評価: Reactエコシステムの中心的存在で、最新技術を活用可能。 https://nextjs.org/ Gatsby Reactベースの静的サイトジェネレータで、GraphQLを使用して柔軟なデータ管理が可能。プラグインエコシステムが充実し、SEOに強い。 評価: Reactユーザーに支持され、SEOやパフォーマンスに特化。 https://www.gatsbyjs.com/ Hugo Go言語で構築された静的サイトジェネレータで、超高速なビルド速度を誇る。Markdown対応で簡単にコンテンツ作成が可能。 評価: 高速性と柔軟性が評価され、初心者から上級者まで幅広く支持されている。 https://gohugo.io/ Jekyll Rubyで構築された静的サイトジェネレータ。GitHub Pagesと統合され無料ホスティング可能。プラグインやテーマが豊富でカスタマイズ性が高い。 評価: 長年の実績とGitHub Pagesとの親和性が高い。 https://jekyllrb.com/ Nuxt.js Vue.jsベースのフレームワークで、SSGとSSRをサポート。プラグインやモジュールが豊富で柔軟な開発が可能。 評価: Vue.jsユーザーにとって最適な選択肢として支持されている。 https://nuxtjs.org/ Eleventy JavaScriptで構築された軽量な静的サイトジェネレータで、シンプルで柔軟性が高く、高速。初心者にも扱いやすい。 評価: 軽量でシンプルな構成が好まれ、JavaScriptユーザーに人気。 https://www.11ty.dev/ Hexo Node.jsベースの静的サイトジェネレータで、高速でMarkdownを使用して簡単にコンテンツ作成可能。ブログ向けに最適化。 評価: ブログ用途に特化し、Node.jsユーザーに支持されている。 https://hexo.io/ Docusaurus Facebookが開発した静的サイトジェネレータで、ドキュメントサイトやブログの作成に特化。Reactベースでカスタマイズ性が高い。 評価: Facebook製で信頼性が高く、Reactユーザーに支持されている。 https://docusaurus.io/ MkDocs Pythonで構築され、ドキュメントサイトの作成に特化。Markdownを使用して簡単にドキュメント作成可能。 評価: 技術ドキュメント作成に特化し、Pythonユーザーに支持されている。 https://www.mkdocs.org/ Zola Rustで構築された静的サイトジェネレータで、シンプルで高速、設定が簡単。デフォルトで多言語対応をサポート。 評価: Rustユーザーに注目され、高速性が評価されている。 https://www.getzola.org/ Pelican Pythonで構築された静的サイトジェネレータで、MarkdownやreStructuredTextをサポート。シンプルでPythonユーザーに最適。 評価: Pythonユーザーに特化したツールとして利用されている。 https://getpelican.com マークダウン対応、テンプレートがあってカスタム可能、運用コストが低い、それなりの人気とコミュニティ継続、 これらを満たすのがHugoでした。テーマ選びをミスらなければ、数分でテストページ公開できるし、ブログにも超使いやすいです。(紹介の多いテーマの後継HugoBlox/theme-academic-cvは構造がややこしすぎるし更新止まっているのでやめとけ)