HugoのブログをGitHubで管理しよう (Win編)
Table of Contents
はじめに
エンジニアにとって、Git等のツールを使ったソースなどのバージョン管理は、避けては通れません。私自身も、仕事でバージョン管理システムは、なにかしらのツールで15年以上、直近5年くらいはGitを使っています。熟練度や利用頻度は担当している業務やプロジェクトにもよって人それぞれかもしれませんが、習得すべき技術であることは間違いありません。一方で、概念や用語は決して分かりやすいとは言えず、習熟コストはやや高めで、とっつきやすい技術とは言えないと感じています。
そう考えると、ブログの管理のような比較的身近で、興味のわきやすい題材で、GitやGitHubの操作を体験を通して習得するというのは、とても合理的なんじゃないかなと思います。 非エンジニアだけれども興味や関心のある方、今まさにエンジニアを目指して勉強中の方に向けて、分かりやすさを心がけ、要点を絞った実践的なガイド記事を目指したいと思います。
準備
GitHub にアカウント作成
まず初めに、GitHubにアカウントを作成しておきましょう。GitHub Docsに、GitHub でのアカウントの作成 というページがありますので、そちらを参考に、無料の個人用アカウント(GitHub Free)を作成しましょう。
右上の"Sign up"です。かっこいいサイトデザインですね。
今回は個人利用を想定していますので、ウィザードが最後のほうで、“あなたのチームは何名？” と聞いてきたら、“Just me(私だけ！)” と答えてくださいね。
Git のインストールと設定
次に、自分のPC(以降、ローカルと表記します)に、Gitをインストールしましょう。 Gitの公式からWindows用のインストーラを選んでダウンロードしてください。 おそらく多くの方は、“64-bit Git for Windows Setup” を選んでおけば大丈夫だと思います。
インストールを開始すると、インストールウィザードにいろいろ聞かれて、戸惑うかもしれません。 そんな時は、Qiitaで “Git インストール” 等と検索すると、画像付きで丁寧に手順を説明されている記事がたくさんありますので、そちらを参考にすると良いと思います。
ウィザードの問いかけには、基本的にはすべてデフォルトで答えて大丈夫だと思いますが、私の場合は、以下の点を変更しました。 普段仕事等で使っている方にとっては、プロジェクト経験やお好み等によって意見が分かれるところがあるかもしれません。
Visual Studio Code(VS Code)を仕事でも利用しているため。VS Code未経験の方はぜひ試してみると良いかも。
昨今、置き換えが推奨されている用語については、新しい提案「main」を選択。
私の仕事上では、ほぼこのパターン。
なんとなく、両方チェック。使う機会があるかもしれない、、、くらいの、個人的な理由。
インストールが終わったら、Gitの設定をひとつしておきます。もしかしたら不要かもしれないのですが、GitHubへSSHでアクセスするときに備えて、認証に使うSSHキーを作成しておきましょう。
せっかくなので、先ほどインストールしたばかりのGitのツール、[Git Bash]を早速使ってみましょう。Windowsのメニューに追加されているはずですので、探して起動してください。DOS窓のような黒い画面が立ち上がりますので、次のコマンドを実行してください。
ssh-keygen
ウィザードにファイルの保存先を聞かれますが、デフォルトのまま何も入力せずで良いと思います。パスフレーズは任意の文字列を入力してください（※パスフレーズは忘れないように）
ちなみに、なぜ “不要かもしれない” かと言うと、このあとの私の説明や手順では、GitHubへのアクセスはおそらくHTTPSのみのハズだからです。
GitHub Desktop のインストール
最後に、GitHub Desktopをインストールしましょう。 GitHub DocsのGitHub Desktopのインストールと認証に、とても分かりやすく書かれていると思います。セットアップ(設定方法) ～ (GitHubへの)認証までを行いましょう。
ここまでで、HugoブログをGitHubで管理するために必要なアカウントやツールの準備は終わりです。
(参考)Visual Studio Code のインストール
まだ利用したことがない、という方はこの機会にぜひ触ってみてください。とても便利だと思います。公式サイトからインストーラをダウンロードできます。この記事もVS Codeを使って書いています。今後、操作や手順を説明する時の画面イメージに使うことがあると思います。
今回やることの整理
設定を始める前に、これからやりたいことをいったん整理したいと思います。今回は、今までローカル(自分のPCのこと)で保管していたHugoのブログ記事を、GitHubで(以降、リモートと表記します)で保管するところまでを目標にしています。
どういうことかというと、ただ保管しただけでは、Webでブログサイトを公開することはできず、Webでブログサイトを公開するには、それはそれですべき手順があるからです。 他のやり方もあるのですが、今回は段階を踏んで進めていきたいので、以下のことをやっていきたいと思います。
- リモートリポジトリの作成
- 作成した(空の) リモートリポジトリをローカルにクローンする
- ローカルにファイルを格納する
- ローカルとリモートを同期する
Webでブログサイトを公開する手順は、また後日記事にしたいと思います。
実践
リモートリポジトリの作成
それではまず初めに、GitHubにリモートリポジトリを作成してみましょう。GitHubに"Sign in"しましょう。 最初の画面(ダッシュボード)の左上の"New"ボタンをクリックしてください。
“New"ボタンをクリックすると、リポジトリ作成のページに移動します。今回は、Hugoのブログ記事等を保管するリポジトリなので、「myblog」と名付けて作成することにしました。 お好みで「blog」とか「hugo-blog」とかでも良いです。ある程度意味のある、分かりやすい名前であればなんでも良いと思います。
今回は保管のみを目的としているため、privateにしておきましょう。それ以外はデフォルトのままで良いです。
[Create repository]をクリックしたら完成です。
作成した(空の) リモートリポジトリをローカルにクローンする
リポジトリの作成に成功すると、リポジトリの画面が表示されます。 ここでは、Set up in Desktop をクリックして、先ほど作成した「myblog」リポジトリのクローンをローカルに作成しましょう。
Set up in Desktop をクリックして、準備しておいた GitHub Desktop を起動しましょう。以下のダイアログが出てきたら、“GitHubDesktop.exeを開く"を選択してください。
そうすると、GitHub Desktop が起動し、クローン先のパスを聞いてきます。必要に応じて任意の場所を指定して Clone を実行しましょう。
なお、上記の例では、あらかじめ用意しておいたローカルの「C:\GitHub\」というフォルダ内に、「myblog」という名前(つまり、リモートと同じリポジトリ名)のクローンを作成しようとしています。つまり、ローカルリポジトリを作成しているということになります。「C:\GitHub\myblog」というフォルダが作成されていれば成功です！
ローカルにファイルを格納する
ブログサイト用に作成しておいたファイルを、先ほど作成したローカルリポジトリ「C:\GitHub\myblog」にコピーしましょう。 Hugoでブログを始めよう(Win編)で作成したブログサイト用のファイルは「C:\hugo\v0.128.2\example」に保存されていますので、その中身をすべて、ローカルリポジトリ「C:\GitHub\myblog」へコピーしてしまいましょう。
つまり、これからは”example“ではなく”myblog“が、ブログ記事などを管理するローカル上のフォルダ、ということになります。「C:\hugo\v0.128.2\example」はこの作業が終わったら削除してしまっても良いです。不安な方はしばらく放置しておいて、ひと段落してから消しても問題ありません。 ただし、「C:\hugo\v0.128.2」自体は残しておきましょう。
追加でひとつ、「C:\GitHub\myblog」にファイルを作成しましょう。「.gitignore」というファイルをテキストエディタで作成して、以下をコピーしてください。 このテキストファイルは、「.（ドット）」で始まる点に注意してください。
# Hugoが作成するファイルは管理対象外
/public/
/resources/_gen/
# Hugoの一時ファイルは管理対象外
/.hugo_build.lock
～～ 補足説明 ～～
Hugoは、設定ファイルやブログ用の記事(拡張子がmdのファイル)、テーマのレイアウトファイル等をもとに、Webで公開できる形にHTMLファイル等を生成する「静的サイトジェネレータ」というツールです。
今回やることの整理の中で、“Webでブログサイトを公開するには、それはそれですべき手順がある” と書きましたが、その手順のうち「Webで公開できる形にHTMLファイル等を生成する」ことを「ビルド」、ビルドしたファイルをWebで公開できるようにサーバに配置することを「デプロイ」と呼びます。
この後の計画として、GitHub Actionsを利用して、ビルドとデプロイの自動化を考えていますので、よって、ここではHugoが作成するファイルは管理対象外にしたい、という趣旨になります。
ローカルとリモートを同期する
最後に、ローカルとリモートを同期します。簡単に言うと、ローカルの「C:\GitHub\myblog」をリモートにアップロードする事ですが、Gitでは「コミット」、「プッシュ」という操作になります。
GitHub Desktopの画面を見ると、現在以下のようになっていると思います。この画面で、“Summary (required)“に、“初めてのコミット！“と入力して、“Commit to main"をクリックしてください。
そうすると、以下のような画面に切り替わるはずですので、“Publish branch"をクリックしましょう。これで、ローカルとリモートの同期が完了です。
それでは、確認してみましょう。ローカル側の確認はGitHub Desktopの"History"タブで見ます。
これが現在の状態です。今後、コミット&プッシュ等の操作を行うたびに、“History”(履歴)が増えていきます。次はリモート側です。GitHubに"Sign in"して、左側のリポジトリリストから、myblogをクリックしてみましょう。
リモートリポジトリにもちゃんと反映されていますね！
ローカルリポジトリと比較すると、「.gitignore」に書いたフォルダやファイルが、意図したとおりに同期の対象外になっていることが確認できます。また、もともと中身が空のフォルダも同期の対象外になっています。これはGitの仕様ですので問題ありません。
まとめ
お疲れ様でした。いかがだったでしょうか？ブログサイトの公開まであと一歩のところまで来たと思います。実感するのはもう少し先かもしれませんが、GitHubを利用してバージョン管理を行うことでミスや手間を減らし、ブログ記事の執筆などの本当にやりたいことに、集中できるようになると思います。
ここまで読んでいただき、ありがとうございました。