HUGO導入の手順

HUGOでサイトを構築する際の手順や用語コマンドなどを簡単にまとめました。
この記事が、HUGOを扱おうとしている方々の備忘録となれば幸いです。
(テストサイトの為、サイト名ディレクトリ名をHUGOクイックスタートガイドに従い”bookshelf”としています。)

環境

• Mac
• ターミナル
• Homebrow

HUGOの各種コマンド

新規サイト作成

＄ hugo new site newsitename

ツリーの表示

$ tree -a

ツリーの解説

|– archetypes

このhugo newコマンドを使用して、Hugoで新しいコンテンツファイルを作成できます。このコマンドを実行すると、日付とタイトルのような投稿の構成プロパティがほとんど追加されません。Archetypeを使用すると、独自の構成プロパティを定義し、hugo newコマンドが使用されるたびにポストの先頭に追加されます。

|– config.toml

すべてのウェブサイトにルートに設定ファイルがあるはずです。デフォルトでは、設定ファイルは使用TOML形式をいますが、使用することができますYAMLまたはJSONフォーマットなども。TOMLは、明確なセマンティクスのために読みやすい、最小構成ファイル形式です。で説明した構成設定config.tomlは、フルサイトに適用されます。これらの構成設定は、baseURLおよびtitleウェブサイトの。

|– content

ウェブサイトのコンテンツを保存する場所です。コンテンツ内では、異なるセクションのサブディレクトリを作成します。あなたのウェブサイトに – blog、という3つのセクションがあるarticleとtutorialしましょう。ディレクトリ内にそれぞれ3つの異なるディレクトリがありcontentます。セクションすなわちの名前blog、articleまたはtutorialそのセクションに適用される特定のレイアウトを適用するためにヒューゴによって使用されます。

|– data

このディレクトリは、Webサイトの生成時にHugoが使用できる設定ファイルを格納するために使用されます。これらのファイルは、YAML、JSON、またはTOML形式で記述できます。

|– layouts

このディレクトリ内のコンテンツは、コンテンツを静的なWebサイトに変換する方法を指定するために使用されます。

|– static

このディレクトリは、画像、CSS、JavaScript、その他の静的コンテンツのように、ウェブサイトに必要なすべての静的コンテンツを保存するために使用されます。

`– themes

これは、サイトのテーマを作成する場所です。テーマはコンテンツをレンダリングするレイアウトとテンプレートを提供します。ダウンロードして使用できるオープンソースのテーマは多種多様ですが、好きなだけ独自のテーマを作成することもできます。

6 directories,

コンテンツの追加

$ hugo new post/good-to-great.md

テーマのレイアウト内容

theme.toml

テーマの名前と説明、著者の詳細、テーマライセンスなどのテーマに関する情報を提供するテーマ設定ファイルです。

images

ディレクトリには2つのイメージがscreenshot.pngありtn.pngます。screenshot.pngリストビューのイメージでありtn.png、単一のポストビューです。

layouts

ディレクトリには、さまざまなコンテンツタイプの異なるビューが含まれています。すべてのコンテンツタイプには2つのファイルsingle.htmlとが必要list.htmlです。 single.html単一のコンテンツをレンダリングするために使用されます。 list.htmlコンテンツアイテムのリストを表示するために使用されます。たとえばlist.html、programmingタグを持つすべての投稿を表示するために使用します。

static

ディレクトリには、テンプレートで使用されるすべての静的資産が格納されます。静的アセットは、jQueryやCSSスタイルや画像などのJavaScriptライブラリ、またはその他の静的コンテンツにすることができます。このディレクトリはレンダリング時に最終サイトにコピーされます。