petit-rabbit.work

このブログの構成について

概要

やりたいこと

  • 久しぶりにブログを作りたい
    • 前にも何回かやって面倒になってやめた
      • 今回もそうなる予定だけど、 どこからでも書けて管理できるものにしたい
    • どうせ作るならMarkdownで気楽にメモするくらいの気持ちで作りたい
      • というより最近はMarkdownで書くことが多くて普通のブログを書ける気がしない…

できたもの

  • このブログの構成
    • Netlify : ホスティング
    • Hugo : 静的サイト作成
    • GitHub : ソースコード管理

選んだ理由

  • Netlify

    • 名前を聞いたことがあった
    • GitHub Pagesでもよかったけど、他用途で使いそうな気がする

  • Hugo

    • Markdownで書ける
    • 単純に使ってみたかった
    • Golangの勉強しなくてもいい
    • 細かなデザインとか無理

Hugoのインストール

  • 通常のHugoのインストール方法は以下の通り

  • 今回は、Dev Containersを使ってコンテナにHugoをインストール

    • Dev Containersの概要
    • 選んだ理由
      • Dev Containersを使うことで、必要な環境をコンテナで準備できる
        • Hugoをローカル端末に残しておきたくないときに使える
      • Dev Containersを使ってみたかった

手順

Dev Containersの設定

前提条件

手順

  1. Visual Studio Codeを起動し、管理対象のディレクトリを開く

    • どこでもいいので、今回は 「hugo_blog」 ディレクトリを作成して開く

  2. コマンドパレットを開き、「Dev Containers: Add Dev Container Configuration Files…」を選択

  3. ベースは「Debian」を選択

  4. 追加の機能として以下を選択

    • Go
    • Hugo
    • Git

  5. .devcontainers/devcontainer.json を編集

    • features の設定を以下のようにする

      "features": {
    "ghcr.io/Dev Containerss/features/git:1": {},
    "ghcr.io/Dev Containerss/features/go:1": {},
    "ghcr.io/Dev Containerss/features/hugo:1": {"extended":true} // Hugoのextended版をインストール
},

  6. Visual Studio Codeを再起動し、コンテナを起動

フォルダ構成

hugo_blog/
├── .devcontainer
│   └── devcontainer.json

  • .devcontainer/devcontainer.json

    {
	"name": "Debian",
    // イメージ(DebianのBullseyeを使用)
	"image": "mcr.microsoft.com/devcontainers/base:bullseye",
    // イメージに対して追加でインストールする機能
	"features": {
		"ghcr.io/devcontainers/features/git:1": {},
		"ghcr.io/devcontainers/features/go:1": {},
		"ghcr.io/devcontainers/features/hugo:1": {"extended":true}
	},

	// VSCode 拡張機能
	"customizations": {
		"vscode": {
			"extensions": [
				"ms-vscode.go",
				"yzhang.markdown-all-in-one"
			]
		}
	}
}

サイトの初期設定

テーマの追加

  1. サイトを作成

    hugo new site blog

  2. テーマを追加

    • デフォルトは何も設定されていないため、テーマを追加する
    • 今回はhugo-paperを使用
    cd blog
git submodule add https://github.com/nanxiaobei/hugo-paper.git themes/hugo-paper

  3. テーマの適用

    • config.tomlまたはhugo.tomlに以下を追加
    theme = 'paper'

記事の追加

  1. 新規作成

    hugo new posts/2024-07-20_how_to_use_hugo.md

  2. 記事の編集

    • 作成した記事を編集
    ---
title : "Hugoのインストールと使い方(このブログの概要)"
lastmod : "2024-07-20"
tags: ["hugo", "tech"]
---

  3. ローカルで確認

    hugo server -D
    • ブラウザでhttp://localhost:1313にアクセス

Netlifyでデプロイ

  1. GitHubにリポジトリを作成

    • 今回はプライベートリポジトリを作る

  2. コードをプッシュ

    git init
git remote add origin https://github.com/username/repo.git # 自分のリポジトリに変える
git add .
git commit -m "first commit"
git push

  3. Netlifyでデプロイ

    • Host on Netlifyをもとに設定

    • Netlifyにアクセス

      • GitHubアカウントと連携させる

    • ビルド設定を追加

      • ビルドコマンド : git clone https://github.com/nanxiaobei/hugo-paper.git themes/paper && hugo --theme=paper --gc --minify
        • submoduleを使う場合、別途テーマの取得が必要
      • 公開ディレクトリ : public
      • 環境変数
        • HUGO_VERSION : 0.129.0 # 2024/07/20時点の最新バージョン

後続のタスク

  • 調べておかないといけないもの
    • コスト(個人のブログなら問題ないはず)
    • カスタムドメイン設定
    • Hugo, Netlifyのその他の機能

雑記

  • とりあえずブログ作成するなら、はてなブログとかのほうが楽(今回は色々試したかったから)
  • Markdownでブログが書ける環境ができたから、書く気力があれば増やすかも(はてなブログでも使える)