yy16ki’s diary


スポンサードリンク

トップ > Hugo > HugoとNetlifyでブログの環境構築 | 設定まとめ

HugoとNetlifyでブログの環境構築 | 設定まとめ

Hugo Netlify

前回の記事で，HugoとNetlifyによるブログ環境を構築してみました．Hugoでは，様々なブログのテーマを利用でき，Tranquilpeakを使用しました．ブログの細々した設定にあたり，色々と調べる必要があったので，参考とした記事とあわせてまとめてた記事になります．
※随時更新します．

設定関連

文字フォント・サイズの変更

下記の2つの手順で変更可能です．
１．所定のディレクトリに参照するCSSファイル作成
デフォルトの文字フォントやサイズ，色等を変更する場合は，custom cssを追加します．
前回の記事の状態だと，ブログのディレクトリ構成は下記のようになっています．

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── netlify.toml
├── public
├── resources
├── static
└── themes

staticディレクトリ配下に，cssディレクトリを作成し，そこにmystyle.cssを追加します．（ファイル名は任意）

mkdir static/css
touch mystyle.css

下記のような感じで，細かな設定をこのCSSファイルに記載していけばよいです．
下記の例では，本文のフォントをメイリオにし，サイズも少し大きくしています．このあたりはHTML，CSSの知識がいるのでより細かく設定をする場合はそちらの勉強も必要ですね...

p {
    font-family:  'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    font-size: 16px;
}

２．config.tomlを編集
ファイルを追加しただけでは反映されないので，config.tomlに下記を追記します．

# Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS;
# they have to be referred from static root. Example
[[params.customCSS]]
    href = "css/mystyle.css"

詳細はユーザーマニュアルが参考になります．

github.com

背景画像の変更

背景画像は，下図の赤枠で囲った部分になります．フォントと同様の手順で設定可能です．

背景画像

１．画像ファイルを配置するディレクトリを作成
ブログのルートにあるstaticディレクトリ配下に，imagesディレクトリを作成し，そこに表示させたい画像ファイルを追加します．（ここでは，marine.jpgというファイルを追加．）

mkdir static/images

２．config.tomlを編集
config.tomlの[params]欄にルートからのパスを追記します．

[params]
  # Your blog cover picture. I STRONGLY recommend you to use a CDN to speed up loading of pages.
  # There is many free CDN like Cloudinary or you can also use indirectly
  # by using services like Google Photos.
  # Current image is on AWS S3 and delivered by AWS CloudFront.
  # Otherwise put your image, for example `cover.jpg` in folder `static/images/`,
  # and use relative url : `images/cover.jpg`
  coverImage = "images/marine.jpg"

こちらは，テーマのサンプルサイトのconfig.tomlが参考になります．
※ドキュメントでは，高速化のためにCDN（Content Delivery Network）の利用が推奨されています．

github.com

記事作成

記事一覧に概要のみ表示する

Hugoでブログを作成すると，ホーム画面で記事の一覧が表示されます．一覧では，記事のタイトルと本文が表示されるのですが，特に設定しないと長い本文が表示されてしまいます．

記事一覧

マークダウンにて，<!--more-->を追加することで，その前後の内容を記事一覧に表示させる/させないの制御が可能です．

---
title: "My First Post"
date: 2022-09-17T11:43:55+09:00
draft: false
---

記事の概要として，記事一覧画面に表示される．

 <!--more-->

以降は，記事一覧画面には表示されない．
# header1
本文

記事に画像を表示する

画像ファイルの配置場所

Hugoで画像ファイルを管理する際は，ルート配下のstaticを使用する方法と， ページバンドルという方法で，記事（マークダウンファイル）と一緒に管理する方法があります．現時点ではstaticを使用する方法を記載します．ページバンドルを使用する方法も，今後追記したいと思います．

なお， こちらの記事|天才まくまくノートで画像ファイルの管理について詳しくまとめてくださっています．

static ディレクトリを使用する場合
背景画像と同じディレクトリを使用します．
下記では，images配下にさらにsubディレクトリを作成し，記事に追加したい画像としてbase-octocat.svgを格納しています．

static
├── css
│ 　   └── mystyle.css
└── images
    　　├── marine.jpg →背景画像
    　　└── subdir
        　　　　└── base-octocat.svg →記事に追加したい画像

mdファイルの記述方法

所定のディレクトリに画像を配置したら，そのファイルを指定するようにマークダウンに記述すればよいです．マークダウンへの記述方法として下記の2種類をまとめておきます．

Markdown formatting
一般的にマークダウンで画像を追加する方法です．下記のように記述します．

![This is an image](/images/sub/base-octocat.svg)

Shortcodes
Markdown formattingではできないサイズの変更などに対応した方法です．パラメータを指定することで，細かな制御が可能で，下記のように記述します．

{{< figure src="/images/sub/base-octocat.svg" class="center" width="320" height="320" >}}

詳細や設定可能な項目は，下記から確認できます．

Shortcodes | Hugo

マークダウンに次のように記述し

---
title: "Image Test"
date: 2022-09-24T15:36:11+09:00
draft: true
---

**markdown formatting**

![This is an image](/images/sub/base-octocat.svg)

**Shortcodes** 

{{< figure src="/images/sub/base-octocat.svg" class="center" width="320" height="320" >}}

ローカルで確認すると下図のようになります．

画像の追加

サイズ等を柔軟に変更できるShortcodesによる方法が良いかもしれません．

外部連携

Netlify, GitHubとの連携

Hugoは，サイトのホスティングサービスとしてNetlifyを使用できます．また，NetlifyをGitと連携することでソースがGitHubにプッシュされると，Netlify側にインストールされたHugoで，サイトが自動的にデプロイされます．

publicディレクトリをGitHubにプッシュしない

Hugo自体は静的サイトジェネレーターとして，マークダウンで記事を作成後，hugoコマンドの実行によりpublicディレクトリ配下に静的サイトのソースを生成します（HTMLファイル等が作成される）．Netlifyを使用する場合，この部分をNetlify側で対応してくれるので，GitHubにプッシュする必要はありません．なので，publicディレクトリ配下はGitHubにプッシュされないように．ルートにて.gitignoreを下記の通り作成しておくとよいです．

touch .gitignore
echo public/ >> .gitignore

参考サイト

BALLOON | FU-SEN blog | Tranquilpeakのテーマを使用して作成したブログ一覧にも取り上げられているブログです．

つちのこブログ | Tanquilpeakの設定を詳しくまとめてくださっています．

How I Build This Site | Traquilpeakでのブログ構築手順をはじめからてくださっています．

画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle) - まくまくHugoノート | 画像ファイルの管理方法について詳しくまとめられている記事です．


スポンサードリンク