学習履歴詳細
Github pagesとHugoでブログを構築した
準備
GitHubで以下2つのリポジトリを作っておく
1つめ:ユーザーネーム.github.io
2つめ:blog
(好きな名前にする)
※1つめのリポジトリには、readme.mdだけ作っておく。そうしないと、後でgitに「空のリポジトリを紐付けするな」と怒られる。
手順
1.PCにHugoをインストール
$brew install hugo
2.正常にインストールできたか、以下のコマンドで確認
$hugo version
3.インストールできたら、作業用ディレクトリ(私の場合はデスクトップ)に移動
$cd Desktop
4.Hugoプロジェクトを作る
$hugo new site blog
(「blog」のところは好きな名前にする)
5.プロジェクトのディレクトリに移動
$cd blog
6.gitの準備をする
$git init
7.テーマディレクトリに移動し、好きなテーマをクローンする
$cd themes
$git clone https://github.com/halogenica/beautifulhugo.git
(ここでは「beautifulhugo」というテーマを使っている。)
8.プロジェクトのルートディレクトリ(ここでは「blog」)に戻る
$cd ..
9.GitHubの「blog」ディレクトリと、ローカルの「blog」ディレクトリを紐づける
$git remote add origin https://github.com/ユーザーネーム/blog.git
10.ローカルの「blog/public」ディレクトリを、GitHubの「ユーザーネーム.github.io」ディレクトリのサブモジュールにする
$git submodule add -b master https://github.com/ユーザーネーム/ユーザーネーム.github.io.git public
11.新しい記事を作り、編集する。
$hugo new post/タイトル.md
「post」ディレクトリに、「タイトル.md」というマークダウン 形式のファイルが生成されるので、それを編集する。
記事上部の設定メニュー↓
title: "記事のタイトル"
date: 日付
draft: false
falseにしないと下書き扱いになり、記事が表示されない。
12.「themes/beautifulhugo/exampleSite」ディレクトリの中にあるconfig.tomlを、プロジェクトのルートディレクトリにあるconfig.tomlにコピーし、編集する。
$cp -r themes/beautifulhugo/exampleSite/config.toml .
テーマによって必要な記述は異なるが、ひとまず以下の内容を書き換える。
baseurl = "https://ユーザーネーム.github.io"
DefaultContentLanguage = "ja"
title = "ブログのタイトル"
13.$hugo server
でテスト用サーバーを立ち上げ、http://localhost:1313/
で表示を確認する。確認できたらcontrol+C
でサーバーを止める
14.$hugo
コマンドでローカルに公開用ファイルを作成する。これを行うと、「blog/public」ディレクトリに公開用のファイルが作成される。
15.「14」で作成したファイルを、GitHubの「ユーザーネーム.github.io」リポジトリにpushする
$cd public
$git add .
$git commit -m "コメント"
$git push origin main
(GitHubのブランチ名をよく確認し、ブランチ名と同じものを入力する。mainになっているのにmasterと入力してエラーになるのを何度かやった。)
16.ローカルの「blog」の中身をGitHubの「blog」にpushして保存しておく
$cd ..
(「blog」ディレクトリに戻る)
$git add .
(ここでgitになんかごちゃごちゃ言われたらもう一度$git add .
する)
$git commit -m "コメント"
$git push origin master
2021年01月21日(木)
3.0時間