Jekyllは静的ブログサイトを動的に構築した(Get Started)
5945 ワード
Jekyllは簡単ではありません.正しく見なければなりません.PHP、JSP、Djangoなどと一緒に議論すると、多くの喪失感が減ります.その学習曲線はWordpressにほぼ相当し,ワークフローや構造もほぼ同じである.
JekyllとWordpressの最大の違いは、データベースがないことです.しかし、体験的には大きな違いではありません.データベースを徹底的に廃棄することは、Jekyll式の新しい考え方です.Markdown形式の文章を定期的に更新してホームページに表示し、一緒にサイトにする必要があるからです.デザイナーズデータベースなどを大々的に動かす必要はありません.
簡単に言えば、JekyllはRuby言語に基づく静的ブログサイト作成ツールであり、MarkdownをHTMLページに変換することができます.
しかし、HTMLページには、タイトル、スタイル、日付など、文章によって動的に変化する内容などが必要です.これらはMarkdownをHTMLに変換するだけではありません.多くの内容はMarkdownファイルに指定を明記する必要があります.
注意:JekyllはGithub Pagesと組み合わせて無料ですが、実は完全に独立した製品です.Wordpressのようにどこでも使えます.
インストールJekyll
JekyllをインストールするにはRubyのパッケージマネージャgemでダウンロードする必要があります.Pythonのpipのように:
しかし、本機のgemバージョンが新しくなければjekyllはインストールできないので、公式サイトに従ってrubyから最初からインストールします.
JekyllでWebサイトを作成します(test_blogというフォルダと完全なDemoサイトを自動的に生成します):
カタログの内容は以下の通りです.この中には完全なサイトがあり、直接閲覧を実行することができます.そして、自分のホームページや他のページなどに基づいて、それを修正することができます.
Jekyll new時送信エラー:
エラーが発生すると、プロジェクトフォルダは生成されますが、不完全で実行できません.
問題は、本機のgemもbundlerもあまり新しくないので、更新する必要があります.参照先:https://github.com/rubygems/r...
次のように更新されます.
更新時間が長くなるので、すべてインストールしたら、jekyllを正常に使うことができます.
Webサイトの構築
レンダリングWebサイト
またはWebサイトをリアルタイムでレンダリングするには:
レンダリングコマンドを実行すると、jekyllはMarkdownを指定したテンプレートに基づいて静的Webサイトにレンダリングします.また、Webサイトをネイティブのポートにマッピングし、コマンドラインにヒントを与えるurlリンクを開いてWebサイトの効果を確認することができます.
パブリック・ネットワーク・アクセスの許可
jekyllがパブリックネットワーク上のサーバに配備されている場合、すべての人に公開してアクセスすることができます.構文は次のとおりです.
次のように表示されます.
つまり、パブリックネットワークがjekyllを実行すると、プログラムはバックグラウンドに移行し、終了する必要がある場合は手動でプロセスを閉じる必要があります.
次に、Webサイトの設計時に指定されたポートに基づいて、4000などのサーバファイアウォールにこのポートを開きます.そして
Jekyll Workflowワークフロー
Jekyllを使うのは、最初から難しいことで、ページスタイルを設計したり、全局のルールを設定したりする必要があります.しかし、これらの基本設定が完了すると、後で更新するにはMarkdownファイルを書くだけでいいです.
JekyllカスタムWebサイト
JekyllとWordpressの最大の違いは、データベースがないことです.しかし、体験的には大きな違いではありません.データベースを徹底的に廃棄することは、Jekyll式の新しい考え方です.Markdown形式の文章を定期的に更新してホームページに表示し、一緒にサイトにする必要があるからです.デザイナーズデータベースなどを大々的に動かす必要はありません.
簡単に言えば、JekyllはRuby言語に基づく静的ブログサイト作成ツールであり、MarkdownをHTMLページに変換することができます.
しかし、HTMLページには、タイトル、スタイル、日付など、文章によって動的に変化する内容などが必要です.これらはMarkdownをHTMLに変換するだけではありません.多くの内容はMarkdownファイルに指定を明記する必要があります.
注意:JekyllはGithub Pagesと組み合わせて無料ですが、実は完全に独立した製品です.Wordpressのようにどこでも使えます.
インストールJekyll
JekyllをインストールするにはRubyのパッケージマネージャgemでダウンロードする必要があります.Pythonのpipのように:
$ gem install jekyll
しかし、本機のgemバージョンが新しくなければjekyllはインストールできないので、公式サイトに従ってrubyから最初からインストールします.
sudo apt-get install ruby ruby-dev build-essential
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME=$HOME/gems' >> ~/.bashrc
echo 'export PATH=$HOME/gems/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
gem install jekyll bundler
JekyllでWebサイトを作成します(test_blogというフォルダと完全なDemoサイトを自動的に生成します):
$ jekyll new test_blog
カタログの内容は以下の通りです.この中には完全なサイトがあり、直接閲覧を実行することができます.そして、自分のホームページや他のページなどに基づいて、それを修正することができます.
Jekyll new時送信エラー:
Bundler: ruby: No such file or directory
私のMac機ではRubyプロジェクトをしたことがなく、gemの使い方も分かりません.すべての元の構成後、gem install jekyll
を使用しても問題ありませんが、jekyll new ..
の場合、このエラーが送信されます.Bundler: ruby: No such file or directory -- /usr/local/lib/ruby/gems/2.5.0/gems/bundler-1.16.1/exe/bundle (LoadError)
エラーが発生すると、プロジェクトフォルダは生成されますが、不完全で実行できません.
問題は、本機のgemもbundlerもあまり新しくないので、更新する必要があります.参照先:https://github.com/rubygems/r...
次のように更新されます.
# Install latest version of Rubygems
gem update --system
# Install latest version of bundler system-wide
gem install bundler
更新時間が長くなるので、すべてインストールしたら、jekyllを正常に使うことができます.
Webサイトの構築
レンダリングWebサイト
$ cd test_blog
$ jekyll serve
またはWebサイトをリアルタイムでレンダリングするには:
$ jekyll server --watch
--watch
パラメータを追加すると、jekyllはリアルタイムでファイルを監視します.markdownファイルが追加されたり、layoutテンプレートが変更されたりすると、すぐに生成サイトをレンダリングし、常に更新を維持します.レンダリングコマンドを実行すると、jekyllはMarkdownを指定したテンプレートに基づいて静的Webサイトにレンダリングします.また、Webサイトをネイティブのポートにマッピングし、コマンドラインにヒントを与えるurlリンクを開いてWebサイトの効果を確認することができます.
パブリック・ネットワーク・アクセスの許可
jekyllがパブリックネットワーク上のサーバに配備されている場合、すべての人に公開してアクセスすることができます.構文は次のとおりです.
$ jekyll serve --detach --host 0.0.0.0
#
$ jekyll serve --force_polling -H 0.0.0.0 -P 4000
次のように表示されます.
つまり、パブリックネットワークがjekyllを実行すると、プログラムはバックグラウンドに移行し、終了する必要がある場合は手動でプロセスを閉じる必要があります.
次に、Webサイトの設計時に指定されたポートに基づいて、4000などのサーバファイアウォールにこのポートを開きます.そして
http:// IP:4000
というようなものでアクセスできました.ポート番号を付けてアクセスしない場合は、_config.yml
でポート番号を80に設計します.(しかし常に衝突があり解決が必要)Jekyll Workflowワークフロー
Jekyllを使うのは、最初から難しいことで、ページスタイルを設計したり、全局のルールを設定したりする必要があります.しかし、これらの基本設定が完了すると、後で更新するにはMarkdownファイルを書くだけでいいです.
JekyllカスタムWebサイト
Jekyll new
命令でWebサイトの構造を新規作成すると、フォルダに多くのファイルが表示されます.これらのファイル構造はどのような役割を果たしているのか、私たちが学ばなければならないのです.Jekyll
_config.yml
ファイル:これはあなたが最初に修正する必要があるものです.サイト全体の共通設定は、サイトのテーマ、名前、紹介、ドメイン名、Githubユーザー名など、ここに保存されています..yml
は、.ini
のようなプロファイルタイプです._site
フォルダ:これはあなたの完全な静的なウェブサイトを保存するフォルダですが、これはあなたが触れる必要のないフォルダで、Jekyllがあなたの設定やテンプレートなどの内容に基づいて、自動的に生成した静的なウェブサイトです._layout
フォルダ:様々なページテンプレートが格納されている場所で、ホームページがどのようになっているのか、リストページがどのようになっているのか、ブログの内容ページがどのようになっているのか、これらのそれぞれのページテンプレートはここに置かれています._includes
フォルダ:重複して使用される、比較的固定されたページモジュールをすべて格納します.たとえば、各ページに同じヘッダー、フッター、ナビゲーションバー、サイドバーなどがあります.この中のHTMLファイルは、完全なHTMLページではなく、モジュールにすぎません. 。
_posts
フォルダにすぎないかもしれません.すべてのMarkdownフォーマットファイルを します.あなたのすべてのMarkdownブログの は、ここに いてあります.ファイルの にも があります. えば、data-filename.markdown
でなければなりません.
:
-
_site
フォルダでは、.gitignore
にシールドを する があります.この に されたものはgitで する はありません.また、Github Pagesに くと、Githubエンジンもあなたのディレクトリにこのフォルダを するのではなく、バックグラウンドで ページを します.それがあるのは、 に のデザインで われています. Front-Matter
ヘッダ は、ここではfront-matter
、またはyml-header
と ばれ、Markdownファイルヘッダごとに かれた である. にこの のタイトル、 、 するテンプレート、スタイル、ラベル、 などを して、Jekyllはこれらの によってmarkdownファイルをあなたの む HTMLページに することができます.
ヘッダ の なパラメータは のとおりです.-
layout
:テンプレート を します.つまり、_layout
フォルダのどのHTMLページをテンプレートとして するかを します. -
title
:この のタイトル. -
data
:この の . -
categories
:この の .
「 」はJekyllが した サイトを に れる
Jekyllの と は サイトを することである.しかし、デフォルトでは、 された HTMLページとは、 いて を ることもできません!jekyll serve
を するか、GithubのRepoに れなければなりません. サイトって ですか?! の サイトはHTMLを すればいいのではなく、HTMLをダブルクリックして くとブラウザで が えます.
この し した を けて、 たちは な ツールを っています.それが もよく われるwget
ダウンロードコマンドです.wget
は、WebページまたはWebサイト をダウンロードし、さまざまなファイルのパスを に することができます.コマンドは のとおりです.
$ wget -r --convert-links
Jekyll serve
を して_site
ディレクトリをコンパイルして すると、wgetでローカルのこのサイトをダウンロードすることができます.
Jekyllの
の は めて い:は に なウェブサイトを することができなくて、Jekyllサービスを いてこそウェブページを することができます Macbook airでjekyllサーバを して もなく、CPU は に します. の で、10 s+の が です. トピックのインストールは めて なり、 トピックは にその 、 、 、 を する があり、 コストは に い である. は めて く、gemまたはnodejs の れが またはエラー になりやすい. Jekyllプロファイルのtokens( を するなど)は に され、 されます.すぐにあなたが いたプロファイルは いレポートで いなく されます.