LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-10

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

前回の記事

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配下に大元のファイルがあるので大丈夫。
image.png

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ファイルが作成できた
image.png

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

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

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

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

image.png

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

image.png

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

カテゴリーごとに.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 が生成された
中身もテンプレートどおりになっている
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0