Static Site Builderで素早くウェブサイトを構築する

このガイドでは、Static Site Generator（ssg）とは何か、なぜそれを使うべきなのか、そしてそれを使ってまったく新しいサイトを構築する方法について説明します。

このガイドは無料でPDFをダウンロードすることができます。このファイルを今すぐダウンロードするご自由にコピーして、お友達やご家族とシェアしてください。

ようこそ、MakeUseOfの静的サイトジェネレータの使い方ガイドへ。このガイドでは、Static Site Generator（SSG）とは何か、なぜそれを使うべきなのか、そしてそれを使って新しいサイトを構築する方法について説明します。その内容を一部ご紹介します。

カタログ

Static Site Generator（SSG）の紹介なぜSSGを使うのか｜SSGの仕組みは？|人気のあるSSGとは｜SSGの選び方
jekyllaのインストール準備ローカルインストールの利点|リモートインストールの利点|前提条件
Jekyllのインストール LinuxにRubyをインストールする｜macOSにRubyをインストール（アップデート）する｜WindowsにRubyをインストールする｜Jekyllをインストールする
プロジェクトのセットアップと構造Jekyllプロジェクトを作成する|Jekyllの構造を理解する
Jekyllコンテンツオーサリングあなたのサイトをプレビューする | アバウトページを更新する | サイトの設定を更新する | Markdownで新しいコンテンツを作成する
ビルドとデプロイビルド|デプロイ
ジキルのテーマ
Jekyllプラグイン

静的サイトビルダー入門

ここ数年、静的なWebサイトが復活しています。最近のWebサイトの多くは、スクリプトとデータベースの内容を組み合わせて動的にページを構築するCMS（コンテンツマネジメントシステム）を採用しています。

その代わりに、静的なサイトのページを作成し、ウェブホストにアップロードします。ちょっと古い感じがしますよね。

なぜssgを使うのか？

インターネットが普及し始めた頃、ウェブページを作成するには、各ページを**ファイルにまとめ、そのファイルをサーバーにアップロードするという方法がとられていた。データベースや高度な管理パネルが普及した今日、これは少し時代遅れに思えるかもしれません。しかし、この2つのトレンドが重なったことで、ssgの人気が高まっているのです。

まず、ウェブ上で活動する多くの非技術系ライター（ブロガーなど）により、Markdownのような軽量なマークアップ言語が非常に普及していることです。こうした形式のコンテンツに人々が慣れ始めたとき**、SSGはそれらをWebサイトに変換する便利なツールになるのです。
第二に、CMSシステムの複雑さは、時としてパフォーマンスやセキュリティの問題につながることがあります（例えば、多くの機能を持たないシンプルなブログでは、CMSのオーバーヘッドに比べれば、静的サイトの方が魅力的です）。

SSGには他にも、オフラインで作業できる、一日の終わりのサイトが非常に早い、などのメリットがあります。Static Site Builderが得意でないのは、非常にインタラクティブなサイトを作ることです。ユーザーが登録してサイトにコメントを投稿したり、独自のページを作成したりすることを計画している場合、SSGは最良の選択とはいえないかもしれません。同様に、製品を販売したい場合は、ユーザー同士がメッセージを送ったり、ドキュメントを共同作成したりできるようにします。しかし、簡単にコンテンツを視聴者に届ける方法を探しているのであれば、ssgは素晴らしい選択肢です。

SSGの仕組みは？

最近のCMSEは、以下のようなストリームを使用しています。

ウェブサイトの訪問者がサーバーにページを要求する。
サーバーはリクエストを受け付け、ユーザーが何を探しているのかを判断する。
サーバーは、主にデータベースに問い合わせるスクリプトを使って、コンテンツを組み立てます。
サーバーは、コンテンツをウェブページの形でユーザーに送り返し、ブラウザーに表示させる。

これに対し、静的サイトは、あらかじめページを構築しておくことで、複雑さをすべて回避しています。そして、訪問者のブラウザはそのページを要求し、サーバーはそのページを返すだけです。

