How to build a blog with Jekyll

Sep 13, 2025

操作方法

（イメージクレジット：ネット）

このチュートリアルは、静的なサイトジェネレータを聞いたことがあり、彼らが自分のサイトを1つを使って自分のサイトを構築することを望んでいたいと判断しました。ここにあなたが見せてくれます ブログを起動する方法 Jekyllを使う

ターミナルの基本的な知識は良いですが、コマンドはすべてかなり簡単なので、あなたはすべての順番に従うことができるはずです。 GitHubページのサイトはシーンの後ろのJekyllによって搭載されているので、GitHubページと一緒に使用されると、それはあなたのウェブサイトを無料でホストし管理する方法を作成します（私たちの最高のリストを見なさい ウェブホスティング 他のオプションのためのサービス、または別のタイプが欲しいのであれば、私たちのリストを参照してください。 ウェブサイトビルダー ）。

このチュートリアルはあなたがMac上にいると仮定しています。 JekyllがRubyプログラムであるため、Windowsで実行することは可能ですが、正式にはサポートされていません。 Windowsに沿ってフォローしている場合、ここに飛び越えてください Rubyを設定するのに役立ちます。

このチュートリアルを完了したら、Jekyllブログを作成し、その機能とテンプレート言語が個人ブログを構築できる方法を学びました。これはあなた自身のサイトを開発するための素晴らしい出発点です。そして、あなたがたくさんのデザインのアイデアやメディアファイルを持っているのであれば、確実にそれらを安全に保つことを確実にしてください。 クラウドストレージ 。

このチュートリアルのファイルを見つけます ここに 。

10最高の静的サイトジェネレータ

01.セットアップ

Mac上ではデフォルトでRubyがインストールされている必要がありますが、入力して確認しましょう ruby -v. あなたの端末に。

これで、私たちは実際にサイトで実行されているJekyllを実行することができます。あなたがあなたのサイトを構築して単にタイプするディレクトリにあることを確認してください gemはJekyll Bundlerをインストールします ;あなたのコンピュータはその後、サイトを実行するために必要なすべての依存関係を獲得します。

02.ローカルまたはビルドにサービスを提供します

Jekyllと一緒に使用する2つの主なコマンドがあります - サーブ そして ビルド 。サイトをローカルに実行するには ジキルサービス コマンドラインで。これは、変更をプレビューできるようにhttp://127.0.0.1:4000のバージョンを実行します。あなたのマシンにgemや他の依存関係がインストールされている場合、このコマンドは依存関係のバージョンの不一致により失敗する可能性があります。この場合は、試してください バンドルexec jekyllサービス 代わりに。同じことを実行するが言葉で ビルド サイトをコンパイルするだけです。

03.スターターファイルを入手してください

このチュートリアルに付属のファイルをこの時点でコピーして、仕事をするための基礎を与えます。これにより、ホームページ、ブログリスト、詳細ページ、およびサイトの資産構造が得られます。ページをhttp://127.0.0.1:4000に更新し、あなたは私たちにビルドする基本的なページがいくつかあるようになります。 Jekyllサイトがどのように機能するかの概要を概要しましょう。

Jekyllサイトは、追従しやすい方法で構造化されています。レイアウトと含めるように、コレクション（投稿の種類）は独自のフォルダに保持されています。あなたは '_site'フォルダに気付くでしょう - これはあなたが実行したときにJekyllが使用するフォルダです。 jekyll build. コマンド。

Generate CSS — CSSの生成のために9月26日にロンドンで私たちに参加してください - あなたのチケットを予約するために画像をクリックしてください（画像クレジット：未来）

04.設定

Build a blog with Jekyll: Configuration — Jekyllはあなたに仕事をするための素晴らしい構造と管理が簡単な設定ファイルを提供します（イメージクレジット：ネット）

