ホーム
APC
https://github.com/asanobuturi/asanobuturi/commits/main/content/edit/_index.md
ここにこのページの編集履歴がありますので、ここも参照して下さい。(Organization加入必須)
効率的な記事執筆のためにHugoという静的サイトジェネレーターを使用するように変更しました。そのため多彩なオプションを用意しましたのでそれの解説などをしていきます。
Hugoとは
公式サイト | 公式ドキュメント(分からなかった時はここを読みましょう)
ざっくり言えば静的サイトの生成を楽にしてくれるソフトです。
例えば左上にあるメニューバーや、一番下にあるフッターなどに変更を加える場合、従来ではすべての100ページ近くあるそれぞれのページに同じ変更をしなければなりませんでした。(苦行)最初の頃はJSで自動生成するなどしていたのですが、
- JSのコードにエラーがあるとメニューバーが表示されない
- 遅延して表示されるためストレス
- 根本的解決になっていない
- レスポンスが若干低下する
などの問題があったためJSでの自動生成をやめ、Hugoでの自動生成にシフトチェンジしました。Hugoの利点としては、
- 前述の通りフッターやメニューバーなどを一つのファイルだけで使いまわせる(テンプレート)
- 違う箇所に同じ文字列を表示する場合、誤字等を修正するためにすべての場所を編集する必要がなくなる(変数)
- 記事ごとにタグやカテゴリをつけるだけで管理してくれる(タグ管理)
- URLを書くだけで自動でリダイレクトしてくれるファイルを作成する(エイリアス)
- MDファイルで記事を執筆できる(パーサー)
などの機能、利点があります。特に一番最後が重要です。これは従来の手法ではなし得ないことです。これでブログを書くのにHTMLの知識が入らなくなり、(若干必要ですが。)ブログの更新回数も爆増…とはなりませんでした。
デメリットをあげるとしたら記事(本文)のファイルと画像などの静的ファイルを別の場所に置かないといけないので慣れていないとちょっとだけ面倒ですね。
準備
GitとVSCode(もしくはその他のお好きなエディタ)をパソコンにインストールし、「asanobuturi」リポジトリをパソコンにクローンしてください。このリポジトリを編集し、GitHubにプッシュすることで、GitHub Actionsの機能が自動的にHugoでサイトを生成し、反映してくれます。
asanobuturiはプライベートリポジトリですので、物理部のGitHub Organizationに入っていないとアクセスすることはできません。GitHubのアカウントを作り、招待してもらう必要があります。VSCodeでも、同じGitHubのアカウントにログインしておけばあとで編集したデータをプッシュする際にも楽になります。
https://github.com/asanobuturi/asanobuturiのリポジトリをgit cloneのコマンドでクローンしてください。手元のパソコンのGitで、GitHubのアカウントにログインする必要があります。
クローンしたリポジトリのディレクトリで、hugo server -Dのコマンドを実行すれば、Hugoが簡易的なウェブサーバーを作ってくれるので、コマンドライン上に表示されているURLをブラウザで開けばリアルタイムに編集されたサイトを見ながら作業することができます。
ブログ記事の追加の仕方
部誌の執筆の仕方
疲れたので後程書きます、寝ます。