静的ジェネレーターでのサイト作成方法イメージ

このページを見ておられるということは「静的ジェネレーター」でサイトを作りたいとお考えですね!?

なかなか一歩を踏み出せない方のために、静的サイトジェネレーターでの具体的な執筆イメージを書いていこうと思います。

パーマリンクや画像挿入のやり方、マークアップ、サイト公開まで、公開しますよ！

我流ですが！

環境紹介

私の執筆環境です。

執筆環境

静的サイトジェネレーター： Hugo

管理ツール兼エディタ： VSCode

画像編集ソフト： Photoshop

FTP(*2)： FFFTP

サーバー： mixhost

ドメイン：スタードメイン

こちらを前提に解説して行きます。

より具体的な解説はチュートリアルで語っています。

今回はWordPressとはどう違うの？

パーマリンクや画像の挿入は？

カテゴリ分けはできるの？

といった他のブログサービスから乗り換えるときに気になるであろうことを中心に書いていきます。

そうそう、ちなみに、どうしてこんな環境になっているのかは、下記記事で語っています！

記事を公開するまでの流れ

公開までの流れは下記のとおりです。

執筆

ローカルでのテスト

ビルド

FTPによるアップロード(公開)

執筆

マークダウンファイルの作成

データベースの代わりとして機能するマークダウンファイルを作成していきます。

コマンドラインを開いて、下記のように入力します。

 $hugo new post/hello-world.md

ってやると、嫌悪感ありますよね？

普通にフォルダを作って、「○○.md」ってファイルを作るだけです。

上記コマンドを使うと、テンプレートに用意されている基本的なパラメータが入力された状態で、ファイルが作られます。

つまり、最初の1回コマンド打てば、あとはそれのコピペで記事が作れます。

極論いえば、エクセルファイルを大量に増殖させて、記事を作っていきます。

そのエクセルファイルには、A1セルに記事のタイトルがはいっていて、A2セルに記事公開の日付が入っているようなイメージです。

簡単ですよね？

「○○.md」の〇〇の部分はURLに表示されるパスになります。

mdの拡張子はご想像どおり、markdownです。

パラメータの管理やカテゴリ

マークダウンファイルには、記事タイトルや公開日時といった情報を記載する必要があります。

タイトルや日付といったものは必須ですが、その他は好き勝手に追加することができますよ。

私のテーマの設定部分はこんな感じです。

---
title: "静的ジェネレーターでのサイト作成方法イメージ"
date: 2019-08-15T22:27:44+09:00
updateDate: 2019-08-27T22:27:44+09:00
categories: ["kadlu基本設計","kadlu"]
tags: [ "kadlu" ]
url: "/post/kadlu-page-param"
description: 
cover: "/img/common/eyecatch001.jpg"
author: 
toc: true
amp: true
readingTime: true
dispDate: true
noIndex: false
draft: false
---

ここから本文を記載

この情報は自分で好き勝手に追加削除ができます。

あらためて、私のテーマの設定ファイルを見てみると・・・

パラメータ	備考
title	タイトル。必須。
date	公開日時。今日より前に書かれた記事が公開される。必須。
updateDate	更新日時。あると便利かなって。自作。
categories	カテゴリ。 Javascriptの配列のように書いて複数指定できる。これだけでカテゴリページが自動作成される。厳密には違うがHugo用意しているパラメータ(オプションパラメータという)
tags	タグ。 Javascriptの配列のように書いて複数指定できる。これだけでタグページが自動作成される。厳密には違うがHugo用意しているパラメータ(オプションパラメータという)
url	URL この文字列でフォルダを指定してURLを変更できる特にこだわりが無ければ未設定でデフォルトのパーマリンクとなる厳密には違うがHugo用意しているパラメータ(オプションパラメータという)
description	ディスクリプション。 Hugo用意しているパラメータ(オプションパラメータという)。私のテーマ内では、設定してなければHugoが勝手に作るサマリーからとる。
cover	アイキャッチ。画像のパスからアイキャッチ画像をだす。自作。
author	筆者情報。あると便利かなって。自作。
toc	目次フラグ。false(空白未設定)なら目次なし。あると便利かなって。自作。
amp	AMP(特殊なコーディング)にするフラグ。 false(空白未設定)ならAMP化なし。 Javascript多用するページはfalseにする。自作。
readinTime	⑦○分で読めますフラグ。 false(空白未設定)なら表示なし自作。
dispDate	日付表示フラグ。false(空白未設定)なら更新日表示なし。自己紹介や検索ページ用自作。
noIndex	noIndexフラグ。trueならnoindexにして検索されないようにする。質の低いページ用。自作。
draft	下書きフラグ。trueなら下書き状態にする。Hugo用意しているパラメータ(オプションパラメータという)。

