ジキルとGitHubページでサイト/ブログをつくる3つのステップ

一方、あなたのブログとしてWordPressのような完全に機能CMSを設定することができます.一方、ジキルやギャツビーなどの静的サイトを設定することができますが、簡単ですが、高速なブログを燃やす.この記事は、ジキルとシュウのブログサイトを設定する過程をガイドしますGithub Pages . まず、ジキルブログをローカルに設定し、Githubページに展開します.

ジキル島、アメリカ合衆国Unsplash )

導入

Jekyll、汝の公式ウェブサイトjekyllrb.com , は、最小限の高速、および管理するために簡単に構築されている静的サイトジェネレータです.Github共同創設者トムプレストンWernerは、2008年にジキルをつくりました.
ジキルはgithubページの後ろのエンジンです.したがって、我々はコストのGithubページ上でジキルのブログをホストすることができます.驚いたことに、GitHubページはカスタムドメインをサポートします.したがって、我々自身のドメイン名を持っている間、そこでそれを主催することができますblog.example.com ).

Jekyll does what you tell it to do --- no more, no less. It doesn't try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.

-- Jekyll README.md

ジキルについての事実

を使用するMarkdown

を使用するLiquid Templates

ウェブサイトの0.01 %は、Jekyllを使いますSource )

ジキルは、Ruby Gem ローカルコンピュータでは.

JIKYLLはリクエストごとにファイルを解析しません.これは静的なページを作成し、それらを_site ビルド上のフォルダ.ファイルは静的にサーバを通して提供されます.

ジキルはデータベースを使用しません.

Demystification :ジキルにとって新しい人々の間の共通の混乱は、ブログソフトウェア(またはコンテンツ管理システム)としてジキルを考慮している-それはない!ジキルは、ファイルを解析するエンジンです.WordPressでは、Webベースの豊富なエディタで書くことができますし、コンテンツを公開します.しかし、Jekyllでは、プレーンテキストエディターでMarkdownでコンテンツを記述します.次に、新しい更新プログラムをオンラインで公開します.
(これでうまくいっていることを確認してください)

必要条件

コーディングの知識は、ジキルを設定するか、使用する必要はありませんが、次の概念の理解が必要です.

これはどのようにコンテンツがジキルで書かれています.それはマークダウンを学ぶために多くの時間がかかりません.チェックアウトMarkdown cheatsheet .

git≠--コードをバージョン管理するために使用されます.我々のコードをホストするためにGithubを使用するので、Gitバージョン管理に精通する必要があります.あなたがそれに精通していないならば、私はあなたがGit Handbook Githubによる.

コマンドラインは、コマンドラインを使用して少し経験が不可欠です.あなたがその経験を持っていないならば、心配しないでください.あなたはどのようにコマンドラインを開くかを知る必要がありますフォルダー(OSを使用して検索Google)に移動します.

