序章

静的なWebサイトやブログをすばやく構築したい場合は、Jekyllが優れたソリューションになる可能性があります。 Rubyで記述されたオープンソースの静的サイトジェネレーターであるJekyllを使用すると、コマンドラインからすべての初期展開から本番展開までサイトを管理するのに役立つコマンドをすばやく実行できます。 Jekyllはブログを認識しており、カテゴリ、投稿、レイアウトを優先し、以前のブログコンテンツをインポートするために利用できるさまざまなインポーターを備えています。 オフラインで頻繁に作業する必要がある場合、コンテンツのメンテナンスのためにWebフォームに軽量エディターを使用することを好む場合、またはバージョン管理を使用してWebサイトへの変更を追跡したい場合、Jekyllは目標を達成するために必要なものを提供できます。

このチュートリアルでは、自動生成されたコンテンツを使用して、Ubuntu20.04にJekyll開発サイトをインストールします。 Jekyllをインストールすると、主にマークダウンファイルといくつかのJekyllコマンドを使用して、個人のサイトやブログを作成できるようになります。

前提条件

このチュートリアルに従うには、次のものが必要です。

  • sudo権限を持つ非rootユーザーを持つUbuntu20.04サーバー:これらの権限を持つユーザーを設定する方法の詳細については、 Ubuntu20.04を使用したサーバーの初期設定ガイドを参照してください。

この前提条件を完了すると、Jekyllとその依存関係をインストールする準備が整います。

ステップ1—Jekyllをインストールする

まず、パッケージリストを更新して、パッケージの最新バージョンとその依存関係に関する最新情報を確認します。

  1. sudo apt update

次に、インストールしましょう makebuild-essential Jekyllのライブラリがコンパイルされ、Rubyとその開発ライブラリが使用できるようにします。 私たちは含まれています y ここにフラグを立てて、はい、パッケージをインストールし、確認のプロンプトを避けたいことを確認します。

  1. sudo apt -y install make build-essential ruby ruby-dev

それが完了したら、2行を追加しましょう .bashrc Rubyに伝えるファイル gem ユーザーのホームフォルダーにgemを配置するパッケージマネージャー。 これにより、システム全体のインストールで発生する問題を回避しながら、ローカルを追加することもできます jekyll ユーザーへのコマンド PATH.

開ける .bashrc nanoなど、選択したエディターを使用する場合:

  1. nano .bashrc

ファイルの最後に、次の行を追加します。

.bashrc
# Ruby exports

export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH

ファイルを保存して閉じます。 エクスポートをアクティブ化するには、次を実行します。

  1. source ~/.bashrc

それが完了したら、使用します gem Jekyll自体と、gemの依存関係を管理するBundlerをインストールします。 これには時間がかかる場合があることに注意してください。

  1. gem install jekyll bundler

次に、ファイアウォール設定でJekyllの開発Webサーバーとの間のトラフィックが許可されていることを確認します。

ステップ2—ファイアウォールを開く

ファイアウォールが有効になっているかどうかを確認しましょう。 その場合、当社のサイトへのトラフィックが許可されていることを確認し、Webブラウザで開発サイトを表示できるようにします。

  1. sudo ufw status

ステータスが表示されている場合 inactive、次のコマンドを実行します。

ufw allow OpenSSH
sudo ufw enable

これにより、システムの起動時にファイアウォールを実行できるようになります。 次のプロンプトが表示される場合があります(続行するには「y」で確認してください)。

Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup

この場合、SSHのみが許可されます。

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

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

  1. sudo ufw allow 4000

これで、ファイアウォールルールに次のものが含まれるはずです。

Output
To Action From -- ------ ---- OpenSSH ALLOW Anywhere 4000 ALLOW Anywhere OpenSSH (v6) ALLOW Anywhere (v6) 4000 (v6) ALLOW Anywhere (v6)

これで、ソフトウェアがインストールされ、必要なポートが開いたので、開発サイトを作成する準備が整いました。

ステップ3—新しい開発サイトを作成する

ホームディレクトリから、Jekyllのを使用しています new と呼ばれるサブディレクトリにサイトのスキャフォールディングを作成するコマンド www:

  1. cd ~
  2. jekyll new www

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

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

ジキルの new コマンドは、次のディレクトリとファイルを作成します。

...
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│   └── 2020-05-29-welcome-to-jekyll.markdown
└── _site

これらは実際のWebサイトファイルではありません。 これらは、Jekyllが静的サイトを作成するために使用するソースファイルです。 Jekyllは、特定の名前、命名パターン、およびディレクトリ構造に依存して、コンテンツのさまざまなソースを解析し、それらを静的サイトにアセンブルします。 新しい投稿やページを追加するときは、既存の構造を使用し、Jekyllの命名規則に従うことが重要です。

ヒント: tree コマンドラインからファイルとディレクトリの構造を検査するための便利なコマンドです。 次のコマンドでインストールできます。

  1. sudo apt install tree

使用するには、 cd 必要なディレクトリに入力して入力します tree または、開始点へのパスを tree /home/sammy/www

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

Jekyllの組み込みの軽量Webサーバーは、ディレクトリ内のファイルを監視し、変更が保存されるたびに静的サイトを自動的に再生成することにより、サイト開発をサポートするように調整されています。

リモートサーバーで作業しているため、ローカルマシンからサイトを参照するためにホストアドレスを指定します。 ローカルマシンで作業している場合は、実行できます jekyll serve ホスト設定なしで接続します http://localhost:4000.

  1. cd ~/www
  2. 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.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│   └── 2020-05-29-welcome-to-jekyll.markdown
└── _site
    ├── 404.html
    ├── about
    │   └── index.html
    ├── assets
    │   ├── main.css
    │   │   ├── main.css.map
    │   └── minima-social-icons.svg
    ├── feed.xml
    ├── index.html
    └── jekyll
        └── update
            └── 2020
                └── 05
                    └── 29
                        └── welcome-to-jekyll.html

また、現在のディレクトリの監視を開始しました。 www、変更の場合。 投稿またはページへの変更が保存されるとすぐに、静的サイトが自動的に再構築されるため、 _site フォルダ。

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

注:大規模なサイトで作業している場合は、 --incremental buildは、変更されたファイルを再生成するだけで、変更を加えるたびに再構築を高速化できますが、この小さなサイトでは必要ありません。 この実験的な機能の詳細については、JekyllのWebサイトを参照してください。

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

結論

このチュートリアルでは、Jekyllをインストールし、自動生成されたコンテンツを含む開発サイトを作成しました。 Jekyllについて詳しくは、このテーマに関する他のチュートリアルをご覧ください。