Jekyll チュートリアル: 静的 Web サイトの作成方法

今日のデジタル時代では、オンラインでの存在感を確立し、ブランドを宣伝し、潜在的な顧客にリーチするには、Web サイトの開設が不可欠です。 ただし、Web サイトの作成は困難な作業になる場合があります。

ここで、静的サイト ジェネレーター (SSG) が登場します。SSG を使用すると、複雑なバックエンド システムやデータベースを必要とせずに、美しく、読み込みの速い Web サイトを簡単に作成できます。

この記事では、人気のある SSG の 1 つである Jekyll について紹介し、その仕組みと、それを使用して静的 Web サイトを作成する方法を学びます。

これは、Jekyll を使用して構築するブログ サイトのライブ デモです。

さらに詳しく見てみたい場合は、プロジェクトの GitHub リポジトリにアクセスできます。

ジキルとは何ですか？

Jekyll は、Ruby プログラミング言語で構築および実行される無料のオープンソース SSG です。 Jekyll を使用するために Ruby の仕組みを理解する必要はありません。 マシンに Ruby をインストールするだけで済みます。

Jekyll を使用すると、データベースや WordPress などのコンテンツ管理システムを使用せずに、個人のブログ、ポートフォリオ Web サイト、ドキュメント Web サイトなどのさまざまなタイプの静的サイトを構築できます。

Jekyll が SSG の中で際立っている理由は次のとおりです。

1. 使いやすさ: Jekyll はプレーン テキスト ファイルとマークダウン構文を使用してコンテンツを作成および管理します。つまり、使い始めるのに HTML や CSS の知識は必要ありません。
2. 高速かつ安全: Jekyll はサーバー側のデータベースやスクリプトをまったく扱いません。つまり、脆弱性や攻撃のリスクが少なくなります。 静的 HTML ファイルを生成して、Web サイトを信じられないほど高速かつ安全に作成します。
3. カスタマイズ可能: Jekyll は高度にカスタマイズ可能で、レイアウトやテンプレートを使用したり、機能を拡張するプラグインを作成したりすることもできます。
4. 導入が簡単: Jekyll は、動的なコンテンツ管理システムを必要とせずに、Web サーバーまたはホスティング プロバイダーに導入できる静的 HTML ファイルを生成します。
5. 大規模なコミュニティによる支援: Jekyll にはユーザーと開発者の大規模なコミュニティがあり、サポートが必要な場合やサイトの機能を拡張したい場合に、豊富なリソースが利用可能です。

Jekyll のインストール方法

Jekyll のドキュメントに記載されているように、Jekyll のインストールに進む前に、まずマシンに Ruby をインストールする必要があります。

macOS に Jekyll をインストールする方法

デフォルトでは、Ruby は macOS にプリインストールされていますが、そのようなバージョンの Ruby を使用して Jekyll をインストールすることは推奨されません。古いためです。 たとえば、Apple の最新オペレーティング システムである Ventura では、プリインストールされている Ruby のバージョンは 2.6.10 で、その最新バージョンは 3.1.3 です (この記事の執筆時点)。

これを修正するには、chruby などのバージョン マネージャーを使用して Ruby を正しくインストールする必要があります。 まずターミナルで以下のコマンドを使用して、Mac に Homebrew をインストールする必要があります。

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストールが成功したら、ターミナルを終了して再起動し、次のコマンドを実行して Homebrew の準備ができているかどうかを確認します。

 brew doctor

「 Your system is ready to brew」というメッセージが表示されたら、次のコマンドを使用してchrubyとRuby-install のインストールに進むことができます。

 brew install chruby ruby-install

これで、インストールしたばかりのruby-installパッケージを使用して、Ruby の最新バージョン 3.1.3 をインストールできます。

 ruby-install 3.1.3

これには数分かかります。 成功したら、以下のコマンドでchruby自動的に使用するようにシェルを設定します。

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

これでターミナルを終了して再起動し、次のコマンドを実行してすべてが動作することを確認できます。

 ruby -v

Ruby 3.1.3と表示されるはずです。

これで、Ruby の最新バージョンがマシンにインストールされました。 これで、最新の Jekyll と Bundler gem のインストールに進むことができます。

 gem install jekyll bundler

Windows に Jekyll をインストールする方法

