11tyは、NodeJSベースの強力な静的サイトジェネレーターです。
ここLinuxAPTでは、サーバー管理サービスの一環として、お客様が関連するNodeJSクエリを実行するのを定期的に支援しています。
これに関連して、Ubuntuシステムに11tyをインストールし、静的Webサイトを生成する方法を検討します。
11tyインストールの前に満たす必要のある前提条件
Linuxユーザーとして、システムで次の2つのパッケージを使用できる必要があります。
- NodeJS
- NPM
システムにNodeJSとNPMがインストールされていない場合は、次のコマンドを実行して簡単にインストールできます。
$ sudo apt update
$ sudo apt install node
$ sudo apt install npm
注：Node.jsとNPMがないと、11tyで作業を続けることはできません。
次に、新しいディレクトリを作成し、そこに移動して、それぞれ初期化します。
$ mkdir newEleventySite
$ cd newEleventySite/
$ npm init -y
11tyプロジェクトをインストールして作成する方法は？
これを行うには、以下の手順に従ってください。
1.次のコマンドを実行して、11ty静的サイト用の新しいディレクトリを作成することから始めます。
$ npm install --save-dev @11ty/eleventy
完了すると、11tyが新しく作成されたディレクトリにインストールされます。これはプロジェクトごとのインストールです。ここでは、11tyをグローバルにインストールすることを選択しませんでした。これにより、インストールが簡単で管理しやすくなります。
2. 11を実行すると、いくつかのファイルが書き込まれたことがわかります。ファイルがないため、この段階では何も起こりません：
$ npx @11ty/eleventy
これで、Webサイトを作成して公開できます。その前に、テンプレートが必要です。
3.テンプレートを作成するには、次のコードを使用します。
$ echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hi, this is 11ty for Linuxapt.com</p></body></html>' > index.html
$ echo '# Page header' > README.md
テンプレートが完成したら、とりあえずWebサイトを公開してください。上記のコマンドを実行すると、11tyが2つのページを正常に書き込んだことがわかります。
11tyでウェブサイトを公開する方法は？
テンプレートの作成が完了すると、11tyはサイトを_siteフォルダーに保存します。エクスポートされたすべてのファイルを取得し、FTPクライアントを使用してホストに公開できます。最後に–serveコマンドを追加して、Webサイトを公開できます。
$ npx @11ty/eleventy --serve
Webブラウザーで、「localhost：8080」を実行すると、次のような応答が返されます。
Hi, this is 11ty for Linuxapt.com