GitHubPagesを使用して10分で無料の静的サイトを作成する方法

静的サイトは大流行しており、正当な理由があります。それらは非常に高速であり、サポートされるホスティングサービスの数が増え続けているため、セットアップが非常に簡単です。

ここでは、静的サイトの誰が、何を、いつ、どこで、なぜ行うのかについては説明しません。私はあなたが彼らが何であるかについて少なくとも漠然とした考えを持っているか、または単にあなた自身のサイトを作りたいと思っていて、他の詳細を気にしないと仮定しています。いずれにせよ、この投稿はあなたのためです。

まず、私がこれをできるだけ幅広い読者のために書いていることを知ってほしい。従うのにプログラミングの知識は必要ありませんが、コマンドラインとGitにある程度精通していると大いに役立ちます。

では、GitHubを使用して10分で静的サイトを作成するにはどうすればよいでしょうか。

静的コンテンツを提供するために特別に設計されたGitHubPagesと、Jekyllと呼ばれる静的コンテンツジェネレーターの2つの特定のツールを使用します。

Jekyllは静的サイトを簡単に作成するためのRubygemであるため、Jekyllを使用する場合は、コンピューターにRubyをインストールする必要があります。OSXをお持ちの場合は、Rubyのバージョンを既にお持ちである可能性があります(ただし、更新が必要な場合があります)。そうでない場合、またはWindowsコンピューターを使用している場合は、Rubyのインストールでインストールの詳細を確認できます。

それが邪魔にならないように、新しいターミナル未亡人を開いて、と入力しgem install bundler jekyllます。これにより、Bundler(Rubyパッケージ管理ツール)とJekyllがインストールされます。

これらのgem(Rubyパッケージ)がインストールされJekyll new my-static-siteたら、Jekyllのジェネレーターを実行して新しいディレクトリにプロジェクトを作成するように入力します(任意の名前を付けます)。サイトが作成されたら、cd my-static-site(またはcdプロジェクトと呼んだものを)入力して、新しく作成したサイトディレクトリに移動します。

プロジェクトをテキストエディタで開くと、Jekyllが作成したいくつかのファイルとフォルダが表示されます。今のところ、Gemfile(Gemfile.lockではなく)だけを気にする必要があります。Gemfileは、プロジェクトの実行に必要な関連するすべてのRubyパッケージを管理するRubyファイルです。

このファイルには、Jekyllバージョンの行が含まれています。コメントアウトしてください。

#gem "jekyll", "~> 4.0.0" 

次に、次の行を追加します。

gem "github-pages", group: :jekyll_plugins 

GitHub Pages gemをインストールすると、多くの問題が発生する可能性があります。依存するgemが古くなったり、ローカルにインストールしたgemがGitHubPagesに対して最新すぎる場合があります。

これにより、Jekyllサイトをローカルで構築してテストすることが困難になる可能性があることがわかりました。サイトをローカルでテストし、デプロイする準備ができるまでビルドを保存するのが最も簡単な場合があります。ただし、この記事の執筆時点では、Gemfileでこれらの依存関係のバージョンを指定でき、JekyllはローカルとGitHubPagesの両方で機能します。

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

その最新の構成については、StackOverflowのAlexWaibelに感謝します。

サイトの動作を確認するにbundle exec Jekyll serveは、コマンドラインで実行します。これによりサーバーが起動し、ブラウザのURLバーに「localhost:4000」と入力してサイトを表示できます。

出来上がり!Jekyllを使用して静的サイトを作成し、プロジェクトディレクトリにいます。約50%完了です。

これをオンラインで入手しましょう

GitHub.comにアクセスしてサインアップするか、既にアカウントをお持ちの場合は、[新規]ボタンを選択してリポジトリを作成します。GitHub Pagesアカウントが提供するリンク(your_username.github.io)にちなんでリポジトリに名前を付けることが重要です。たとえば、GitHubのユーザー名はtfantinaで、ブログはtfantina.github.ioなので、GitHubリポジトリの名前は「tfantina.github.io」です。

ターミナルウィンドウに戻り、次のコマンドを実行して、JekyllサイトをコンピューターからGitHubにプッシュします。

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(ユーザー名とプロジェクト名を置き換える場合、開始と終了は必要ありません)。

変更がリポジトリにプッシュされると、静的サイトが機能するはずです。これは、GitHub Pages gemを使用していて、GitHubPagesで提供したいことをGitHubが理解できるようにリポジトリに名前を付けているためです。

これを確認するには、サイトにアクセスするか、GitHubの[設定]タブに移動して[ページ]セクションまでスクロールします。サイトが公開された場所を示す緑色のボックスが表示されます。

また、ここからテーマを簡単に変更できることにも注意してください。GitHubはJekyllのデフォルトのテーマをいくつか提供していますが、もちろん独自のテーマを作成することもできます。

サイトに公開されていると表示されているのに空白に見える場合は、ハードリフレッシュを行うか、プライベートウィンドウでサイトを確認する必要があります。これは当たり前のように思えるかもしれませんが、新しいJekyllインスタンスをセットアップするたびに私はそれを取得します。

すべてが計画どおりに進んだ場合、サイトは次のようになります。

そこに行きます–ほんの数分で、GitHubページを使用して静的なWebサイトを作成してデプロイしました。しかし、あなたはおそらくあなたのページにいくつかのコンテンツを置くことができるようにしたいと思うでしょう。

これには10分しかかからないと約束したので、ページ、フロントマター、またはLiquidテンプレート言語のすべての詳細に飛び込むことはしません。それは別の日の投稿です。しかし、私はあなたの最初の投稿を作成する方法を共有します。

テキストエディタに戻り、「_ posts」フォルダを開きます。あなたの新しいブログにあなたを歓迎する投稿がすでにあります。新しいマークダウンファイルを作成し、次の形式の名前で保存します:YEAR-MONTH-DAY-TITLE.markdown(以下を参照):

Jekyllの投稿には、フロントマターとボディの2つのセクションがあります。

前書きは、投稿のタイトル、使用するレイアウト、投稿の作成時期など、ジキルに具体的な指示を与えます。

フロントマターは高度にカスタマイズ可能です。たとえば、投稿にヒーロー画像を含めたいので、lead_imageタグを作成し、レイアウトに構文を配置して、各投稿の前書きでリード画像を具体的にチェックしました。Liquidテンプレート言語を使用すると、コンテンツをフロントマターからテーマに簡単に取り込むことができます。

フロントマターでできることは他にもたくさんありますが、一般的な例から始めましょう。

デフォルトのフロントマターは次のようになります。

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • レイアウトは、コンテンツを表示するレイアウトをJekyllに指示します。異なるページまたは投稿タイプに対して複数のレイアウトを持つことができます。
  • 投稿タイトル
  • 投稿日
  • 本質的にタグであるカテゴリ。スペースで区切って、必要な数だけ追加できます。

前書きの後、あなたの投稿はMarkdownで書くことができます。これにより、投稿コンテンツを書く際に多くの柔軟性が得られます。

投稿が終了したら、それを保存してターミナルウィンドウを開きます。

git commit -am “Publishes first post git push

1分後(そしておそらく更新)、あなたはあなたの投稿を見ることができるでしょう。

うまくいけば、Jekyllで作成されたGitHubPagesに静的サイトが機能するようになりました。問題や質問がある場合は、@ tfantinaにツイートするか、contact @ travisfantina.comにメールを送ってください。