つまり、ssgは本質的にパブリッシングツールであると考えることができるのです。コンテンツを作成し、SSGを実行すると、コンテンツがWebページに変換されます。このページをWebサーバーにアップロードするには、さまざまな方法があります。

良さそうでしょう？興味のある方は、人気のあるssgをいくつか見てみましょう。

人気のあるSSGは？

ウェブサイトStaticGenは、静的サイトジェネレータの主要なリソースです。利用可能なサイトの豊富なリストと、ユーザー投票やGithubのフォークに基づくランキングシステムを提供します。

SSGが使用するプログラミング言語を簡単に確認したり、ドリルダウンして機能の概要を確認したりするために、リストを熟読することができます。これらのリストをもとに、主なssgを以下の属性から検証してみよう。

プログラミング言語：SSG ツールが記述されている言語を記述する。CMSアプリケーションの場合、Webサーバー環境が対応する必要があるため、この点は重要です。ssgの場合、これはまだある程度重要ですが、通常、自分のマシンにインストールできるもの、できないものという点では、より柔軟性があります。
テンプレート言語：テンプレート言語とは，ページ構造の構築や自動化（例えば，特定のページに割り当てられたマークアップの表示など）を行うための言語です。これは、一方はすでによく知っているが、もう一方は知らないという場合に重要なことかもしれません。
(ネイティブ）入力フォーマット：コンテンツを起草するために使用できるテキストマークアップのフォーマット。
(ネイティブ）出力形式：今回はWebサイトの生成に特化しているため、HTML（＋CSS/Javascript）を記載しています。ただし、ジェネレーターによっては、PDFなど他の形式の出力も可能です。
特徴：SSGには他にも便利な機能が含まれている場合があります。よくある例としては、コンテンツファイルにタグや日付を追加したり、出来上がったページをブログ風にアレンジできる「ブログ対応」になっている場合です。

この表は、5つの主要なSSGについて上記をまとめたものです。

ssgを選択

他のアプリケーションと同様に、1) ニーズをどの程度サポートするか、2) 初期テストを行うか、に基づいて利用可能なジェネレーターを選択する必要があります。上の表を見てください。良い意味で飛び抜けた3つの選択肢がありますね。

Jekyllはその中でも最も人気があり、利用可能なテーマ、プラグインなどの面で最も幅広いサポートを持っています。一方、Hugoではコンテンツモデルが大きく、Orgスキーマを入力として使用できる点が気に入っています。また、GitBook経由でサイトをPDFブックに書き出せるのも魅力です。

最終的にJekyllにしたのは、足りない機能をプラグインで実装できるようにしたためです。しかし、決め手はRubyで書かれていることと、ウェブホストがHugoのプログラミング言語GoよりもRubyをサポートしている可能性が高いことでした。(「待てよ、これはローカル番組じゃないのか！」)そうですね、少なくともそうかもしれません。次節で述べるように、これにはメリットとデメリットがあります)。

Jekyllをインストールするための準備

さて、Jekyllに取り組んだので、すべてを配置しましょう。以下のセクションでは、ジェネレーター本体をどこにインストールするか、また、どのような必須ソフトウェアが必要かを決定するのに役立つ情報を提供します。

CMSとは異なり、静的サイトジェネレーターのアプリケーション自体を設置する場所にある程度の自由度があります。これらのシステムは、実際にはウェブサイト訪問者にページを提供するシステムではないことを忘れないでください。彼らは、あるフォーマットのコンテンツを受け取り、それをHTMLに変換します。したがって、SSGをインストールする場所を選択することができます。

ローカル（＝コンテンツを書いているのと同じコンピュータ上）
リモート（＝サイトが置かれているサーバー上）

現地設置のメリット

SSGをローカルにインストールする最大のメリットは、公開前に簡単にプレビューができることです。SSGはプレーンテキストのコンテンツを、さまざまなビジュアルアプリケーションを持つHTMLバージョンに変換して出力しています。サーバーへのコピーに悩む前に、ブラウザでサイトを構築してプレビューできるのは便利です（詳細は後述します）。下の画像は、Hugoサーバーが動作しているところです。すべてのコンテンツを構築してから、Webサーバーを起動し、それを表示するためのURLを与えていることに注目してください。