こうして見て分かる通り、かなり自分好みにカスタムできます。

必要なのはタイトルと日付だけです。

好き勝手に変数を追加して対応できるのがHugoの良いところですね。

WordPressだとデータベースをいじらないと行けないので、結構しんどいです。

(ある程度はカスタムフィールドなんかのプラグインで対応できますが・・・)

マークダウンでの記入

メインとなるマークダウンでの記入です。

何も難しいことはありません。

ぶっちゃけ、

当サイトでマークダウン記法を使っているのは、「改行(pタグ)」と「見出し(h2など)」だけですから。

それマークダウン使ってるって言えるのか？

こんな感じで記事書いています

リード文

<!-- more -->

## 見出しは#で表します。

改行するとpタグが入ります。

こうやって記事を書いていきます。

<div class="cardot;>
  <div class="carddy">
   <p>装飾はHTMLで書いています</p>
  </div>
</div>

<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
  <tr>
    <th>表も</th>
    <th>テーブル直書き</th>
  </tr>
</table>

どっかで見たことありません？

WordPressのテキスト執筆そのままです。

凝ったWordPlessサイトでよく見るやつ

画像の挿入

WordPressと概念が違うので、詳しく書きますね。

画像は手打ちでパスを書いて対応します。

WordPressのようにアップロードして、「メディア」の挿入で済まないです。

しかも、WordPressはアイキャッチ用の小さい画像まで作ってくれます。

静的ジェネレーターは、ここまで融通は効きません。

ですが、

すべてマニュアル操作できるようなものなので、勝手に色々なサイズの画像を作ったり、リネームされることが無いです。

すべて自分の管理下で行えます。

画像ファイルを置く場所は決まっていて、staticフォルダ以下(最近はpost以下にもできるのですが・・・)になります。

フォルダ構成

├─content
│  ├─pages ←固定ページ入れる所
│  └─post ←投稿ページ入れる所
│    └─static-site-generator-writing.md ←今見ているページの原稿。カテゴリやトップに分裂する
├─static ←分裂しない物を入れておく画像とかIfremeとかCSS・JSとか
│  ├─img
│  │  ├─common 
│  │  ├─eyecatch
│  │  └─post
│  │      └─static-site-generator-writing
│  │        └─static-site-generator-writing01.img ←入れたい画像
│  └─webfonts

staticフォルダ以下の構成は自由で、私は「img」ってフォルダを切って、その配下の「post」フォルダに投稿別でファイルを管理しています。

ちなみに、「common」はアイコンやトップ画像、ファビコンなんかが入っています。

「eyecatch」は文字通りアイキャッチです。

アイキャッチの要件が横1200px以上となる流れなので、別で管理しています。

実践編行きますね。

上記のフォルダ構成の「static-site-generator-writing01.img」を記事に挿入する場合はこうしてます。

(ごめんなさい。このサイトはカノニカルAMPなので画像挿入は「amp-img」です。適時「img」に読み替えてください。)

{{<amp-img src="/img/post/static-site-generator-writing/static-site-generator-writing01.jpg" width="16" height="9" layout="responsive">}}

いろいろツッコミどころがあると思うので解説します。