Windows マシンに Ruby と Jekyll をインストールするには、RubyInstaller を使用します。 これを行うには、RubyInstaller Downloads からRuby+Devkitバージョンをダウンロードしてインストールし、インストールのデフォルト オプションを使用します。

インストール ウィザードの最後の段階で、gem のインストールに使用されるridk installステップを実行します。 詳細については、RubyInstaller ドキュメントを参照してください。

オプションから、MSYS2 および MINGW 開発ツールチェーンを選択します。 新しいコマンド プロンプト ウィンドウを開き、以下のコマンドを使用して Jekyll と Bundler をインストールします。

 gem install jekyll bundler

Jekyll が正しくインストールされていることを確認する方法

Jekyll がマシンに正しくインストールされていることを確認するには、ターミナルを開いて次のコマンドを実行します。

 jekyll -v

バージョン番号が表示されている場合は、Jekyll がシステムにインストールされ、正しく動作していることを意味します。 これで、Jekyll を使用する準備が整いました。

Jekyll コマンドと設定

Jekyll を使用して静的サイトの作成とカスタマイズを開始する前に、そのさまざまな CLI コマンドと構成ファイルのパラメーターについて理解しておくとよいでしょう。

Jekyll CLI コマンド

ここでは、一般的な Jekyll CLI コマンドの一部を紹介します。 それらを暗記する必要はありませんが、それらが存在することだけを知っておいてください。この記事の後半でそれらの使用法に気づいたときに、それらの機能がどのようなものであるかを自由に確認してください。

• jekyll build : _siteディレクトリに静的サイトを生成します。
• jekyll serve : サイトを構築し、ローカル マシン上で Web サーバーを起動します。これにより、ブラウザで http://localhost:4000 にあるサイトをプレビューできるようになります。
• jekyll new [site name] : 指定されたサイト名で新しいディレクトリに新しい Jekyll サイトを作成します。
• jekyll doctor : 存在する可能性のある構成または依存関係の問題を出力します。
• jekyll clean : 生成されたサイト ファイルが保存される_siteディレクトリを削除します。
• jekyll help : Jekyll のヘルプ ドキュメントを出力します。
• jekyll serve --draft : _draftsディレクトリにあるすべての投稿を含む、Jekyll サイトを生成して提供します。

これらのコマンドにいくつかのオプションを追加することもできます。 Jekyll のコマンドとオプションの完全なリストについては、Jekyll ドキュメントを参照してください。

Jekyll 設定ファイル

Jekyll 構成ファイルは、Jekyll サイトの設定とオプションを含む_config.ymlという名前の YAML ファイルです。 これは、サイトのタイトル、説明、URL、その他の設定など、サイトのさまざまな側面を構成するために使用されます。

最も一般的に使用される構成オプションのいくつかを次に示します。

• title:サイトのタイトル。
• description:サイトの短い説明。
• url:サイトのベース URL。
• Baseurl:サイトがドメインのサブディレクトリでホストされている場合は、サイトのサブディレクトリ。
• パーマリンク:投稿とページの URL 構造。
• exclude:サイト生成プロセスから除外するファイルまたはディレクトリのリスト。
• include:サイト生成プロセスに含めるファイルまたはディレクトリのリスト。
• paginate:ページネーションを使用する場合にページごとに表示する投稿の数。
• plugins:ロードする Jekyll プラグインのリスト。
• テーマ:デフォルトでは、これはminimaに設定されます。 名前を設定し、この記事で後ほど説明する他の設定を実装することで、他のテーマを使用できます。

構成ファイルにカスタム変数を作成し、サイトのテンプレート、レイアウト、インクルードで使用することもできます。 たとえば、 author_nameという変数を作成し、それを{{ site.author_name }}のようにテンプレートで使用できます。

Jekyll 構成ファイルを変更するには、Jekyll プロジェクト ディレクトリにある_config.ymlファイルをテキスト エディタで開き、変更を加えます。

注:構成ファイルに加えた変更は、次回jekyll buildまたはjekyll serveてサイトを生成するときに有効になります。

Jekyll で静的 Web サイトを作成するにはどうすればよいですか?

Jekyll がマシンにインストールされたので、コマンド 1 つで数秒以内に Jekyll 静的 Web サイトを作成できるようになりました。 ターミナルを開いて次のコマンドを実行します。

 jekyll new joels-blog

