どうも、まさとらん（@0310lan）です！
今回は、超ミニマムなシンプルさがウリのブログ構築ツールをご紹介します！
面倒な依存関係は一切なく、自動生成されるファイルは編集しやすい単純なHTMLというのが大きな特徴です。静的サイトジェネレータのように機能しますが、プログラミングは不要でHTML&CSSの知識があれば誰でも使いこなすことができます。
ブログやWebサイトの構築に興味がある方は、ぜひ参考にしてください！
【 1POST 】
■「1POST」の使い方
それでは、「1POST」をどのように使えばいいのか詳しく見ていきましょう！
Node.jsの開発環境をお持ちであれば、以下のコマンドから「1POST」をインストールしてすぐにでもブログを始められます。
$ npm install -g 1post
Node.jsの環境がない方や、ちょっと試してみたいだけ…という場合は、ログイン不要でブラウザ上にNode.jsの開発環境を構築できる「StackBlitz」がおすすめです。
上記サービスにアクセスして「Node.js」を選択してください。
すると、Node.jsの開発環境が起動するので、画面下部のターミナルからコマンドを実行できるようになります。
以下のコマンドから「1POST」をインストールしてみましょう。
$ npm install 1post
ここまでの作業で、ご自身の開発環境もしくは「StackBlitz」を利用して「1POST」がインストールされているはずなので、次のコマンドから新規フォルダを作って作業を開始しましょう。
$ mkdir myblog $ cd myblog
そして、試しに 1post コマンドを実行して以下のような表示になることを確認してください。
基本的なヘルプが表示されるはずです。
この画面を見ても分かる通り、「1POST」はわずかなコマンドで構成された非常にシンプルな静的サイトジェネレータと言えます。
■3つのコマンドでブログを構築してみよう！
「1POST」では、たった3つのコマンドを覚えるだけで簡単にブログを構築できるように設計されています。
しかも、そのうちの1つはブログ構築の初回しか使わないコマンドなので、実際には2つのコマンドさえ覚えればブログを始められるというわけです。
それでは、早速ですがブログを作っていきましょう！
まずは1つ目のコマンドとして、ブログに必要なファイルを自動生成してくれる「start」コマンドがあります。これは初回だけ実行すればよくて、次のようにコマンドを実行します。
$ 1post start
すると、以下のような構成のファイルが自動生成されるはずです。（この例はmyblogフォルダ内でstartコマンドを実行しています）
簡単に説明すると、ブログの設定をjsonファイルでおこない、記事を投稿していくと「posts」フォルダ内にどんどん格納されていく流れになります（他のファイルも含めて詳細は後述します）。
2つ目のコマンドとして、ブログを公開するための静的ファイルを組み立てる「build」コマンドを次のように実行します。
$ 1post build
これでブログを公開する準備が整いました。
3つ目のコマンドとして、ローカルでブログをプレビューできる「serve」コマンドを次のように実行してみましょう。
$ 1post serve
すると、まだ空っぽの状態ですがシンプルなブログが表示されるはずです。
「StackBlitz」を利用している場合は、以下のようなプレビューが表示されます。
あとは、記事を作成して「build」コマンド → 「serve」コマンドをそれぞれ実行して確認するという流れを繰り返すだけなので簡単ですね。
生成されるのは静的ファイルだけなので、これらのファイルをGitHubやNetlifyなどにアップロードすれば、そのままブログをネット上へ公開するのも簡単というわけです。StackBlitzを利用している場合は、GitHubアカウントと連携してリポジトリに反映させることも可能です。
■最初の記事を投稿してみよう！
ここからは記事を作成するための手順について詳しく見ていきましょう！
まず、新しい記事を作る場合は 1post コマンドに続けて、記事のタイトルになる英数字を付与します（この英数字が記事URLの一部になります）。
$ 1post 【記事のタイトル(英数字)】
例えば、記事のタイトルが「hello first post」であれば次のようなコマンドを実行します。
$ 1post hello-first-post
コマンドを実行すると、postsフォルダ内に「hello-first-post」フォルダが作成されて、その中に2つのHTMLファイルが生成されます。
「index.html」は投稿ページ用に自動生成されたHTMLファイルになります。
そして、記事自体は「post.html」ファイルを編集していくことになります。このファイルを開くと、冒頭に記事のメタデータが記載されているのが分かります。
メタデータには、記事のタイトル、概要、作成日がすでに記載されており、自分の好きなように編集も可能です。「build」コマンドが実行されたときに、このメタデータを利用して投稿ページが構築されることになります。
記事はごく普通のHTMLで記述していきます。ただし、本文だけを書けばよくて、headタグやbodyタグなどは不要です。
また、「1POST」はシンタックスハイライトをサポートするJavaScriptライブラリの「Prism」を採用しているので、記事内にソースコードを書くときは以下のように記述ができます。
<pre> <code class="language-javascript"> console.log('taro'); </code> </pre>
このように記述すると、JavaScriptのシンタックスハイライトが適用されます。codeタグのクラスに任意のプログラミング言語を記述するだけなので便利ですね。
他にも「Prism」で提供されている基本的な機能を利用できるので、さまざまなカスタマイズにも対応可能です。
サンプル例として「post.html」の中身を次のようにしてみました。
<!--:::{ "post_title": "はじめての投稿", "post_description": "投稿の概要をここに記述します。", "post_created_at": "Tue May 31 2022 21:04:53 GMT+0900 (日本標準時)" }:::--> <h2>小見出し（h2タグ）</h2> <h3>小見出し（h3タグ）</h3> <h4>小見出し（h4タグ）</h4> <p>これは（pタグ）のテキストです</p> <pre> <code class="language-javascript"> const name = 'taro'; console.log(name); </code> </pre>
buildコマンド → serveコマンド をそれぞれ実行してプレビューを見てみましょう。作成した投稿が表示されるのでクリックします。
すると、投稿の詳細ページが表示されて本文を読むことができるようになります。
ソースコードのシンタックスハイライトも適用されていることを確認しておきましょう。
このように簡単な手順で記事を作成できるので、あとはどんどん新規記事を追加していくだけです。ちなみに、記事を削除したい場合は該当記事のフォルダをそのまま削除するだけなので簡単です。
■ブログをカスタマイズしよう！
「1POST」では、簡単にブログをカスタマイズできる仕組みが提供されているので合わせてご紹介しておきます。
まず最初にブログの基本的な初期設定を編集できる「blog-config.json」というファイルを確認してみましょう。
これは任意のプロパティ値を変更するだけで、ブログの基本設定がおこなえるファイルになります。例えば、以下のようなプロパティが含まれています。
このなかで注目して欲しいのが「blog_theme」と「blog_prism_theme」の2つです。
これらのプロパティに特定のキーワードを設定するだけで、ブログの外観やシンタックスハイライトのテーマを変更できるように設計されています。
例えば、「blog_theme」の値を「default-dark」に変更してプレビューすると以下のようなダークテーマが適用されます。
値を変更するだけで、さまざまなブログテーマを試せるのは便利でしょう（ブログテーマの詳細はこちら）。
次に、「blog_prism_theme」の値を「prism」に変更してみましょう。先ほどは黒背景にソースコードが表示されていましたが、今回は白背景に変化しているのが分かります。
こちらも値を変更するだけで、さまざまなシンタックスハイライトを試せるようになっているわけです（シンタックスハイライトのテーマ詳細はこちら）。
また、記事の作成用ファイル「post.html」に記載するメタデータですが、実は自分の好きなプロパティを自由に追加できます。
例えば、「"favorite_color": "青色"」という感じで好きな色を追加したら、記事の本文中に {{favorite_color}} のような形式で利用できる仕組みが提供されています。
実際のHTMLにすると以下のようになります。
<!--:::{ "post_title": "はじめての投稿", "post_description": "投稿の概要をここに記述します。", "post_created_at": "Tue May 31 2022 21:04:53 GMT+0900 (日本標準時)", "favorite_color": "青色" }:::--> <h2>小見出し（h2タグ）</h2> <p>好きな色は{{favorite_color}}です！</p>
プレビューで記事を確認すると、メタデータがしっかりと反映されていますね。
ちなみに、投稿ページの変更などが反映されない場合は、自動生成されたキャッシュファイルを削除する必要があります。
これは処理を高速化するために生成されるJSONファイルなのですが、postsフォルダ内に「cache.json」という名前で存在しています。このファイルを削除してから、buildコマンドを実行すると変更内容が正常に適用されるはずです（cache.jsonは再び自動生成されます）。
さらにもっとブログの外観や構造をフルカスタマイズしたい場合は、2つのテンプレートファイルを自由に編集可能です。
- template-index.html：ブログ全体のデザインを編集
- template-post.html：投稿ページのデザインを編集
これらは単純なHTMLファイルであり、buildコマンドを実行した時にこのテンプレートをベースにしてブログが構築される仕組みです。そのため、このテンプレートをカスタマイズするだけでブログをゼロから再構築することも可能なわけです。
テンプレートファイルを確認してみると、先ほどのメタデータを反映する仕組みと同じような記述を見つけることができます。
例えば、以下のようなlang属性やtitleタグなどです。
<!DOCTYPE html> <html lang="{{blog_locale}}"> <head> <title>{{blog_title}}</title> ・ ・ ・
これらの {{ }} で囲まれた値は「blog-config.json」のプロパティになります。もちろん、メタデータと同じく自分の好きなプロパティを新規に追加することも可能なので、カスタマイズの幅も広いと思います。
このように「1POST」を使えば、余計な手間をかけずに自分だけのブログをすぐに始めることができるわけです。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
このたび人気の「Python入門編」が全編無料となりました。他にもいろいろな動画レッスンを無料公開しておりますので、エンジニア・非エンジニアにかかわらず、プログラミングを学びたい方はぜひごらんください。
paizaラーニングについて詳しくはこちら
■まとめ
今回は、簡単な手順でシンプルなブログを誰でも構築できるツールをご紹介しました！
「1PSOT」は本当にミニマムな構成で設計されており、覚えることもほとんどないためすぐにでもブログを始められるのが大きな魅力と言えます。
ブログのデザインもテンプレートファイルを編集すれば、どんなページにでも変身させることができます。
ぜひみなさんもユニークなブログを構築して、楽しみながらシェアしてみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
