ど素人がHugoを使ってみる ―記事を書いてサイトを生成する―

いよいよ記事を書きます。

  • archetypes
    • default.md
  • content
  • data
  • layouts
    • _default
      li.html
      list.html
      single.html
    • partials
      header.html
      footer.html
      pagination.html
    • index.html
    • 404.html
  • static
    • css
      style.css
    • js
      各種ファイル
  • config.toml

①記事の生成

ターミナルで対象ディレクトリに移動して、hugo new post/ファイル名.mdとするとcontent内にpostフォルダとさらにその中にファイル名.mdファイルが生成されます。
ファイルの中身は、default.mdで設定した各項目が記入されています。


+++
date = “(ファイルを生成した日時が入ります)”
tags = [“”]
categories = [“”]
img = “”
title = “”
+++

ここに必要な情報を書き込みます。


+++
date = "(ファイルを生成した日時が入ります)"
tags = ["camera", "butterfly"] 
categories = ["blog"]
img = "post/img/sample.jpg"
title = "テスト01"
+++

タグとカテゴリーはそのままURLにも使われるので英数字がいいと思います。
画像のパスはpostから指定しないとうまくいかなかったのですが、環境とかテーマにもよるので調整してください。
必要の無い項目は削除しておいた方がきちんと動きます。
このブログでは、Folderのカテゴリー記事にimgを使ってサムネイルを表示していますが、tagは使用していないので削除しています。
その他の記事では、imgを使用していないので削除しています。

②Markdownで記事を書く

Markdownとは「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」だそうです。(Wikipedia)
<p>とか<br>とかいちいち書かなくてもいいので楽ちんです。
Markdownでググると書き方を紹介した記事がたくさんありますが、代表的なのをいくつか。

#:見出し
# 見出し<h1>見出し</h1>が生成されます。
## 見出しなら<h2>見出し</h2>です。
#見出しの間には、必ず半角スペースを入れましょう。

改行
文末に半角スペース2個で<br>が生成されます。
文章と文章の間に1行でも空きが入ると、段落とみなされます。


これはダミーテキストです。(半角スペース2個)
これはダミーテキストです。(半角スペース2個)

これはダミーテキストです。

これが


<p>
これはダミーテキストです。<br>
これはダミーテキストです。<br>
</p>

<p>これはダミーテキストです。</p>

こうなります。

太字・イタリック
太字を使うには__**で囲みます。
イタリック体を使うには_*で囲みます。

その他、リストやリンク等もMarkdownで書けます。
複雑なHTMLには向きませんが、ブログくらいならMarkdownで十分です。

③サイトを生成する

ターミナルでhugo serverを実行すると、対象ディレクトリ配下にpublicフォルダが生成され、ローカルホストで閲覧できるようになります。
たぶんhttp://localhost:1313だと思いますが、ターミナルにアドレスが表示されるので確認してください。
hugo server -wとすると、ファイルを更新する度に自動で更新してくれます。
※ただしconfig.tomlの変更だけは、サーバーの再起動が必要です。

hugo serverで生成されたデータは、{{ .Site.BaseURL }}部分にlocalhostが入るため、ブログのサーバーへはアップできません。
hugo -b "サイトURL"を実行するとアップロードできるpublicデータが生成されます。

これで一通りの作成手順はおしまいです!
上手くいかなくて諦めた機能もいくつかありますが、それは次のリニューアルにでも…。

Categories: web
Tags: #hugo