{{<amp-img ~ ">}}

はショートコードを表しています。「src」なんかはショードコードの引数です。

ショートコード側では何をやっているかというと

<amp-img
  {{ with .Get "src" }}src="{{ . | absURL }}"{{ end }}
  {{ with .Get "width" }}width="{{ . }}"{{ end }}
  {{ with .Get "height" }}height="{{ . }}"{{ end }}
  {{ with .Get "layout" }}layout="{{ . }}"{{ end }}>
</amp-img>

詳しくは後々語ります。理解していただきたいのはこの部分です。

src="{{ . | absURL }}"

「absURL」の変換で絶対パスにしています。

実はHugoはローカル環境(テスト環境)とビルド(本番環境)と言う考えがあります(後述)。

「absURL」と書くことで、どちらにも対応できるようになるんです！

環境	画像のパス
ローカル環境	src="http://localhost:1313/img/post/static-site-generator-writing/static-site-generator-writing01.jpg"
ビルド	src="http://設定したドメイン/img/post/static-site-generator-writing/static-site-generator-writing01.jpg"

これで、本来のパスである「static」が消えている理由もわかりますかね？

はい、ビルドすると、フォルダ構成が変わります。

public
├─post ←投稿が入る(contentフォルダがなくなります)
│  ├─static-site-generator-affiliate
│  ├─static-site-generator-environment
│  ├─static-site-generator-strategy
│  ├─static-site-generator-writing
├─img ←画像が入る(staticフォルダがなくなります)
│  ├─common
│  ├─eyecatch
│  └─post
│      └─static-site-generator-writing
│        └─static-site-generator-writing01.jpg

フォルダ階層が変わることが一番むずかしいです。

パーマリンクについて

パーマリンクは基本的に、以下のような形になります。

設定したドメイン/post/マークダウンのファイル名

このページでいうと下記の形になっています「static-site-generator-writing.mdが原稿」

https://ドメイン/post/static-site-generator-writing/

個人的には無難で使いやすいと思っています。

アナリティクスで「?p=○○」(WordPressの初期設定)ばかりにならないですからね。

設定によって年月日を入れることもできますし、タイトルや、ファイル名も使えます。

セクションというフォルダ切り分けを使えば疑似的にカテゴリ名のような単語を入れることもできます。

(WordPressのカスタム投稿みたいな感じです。)

ローカルでのプレビュー

Hugoにはローカルで起動するサーバーがついています。

まぁ、簡単に言うと、プレビュー機能があります。

保存さえすれば、markdownの変更を取り入れてくれて、Wordpressのようなプレビューができますよ。

使うにはコマンド打ちます。

VSCodeを使っているのならctrl@と打つと、ターミナルが開きます。

Hugoがインストールされているフォルダを開き、以下のコマンドを打ちます。

hugo server

http://localhost:1313/

のURLが指定されるので開いてみると・・・

プレビューが表示されます。

ビルドとアップロード

サイトが完成したら、ビルドしてFTPでサーバーにアップします。

先程と同じように、ターミナルを開いて、以下のように打ちます

hugo

すると、ビルドが走り、公開用のファイルがpublic以下に作られます。

作成途中の当サイトはこんな感じ。

├─categories ←カテゴリページ。categories/カテゴリ名で遷移できます
│  ├─kadlu
│  │  └─page
│  │      └─1
│  ├─サイト作成小技
│  │  └─page
│  │      └─1
│  └─静的ジェネレーター
│      └─page
│          └─1 ←カテゴリページ/静的ジェネレーターの１ページ目が入っています
├─css
├─img
│  ├─common
│  ├─eyecatch
│  └─post
│      ├─emmet-vscode-markdown
│      ├─static-site-generator-affiliate
│      ├─static-site-generator-environment
│      ├─static-site-generator-strategy
│      ├─static-site-generator-writing
│      ├─vscode-shortcut-string
│      └─vscode-static-site-plugin
├─js
├─page
│  └─1 ←トップページの１ページ目が入っています
├─pages
├─post ←各ページが入っています
│  ├─kadlu-decoration-tag
│  ├─static-site-generator-affiliate
│  ├─static-site-generator-environment
│  ├─static-site-generator-strategy
│  ├─static-site-generator-writing
│  ├─vscode-emmet-markdown
│  ├─vscode-shortcut-string
│  └─vscode-static-site-plugin
│    └─index.html ←フォルダ配下にindex.htmlがあり参照されます(いちいちURLに.htmlって出ません)
├─search
├─tags ←タグページ。tags/タグ名で遷移できます
│  ├─bluma
│  │  └─page
│  │      └─1
│  ├─hugo
│  │  └─page
│  │      └─1
│  ├─kadlu
│  │  └─page
│  │      └─1
│  ├─vscode
│  │  └─page
│  │      └─1
│  ├─アフィリエイト
│  │  └─page
│  │      └─1
│  ├─サイト作成小技
│  │  └─page
│  │      └─1
│  └─静的ジェネレーター
│      └─page
│          └─1
├─sitemap.xml ←サイトマップ
├─index.xml
└─index.html ←トップページです。

URL通りになっていて、ページネーション部分もフォルダ分けで機能します。

何よりうれしいのは、各フォルダの中にindex.htmlが入っていて、

WordPressやモダンなフロントフレームワークのようにURLが指定できます。

(いちいち○○.htmlって書かなくていいです。)

あとはこれをFTPでアップロードすれば公開完了です。