Hugoで静的サイトを最小限の手順で作成する方法
最近Hugoでの静的HTMLサイトの作成を始めました。
本番運用もしています。
Hugo導入に際して色々、
サイトとして最低限クリアしなくてはいけないものがありました。
アクセス解析や、記事投稿SEO対策ができるのか？
スマホとPCのレスポンシブ対応は可能か？などです。
Hugoを試しに手を動かして触っていくうちに
これらの疑問は全て実装可能とわかったので、
解消されました。
Hugoはメジャーではない技術なので、
書籍も日本語（英語でも）のネット記事も、
なかなか「トラブった時にこうすべし！」という情報に
ありつけづらかったので、
私の備忘録としても、ここにまとめておきます。
この投稿ではHugoをMacにインストールして
テーマの導入(Clarity)をして
テーマのサンプルサイトを立ち上げるところまでの、
解説を行います。
Hugoで静的サイト構築する理由
複数サイトを運営しているのですが、
ほとんどWordPressで構築しています、
ちなみにこのサイトもWordPressで作られています。
私も含め、利用ユーザーが多いので
困った時の情報量やプラグインが充実しているので、
これからブログを自分で始める方には
ワードプレスでのサイト構築、運用を
お勧めすることには変わりがありません。
ではなぜHugoで静的サイトを、
構築しようと思ったかというと
・表示速度
・簡単更新（投稿の自動化が容易）
これが動機です。
「表示速度が速い」理由は、
Hugoは最終的にシンプルな、
HTMLのみで記述されたサイトができるので、
余計な機能がないためにレンダリングが早くなるからです。
逆に、フォームで値を取得して表示とかの、
動的なサイトを作るのには向いていないです。
例えば、
占いサイトの四柱推命を作るのであれば、
PHPを用いたLaravelで実装したほうが適切です。
占いの例えを出してしまったのでw
この流れでいけば、
あらかじめコンテンツの内容が決まっていて
その後も変わらないもの
「エンジェルナンバーの意味」「牡牛座の特徴」など
見出しも含め、個々の投稿に書かれる内容が
ある程度テンプレート化できるようなものが
決まっていているものはHugo向きです。
Hugoで静的サイト制作 メリット・デメリット
実際にHugoで実運用のサイトをリリースしてみて
私が感じたHugoのメリットとデメリットは以下の通りです。
Hugoでサイト運用のデメリット
・HTML、CSSの知識が必要（テーマをカスタマイズしたいのであれば）
・サーバーの知識が必要（生成されたHTMLを本番リリースするためのFTPなどの知識）
・コンソール（黒画面）での操作に慣れる必要がある
このあたりは独自ドメインで、
ワードプレスでブログ・サイトを運営している人であれば
問題ないです。
ただ1つ新しいことを学ぶ必要があります
・Markdown記法になれる必要がある
HTMLもマークダウン記法の一種なのですが
Hugoの投稿は拡張子MDファイルが用いられています。
独特な記述のルールを覚える必要があります。
ただし、全く真新しいものではなく、
ときたまReadme.mdファイルなどを見かけたりすると思います。
慣れてしまうとそんなに難しいものではありません。
むしろ冗長的なHTMLの記述よりもシンプルで良いと感じました。
Hugoでサイト運用のメリット
やっぱり表示速度が速いに尽きます。
そもそもHugoを入れようと思ったきっかけが
とある自分のWordPressサイトの速度が
「遅い」と感じたことがきっかけでした。
そのサイトは、ある程度、
個々の投稿の「型」が決まっているので、
Hugoで同じサイトを真似て作ったら爆速になりました。
サイト表示の速度向上をしたいという当初の目的は
簡単に達成できました。
Hugoインストール・テーマ導入・テーマのサンプルサイト実行までの手順
まずはHugoのインストールです。
Mac、PCなど環境依存事項ですので、
Hugo本家のサイトの下記を参照すると良いです。
-
-
Installation | Hugo
Install Hugo on macOS, Linux, Windows, BSD, and on any machine that can run the Go compiler tool cha ...
gohugo.io
HugoをMacにインストール
私が使用しているのはMacですので、
インストールはMac版の指示に従いました。
一言で言えば「brew install hugo」でインストール可能です。
brew install hugoインストール後に下記コマンドで、
Hugoのバージョンが取得できれば成功です。
hugo version私の場合、現在以下のような結果が表示されています
hugo v0.119.0-b84644c008e0dc2c4b67bd69cccf87a41a03937e+extended…
自分のPCでHugoのプロジェクトを作成したいところで
以下のコマンドを実行します。
hugo new site webcode --force＊webcodeの箇所は任意です。
Hugoテーマの導入
次にHugoのテーマの導入です。
先のHugoだけではサイトの「見た目」部分は未導入です。
Hugoのテーマは、
公式HPの下記URLにギャラリーがあります。
-
-
Complete List | Hugo Themes
themes.gohugo.io
この中で私は、作りたいサイトのイメージにあった
「Clarity」を選びました。
先ほどの「webcode」フォルダの中の、
themeフォルダに移動します。
そしてGit経由でテーマを取得しました。
コマンドは以下になります。
cd theme
git clone https://github.com/chipzoller/hugo-clarity.git hugo-clarityはい、
これで下準備は完了です。
Hugoのテーマサンプルサイトの実行方法
テーマのサンプルサイトを実行します。
先ほどのテーマを導入したら、
hugo-clarity/exampleSite/というフォルダーができています。
移動して次のコマンドを叩きます。
cd hugo-clarity/exampleSite/
hugo server --themesDir ../..
サーバーが立ち上がるので
http://localhost:1313/ でアクセスすると以下のように
サンプルサイトが立ち上がります。
＊サーバー停止はCtrl+Cです
手順は以上です。
まとめ
HugoをMacにインストールし、Clarityテーマの導入、
テーマのサンプルサイトを立ち上げるところまでの
手順を示してみました。
コマンドプロンプトを叩くところが
若干玄人むけで敷居が高いのかなとも感じています。
ただし、立ち上がったサイトをご覧になると分かるように、
サイドメニューには検索機能、最近の投稿、
カテゴリーにタグなど、サイトとして欲しい基本的な機能が備わっています。
あとは自分の作りたいサイトのイメージに、
Hugoのテーマをカスタマイズすればいいだけです。
一度カスタマイズが済んでしまえば、
日常の投稿はMFファイルの追加のみという運用にできます。
次回はカスタマイズのお作法などを、
紹介していこうと思います。
個人でサイト運営おすすめのレンタルサーバはこれ
定番中の定番「エックスサーバー」
今まで使ってみておすすめサーバーは2つです。
まずはエックスサーバー
→
エックスサーバー
これは外せません。このサイトもエックスサーバーで動いています。
何が良いかと言えば
「ほとんど止まったことがない」そのくらいの安心感です。
サーバーって止まらないものじゃないの？
そう思われるかもですが、
結構当たり前のようで、当たり前ではないです。
年間を通じてもメンテやトラブルで止まった記憶がないくらいです。
→
エックスサーバー
マニア向け？Gitも利用できる「mixhost」
もう一つがmixhostです。
数多く、
レンタルサーバーのサービスはあるのですが、
サーバー負荷の問題なのか、
規約でアダルトサイトはNGな場合がほとんどです。
mixhostは日本で数少ない、
アダルトもOKなレンタルサーバーです。
いや別にアダルトなサイトは作る予定はありませんw
という方でも、sshが利用でき
gitがあらかじめ備わっているので
自分の書いたソースコードの保管場所として使えるので
開発者におすすめです。
こちらもCHECK
-
-
Laravel10で認証機能（Breeze）を実装したら超簡単だった。
Laravel10での認証機能の実装は超簡単！コマンド流すだけ Webアプリケーションを作成するときにやってみたいことといえば「認証機能」の追加です。 メアドとパスワード入力で限られたユーザーのみアク …
続きを見る