「joels-blog」を希望のサイト名に置き換えてください。

次に、Web サイトのフォルダーに移動します。 Jekyll サイトの基本的な構造には、次のようなディレクトリとファイルが含まれていることがわかります。

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

これらのディレクトリとファイルのそれぞれの用途は次のとおりです。

• _config.yml:サイトの設定とオプションを含む Jekyll 構成ファイル。
• _posts:サイトのコンテンツ (ブログ投稿の場合もあります) が含まれるディレクトリ。 これらは、特定のファイル命名規則YEAR-MONTH-DAY-title.MARKUPを持つ Markdown ファイルまたは HTML ファイルです。
• Gemfile と Gemfile.lock: Bundler はこれらのファイルを使用して、サイトが依存する Ruby gem を管理します。
• Index.md:サイトのデフォルトのホームページ。マークダウンまたは HTML ファイルから生成されます。

ただし、Jekyll Web サイトをカスタマイズするために使用できるファイル/フォルダーは他にもあります。 これらのフォルダーには次のものが含まれます。

• _includes:レイアウトやページに含めることができる再利用可能な HTML スニペットを含むディレクトリ。 ナビゲーションバー、フッターなど
• _layouts:ページの構造を定義する HTML レイアウト テンプレートを含むディレクトリ。
• 資産:画像や CSS ファイルなど、サイトで使用されるファイルが含まれるディレクトリ。
• _sass:サイトの CSS を生成するために使用できる Sass ファイルが含まれるディレクトリ。

このファイル構造は Jekyll プロジェクトの強固な基盤を提供しますが、プロジェクトの特定のニーズに合わせて必要に応じて変更できます。

クイック スタート オプション: GitHub テンプレートを使用する

Jekyll CLIを使用してプロジェクトを開始する代わりに、GitHub上のKinstaの「Hello World」Jekyllテンプレートを使用してGitリポジトリを作成できます。 [このテンプレートを使用する] > [新しいリポジトリを作成する]を選択して、スターター コードを自分の GitHub アカウント内の新しいリポジトリにコピーします。

Jekyll サイトをプレビューする方法

Jekyll サイトができましたが、ニーズに合わせてカスタマイズを開始する前に、Web サイトをプレビューしてどのように見えるかを確認するにはどうすればよいでしょうか? ターミナルを開いてプロジェクトのディレクトリに移動し、次のコマンドを実行します。

 jekyll serve

これにより、プロジェクトから生成されたすべての静的ファイルを含む_siteフォルダーが生成されます。 また、Jekyll サーバーも起動し、 http://localhost:4000経由でサイトをプレビューできます。

Web ブラウザで URL にアクセスすると、minima テーマを備えた Jekyll サイトが表示されるはずです。

Jekyll サイトをカスタマイズする方法

Jekyll でサイトを作成し、テーマを使用すると、ニーズに合わせてサイトをカスタマイズできます。 たとえば、新しいページを追加したり、ページのレイアウトを変更したり、一部の項目の表示方法を調整したりすることができます。 これらはすべて、Jekyll を使用すると可能です。

Jekyll におけるフロントマターの仕組み

プロジェクト フォルダーの各ページまたはブログ投稿を開くと、ページ上部の 3 つのダッシュ (—) で囲まれた情報のブロックに気づくでしょう。 これを前付といいます。

これは、ページまたは投稿に関する情報を保存するために Jekyll で使用されるメタデータ形式であり、YAML または JSON で記述することができます。

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

上の例では、前付に投稿のタイトル、説明、日付などの変数が含まれています。 これらの変数は、ページまたは投稿のレイアウトまたはコンテンツで使用できます。

Jekyll は前付を解析し、それを使用してサイトの出力 HTML を生成します。 前付を使用して、レイアウト、パーマリンク、公開ステータスなどのさまざまなオプションを指定できます。

デフォルトのフロントマターを構成する方法

デフォルトの前付を構成することもできるため、類似したファイルに対して同じ前付を定義する必要はありません。 たとえば、各ブログ投稿で同じ作成者の名前とレイアウトが使用されている場合です。 _config.ymlファイル内にカスタムの前付を定義して、すべてのブログ投稿を提供できます。

