「HUGOというキーワードをよく聞くけど実際に何をするためのものかは知らない」
「Reactは使えるようになったけどバックエンド自体はこれから勉強しないといけない」
「ブログをやってみたいけどサイト制作だけで時間がかかりそうで始めるきっかけがない」
本日はそんな方に便利なライブラリとしてHUGOを紹介します。
ReactとHUGOを組み合わせることは、ウェブ開発における新たな可能性を切り拓く一歩です。
Reactの柔軟性とパワーを利用しながら、HUGOの高速で効率的な静的サイト生成機能を活かすことで、優れたウェブサイトを構築することができます。
本記事では、「はじめて使うReactのHUGOの導入方法」に焦点を当て、両者をシームレスに統合する手順について詳しく解説します。
Reactの力強さとHUGOの効率性を最大限に引き出すためのステップを一緒に見ていきましょう。
ReactにHUGOを実装する方法
まずは公式サイトに移動してみます。
https://gohugo.io/getting-started/quick-start/
Reactまで進まれている方の多くはすでにインストールされているはずですが、最初にパソコンにGitがインストールしてある必要があります。
もしない場合にはGitのページに移動してインストールしましょう。
https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
GItのインストール有無は以下のコマンドを実行して「Not Found」のような文面がなければインストールされています。
git --version続いてHUGO本体のインストールをするためにインストールのページに移動して使っているOSを選択してください。
https://gohugo.io/installation/
本記事ではMacを想定して以下のコマンドを実行します。
brew install hugo少し時間がかかりますが待っていると完了しますので、最後に以下のコマンドでHUGOが正常にインストールされているか確認しておきましょう。
こちらも「Not Found」のような文面がなければ大丈夫です。
hugo version続いてプロジェクトの雛形をインストールします。
hugo new site quickstartこちらで「quickstart」という名前のディレクトリが作成されます。
quickstartフォルダまで移動します。
cd quickstartHUGOはGitHubからテンプレートテーマをダウンロードして使用するものなのでGitの初期化コマンドを実行しておきます。
git initテンプレートテーマはWordPressのようなものと同じ考え方で、簡単なコードでサイトを展開したりブログを運営することが可能になります。
色々種類があるのですが今回はanankeというテーマをダウンロードしてみます。
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke続いてanankeというテーマを使用することを宣言するコマンドを実行します。
echo "theme = 'ananke'" >> hugo.tomlそれではローカルサーバーを起動します。
以下のコマンドを実行するとターミナルに「http://localhost~~」というURLが表示されるのでブラウザで立ち上げればOKです。
hugo server
サイトが立ち上がりましたね、ワードプレスにもあるようなテーマです。
早速記事のようなコンテンツを追加してみましょう。
HUGOはマークダウン形式でコンテンツを管理しますのでファイルの拡張子はmdになります。
また新しい記事を作成するときは以下のコマンドを実行します、最後の「my-first-post.md」がファイル名になります。
hugo new content posts/my-first-post.mdそうするとcontentというディレクトリの中にmy-first-post.mdというファイルが作成されるはずです。
記事はcontentというディレクトリの中で管理するルールになっています。
すでにテキストが書かれていますが以下のようにマークダウン形式でテキストを書いていくと画面に表示されます。
+++
title = 'My First Post'
date = 2024-01-31T23:31:03+09:00
draft = true
+++
## Introduction
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!HUGOは新しく記事を作成した段階ではテスト環境に反映される仕組みになっています。
記事を確認するにはテスト環境としてサーバーを立ち上げ直すことになります。
hugo server --buildDrafts
画面下部にコンテンツが追加されていて、「read more」ボタンをクリックすると詳細ページにリンクします。
ワードプレスというsingle.phpですね。
簡単ですが記事が投稿されています。
ちなみにサーバーを本番環境として立ち上げ直すと作成した記事は表示されなくなります。
hugo server手軽に環境を分けて移動できるのは開発者としては嬉しいですね。
また記事をマークダウン形式で書く仕組みも、HTML、CSSをやったことのない人でも教育してライティングしてもらえるので便利です。
ある意味で昔ながらの静的サイトのような作りで、データベースや管理画面はありません。
昨今のSaaSを使う開発モデルと逆行しているわけですが、逆にログイン画面のような攻撃される場所が存在しないのがセキュリティ強化につながっているとも言えます。