ハーマ先生
は～い！今日の講義を担当させていただくハーマ先生です！
ハーマ先生って誰やねんと思ったら記事の最下部に説明書いてあるから見てね～(投げやり)
世界一わかりやすい！～講義形式で学ぶサイト制作～:第14回
ハーマ先生
今日は、Jekyllを使って静的サイトを作り、GitHub Pagesで無料でホスティングする方法を説明していくよ。これは初心者にも優しく、簡単にプロフェッショナルなサイトを作れるんだ。
聞いたことはあるけど、Jekyllって具体的にどんなツールなの？
ウィーブ・ウェブ君
ハーマ先生
いい質問だね！Jekyllは、Rubyをベースにした静的サイトジェネレーターだよ。主に、ブログやポートフォリオサイトを作るときに使われるんだ。JekyllはMarkdown形式でコンテンツを書くことができて、それをHTMLに変換してくれるから、とっても便利なんだ。
1. Jekyllで何ができる？
ハーマ先生
Jekyllを使うと、次のようなことが簡単にできるんだ。
なるほど！コードを書く量が少なくて済むなら、初心者にも取り組みやすそうだね！
ウィーブ・ウェブ君
- ブログの作成: 記事はすべてMarkdown形式で書けるから、コードを書く必要がほとんどない。
- ポートフォリオサイト: 自分の作品やプロジェクトを簡単にまとめることができるよ。
- ドキュメンテーション: プロジェクトの説明やマニュアルの作成にも向いているんだ。
2. Jekyllのインストール手順
どうやってJekyllをインストールするの？
ウィーブ・ウェブ君
ハーマ先生
まずは、Rubyが必要だよ。JekyllはRubyベースだから、Rubyの環境を整えてからインストールしよう！
ステップ1: Rubyのインストール
- macOS: macOSにはRubyが標準でインストールされているけど、最新バージョンを使うのが良いから、
rbenvを使って最新版をインストールするのがおすすめだよ。
bashコードをコピーするbrew install rbenv
rbenv install 3.0.0
rbenv global 3.0.0
- Windows: RubyInstallerを使ってRubyをインストールしよう。
- RubyInstaller公式サイトから最新のRubyをダウンロード。
ステップ2: Jekyllのインストール
Rubyがインストールできたら、次にJekyllをインストールするよ。
bashコードをコピーするgem install jekyll bundler
ハーマ先生
これでJekyllのインストールは完了だよ！
3. Jekyllでサイトを作成する
次は実際にサイトを作る手順だね！
ウィーブ・ウェブ君
ハーマ先生
そうだね、次に新しいプロジェクトを作って、サイトのテンプレートを生成するよ。
ステップ3: プロジェクトの作成
次のコマンドを実行して、新しいJekyllプロジェクトを作成するんだ。
bashコードをコピーするjekyll new my-awesome-site
cd my-awesome-site
ステップ4: サーバーを起動してプレビュー
次に、ローカルでサーバーを起動して、Jekyllサイトが正しく動作するか確認してみよう。
bashコードをコピーするbundle exec jekyll serve
その後、ブラウザでhttp://localhost:4000にアクセスすると、サイトが見られるよ！
4. GitHub Pagesとの連携方法
作ったサイトをインターネット上で公開したいんだけど、どうやるの？
ウィーブ・ウェブ君
ハーマ先生
それなら、GitHub Pagesが便利だよ。JekyllはGitHub Pagesと簡単に連携できるから、無料でホスティングできるんだ！
ステップ5: GitHubリポジトリを作成
- GitHubで新しいリポジトリを作成。
- リポジトリ名は、
username.github.ioの形式にすること。
ステップ6: サイトをGitHubにデプロイ
次に、作成したサイトをGitHubにプッシュするよ。
bashコードをコピーするgit init
git remote add origin https://github.com/username/username.github.io.git
git add .
git commit -m "Initial commit"
git push -u origin master
ハーマ先生
これでGitHub Pagesにサイトがホスティングされるよ！数分後にはhttps://username.github.ioで自分のサイトを見られるはずだ。
5. Jekyllで使えるテーマやプラグイン
でも、サイトのデザインを自分で作るのは大変そうだな…
ウィーブ・ウェブ君
ハーマ先生
安心して！Jekyllにはたくさんのテーマがあって、それを使えば簡単におしゃれなデザインにできるんだ。
テーマの導入方法
Jekyllのテーマは簡単にインストールして使えるよ。
- Jekyll Themesで好きなテーマを探す。
Gemfileにテーマの名前を追加して、bundle installを実行。
rubyコードをコピーするgem "jekyll-theme-cayman"
bashコードをコピーするbundle install
プラグインの利用方法
また、Jekyllには便利なプラグインもたくさんあるんだ。たとえば、SEO対策やGoogle Analyticsの導入も簡単にできるよ。
- SEOプラグイン:
jekyll-seo-tagを使って、ページのメタデータを自動的に生成。 - RSSフィード:
jekyll-feedでブログのフィードを生成。
まとめ
ハーマ先生
今日は、Jekyllを使った静的サイトの作り方から、GitHub Pagesでの無料ホスティング方法まで解説したよ。Jekyllはシンプルで軽量だけど、テーマやプラグインを使うことで、プロフェッショナルなサイトも簡単に作れるんだ。
ありがとう、シャキシャキ先生！GitHub Pagesで無料ホスティングできるのもすごい便利だね。さっそく自分のポートフォリオを作ってみるよ！
ウィーブ・ウェブ君
ハーマ先生
それが良いね！Jekyllはブログやポートフォリオに最適だし、無料で公開できるのが魅力だから、たくさん使いこなしてみて！
コメント