静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第1回〜Hugoの環境構築編(Linux)〜]

Hugoをlinuxで使用できるよう環境構築します

2022-07-17

静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第1回〜Hugoの環境構築編(Linux)〜]

ブログ構築シリーズ

静的サイトジェネレータ「Hugo」を使って当ブロブサイトを S3 + CloudFront の構成でホストすることができましたので、構築~デプロイまでの流れをブログ構築シリーズとして全６回でご紹介していきます。記念すべき第1回はHugoの環境構築です。

1. 第1回〜Hugoの環境構築編〜　☆今回はこちらを紹介します
2. 第2回〜HugoにMainroadテーマ適用編〜
3. 第3回〜Hugoを S3 + CloudFront でホストする〜
4. 第4回〜HugoをGithub Action でS3にプッシュする〜
5. 第5回〜HugoをRoute53 + お名前.comで公開する〜
6. 第6回〜HugoのSEO対策〜

TL;DR

☆ Hugoとは
☆ Hugoのインストール方法
☆ sshでGitに接続する方法

はじめに

Hugoとは

静的サイトジェネレータの一つである「Hugo」はソースファイルからHTMLファイルの生成に特化したツールである。 Hugoを使うことで、いちいち一からHTMLを書く必要がなくなる。個人的に最大の特徴でありメリットと感じているのは、WordPressなどのコンテンツ管理システムと異なりデータベースなしで運用することができる点である。
Markdownで執筆した記事をローカル環境で動的にプレビューする機能も備えており、執筆活動も容易である。

豊富なテーマ

HugoではGithubで公開されているテーマを適用することで好みの外観に変更できる。　 Hugo Themes でテーマが公開されている。
気に入ったテーマをクローンし、設定するだけでテーマを適用することができる。テーマ適用の手順は第２回で紹介する。

環境

$ cat /etc/redhat-release 
Red Hat Enterprise Linux release 9.0 (Plow)
$ arch
x86_64

1. Hugoインストール

公式ドキュメントを参考に。

$ wget https://github.com/gohugoio/hugo/releases/download/v0.101.0/hugo_extended_0.101.0_Linux-64bit.tar.gz　# ダウンロードファイルをローカルに落とす
$ sudo tar -C /usr/local/bin -xzf hugo_extended_0.101.0_Linux-64bit.tar.gz　# 解凍
$ export PATH=$PATH:/usr/local/bin # パスを通す

2. 基本コマンド

hugo new siteコマンドで初期セットアップが一発で完了する。

$ hugo new site yourDir　# example command

$ hugo new site www
Congratulations! Your new Hugo site is created in /home/hoge/www.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

初期状態のディレクトリは以下の通り。

.
├── archetypes　# テンプレートを格納するディレクトリ
├── config.toml # 設定ファイル
├── content # 公開したい記事等を格納するディレクトリ
├── data　# その他データを格納するディレクトリ
├── layouts # カスタムテンプレートを格納するディレクトリ
├── static　# cssや画像などの静的ファイルを格納するディレクトリ
└── themes # テーマファイルを格納するディレクトリ

hugo newコマンドでマークダウンファイルを生成し、記事を執筆する。

$ hugo new posts/**.md

hugo server コマンドでローカルでブラウザ表示させることができる。

$ hugo server

静的ファイルの生成。

$ hugo

(参考) Git設定

テーマ適用時に、githubからクローンする必要があるため、あらかじめgitのセットアップをすませておく。

ホームディレクトリ配下に.sshディレクトリがなければ作成し、キーペアの作成を行う。


$ chmod 744 ~/.ssh # 権限設定は744じゃないと動作しない

$ ssh-keygen -t rsa # 公開鍵と秘密鍵のキーペアを作成

$ ll ~/.ssh
total 36
drwx------ 1 user user 4096 Jun  5 00:34 ./
drwx------ 1 user user 4096 Jun 21 20:08 ../
-rw------- 1 user user  592 Jun  5 00:26 authorized_keys
-rw-r--r-- 1 user user   79 Jun  4 18:39 config
-rw------- 1 user user 2602 Jun  4 18:51 id_rsa_github
-rw-r--r-- 1 user user  571 Jun  4 18:51 id_rsa_github.pub
-rw------- 1 user user  656 Jun  4 19:10 known_hosts
-rw-r--r-- 1 user user   92 Jun  4 19:10 known_hosts.old

githubに公開鍵(**.pub)を登録する公式ドキュメントを参考に。

$ ssh -T git@github.com　# githubへの接続テスト
git@github.com: Permission denied (publickey).

うまくいかないので、設定回りの確認。↓


$ git config --list
user.name=username
user.email=username@gmail.com

$ ssh-add -l
Could not open a connection to your authentication agent.

# sshのエージェントが動いて無さそう。。

$ eval "$(ssh-agent -s)"　# 起動
Agent pid 348312

$ ssh-add -l
The agent has no identities.

# エージェントに鍵が登録されとらんと言われとる。。

$ ssh-add ~/.ssh/id_rsa_github　# 登録してやる。

$ ssh -T git@github.com
Hi hoghoe! You've successfully authenticated, but GitHub does not provide shell access.

これでsshでのgithubへの接続確認完了。

まとめ

次回は、Mailloadテーマを適用し、カスタマイズしていきます。