テキストエディタで_config.ymlを開き、独自の詳細を追加します。チェックする1つの重要な領域は、ベースのURLを設定することです。これは、サイトがロードされているフォルダです。Configファイルは、WordPressテーマを構築している場合は、WP-Configファイルと組み合わされたグローバルオプションを使用するのと似ています。

タイトルやメタの説明、あなたの電子メール、そしてソーシャルアカウントなどのコア情報を制御することができ、そのサイトはコレクションや使用されているプラグインなどのコンパイルが必要です。あなたが達成したいものに応じて、ページのHTMLとマークダウンの混在を使うことができます。ただし、ホームページやリストページなどのカスタムページは通常HTMLになりますが、POSTやセットテンプレートを使用するその他の一般ページはマークダウンになります。

05.フロントの問題

フロントマターは、ファイル上部のYAMLのスニペットです。 Jekyllはそれを使用して変数を保持します。 about.mdファイルを調べて、あなたは私たちが使用するタイトルを設定します。

06.液体タグ

Build a blog with Jekyll: Liquid tags — 液体タグはテンプレートを扱う簡単な方法を提供し、テーマの買い物の中でも使用されています（イメージクレジット：ネット）

Jekyllは液体を使用します - オブジェクト、タグ、フィルタを使用するテンプレート言語。私たちはを使います オブジェクト ダブルブレースに囲まれたタグ {{}} ロジックの前面変数とブレースとパーセンテージサインを出力する {%%} 。

07.ナビゲーションを構築します

静的ナビゲーションではなく、コンテンツをテンプレートから分離するためにConfigファイルの電源を使用します。ナビゲーション項目を「データ」フォルダ内の設定ファイルとして保持し、それらをNavigation.htmlでループします。テンプレートに戻ることなく、私たちが今後、私たちが前進したいページやリンクを入力するだけです。 POSTの開始時にNavigation.ymlやFront Mettorなどの設定ファイルを編集するときは、迷線がエラーの原因となるため、空白に慎重に注意してください。

設定ファイルは既に設定されているので、「navigation.html」に次のコードを入力してください。

 {Site.Dataの項目の％..Navigation％}
     ＆lt; href = "{{{{{site.baseurl} / {{item.link}}" page.url == item.link％} class = "current" {％endif％}＆gt; {{eittle "} / A＆GT;}}}}}}}}}}}}}}}}}}}}}}}}}
   {％endfor％}

私たちは、ナビゲーション構成ファイルを調べて、基本的にループの標準である各エントリのリンクと名前をループアウトするための液体論理タグを使用しています。

08.ホームページを作成します

私たちのホームページで、私たちは私たちの最新のブログ投稿を英雄として挙げ、それから私たちの概要のページからリンクを通って狙撃を受けます。英雄ブロックから始めましょう。 index.htmlを開き、次のコードを追加します。

 {％assign post = site.posts.first％}

最初に最新の投稿を割り当ててから、POSTの前面に設定されているサムネイル画像を参照します。投稿者は液体フィルターを使います マークオフ マークダウンをHTMLに変換するには。

その場所では、aboutページからティーザーを追加しましょう。以下を追加してください。

 DIVクラス= "C機能"＆gt;
   {Site.Pages％}のページの場合
       {％if page.url == '/about.html'％}
           ＆lt; img src = "{{page.profile_image.small}" Alt = "Profie Picture" class = "c-feature__Image" / gt;
           ＆lt; divクラス= "c-feature__text"＆gt;
               ＆lt; h2＆gt; a href = "{{page.url}}"} "{{page.title}}}
               ＆lt; p＆gt; {{page.intro}}}}}}}
           ＆lt; / div＆gt;
          
       {％Endif％}
   {％endfor％}
＆lt; / div＆gt;

今回はAを使用しています ために サイト内のページをチェックしてループします。私たちは使っています Page.url. Aboutページを除外してから、ページの情報を出力するために類似のテンプレートスタイルをヒーローに使用します。

