ブログ作成の流れ
🖌
ここでは、NKSSG を使ってブログを作成するときの、おおまかな流れを説明していきます。
ブログとは
ここでは、ブログとは、記事が時系列に並んでいるサイトを指すことにします。日記をイメージするのが一番わかりやすいでしょう。
NKSSG では、初期状態では、ブログを作る用に設定されています。そのため、少し追加の設定をするだけで、ブログ作成ツールとして使うことができます。
ブログの初期設定
ブログを作る前に、全体の設定として、次の項目を決めておきましょう。設定は、nkssg.yml というファイル内で行います。ファイルの上部に設定箇所があるので、「項目名: 値」というように記入します。
- site_name
- ブログのタイトル
- 初期値は「site name」
- site_url
- ブログの URL
- 空のまま公開してはいけない
- site_desc
- ブログの説明。
- 空でも問題はない。
- site_image
- ブログの画像。
- SNS用サムネイルなどで使う。
- 空でも問題はない。
- language
- 言語
- 日本語なら
ja、英語ならenなど。 - 初期値は
en。
これらはブログを公開するまでに決めましょう。
また、投稿タイプごとに、記事の URL をどうするかを決めましょう。デフォルトでは、次の2つの投稿タイプが用意されています。
- post
- 日々の記事を書くための投稿タイプ
- WordPress でいう「投稿」
- URL の初期値は、「/yyyy/mm/dd/HHMMDD/」（/年/月/日/時分秒/）
- page
- 自己紹介など、独立した記事を書くための投稿タイプ
- WordPress でいう「固定ページ」
- URL の初期値は、「/slug/」（記事タイトル、または、ファイル名）
post の方をメインで使います。
URL の設定も、nkssg.ymlで行います。設定に使える項目などは、次の記事にまとめています。
URL の設定は、あとからでも変えることはできますが、一度公開したら基本は変えない方がいいです。公開する前に、どのようにするか決めて設定しましょう。
記事ファイルの追加
コンテンツのベースとなる記事を追加していきます。
NKSSG をインストールをした直後なら、docs フォルダができ、その下に post フォルダと page フォルダが作成されます。ブログとして使う場合は、post フォルダの下に記事を追加していきます。1つのファイルが1つの記事に対応します。
デフォルトのテーマを使用する場合、次のコマンドを実行すると、記事の追加を簡単に行うことができます。
nkssg new post
これを実行すると、post フォルダの下に、年ごと、月ごとのフォルダができ、記事用の HTML ファイルができます。VSCode を使っている場合は、作成されたファイルのパスが表示されるので、 Ctrl + クリック で開くことができます。
このときに作られるファイルのひな形は、次の場所にあります。
/themes/default/new/new_post.html
このファイルを編集すれば、それ以降、新しいひな型から新規記事ファイルが作成されます。このひな型の編集方法は、次の記事で解説しています。
もちろん、フォルダやファイルの作成は、手動で行ってもかまいません。
記事の執筆
次に、記事の中身を書いていきましょう。
記事のファイルは、2つのパートに分かれます。記事のタイトルやカテゴリーなどの設定を行う「メタ情報」のパートと、「本文」のパートです。
1行目の「---」から次に出てくる「---」までがメタ情報の設定となります。ここをフロントマターと呼びます。1行目が「---」でない場合は、メタ情報はなく、1行目から本文だと NKSSG は認識します。フロントマターの詳しい設定項目は次の記事にまとめています。
ざっくり挙げると、次のような項目が設定できます。カテゴリーやタグなど、複数ある場合は特別な書き方をします。
- title
- 記事のタイトル
- url
- 記事の URL（パーマリンクの設定より優先）
- date
- 記事の公開日時
- アーカイブなどで使うためのもの。
- 未来の日付を入れても予約投稿はできない。
- draft
- 記事がドラフトかどうか
Trueなら公開されない。
- category
- カテゴリー
- 複数ありえるので、
["cat1", "cat2"]などと書く - 別途、
nkssg.ymlにもタームの設定が必要
- tag
- タグ
- 複数ありえるので、
["tag1", "tag2"]などと書く - 別途、
nkssg.ymlにもタームの設定が必要
2つ目の「---」以降が本文です。
本文のパートに書いた内容は、実際に表示される内容です。ファイルの拡張子が html なら、HTML ファイルとして扱われます。 md の場合は、通常の Markdown 記法を使って書くと、最終的に HTML に変換されます。Markdown 記法については、次の記事にまとめています。
Markdown の拡張機能についても説明しています。
記事のプレビュー
記事を書いているときに、記事が最終的にどのように表示されるか確認したいこともあるでしょう。 NKSSG では、ローカルサーバー上で、記事の内容を確認することができます。
次のコマンドを実行します。
nkssg serve
こうすると、ローカルサーバーが立ち上がり、今の時点でサイト全体がどのように表示されるかを確認することができます。実行すると、サイトの URL が表示されます（デフォルトでは、http://127.0.0.1:5500/）。VSCode を使っている場合は、リンクを Ctrl + クリック で開くことができます。
もし、今書いている記事だけを確認したい場合は、次のコマンドを実行しましょう。
nkssg draft {path}
同じようにローカルサーバーで確認すると、トップページに今書いている記事が反映されているはずです。このコマンドは、今書いている記事だけを更新するので、サイト全体を確認することはできませんが、プレビューはすばやくできます。
サイトの公開
記事を書き、プレビューをして問題がなければ、nkssg build を実行してファイルを出力し、ファイルをサーバーにアップします。これでサイトの公開が完了です。
詳しくは、次のページにまとめてあります。
後は、記事の追加からサイト公開までを繰り返していくことになります。