構造は少し複雑ですが、次のようになります。 これを_config.ymlファイルの最後の構成の下に貼り付けます。

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

ここでjekyll serveコマンドを実行すると、各投稿のレイアウトと作成者を定義しなくても、ファイル内でそれらにアクセスできることがわかります。

注:パスを定義しない場合、すべてのファイルは定義された前付値を使用します。

Jekyll でのページの作成

プロジェクトのルート ディレクトリにファイルを作成すると、そのファイルはページとみなされます。 ファイルに付ける名前は、ほとんどの場合 URL で使用されるため、各ページ ファイルにわかりやすい名前を付けます。

たとえば、URL https://example.com/aboutのページを作成する場合は、 about.htm l またはabout.mdという名前のファイルを作成します。 ファイル拡張子によって、ページ コンテンツに使用するマークアップ言語 (HTML またはマークダウン) が決まります。

ファイルを作成したら、適切な前付とコンテンツを追加します。 ファイルを保存し、ブラウザで Jekyll サイトを更新します。 これで、ファイル名に対応する URL から新しいページにアクセスできるようになります。

Jekyll でのレイアウトの作成

レイアウトを使用して、サイトのページと投稿の構造とデザインを定義できます。 通常、これは主に HTML コードを使用して行われます。 ページのメタデータには、ヘッダー、フッター、メタ情報を含めることができます。

最初のステップは、プロジェクトのルート ディレクトリに_layoutsフォルダーを作成することです。 次に、レイアウトごとにファイルを作成します。ファイルには、レイアウトの目的を反映したわかりやすい名前を付ける必要があります。 たとえば、 page.htm l という名前のファイルを作成して、サイト上のすべてのページのページ レイアウトを定義できます。

HTML または別のマークアップ言語を使用してレイアウトの全体的な構造を定義するのが最善です。

ページ タイトル、コンテンツ、メタデータなど、レイアウトに挿入される動的コンテンツのプレースホルダーを含めることができます。 たとえば、次のようなヘッダー、フッター、コンテンツ領域を含む基本レイアウトを作成できます。

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

この例では、 {{ page.title }}および{{ content }}プレースホルダーは、レンダリングされるページの実際のタイトルとコンテンツに置き換えられます。

この時点で、前付のレイアウト値としてページを使用するページまたは投稿には、このレイアウトが適用されます。 _layoutsフォルダー内に複数のレイアウトを作成し、好みに合わせてレイアウトのスタイルを設定できます。 同様の名前のレイアウトを定義することで、テーマのレイアウトをオーバーライドすることもできます。

Jekyll での _includes フォルダーの仕組み

_includesフォルダーには、Web サイトのさまざまな部分に含めることができる再利用可能なコードのスニペットが含まれています。 たとえば、includes フォルダーにnavbar.htmlファイルを作成し、それを{% include %}タグを使用してpage.htmlレイアウト ファイルに追加できます。

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

ビルド時に、Jekyll はタグをnavbar.htmlのコンテンツに置き換えます。