(非DEVSに注意してください.プロセスは圧倒的なようですが、簡単です.

ジキルの設定

工程を3段階に分けていきたいのですが.

Jekyllのローカル設定

GithubとGitHubページの設定と配備

カスタマイズ

ローカルでジキルを設定する

ジキルはRubyで書かれています.それで、あなたは最初にそれをあなたのコンピュータでインストールしなければなりません.

Official Installation Guide for Ruby

次にRuby Gemsを2つインストールする必要があります(Ruby GemsはRubyプロジェクトに機能を追加するパッケージです)
ここでは、jekyll ○○bundler 勘を用いてgem Rubyのインストール後に利用可能なコマンド.コマンドラインを開き、次のコードを実行します.

gem install jekyll bundler

次に、新しいブログが存在するフォルダに移動します.(例:Windowsでは、cd F:\MyProjects )
次に、次のコマンドを実行して新しいJekyllサイトをインストールします.

jekyll new my-blog

これにより、jekyllファイルはmy-blog カレントディレクトリにある.次に、そのフォルダーに移動します.

cd my-blog

最終コマンド

bundler exec jekyll serve

これは、新しく作成された静けさのサイトhttp://localhost:4000 . あなたのWebブラウザ上のURLを参照してください、あなたの美しいJekyllサイトを参照してください.
そこで、いくつかのプレースホルダの値[email protected] . 我々は彼らを変えて、現在我々の最初のポストを書きます.

設定の変更

オープンノー_config.yml そして、いくつかの編集を行います.それはYAMLファイルです.ありがたいことに、Jekyllの設定ファイルはYAMLの構文を説明します.そこで、ファイルを編集する前に、指示を参照してください.

title: My Cute Jekyll Blog
email: [email protected]
description: >-
  This is my cute jekyll blog. I post some awesome stuff every day.
baseurl: ""
url: "https://mycutejekyllblog.com"
twitter_username: MyCuteJekyllBlog
github_username:  MyCuteJekyllBlog

角serve Countコマンドは、コンテンツやデータファイルを編集すると静的コンテンツを自動的に更新します.ただし、編集後_config.yml , あなたはサーバーを再起動する必要があります!

最初のブログ柱をつくること

すべての投稿は_posts フォルダ.
すべてのポストはYEAR-MONTH-DAY-title.md  format. 以下に例を示します:

2020‐02‐16‐to‐to‐to‐up‐早期MD

2020‐02‐20 Best‐Toolers‐遠隔‐遠隔チームMD

すべての投稿を開始するFront Matter , 三重点線の間のYAMLコード.

--------
layout: post
title: Best Tools for Remote Teams
bestTool: SomeTool
--------

前件では、定義済み変数の値を設定するか、新しい変数を定義できます.上の例では、layout ○○title は、定義済みの変数であるbestTool は、次のようにページにアクセスできる新しい変数です.
すべてのブログ柱は、レイアウトタイプpost .

--------
layout: post
title: Best Tools for Remote Teams
bestTool: SomeTool
--------

<h2>The Best Tool is {{ page.bestTool }}</h2>

さて、あなたはブログ記事を作成する方法を知っている.つを作成し、それを_posts フォルダ.次に、サイトをリロードします.あなたがリアルタイムで新しい更新プログラムが表示されます.

2 . githubとgithubページの設定と展開

今まで、我々は、我々の最初のポストを公開し、私たちのジキル語のブログをローカルで作成し、カスタマイズされた.
さあ、展開します.
まず第一に、我々はバージョン1を使用して当社のサイトを制御する必要がありますGit . サイトのフォルダに次のコマンドを実行します.

git init
git add .
git commit -m "Initial Commit"

ジキルをインストールするとき、自動的に.gitignore 少なくとも以下の内容を持つルートファイル.(そうでなければ、1つを作成する)

_site
.sass-cache
.jekyll-metadata

その後、Githubとcreate a new repository えへんyour_username.github.io .
次に、リポジトリのHTTPS URLをコピーします.

次に、リモートリポジトリを追加し、コードをプッシュします.(リンクを自分のものと置き換えるようにしてください)

git remote add origin https://github.com/HungryMan/hungryman.github.io.git
git push origin master

完了!お客様のサイトは現在利用できませんyourusername.github.io .畝🎉

郵便の更新

ポスト(またはポスト)を更新した後、あなたがしなければならないすべては、変更をコミットして、押すことです.

git add .
git commit -m "Updated x post"
git push origin master

カスタマイズ

いくつかのことをカスタマイズし、静的サイトに機能を追加することができます.

1 .コメントを追加する

静的サイトにはデータベースがありません.ですから、あなたのサイトでサードパーティのコメントシステムを使用する必要があります.私たちはあなたを使用することをお勧めHyvor Talk それは高速、無料、広告、無料、完全にカスタマイズ可能なので、あなたの新しいサイトにコメントを追加するには、それだけで数分を設定するには(コピーして貼り付けのコード).
参照How to add Hyvor Talk comments to Jekyll?
読書を読むWhy Hyvor Talk is a better option for static sites than its alternatives?

2 . permalinkの変更

デフォルトでは、ブログのURL構造/:categories/:year/:month/:day/:title . しかし、search engines love (とユーザーも)簡潔で記述的なURL.
えへんhttps://mywebsite.com/on-page-seo ええよりもhttps://mywebsite.com/2020/01/20/on-page-seo .
へのPermalinkを加えてください_config.yml .

permalink: /:title

についてもっと学ぶpermalinks ここです.

カスタムドメインの設定

まず、ドメイン登録者からドメインを購入する必要があります.
そのあと、cnameレコードをDNS zone ○yourusername.github.io .
次に、CNAME あなたのサイトのルートで.それから、あなたのドメイン名をそこに加えてください.

blog.example.com

最後に、変更をコミットしてプッシュします.(郵便を更新したように)

ジキルのテーマを変える

一般的なテーマを使用しないでください.あなたのウェブサイトのブランドの新しい、美しいテーマをして下さい.そこに無料でプレミアムのテーマの何千もあります.ちょっと探す.それらの多くを見つけるでしょう.
を変更する方法を参照してくださいJekyll Themes .

結論

この記事では、ジキルサイトで静的なブログを構築する方法について議論しました.あなたが開発者であるならば、プロセスはケーキでなければなりません.しかし、ジキルでブログを設定するにはあまり時間がかかりません.また、コンテンツの書き込みと更新は非常に簡単です.設定中にエラーが発生した場合は、下記をお知らせください.
読んでくれてありがとう!✌
このポストはHyvor Talk Blog