前書き
Jekyllは、コンテンツ管理システム（CMS）の利点の一部を提供する静的サイトジェネレーターであり、そのようなデータベース駆動型サイトによってもたらされるパフォーマンスとセキュリティの問題を回避します。 「ブログ対応」であり、日付編成のコンテンツを処理するための特別な機能が含まれていますが、その有用性はブログサイトに限定されません。 Jekyllは、オフラインで作業する必要があり、コンテンツメンテナンスのためにWebフォームに軽量エディターを使用することを好み、Webサイトへの変更を追跡するためにバージョン管理を使用したい人に適しています。
このチュートリアルでは、Jekyll 3.7.3開発サイトをUbuntu 16.04にインストールします。 後のチュートリアルでは、ここで生成されたコンテンツを調査し、同じサーバーに静的サイトを公開し、最終的に実稼働ロケーションに展開します。
前提条件
このチュートリアルを実行するには、次のものが必要です。
-
* sudo権限を持つ非ルートユーザーを持つUbuntu 16.04サーバー*：https://www.digitalocean.com/community/tutorials/initial-server-でこれらの権限を持つユーザーを設定する方法の詳細を確認できます。 setup-with-ubuntu-16-04 [Ubuntu 16.04での初期サーバー設定]ガイド。
この前提条件を完了すると、Jekyllとその依存関係をインストールする準備が整います。
ステップ1-Jekyllのインストール
パッケージリストの更新から始めて、パッケージの最新バージョンとその依存関係に関する最新情報を確認します。
sudo apt-get update次に、Jekyllのインストール後にJekyllのライブラリがコンパイルされるように、Rubyとその開発ライブラリ、および「+ make 」と「 build-essential +」をインストールします。
sudo apt-get install ruby ruby-dev make build-essentialそれが完了したら、ユーザーのホームフォルダーにgemを配置するようにRubyの + gem`パッケージマネージャーに指示するために、 + .bashrc`ファイルに2行を追加します。 これにより、システム全体のインストールで発生する可能性のある複雑さを回避しながら、ユーザーの `+ PATH `にローカルの ` jekyll +`コマンドを追加します。
次を入力して、「+。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の開発ウェブサーバーとの間のトラフィックが許可されることを確認します。
ステップ2-ファイアウォールを開く
まず、ファイアウォールのステータスをチェックして、有効になっているかどうかを確認します。 その場合、サイトへのトラフィックが許可されていることを確認し、ウェブブラウザで開発サイトを表示できるようにします。
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`+ jekyll new `コマンドは ` bundle install +`を開始して必要な依存関係をインストールし、https：//github.com/jekyll/minima [Minima]というテーマを自動的にインストールします。 インストールが成功すると、次のような出力が表示されます。
OutputNew jekyll site installed in /home//www.Jekyllの「+ new +」コマンドは、次のディレクトリとファイルを作成します。
...
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2018-03-19-welcome-to-jekyll.markdown
└── _siteこれらは実際のウェブサイトのファイルではありません。 これらは、Jekyllが静的サイトを_作成_するために使用するソースファイルです。 Jekyllは、特定の名前、命名パターン、ディレクトリ構造に依存して、コンテンツのさまざまなソースを解析し、それらを静的サイトにアセンブルします。 新しい投稿やページを追加するときは、既存の構造を使用し、ジキルの命名規則に従うことが重要です。
ステップ4-JekyllのWebサーバーの起動
Jekyllの組み込み軽量Webサーバーは、ディレクトリ内のファイルを監視し、変更が保存されるたびに静的サイトを自動的に再生成することにより、サイト開発をサポートするように調整されています。 リモートサーバーで作業しているため、ローカルマシンからサイトを閲覧するためにホストアドレスを指定します。 ローカルマシンで作業している場合、ホスト設定なしで `+ jekyll serve `を実行し、 ` http：// localhost：4000 +`で接続できます。
cd ~/www
jekyll serve --host=Output of jekyll serverConfiguration file: /home//www/_config.yml
Source: /home//www
Destination: /home//www/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.645 seconds.
Auto-regeneration: enabled for '/home//www'
Server address:
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また、現在のディレクトリ「+ www 」の変更を監視し始めました。 投稿またはページへの変更が保存されるとすぐに、静的サイトが自動的に再構築されるため、 ` _site +`フォルダー内のファイルに直接変更を加えないことが重要です。
サイトでの作業中にフォアグラウンドで実行されている開発サーバーでこのターミナルを開いたままにしておくと、ページや投稿を追加してコンテンツを変更するときにすぐにフィードバックを受け取ります。
サイトが利用可能になりました。 Webブラウザーでは、 `+ jekyll serve +`の出力に示されているサーバーアドレスとポートにアクセスできます。
image：http：//assets.digitalocean.com/articles/jekyll-1604/jekyll_home_update.png [Jekyllホームページのスクリーンショット]
結論
このチュートリアルでは、Jekyllをインストールし、自動生成されたコンテンツを含む開発サイトを作成しました。 https://www.digitalocean.com/community/tutorials/exploring-jekyll-s-default-content [次のガイド]では、このコンテンツを調べて、Jekyllがソースファイルを静的なサイトに変換する方法を説明し、構成設定に関する決定。