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 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( を するなど)は に され、 されます.すぐにあなたが いたプロファイルは いレポートで いなく されます.