序章
Jekyllは静的サイトジェネレーターであり、コンテンツ管理システム(CMS)の利点のいくつかを提供すると同時に、そのようなデータベース駆動型サイトによってもたらされるパフォーマンスとセキュリティの問題を回避します。 これは「ブログ対応」であり、日付で整理されたコンテンツを処理するための特別な機能が含まれていますが、その有用性はブログサイトに限定されません。 Jekyllは、オフラインで作業する必要があり、コンテンツのメンテナンスのためにWebフォームよりも軽量のエディターを使用することを好み、バージョン管理を使用してWebサイトへの変更を追跡したい人に最適です。
このチュートリアルでは、Ubuntu16.04にJekyll3.7.3開発サイトをインストールします。 後のチュートリアルでは、ここで生成されたコンテンツを調べ、静的サイトを同じサーバーに公開し、最終的に本番環境にデプロイします。
前提条件
このチュートリアルに従うには、次のものが必要です。
- sudo権限を持つroot以外のユーザーがいるUbuntu16.04サーバー:これらの権限を持つユーザーを設定する方法について詳しくは、 Ubuntu16.04を使用したサーバーの初期設定ガイドをご覧ください。
この前提条件を完了すると、Jekyllとその依存関係をインストールする準備が整います。
ステップ1—Jekyllをインストールする
まず、パッケージリストを更新して、パッケージの最新バージョンとその依存関係に関する最新情報を確認します。
- sudo apt-get update
次に、Rubyとその開発ライブラリ、およびmake
とbuild-essential
をインストールして、JekyllをインストールするとJekyllのライブラリがコンパイルされるようにします。
- sudo apt-get install ruby ruby-dev make build-essential
それが完了したら、.bashrc
ファイルに2行を追加して、Rubyのgem
パッケージマネージャーにgemをユーザーのホームフォルダーに配置するように指示します。 これにより、システム全体のインストールから発生する可能性のある複雑さを回避すると同時に、ローカルのjekyll
コマンドをユーザーのPATH
に追加します。
次のように入力して、.bashrc
を開きます。
- nano .bashrc
ファイルの最後に、次の行を追加します。
# Ruby exports
export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH
ファイルを保存して閉じます。 エクスポートをアクティブ化するには、次を実行します。
- source ~/.bashrc
それが完了したら、gem
を使用して、Jekyll自体と、Gemの依存関係を管理するBundlerをインストールします。
- gem install jekyll bundler
次に、ファイアウォール設定でJekyllの開発Webサーバーとの間のトラフィックが許可されていることを確認します。
ステップ2—ファイアウォールを開く
まず、ファイアウォールのステータスをチェックして、ファイアウォールが有効になっているかどうかを確認します。 その場合、当社のサイトへのトラフィックが許可されていることを確認し、Webブラウザで開発サイトを表示できるようにします。
- sudo ufw status
この場合、SSHのみが許可されます。
OutputStatus: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
他のルールが設定されているか、ファイアウォールルールがまったくない可能性があります。 この場合、SSHトラフィックのみが許可されるため、Jekyll開発サーバーのデフォルトポートであるポート4000を開く必要があります。
- sudo ufw allow 4000
ステータスを再確認しましょう。
- sudo ufw status
これで、ファイアウォールルールは次のようになります。
OutputTo Action From
-- ------ ----
OpenSSH ALLOW Anywhere
4000 ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
4000 (v6) ALLOW Anywhere (v6)
ソフトウェアがインストールされ、必要なポートが開いているので、開発サイトを作成する準備が整いました。
ステップ3—新しい開発サイトを作成する
ホームディレクトリから、Jekyllのnew
コマンドを使用して、www
というサブディレクトリにサイトのスキャフォールディングを作成します。
- cd ~
- jekyll new www
jekyll new
コマンドは、bundle install
を開始して必要な依存関係をインストールし、Minimaというテーマを自動的にインストールします。 インストールが正常に完了すると、次のような出力が表示されます。
OutputNew jekyll site installed in /home/sammy/www.
Jekyllのnew
コマンドは、次のディレクトリとファイルを作成します。
...
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2018-03-19-welcome-to-jekyll.markdown
└── _site
これらは実際のWebサイトファイルではありません。 これらは、Jekyllが静的サイトを作成するために使用するソースファイルです。 Jekyllは、特定の名前、命名パターン、およびディレクトリ構造に依存して、コンテンツのさまざまなソースを解析し、それらを静的サイトにアセンブルします。 新しい投稿やページを追加するときは、既存の構造を使用し、Jekyllの命名規則に従うことが重要です。
ヒント: tree
is a useful command for seeing file and directory structures from the command-line. You can install it with the following command:
- sudo apt-get install tree
使用するには、目的のディレクトリにcd
と入力し、tree
と入力するか、tree /home/sammy/www
で開始点へのパスを指定します。
ステップ4—JekyllのWebサーバーを起動する
Jekyllの組み込みの軽量Webサーバーは、ディレクトリ内のファイルを監視し、変更が保存されるたびに静的サイトを自動的に再生成することにより、サイト開発をサポートするように調整されています。 リモートサーバーで作業しているため、ローカルマシンからサイトを参照するためにホストアドレスを指定します。 ローカルマシンで作業している場合は、ホスト設定なしでjekyll serve
を実行し、http://localhost:4000
に接続できます。
- cd ~/www
- jekyll serve --host=203.0.113.0
Output of jekyll serverConfiguration file: /home/sammy/www/_config.yml
Source: /home/sammy/www
Destination: /home/sammy/www/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.645 seconds.
Auto-regeneration: enabled for '/home/sammy/www'
Server address: http://203.0.113.0:4000/
Server running... press ctrl-c to stop.
jekyll serve
を呼び出すと、Jekyllは構成ファイルとコンテンツファイルを新しいディレクトリ_site
に解析し、その_site
フォルダーでコンテンツの提供を開始しました。
...
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2018-03-19-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ └── minima-social-icons.svg
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2018
└── 03
└── 19
└── welcome-to-jekyll.html
また、現在のディレクトリwww
の変更の監視も開始しました。 投稿またはページへの変更が保存されるとすぐに、静的サイトが自動的に再構築されるため、_site
フォルダー内のファイルに直接変更を加えないことが重要です。
サイトでの作業中に開発サーバーをフォアグラウンドで実行した状態でこのターミナルを開いたままにすると、ページや投稿を追加したりコンテンツを変更したりするときに、すぐにフィードバックを受け取ります。
注:大規模なサイトで作業している場合、--incremental
ビルドを有効にすると、変更されたファイルを再生成するだけで、変更を加えるたびに再構築を高速化できますが、この小さなサイトには必要ありません。 この実験的な機能の詳細については、JekyllのWebサイトを参照してください。
このサイトが利用可能になりました。 Webブラウザーでは、jekyll serve
からの出力に示されているサーバーアドレスとポートにアクセスできます。
結論
このチュートリアルでは、Jekyllをインストールし、自動生成されたコンテンツを含む開発サイトを作成しました。 次のガイドでは、このコンテンツを調べて、Jekyllがソースファイルを静的サイトに変換する方法を説明し、構成設定に関する決定を通知します。