前述したように、ローカルインストールしか選択肢がない場合もあります。お使いのウェブホスト環境では、SSGの基本的なプログラミング言語に対応していない場合があります。例えば、Rubyがサポートされていない場合、弊社のJekyllコマンドは動作しませんので、サイトを構築することはできません。しかし、管理者権限がない場合を除き、必要なコンポーネントをご自身のコンピューターにインストールすることは問題ありません。

リモートインストールのメリット

この場合、ワークフローは、1）オリジナルのコンテンツを書き、2）オリジナルのコンテンツをサーバーに移動し、3）SSG を動かしてオリジナルのコンテンツを HTML に変換する、という形になります。

前提条件が1セット：SSGを1箇所にインストールすることで、インストールを1回で完了させることができます。
1つのインストール管理：他のソフトウェアと同様に、SSGは新しいバージョンをリリースし、これらの新機能が欲しい場合は、アップデートする必要があります。複数のマシンでSSGを使用している場合は、各マシンごとにアップデートする必要があります。しかし、SSGを中央のサーバーに設置することで、アップデートは一度で済みます。
オーサリングの手間：様々なデバイスで作業する場合、リモートSSGを使えば、ローカルでのオーサリングを気にする必要がなくなります。プレーンテキストで作成するため、ほぼ全てのデバイスを使用することができます。例えば、Android**でテキストエディタを使って記事を作成し、Windowsマシンで校正や画像の追加を行うことが可能です。また、クロスプラットフォーム対応のファイル同期ソリューションを利用すれば、すべてを同期させることも可能です。

一方、変更を公開する前にサイトをプレビューできることは、リモートインストールの利点をはるかに上回ります。だから、1つしか選ばないのであれば、現地設置にすることです。

しかし、この2つは相反するものではないことを忘れないでください。通常の「デフォルト」のワークフローでは、ローカル（例えばWindowsパソコン）にインストールすることを妨げるものはありませんが、モバイル端末から緊急メールを送信するために、サーバーにインストールした状態を維持することも可能です。

前提条件

SSGを一般的に使用するためには、以下のものが必要です。

干渉を受けずにプレーンテキストで内容を書き込めるエディターが良いでしょう（Mac版Lightpaperは上図）。
ウェブホスティング環境。
ホスト環境へコンテンツを転送するためのインターネット接続環境。

ポイント・アンド・クリック "の○○サービスでSSGを考えるタイプの人は、すでにこれらのものをすべて持っているのではないでしょうか。さらに、ソフトウェアの要件も満たす必要があります。ジキルの場合、これらは

Rubyバージョン2.2.5以上
RubyGems, Rubyベースのアプリケーションをパッケージングするためのフォーマット
オープンソースのソフトウェアコンパイラGCCとmake（心配する必要は全くありませんが、Jekyllはバックグラウンドでそれを使用する）。

Jekyllのインストール

linuxでのrubyのインストール

LinuxなどのUnix系OSでは、前提条件として、スナップショット：コマンドラインでの簡単なインストールを数回行うだけです。Ubuntuとその派生版では、以下のAPTコマンドでRuby言語の設定が行われます。

sudo apt install ruby ruby-dev

これは、Ruby言語と、RubyのパッケージフォーマットであるGemsのいくつかを扱うために必要な開発ツールをインストールし、これらのGemsのいくつかをインストールすると、実際に所定の場所にビルドされます。でも、インストーラーが全部やってくれるから、心配しないで。

Rubyが配置されると、Jekyllは、以下の'Jekyllのインストール'のセクションで説明されているようにインストールすることができます。

ruby-on-macosのインストール(アップデート)

macOSには、Rubyの既成のインストールがあります。残念ながら、そのバージョン（少なくともHigh Sierraでは）は2.0.0であり、したがって、Jekyllを実行するには不十分です。