09.ブログリスト

Build a blog with Jekyll: Blog list — CSSグリッドとFlexBoxを使用するサイトのポストの残りのカードのシンプルなカードレイアウト（イメージクレジット：ネット）

ホームページを作成して、ブログリストページに移動できます。リストページを作成するには、再度LICHLEATタグを使用して「POSTS」フォルダ内のすべてのファイルをループするロジックを提供します。

ホームページと同じプロセスに従うので、ヒーローはあなたのために行われます。 'blog.html'の英雄の下に、次のものを追加します。

再びAを使用します ために 投稿コレクションを通過するためにループします。しかし、私たちはすでに最新の英雄をループアウトしていたので、私たちはこのループを投稿を開始するためにオフセットしました。液体フィルタは、日付を選択したフォーマットに変換するために使用されます。

ブログの詳細ページ

今へ行くのに長くはありません：私たちはすべての基本的な要素をほぼ一緒にします。アドレスに残された1つの重要な側面はナビゲーションです。あなたがブログ投稿を読んでいるとき、あなたはより循環して読む方法が必要です。ページ変数を使用して、当サイトにいくつかの素晴らしいページ区切りを追加できます。 LayoutsフォルダにPOST.HTMLを開き、次のものを追加します。

 DIVクラス= "C-PAGINIX"＆GT;
   {％Page.previous％}
   ＆lt; div＆gt;
       ＆lt; H3＆GT;前

＆lt; p＆gt; {{page.previous.title}}}}}}}}} ＆lt; p＆gt; a class = "btn" href = "{{page.previous.url}}" {{page.previous.url}} "＆gt;読み込んだポスト＆lt; / p＆gt; ＆lt; / div＆gt; {％Endif％} {％if page.next％} ＆lt; div＆gt; ＆lt; H3＆GT; Next; H3＆GT; ＆lt; p＆gt; {{page.next.title}}}}}}}}}} ＆lt; p＆gt; a class = "btn" href = "" {{page.next.url}} "{{page.next.url}}"＆gt;読み込んだポスト＆gt; / p＆gt; ＆lt; / div＆gt; {％Endif％} ＆lt; / div＆gt;

私たちはを使います Page.previous そして Page.Next クリックする投稿があるかどうかを確認する変数。その後ブロックを出力して投稿のタイトルとリンクを含めることができます。

11.ビルドして公開します

GitHub Pagesは私たちのためにSASSファイルをレンダリングします。 jekyll build. コンパイルされたファイルは_Siteフォルダに作成されます。 GULPファイルやWebPackはありません。サイトのMain Config.ymlファイルの設定としてSASS出力を軽減することもできます。このディレクトリの内容は、選択したホスティングに転送できます。認識することの1つは、GitHubページが実際にJekyllをサポートしているため、ソースとしてマスターブランチを使用してサイトを構築してホストできます。これに関する情報を見つけることができますここに。

この記事はもともと発行320に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここに発行320を購入してください または ここで購読する 。

関連記事：

グリッドとFlexBoxでブログを作成します
最高の無料のブログプラットフォーム
Gatsbyでブログサイトを構築する方法

How to build a blog with Jekyll

01.セットアップ

02.ローカルまたはビルドにサービスを提供します

03.スターターファイルを入手してください

04.設定

05.フロントの問題

06.液体タグ

07.ナビゲーションを構築します

08.ホームページを作成します

09.ブログリスト

ブログの詳細ページ

11.ビルドして公開します

操作方法 - 最も人気のある記事

重力スケッチの使い方

イラストレーターであなた自身の書道ブラシを作成する

Zbrushのビデオゲームのキャラクターを作成する方法

現実的な透明な表面をどのようにレンダリングするか

ナイフツールをマスター

realflowでスプラッシュ効果を作成する

映画館のための世界を築く方法

Scratchからの毛皮の毛皮を作成する

カテゴリ