Ubuntu16.04でJekyll開発サイトをセットアップする方法

序章

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

それが完了したら、2行を追加します。 .bashrc 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のみが許可されます。

Output
Status: active
To Action  From
-- ------  ----
OpenSSH ALLOW   Anywhere
OpenSSH (v6)   ALLOW   Anywhere (v6)

他のルールが設定されているか、ファイアウォールルールがまったくない可能性があります。 この場合、SSHトラフィックのみが許可されるため、Jekyll開発サーバーのデフォルトポートであるポート4000を開く必要があります。

sudo ufw allow 4000

ステータスを再確認しましょう。

sudo ufw status

これで、ファイアウォールルールは次のようになります。

Output
To                         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

The jekyll new コマンドが開始します bundle install 必要な依存関係をインストールし、Minimaというテーマを自動的にインストールします。 インストールが正常に完了すると、次のような出力が表示されます。

Output
New jekyll site installed in /home/sammy/www.

ジキルの 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の命名規則に従うことが重要です。

sudo apt-get install tree

ステップ4—JekyllのWebサーバーを起動する

Jekyllの組み込みの軽量Webサーバーは、ディレクトリ内のファイルを監視し、変更が保存されるたびに静的サイトを自動的に再生成することにより、サイト開発をサポートするように調整されています。 リモートサーバーで作業しているため、ローカルマシンからサイトを参照するためにホストアドレスを指定します。 ローカルマシンで作業している場合は、実行できます jekyll serve ホスト設定なしで接続します http://localhost:4000.

cd ~/www
jekyll serve --host=203.0.113.0

Output of jekyll server
Configuration 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 フォルダ。

サイトでの作業中に開発サーバーをフォアグラウンドで実行した状態でこのターミナルを開いたままにすると、ページや投稿を追加したりコンテンツを変更したりするときに、すぐにフィードバックを受け取ります。

このサイトが利用可能になりました。 Webブラウザーでは、からの出力に示されているサーバーのアドレスとポートにアクセスできます。 jekyll serve:

結論

このチュートリアルでは、Jekyllをインストールし、自動生成されたコンテンツを含む開発サイトを作成しました。 次のガイドでは、このコンテンツを調べて、Jekyllがソースファイルを静的サイトに変換する方法を説明し、構成設定に関する決定を通知します。