最も簡単なインストール方法は、Homebrewプロジェクト経由で行うことです。Homebrewプロジェクトは、多くの有用なオープンソースプログラムをインストールするためのコマンドラインツールを提供しています。これは、以前MUOで見てきたMacPortsと変わりません。

まず、Homebrew baseをインストールするために、ターミナルアプリケーションに以下を貼り付けてください。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

次に、Jekyllをサポートしたアップデート版のRubyをbrewコマンドでインストールします。

brew install ruby

この時点で、ターミナルを一度閉じてから再度開くと、更新されたバージョンのRubyが取得できることを確認してください（下図）。その後、下記の「Jekyllのインストール」のコマンドを使用してインストールします。

Windowsへのrubyのインストール

WindowsはJekyllで公式にサポートされているターゲットではありません。とはいえ、インストール方法はいくつかあり、macよりも間違いなく簡単なものもあります。

まず、標準の .EXE インストーラでインストールします。RubyInstaller プロジェクトは、最新のバージョン 2.5.0 をサポートしています。このファイルをダブルクリックすると（上図）、おなじみのインストールウィザードが実行されます。
または、チョコレート（Windows用パッケージマネージャ）を使ってRubyをインストールすることもできます。前回のガイドに従ってchocooleyをインストールし、chocoinstallrubyコマンドでRubyをインストールしてください。
最後に、最新のWindows 10を使用している場合、WindowsストアからUbuntuをインストールすることができます。その後、上記のAPTコマンドを使用して、Ubuntuが提供するすべてのオープンソースコードと一緒にRubyをインストールすることができます。

Jekyllのインストール

Rubyがインストールされたら、gemコマンドを使用して、3つのプラットフォームにJekyllとそのすべての依存関係（合計で約25）をインストールすることができます。

gem install jekyll

注：Ubuntuでは、システム全体にインストールするために、sudoを使用して上記を事前に設定します。ユーザーインストールのみ可能ですが、これは問題だと思いました。

最後に、Jekyllのインストールとバージョンを確認することで、確認することができます。

jekyll -v

成功すれば、次のセクションに進み、最初のJekyllウェブサイトをセットアップすることができます。

プロジェクトの立ち上げと体制

jekyllプロジェクトを作成する

今、あなたはJekyllをインストールしているため、あなたの最初のステップは、プロジェクトを作成することです。これは、Jekyllを使用して作成および管理される単一のサイトを表します。次のコマンドを実行すると、カレントディレクトリに新しいプロジェクトが作成されます。

jekyll new awesome-site

これは、awesome siteという新しいディレクトリを作成します。

Jekyllの構造を理解する

Jekyllプロジェクトの構造は、以下のようにいくつかの主要なファイルとサブディレクトリを含んでいます。

_Posts: その名の通り、ブログの記事を配置する場所です。ブログ記事は、「通常のページ」とは異なり、分類に役立つ日付が含まれるほか、任意のカテゴリーで整理することができます。これについては、「コンテンツ作成」の項で詳しく見ていきます。
_Configuration yml: これはサイトの設定ファイルで、YAMLフォーマットで書かれています。 YAMLは構造化された情報のためのマークアップ言語で、設定のための一般的なフォーマットです。コンテンツ制作に入る際には、一部を変更する予定です。
html：他のシステムと同様、訪問者が不明なURLを要求した場合、404ページが表示されます。
Gemfile：Rubyの設定ファイルです。後ほど他のコンポーネントをインストールする際に追加しますが、今のところは変更しないでください。
Index.md：普段からウェブサーバーに慣れ親しんでいる方なら、見覚えがあるはずです。ユーザーがあるURL（例："www.makeuseof.com"）にアクセスすると、一般的なWebサーバーは「index.html」または「index.php」を読み込もうとします。" このドロップファイルは、静的ウェブサイト用の "index.html" に変換されます。

このリストには、1つのものが欠けていることにお気づきでしょうか。ページ！ウェブページがないのに、どうしてウェブサイトが持てるのでしょう？

