開発
タグ GitHub Pages ブログ
「GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる」です。
他の記事はこちら。
Jekyllとは
JekyllはGitHub Pagesで使用することができる静的サイトのジェネレータです。Jekyllを使うことで、Markdownで書いたブログの記事やhtmlで作ったページをビルドして、公開用のhtmlとして生成することができます。
htmlを事前に生成して、公開時にはサーバーサイドによる動的な処理を実行せずhtmlを表示するだけなので、静的サイトになります。 JekyllにはWordpressのように、いくつかのテーマが提供されていて、それらを活用することで簡単にブログサイトを構築することができます。
静的サイトジェネレータは他にもHUGOやGatsbyなどがありますが、GitHub PagesはデフォルトでJekyllをサポートしています。そのため、特別なカスタマイズをしなければ、Jekyllで事前にビルドする必要もなくGitHub Pagesでテーマを活用したブログを構築することができます。
Jekyllを使ってみる
GitHub PagesでJekyllのテンプレートを使うのは簡単です。リポジトリのメニューからSettingsを開いて、下の方にあるGitHub Pagesの設定をみると、 Choose a theme
というメニューがあります。
ボタンをクリックするとテーマセレクタ画面が表示されます。テーマを選択することでプレビューを見ることもできます。
良さそうなテーマがあれば、Select theme
で決定します。
するとテーマが適用されます。具体的にはリポジトリに _config.yml
というファイルが新しく追加されています。中身は以下のようになっています。
theme: jekyll-theme-cayman (実際に選んだテーマ)
Jekyllはこの_config.yml
に基づいて静的サイトを生成しますが、GitHub PagesはJekyllをサポートしているので既存のテーマを使うだけであればこれだけでテーマを適用することができます。
新規ポストを投稿する
Jekyllのルールではブログの記事は _posts
フォルダの中に、YYYY-MM-DD-title.md
という形式で記事を配置する必要があります。例えば、2020-05-26-first-post.md
などです。
Markdownファイルを作成したら、ファイルの一番上の部分にタイトルや日付などのメタデータを書き込み、その下に記事のコンテンツを書き込みます。
---
layout: page
title: "First post"
date: 2020-05-26
---
# Fist post
First post
これをリポジトリに配置すれば記事が公開されます。
トップページに記事の一覧を表示するにはindex.md
に以下を追記します。
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
次のPart3ではJekyllの設定をカスタマイズする方法を書いていきます。
オススメ記事
-
2021/2/17開発
brew upgradeで Your CLT does not support macOS 11というエラーがでた
-
2020/12/1開発
Apple Silicon搭載 MacBook Pro M1で Homebrewとrbenvをインストールする
先日購入したApple Silicon搭載 MacBook Pro M1にこのブログをビルドするためにHomebrewとrbenvをインストールしたのでメモ。
-
2020/11/27開発
Apple Silicon搭載のMacBook Pro M1が危うく文鎮化するところだったので記録
Apple Silicon搭載のMacBook Pro 13インチを仕事用に購入したのですが、クリーンインストールしたところ文鎮化しかけたので記録しておきます。
-
2020/6/23開発
Platform State of the Unionまとめ
Platform State of the Unioまとめ
-
2020/6/23開発
WWDC2020キーノートまとめ
WWDC2020 キーノートまとめ
-
2020/5/31開発
GitHub Pagesで無料ブログを作成する - Part4 自分のオリジナルのテーマを作る
Jekyllでは既存のテーマを使うこともできるのですが、さらに一歩踏み込んで、自分で既存のテーマをカスタマイズしたり、テーマを作ることもできます。
-
2020/5/28開発
GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする
前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。
-
2020/5/24開発
GitHub Pagesで無料ブログを作成する - Part1 GitHubにリポジトリを作ってサイトを公開する
以前、GitHub Pagesでブログを運用し始めてから4年くらいたったというブログを書いたのですが、概要を書いただけで具体的な構築方法はあまり記述していなかったので、何回かに分けてブログを作っていく方法を書いていきたいと思います。
-
2020/1/3開発
FirebaseでCloud Storageに画像をアップロードする
今FirebaseとReactでアプリを開発中で、画像をアップロードする部分を作ったのでメモ。
-
2020/1/1開発
2020年にネイティブアプリを開発する方法
去年2019年にネイティブアプリを開発する方法という記事を書きました。その中では1. ネイティブ言語、ネイティブプラットフォーム, 2. React Native, 3. Flutterの3つの方法を紹介していました。2020年はどういう感じになりそうか、という実感を書いておきたいと思います。
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、趣味などについて書いてます