Hugo 静的サイトジェネレーターブログを開設してみる④記事contentの作成

7295 ワード
Blog Hugo Netlify GitHub hugo-theme GitHub テキストリンク

前回でトップページを編集したので、今回は記事を作成していく！

前回の記事

Hugo 静的サイトジェネレーターブログを開設してみる①Hugoインストール編
Hugo 静的サイトジェネレーターブログを開設してみる②Netlifyでホスト＆デプロイ実行まで
Hugo 静的サイトジェネレーターブログを開設してみる③トップページの編集

前提条件

  • 環境例：PC MacBookAir2019 macOS Big Sur
  • ファイル階層理解、ターミナル操作、Linuxコマンド、vscode等のエディタ使える
  • Git理解、 github個人アカウント登録済み、かつ、作業用リポジトリを準備できる
  • Githubリモートからデプロイする、デプロイとはなんぞやを少し理解できる
  • 何かしらデプロイ経験があればスムーズ（なくてもできる！し経験値になるのでOK）
  • 当方スキル： スクール転職活動でRuby半年、転職後PHP,フレームワークを半年程度の駆け出しエンジニア

hugo new コマンドでコンテンツ（記事）を作成

公式ドキュメント
https://gohugo.io/commands/hugo_new/

まず、Blog/content/post/配下にある、テーマから移植していた記事を消します。
参考に雛形を見たい時は、themes配下に大元のファイルがあるので大丈夫。

Blog/archetypes/default.md
---
title:       "記事のタイトルテキスト"
subtitle:    "記事のサブタイトル"
description: "記事の説明"
date:        "{{ .Date }}"
author:      "KEISUKE SAKAGAMI"
image:       "img/avater-cat.png"
tags:        ["テック", "Hugo", "雑記"]
categories:  ["テック", "健康", "趣味"]
draft:       true
---
メインプロジェクト・トップディレクトリ
//既存のcontent/post/配下にhello_world.mdファイルを作成
Blog% hugo new --kind default.md post/hello_world.md      
//結果               
/Users/user/Blog/content/post/hello_world.md created

なぜか、オプションなしで hugo newすると、本来参照しないthemes/archetype/post.mdを参照してしまうので、
オプションでメインディレクトリのarchetype/default.mdを明示的に指定しました

参照もとを複写して、.mdファイルが作成できた

Blog%hugo server -D で確認します

メインプロジェクト・トップディレクトリ
//ビルドしてローカル環境で確認
Blog% hugo server -D

ブラウザでhttp://localhost:1313/アクセス

ちゃんと記事が表示できたようです

hugo実行　→git push →Netfilyデプロイ実行

本番環境でも無事表示できました

カテゴリーごとに.mdファイルテンプレートをつくったりできる

作業ディレクトリ：メインディレクトリトップBlog
// 新しいテンプレートprogramming.mdを作成
Blog% cd archetypes
archetypes% touch programming.md

// programming.mdを好みに編集します

// content/配下にprogrammingディレクトリを作成し、その配下に記事を作成
Blog% hugo new programming/20110111.md 
/Users/user/Blog/content/programming/20110111.md created

content/配下にprogramming/20110111.md が生成された
中身もテンプレートどおりになっている