ウェブサイト用のファイルやフォルダーを自由に追加作成することができます。アンダースコアで始まらない限り、about.mdファイル（上図）またはこれらの任意のフォルダの中で「コンテンツフォルダ」とみなされます。私たちに足りないのは、コンテンツを書くことです。次章では、この点を中心に解説します。

jekyllコンテンツ作成

プレビューサイト

最初にできたことのひとつは、箱から出した状態でサイトがどう動くかを確認することでした。前述のように、ローカルにJekyllをインストールする利点の1つは、その組み込みのWebサーバーを使用して私たちのサイトをプレビューすることが容易であることです。次のコマンドは、そのサーバーを起動し、ブラウザをそのサーバーに向ける方法をお知らせします。

注：プロジェクトのディレクトリからJekyllコマンドを発行することが非常に重要です（すなわち、以下の例では "/home/aron/Documents/awesome site/"）。そうでないと、いろいろなものが足りないというエラーが出ますが、それは正しい場所にいないから起こるように思えるだけです。

出力にあるように、我々は今、ブラウザでhttp://127.0.0.1:4080。以下のように、Jekyllに私たちを歓迎するためのウェブサイトが存在します。

会社概要のページを更新

上の写真では、ヘッダーメニューに「About」のリンクがあるのがわかります。それをクリックすると、Jekyllとその最小限のテーマについてのごみの束でページが表示されます。

でも、私のホームページなんです!パーソナライズしよう。プロジェクトのルートディレクトリにある "about.md "ファイルに、いくつかの価格低下を追加することができます。また、ファイル上部の "front matter "には、"/about/"のURLが指定されていることに注意しましょう。

私たちのブラウザのタブをリフレッシュ（Jekyllのサーバーは、リアルタイムで私たちの変更を受信します）、私たちのウェルカムメッセージは、一番上に表示されます。完璧です!

しかし、今、別のことが明らかになった。タイトルは「My best title」ではなく、「Your best title」です。そして、サイトの説明文に_configureyml'のことが書かれています。直してもらおう。

サイト構成の更新

その_configuration yml（これは無意味なものではなく、実際に重要なものです）ファイルには、以下のように、私たちのウェブサイトに関する重要な情報が含まれています。

ここでの内容の検索と調整は簡単で、1）タイトルの変更、2）説明文の変更、3）Githubのリンクの削除が可能です。ページの変更とは異なり、更新された設定ファイルを取得するためには、Ctrl+C（停止）、jekyll-serve（再スタート）により、サーバーを再起動する必要があります。

しかし、Yarmをいじることは私たちが望むことではありません。そうではなく、ドロッププライスのようなフォーマットでコンテンツを作成できるようにしたいのです。

プライスドロップで新規コンテンツ作成

このガイドの前半で述べたように、ほとんどの静的サイトジェネレータのコンテンツを作成する方法は、価格を下げることです。この非常に人気のある軽量マークアップ言語は、テキストエディタで非常に簡単にウェブページを作成することができます。MUOではこれまで何度も、学ぶ価値のある理由や、Windows、Mac、Linuxに対応した信頼性の高いエディタなどをご紹介してきました。しかし、もしあなたがドロップインの初心者なら、マイケルの素晴らしいドロップイン概説を最初に読んで、詳細を学ぶべきでしょう。

価格が下がれば、最初の記事の作成に取りかかります。YYYY-MM-DD" - title.md" という名前のプレーンテキストファイルを新規に作成するお好きな方法で、名前の最初の部分が日付を表します。このファイルを "the \ posts "ディレクトリに置き、お好きなテキストエディタで開いてください。

元のJekyllのソースファイルは、その前にあるものを除いては、ほとんど標準的なドロップインです。これは、ファイルの最初にYAML形式で表示される設定の一部です(ほら、人気があることを伝えています)。フロントマターを通じて提供できる最も基本的なものは、記事タイトルです。また、被写体（下の例では「投稿」）には、利用可能なレイアウトの中から一つを選択する必要があります。ドロップファイルの一番最初にある、2組の3本のダッシュの間に置いてください。

---title: "Testing Out Some Headings"layout: post---

