あみぃ

2021年01月01日に参加

学習履歴詳細

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

Git / GitHub

2021年01月21日(木)

3.0時間