_includesフォルダーには、HTML、Markdown、Liquid ファイルなど、あらゆる種類のファイルを含めることができます。 主な目的は、サイト全体でコードを再利用できるようにすることで、コードを DRY (Don'trepeat Yourself) に保つことです。

Jekyll での投稿のループ

すべてのブログ投稿を保持する専用のブログ ページを作成することもできます。これは、サイト上のすべての投稿を取得してループすることを意味します。 Jekyll では、 {% for %}タグを使用して簡単に実現できます。

Jekyll Web サイト上のすべての投稿は、 site.posts変数に保存されます。 次のように、ループして{{ post.title }} Liquid 変数を使用して各投稿のタイトルを出力できます。

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

追加の Liquid 変数を使用して、投稿の日付や投稿者など、各投稿に関するその他の情報を出力することもできます。

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

上の例では、日付 Liquid フィルターが各投稿の日付を人間が読みやすい形式にフォーマットしていることに注目してください。

これで、Jekyll サイトに実行できる基本的な書式設定についてのアイデアが得られました。 ただし、ニーズを満たすテーマをいつでも検索して Jekyll サイトに追加できるため、Jekyll サイトを最初から構築するためにこれらすべてを使用する必要はない場合があります。

Jekyll サイトにテーマを追加する方法

簡単に追加できるテーマはさまざまありますが、良い点は、各テーマのインストール方法に関する明確な情報が GitHub の ReadMe ファイルに常に記載されていることです。 テーマを複製するか、Gem ベースのテーマの場合は、プロセスが簡単になります。

この記事では、ブログテーマをインストールし、ブログサイトがKinstaにデプロイされるようにカスタマイズします。 これは世代ベースのテーマであり、GitHub でソース コードと手順にアクセスできます。

gem ベースのテーマを追加するには、サイトの Gemfile を開いて、使用するテーマの gem を追加します。 使用するテーマはjekyll-theme-clean-blogです。 Gemfile 内のデフォルトのminimaテーマを置き換えることができます。

 gem "jekyll-theme-clean-blog"

サイトのディレクトリでbundle installコマンドを実行して、テーマの gem とその依存関係をインストールします。

サイトの_config.ymlファイルに次の行を追加して、使用するテーマを指定します。

 theme: jekyll-theme-clean-blog

この時点で、テーマを使用する準備が整いました。

テーマのレイアウトを上書きしないように、 _layoutsディレクトリ内のすべてのレイアウトを削除する必要があります。

その後、テーマのドキュメントでファイルのレイアウト名を見つけることができます。 たとえば、 jekyll-theme-clean-blogテーマを使用している場合、 index.htmlファイルのレイアウト名はhome 、その他のページはpage 、すべての投稿はpostになります。

最後に、 jekyll serveを実行して、新しいテーマを使用してサイトを構築し、提供します。

それでおしまい！ Jekyll サイトでは、追加した新しい gem ベースのテーマが使用されているはずです。 サイトの_layoutsディレクトリ内のレイアウトを変更することで、テーマをさらにカスタマイズできます。

Jekyll テーマをカスタマイズする

これでテーマがサイトに追加されました。次のアクションは、ニーズに合わせてサイトをカスタマイズし、意図したとおりに動作するようにすることです。 たとえば、各ページと投稿の画像は表示されず、灰色の背景が表示されます。

この問題を解決するには、各ページに前付オプションを追加し、使用する画像へのパスを指定して投稿します。 Jekyllでは画像などのアセットはassetsフォルダーに保存されます。 このフォルダー内に、画像を整理するためのサブフォルダーを作成することができます。

前付ブロックに背景オプションとその画像へのパスを追加できるようになりました。 たとえば、about ページでは、これが前付です。

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

すべてのページと投稿に対してこれを行うと、ページは次のようになります。

もう 1 つのカスタマイズとして、ナビゲーションバーのオプションを調整することができます。 たとえば、連絡先ページが必要ない場合は、そのリンクをナビゲーションバーのオプションから削除する必要があります。 これを行うには、テーマのソース コードを調べ、ナビゲーション リンクを担当するファイルに注目し、そのファイルをプロジェクト内で正確に複製して、不要なオプションを削除します。

ナビゲーション リンクは、_includes フォルダーの navbar.html ファイルにあります。 このファイルを作成し、ソース コードからコードを貼り付け、連絡先オプションを削除したり、必要な新しいオプションを追加したりできます。

プロジェクトを保存すると、ナビゲーション オプションがカスタマイズされていることがわかります。

最後に、最後のカスタマイズとして、すべてのブログ投稿を保持する投稿ページを作成します。これは、このページ上のすべての投稿をループすることを意味します。

ファイル「posts.html」を作成し、次のコードを貼り付けます。

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

保存した画像を反映するように背景画像を自由に調整してください。 上記のコードでは、すべての投稿をループして、このページ上のすべての投稿を表示しています。 投稿ページを保存するとこのようになります。

Jekyll サイトにコンテンツを追加する方法

これで、Jekyll サイトが作成され、ニーズを満たすようにサイトが構成されました。 最後のステップは、コンテンツを追加するか、Jekyll サイトにコンテンツを追加する方法を学習することです。

すべてのコンテンツは _posts フォルダーに保存されます。 各コンテンツは、 YYYY-MM-DD-title.md (HTML ファイルの場合は.html ) という同様の命名規則を持つファイルに保存されます。 たとえば、「My First Post」という名前の投稿を作成する場合は、 _postsディレクトリに2023-03-08-my-first-post.mdを作成します。

次に、各投稿/コンテンツ ファイルの上部に、投稿に関する前付けを必ず追加します。 これには、レイアウト、タイトル、説明、日付、その他の情報が含まれます。

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

次に、HTML タグまたはマークダウン構文を使用して、前付ブロックの下にコンテンツを追加できます。

ファイルを保存すると、Jekyll が自動的にビルドしてサイトに組み込みます。

Jekyll サイトを Kinsta にデプロイする方法

Kinstaは、Jekyllを含む静的ウェブサイトをホストできるクラウドプラットフォームです。 これを行うには、いくつかの設定をセットアップし、コードを GitHub にプッシュし、最後に Kinsta にデプロイします。

前提条件: Jekyll サイトの構成

Gemfile.lockファイルをチェックし、すべてのデバイス用のプラットフォームが含まれていることを確認してください。 すべてのプラットフォームが正しく構成されていることを確認するには、次のコマンドを実行します。

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

次に、 Procfileの作成に進むことができます。このファイルは、サイトの展開時に実行されるコマンドを指定します。 このファイルは、MyKinstaの「プロセス」タブで実行されるコマンドを自動的に更新します。 これは Procfile に追加するコマンドです。

 web: bundle exec jekyll build && ruby -run -e httpd _site

Jekyll サイトを GitHub にプッシュする

この記事では、Git コマンドを使用してコードを GitHub にプッシュしてみましょう。 まず、GitHub 上にリポジトリを作成します。 これにより、リポジトリの URL にアクセスできるようになります。

これで、ターミナルを開いてプロジェクトが含まれるディレクトリに移動し、次のコマンドを実行することで、ローカル Git リポジトリを初期化できるようになります。

 git init

次に、次のコマンドを使用してコードをローカル Git リポジトリに追加します。

 git add

これで、次のコマンドを使用して変更をコミットできます。

 git commit -m "my first commit"

注: 「最初のコミット」を変更内容を説明する短いメッセージに置き換えることができます。

最後に、次のコマンドを使用してコードを GitHub にプッシュします。

 git remote add origin [repository URL] git push -u origin master

注: 「[リポジトリ URL]」を独自の GitHub リポジトリ URL に置き換えてください。

これらの手順を完了すると、コードが GitHub にプッシュされ、リポジトリの URL からアクセスできるようになります。 Kinstaにデプロイできるようになりました。

Jekyll サイトを Kinsta にデプロイする

Kinstaへの導入はわずか数分で完了します。 My Kinstaダッシュボードにアクセスしてログインするか、アカウントを作成します。 次に、GitHub で Kinsta を認証します。

次に、次の手順に従って Jekyll サイトを展開します。

1. 左側のサイドバーで「アプリケーション」をクリックします
2. 「サービスの追加」をクリックします
3. ドロップダウンから「アプリケーション」をクリックします

モーダルが表示され、デプロイするリポジトリを選択できます。 リポジトリに複数のブランチがある場合は、デプロイするブランチを選択します。

その後、このアプリケーションに名前を割り当てることができます。 利用可能な 25 か所の中からデータ センターの場所を選択すると、Procfile が Web プロセス コマンドを自動的に提供します。

アプリケーションのデプロイが開始されます。 数分以内に、Web サイトのデプロイされたバージョンにアクセスするためのリンクが提供されます。 この場合、https: //myblog-84b54.kinsta.app/となります。

まとめ

ここまで、Jekyll がどのように機能するか、そして Jekyll で実行できるさまざまなカスタマイズについて学習しました。 Jekyll は、そのシンプルさ、柔軟性、強力な機能により、静的 Web サイトを作成するための優れたツールであることに同意するのは安全です。

Jekyll の直感的なテンプレート システム、リキッド テンプレート、マークダウンおよびその他のマークアップ言語の組み込みサポートにより、コンテンツ豊富なサイトを迅速に作成および管理できます。

Kinstaのアプリケーションホスティングを無料で利用して、すべての静的ウェブサイトを自由にホストしてください。気に入った場合は、月額7ドルから始まるホビーティアプランをお選びください。

ジキルについてどう思いますか？ Jekyll を利用して何かを構築したことがありますか? 以下のコメント欄でお気軽にあなたのプロジェクトや経験を共有してください。