直前の内容を3本のダッシュで終わらせた後、残りの内容を通常のドロッププライスで記述することができます。Jekyllはあなたが上記の定義されている見出しにこれらを適用するように、直接任意のH1タグを使用しないことをお勧めします。しかし、下部の見出し（2段目、3段目）やその他のテキスト（箇条書きを含む）を追加することで、ページに肉付けをすることができます。

この時点で、投稿を積み重ねることができるようになります。あなたのJekyllサイトから必要なのは、単純な、ジャーナルスタイルのブログであれば、まあ、あなたはそれを持っている。さらに、以下のようなステップを踏むことを検討するとよいでしょう（リンク先にはより詳細な参考文献が掲載されています）。

先に修正した「About」ページなど、他の静的ページを作成します。これらのソースファイルは、プロジェクトのルート、またはあなたが定義したサブフォルダに置くことができることを忘れないでください。
category」キーワードで前のページを分類し、各カテゴリーをフィルタリングするためのログインページを作成します。
直前の「permalink」キーワードを使用して、ページをサイトツリーに整理します。例えば、これでプロジェクトのルートにabout.mdを指定すると、実際に「awesome.com/about"/"」というアドレスが取得できるようになります。

この知識があれば、ポートフォリオや個人ブログ、あるいはスモールビジネスのWebサイトとして使えるWebサイトを作るために必要なものはすべて揃っています。問題は、今のところ、まだデスクトップに限定されていることです。次のセクションでは、サイトを構築するときに起こることを見ていきます（そんなこととは知りませんでしたよね？）.また、構築されたサイトや「生成された」サイトをウェブ上に表示する方法についても紹介します。

ビルドとデプロイ

建設

上のスクリーンショットを見てください。5行目に "Generating... "と出力されているのがわかると思います。

あなたのウェブサイトを提供するために、jekyllはまず、それを構築する必要があります。これは、すべてのマークアップをHTMLに変換し、必要に応じてページを組み立てる（例えば、我々は以前に述べたカテゴリのページなど）。そのため、ブラウザを更新するだけで変更を確認することができるのです。

また、以下のコマンドを使用して、プロジェクトを手動でビルドすることも可能です。

jekyll build

プロジェクトを生成すると、「 \u site 」というサブディレクトリが作成されます。サイトの「ライブ」バージョンが含まれています（この方法については、次のセクションで説明します）。構成はメインプロジェクトと似ていますが、少し違います。

工事期間中、Jekyllは以下のような措置をとります。

マークアップをHTMLに変換しているところです。
ヘッダーやフッターなど、サイトのページに「include」要素を追加する。
テンプレート内の動的スニペットをその値で置き換えます。例えば、すべてのブログ記事を検索して、日付とタイトルをリストに記入するページを作成します。
必要な場所にナビゲーションを作成し、例えば、記事のカテゴリのフォルダ（上の写真の "jekyll"）または "素晴らしい "の "約 "のセクションにあります。メニュー項目 - website.com/about "/".

このプロセスの最後には、Webホスティング環境へ \uサイトディレクトリのコンテンツをプッシュするだけです。

デプロイメント

Jekyllによって生成されたサイトは、動作するように任意の空想のデータベースのインストールを必要としません。窶堋ア窶堙娯堙娯堙娯堙娯堙娯堙娯堙娯堙娯堙娯堙遺堋ア窶堋オ窶堙堋「ツ。など、さまざまな方法で行うことができます。

直接手動でコピーします。面倒なことはありません。
ファイルの同期を行います。SFTP（必要であれば通常のFTP）をサポートする同期ツールを見つけることができれば、 \サイトのディレクトリとWebのルートディレクトリを同期するように設定することができます。rsyncはすべてのプラットフォームで利用可能なオプションであり、GrsyncのUIはそれを簡単に使用できるようにします。
ソースコードの管理。最後に、ブログのように素早く頻繁に変更されるコンテンツについては、ソースコード管理で「生」のコンテンツを管理する必要があります。デプロイメントのオプションとして、ソースコード管理の下に「 \u site 」ディレクトリを設置し、コンテンツの作成・変更時にホスト環境へ「 git push 」による更新を行うことができます。あるいは、本当に賢い人なら、ソースディレクトリのポストコミットフックを試して、更新されたコンテンツをウェブホストにコピーするためにrsyncを使用することができます。

