どうも、まさとらん（@0310lan）です！
今回は無料で使える人気のクラウドIDE「Glitch」を使って、JavaScriptで制御可能な静的サイトジェネレータ「eleventy」をベースにしたブログ開発環境を構築してみましょう！
面倒な作業は一切不要で、ブラウザからエディタにアクセスしたら自動的に環境を構築してくれるのでオススメです。誰でも手軽にマークダウンで記事を書いて公開できるうえ、上級者はJavaScriptでブログの構造を自由にカスタマイズしていくことができます。
これからブログを始めようと考えている人も含めて、ぜひ参考にしてみてください！
なお、JavaScriptの基本は、paizaラーニングの「JavaScript体験編」や「JavaScript入門編」で学ぶことができます。
【 Glitch 】
■「Glitch」でブログ開発環境を構築してみる
それでは、「Glitch」のクラウドIDEを利用してブログ開発環境を準備していきましょう！
とりあえずブログを作ってみるだけならログインする必要もなく、以下のリンクから即座に「Glitch」のエディタへアクセスできるようになっています。
＜参考リンク＞
（※データを永続的に残すには無料のユーザー登録が必要です）
初期状態だとサンプルコードがすでに準備されていますが、今回はブログを作るので画面上部の項目をクリックして新規プロジェクトを作成します。
【New Project】ボタンをクリックしてください。
いくつか新規プロジェクト用のテンプレートが表示されるので、静的サイトジェネレータの「eleventy」がベースになっているテンプレートをクリックします。
この1クリックだけで、ブログを作るための開発環境がすべて自動的に用意されます。
あとはマークダウンで記事を書いていけば、「Glitch」がそのままホスティングもしてくれるのでブログの準備から公開までを完結できるというわけです。
ちなみに静的サイトであれば「Glitch」のホスティングサーバはスリープ状態にならないので、ブログの運用には最適と言えます。
詳しい記事の作り方を解説する前に、現状のままでどんなブログが構築されているのかを確認してみましょう。
まずは画面上部の項目をクリックして好きなURLの名称を設定しておきます。
次に【Show】と書かれた項目をクリックして【In a New Window】を選択してください。
すると新規タブで、さきほど作成したブログが公開されているのが分かります！
もちろんアドレスバーに表示されているURLをシェアすれば、誰でもブログを閲覧できるようになっています。
また独自ドメインも無料で設定可能で、エディタ下部の【Tools】からドメインの登録ができます。
このように「Glitch」と「Eleventy」の組み合わせによって、誰でも簡単に自分だけのブログを作成して公開できるのが大きな魅力となっています。
■新しい記事を投稿してみよう！
ブログの開発環境ができたので、新しい記事を1つ投稿してみましょう！
そこで、自動的に生成されたファイルがどのような構造になっているのかを確認してみます。
デフォルトの構成をざっくり紹介すると以下のようになります。
新しい記事を追加するには、記事データが格納されている「posts」フォルダ内にマークダウンファイルを追加することになります。
「posts」フォルダの中身を確認すると、すでにいくつか記事データが存在しています。
これらの記事データと同じように、新しいマークダウンファイルを追加すればブログ記事が投稿される仕組みになっています。
そこで「posts」フォルダの横にあるオプションから新規ファイルを追加します。
任意のファイル名を設定してから【Add This File】ボタンをクリックしてください。（設定したファイル名がブログ記事のURLになります）
新規のマークダウンファイルが作成されたのが分かります。
あとは記事を書いていけばいいのですが、ファイルの冒頭に「Front Matter」と呼ばれるオプション（メタ情報）を記述する必要があります。
基本的には以下のような記述があればいいでしょう。
--- title: 初めての投稿 date: 2021-09-08 layout: layouts/post.njk ---
「Front Matter」の記述ができたら、一般的なマークダウン記法で記事を好きなように書いていくことができます。
記事を書いたらブログを確認してみましょう。新しく追加した記事が表示されているのが分かります。
記事をクリックするとマークダウンで記述した本文ページに遷移します。
このように「Glitch」のエディタ内で記事を書いていくだけで、すべて自動的にビルドされて公開できるので簡単です。また、記事を消したい場合も追加したマークダウンファイルを削除するだけというお手軽さです。
（※何らかのファイルを編集すると自動で再ビルドされて反映されます）
■基本的なカスタマイズについて
せっかくなのでブログの構造についてもう少しだけ補足しておきます。
記事ページに何をどのように表示するかを自分好みにカスタマイズしたい場合には、「layouts」フォルダ内のファイルを編集することになります。
たとえば、記事の本文ページをカスタマイズしたい場合には「post.njk」ファイルを編集します。
サンプル例として、記事タイトルの下に本文の概要を表示できるようにカスタマイズしてみましょう。
「post.njk」ファイル内に配置されているタイトル（h1）要素の下に、「description」が表示されるように追記します。
<p> <em>{{description}}</em> </p> <hr/><br/>
そして、記事のマークダウンファイルにある「Front Matter」に新しく「description」を追加して、記事の概要を記述しておきます。
ブログの記事ページを確認すると、以下のように概要が表示されているのが分かります。
このようにカスタマイズしたいページに対応するファイルを編集していくことで、自分好みのブログを作成していくのが基本となります。
また、格納されている記事データも簡単にカスタマイズできます。
たとえば、現状だと新しく投稿された記事はブログのトップページで一番下に表示されています。
これを新しい記事が一番上になるように並び替えてみましょう。
記事データについては「.eleventy.js」ファイルのコレクションを編集していきます。
すでにコレクションの記述があるのですが、最後にsort()を実行するように書き換えます。
const coll = collection .getFilteredByTag("posts") .sort((a, b) => b.data.date - a.data.date);
これで日付を基準にした並び替えが実行されて、新しい記事が一番上に表示されるようになります。
他にも「eleventy」の公式ドキュメントには、さまざまなカスタマイズ手法、データの制御方法、プラグインの活用方法などが解説されているので、ぜひ合わせて参考にしてみてください。
＜参考リンク＞
■「Glitch」エディタの便利機能について！
今回は「Glitch」のコードエディタを利用したブログの開発環境を準備したわけですが、エディタ自体の便利な機能もいくつかあるので合わせてご紹介しておきます。
エディタの「Share」ボタンをクリックすると友人・知人のメールアドレスを登録＆送信できるようになっています。
これにより複数人でエディタを共有しながら、ブログ開発をコラボレーションできるようになります。プログラミングだけでなく、記事を複数人で投稿するようなケースにも活用できるでしょう。
また、エディタ下部にある「Tools」から標準搭載されているターミナルを起動することも可能です。
一般的なターミナルと同じように扱えるため、コマンドラインからの操作・制御にも対応できます。
また、同じく「Tools」から「Rewind」機能を使うと、自動的に保存されているバージョン履歴が表示されます。
「◯月◯日に作成したブログの状態に戻したい！」といった場合にも、1クリックで簡単に戻すことができるので重宝します。
このような便利機能を手軽に扱えるのも「Glitch」を活用したブログ開発環境のメリットと言えるでしょう。
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python体験編」「C#体験編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、「STEINS;GATE（シュタインズ・ゲート）」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回はクラウドIDE「Glitch」を使って、「eleventy」をベースにしたブログ開発環境の作り方についてご紹介しました！
「Glitch」は無料で使えるJavaScriptの統合開発環境として非常に便利なのですが、同じくJavaScriptで制御可能な静的サイトジェネレータの「eleventy」とは相性が抜群です。シンプルでミニマムなブログから、上級者向けの凝ったブログ作りまで幅広く対応できるのが魅力でしょう。
今回ご紹介した内容はすべて無料で利用可能なので、ぜひみなさんもオリジナリティあふれるブログ作りに挑戦してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
