Skip to content

Amplifyを使って、Hugoで作成したWebページを公開する(2)

   

はじめに

前回の記事で、Hugoプロジェクトを作成し、Webページ動作確認まで行いました。今回は作成したHugoプロジェクトをGitHubにアップロードするところまでの作業内容を整理したいと思います。

GitHubは、GitHub,incが展開しているソフトウェア開発者向けのサービスで、バージョン管理ソフトのGitを使ったソースコードホスティング環境を提供しています。GitHubの詳細については、複数の書籍やインタネット上に多くの情報があるので、この記事では特に触れないことにします。

今回の作業では、GitHubのアカウントが取得済みであることを前提に進めますので、未取得の方は、ぜひGitHubアカウントを取得してください。

実際にGitHubにソースコードをアップロードする

想定要件

以下の要件を想定して、整理します。

項目名 要件
Hugoプロジェクト名 study-hugo
GitHubリポジトリ名 study-hugo
公開用のURL https://study.rkarsnk.jp
Hugo用テーマ inkblotty

GitHubリポジトリの作成

GitHubのウェブページにアクセスし、リポジトリを作成します。

図1にあるように、リポジトリ作成画面では、Initialize this repository with:のチェックボックスはチェックせずに、Create repositoryを実行します。

図1 リポジトリ作成画面

HugoプロジェクトをGitHubリポジトリに登録する

前回の作業で、HugoプロジェクトをGitの管理下に置いてあるので、すべての変更を反映したファイル一式をコミットします。

publicディレクトリが存在する場合は事前に削除するか、.gitignoreファイルを作成して、Gitの管理対象から外れるように設定しておいてください。

$ cd study-hugo
$ git add *
$ git commit -m "Initial commit."

次に、GitHubにコミット済みのリポジトリをプッシュします。

ここで気をつけないといけないのは、デフォルトではGitのブランチ名はmasterとなっている点です。ポリティカルコレクトネスの観点から、現在はmainが推奨されており、masterは非推奨になっています。そのため、リポジトリをプッシュする前にブランチ名をmainに変更します。

$ git branch -M main
$ git remote add origin https://github.com/rkarsnk/study-hugo.git
$ git push -u origin main

git push実行時にIDとパスワードの入力が求められるので、GitHubのIDとパスワードを入力してください。

処理が完了すれば、GitHubリポジトリへのアップロードは完了です。GitHubのWebページからは、図2のように、アップロードしたソースコードが閲覧できます。

図2 study-hugoリポジトリ

以上で、HugoプロジェクトをGitHubにアップロードする作業が完了しました。

おわりに

今回は、HugoプロジェクトをGitHubで管理下に奥までの作業内容を整理しました。

次回は、Amplifyが提供するGitHub連携の仕組みを活用して、GitHubにアップロードしたHugoプロジェクトから、Webページを公開するところまで説明したいと思います。

最後まで読んでいただきありがとうございます。

関連記事

  1. Amplifyを使って、Hugoで作成したWebページを公開する(1)