この時点で、Webサイトを作るのに必要なものはすべて揃ったことになります。しかし、すべてを網羅したわけではありません。例えば、デフォルトの最小値のテーマは、ちょっと、ね。欠けている。もう少しシャープなものにしよう。

ジキルのテーマ

あなたのJekyllのウェブサイトのための新しいテーマを見つけることの最も困難なことは、すべてのオプションから選択することです。数百種類あります。Jekyllのテーマのサイトでは、ブラウズ可能な素敵なテーマライブラリを取得するために試してみてください。決まったら、そのホームページの指示に従ってインストールします。

注意：多くのテーマはRubyのgemsとしてパッケージ化されているので、先ほど使った「gem install」コマンドを使うことができます。しかし、これはまだ未完成の段階です。また、テーマによっては、手動でインストールする必要がある場合もあります。

縦長の大きなサイドバーメニューがかっこいいので、テーマ「Hydeout」をインストールすることにします。(ジキルの生態系には、この古典の引用が多く見られます）。Rubyのgemとしてパッケージされているので、元々Jekyllをインストールした時と同じコマンドでインストールできます:.

gem install jekyll-theme-hydeout

その後、新しいJekyllサイトを作成し、1）テーマを含むgemを考慮し、2）実際に現在のサイトにテーマを適用するために、次の2つの変更を行います。まず、ファイル内の以下の行を変更します。

さて、サイトのアクティブなテーマを表すためにHydeout（gem名 "jekyllテーマHydeout "を使用）を使用するchange_configureのymlの設定です。

今すぐJekyllサーバーを再起動し（覚えている、我々は、設定ファイルをタッチした）、あなたの素晴らしい新しいテーマを見てください：。

ジキル・プラグイン

Jekyllプラグインは、新しい入出力オプションの追加、ディレクトリの自動生成、spotifywebプレーヤーなどの機能の埋め込みを支援します。また、コメントなどSSGの欠点として取り上げてきた機能を提供することもできます（例：gem "dischs for jekyll" はdisksサービスをサポートしています）。

ウェブサイトの管理画面を設置し、「静的ウェブサイトCMS」のようなものにする予定です。あとはインストールするだけです。

gem install jekyll-admin

で開発者の指示に従ってGemfileで有効にします。

サイトの新しい管理画面：4080/adminにアクセスします。

概要

このガイドをまとめると、次のことがわかります。

SSGがプレーンテキストコンテンツを整形されたウェブページに変換する方法
SSGの重要な属性と、自分に合った選び方について
Windows、Mac、LinuxにJekyll静的サイトビルダーをインストールする方法
最初のJekyllプロジェクトを開始する方法とその構造はどのようなものです。
マークアップ言語を使ってサイトのコンテンツを作成し、その結果をプレビューする方法
どのようにJekyllの出力を取得し、ローカルコンピュータからWebホストにそれを転送する
あなたのサイトに新しいJekyllテーマをインストールし、選択する方法
Jekyllに機能を追加するアドオンのインストールと使用方法

この知識があれば、Jekyllを使って基本的なコンテンツ中心のウェブサイトを迅速かつ容易に運営することができるはずです。さらに、高速で安全、かつ管理しやすいサイトを目指します。どこにいても、インターネットにアクセスできるかどうかにかかわらず、オンラインと同じようにコンテンツを扱い、作品をプレビューすることができます。

どのウェブホストでもウェブサイトをホストでき、非常に手頃な価格の「**」プランも利用可能です。同時に、モダンで見栄えのするテーマを使ったり、プラグインでCMSの機能を追加したりすることも可能です。

SSGを使ったサイトについて、どう思われますか？自分に合っているか？それともWordPressの方がいいのでしょうか？

2021-03-25 19:23 に公開
閲覧 ( 30 )
分類：プログラミング