Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@KentOhwada_AlibabaCloudJapan(kent Ohwada)inAliEaters (Alibaba Cloud Developers meetup)

JekyllフレームワークとAlibaba Cloud OSSでJAM Stackを使用して個人ブログを作成する

Last updated at Posted at 2020-07-07

このチュートリアルでは、JekyllフレームワークでJAMスタックを使用して、静的資産だけを使って自分の個人ブログを作成する方法を学びます。

本ブログは英語版からの翻訳です。オリジナルはこちらからご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。

#インストール
まず最初に、インストールです。ここでは、簡単のために、一つのアーキテクチャとOS（Windows）へのインストールに焦点を当てています。そこで、まずはJekyllフレームワークの開発環境を設定するための前提条件を提示し、そのフレームワークを使い始めるためのツールをインストールしていきます。

####必要条件
Jekyll フレームワークは ruby のパッケージなので、どのプラットフォームや OS (Windows, Linux, Mac OS) でも利用できますが、今回は 64 ビットの Windows 10 が動作するマシンで Jekyll を利用した場合のプロセスを紹介します。

適切なJekyll開発環境を作るためには、以下のような前提条件があります。

  • Ruby: Jekyll とそのプラグインを実行できるようにする。
  • Gem: ruby のパッケージを管理する。
  • bundler: ruby のパッケージを作成する。
  • ウェブ開発のための統合開発環境(IDE)：私の場合、このチュートリアルではVisual Studio Codeを使用します。

####ツールのインストール
それでは、上記で説明したツールをインストールしていきます。

  • Ruby のインストール (バージョン 2.4.0)
    Windows プラットフォームに Ruby をインストールする最も簡単な方法は、Ruby installerを使うことです。

1、Ruby installerをダウンロードしてインストールしてください: Ruby、Ruby 言語ドキュメント、ruby パッケージマネージャ gem がインストールされます。
2、インストール後、以下のコマンドを実行して、ネイティブな拡張子を持つ gem をインストールします。

 > ridk install
  • Jekyll と Bundler のインストール
> gem install jekyll bundler

ツールがインストールされたので、Jekyllプロジェクトの構造を続けて、それを始めることができます。

#Jekyllとは
####Jekyllの仕組み

Jekyll gemを使うと、ターミナルでjekyllの実行ファイルを利用できるようになります。

このコマンドはいくつかの方法で使用できます。

  • jekyll new: デフォルトのgemベースのテーマで新しいJekyllサイトを作成します。
  • jekyll new —blank: 空白のJekyllサイトを新規に作成します。
  • jekyll build or jekyll b: ワンオフでサイトを./_siteにビルドします(デフォルトでは)。
  • jekyll serve または jekyll s.:ソースファイルが変更されるたびにサイトをビルドし、ローカルに提供します。
  • jekyll doctor:非推奨や設定の問題を出力します。
  • jekyll new-theme: 新しい Jekyll テーマの足場を作成します。
  • jekyll clean: 生成されたサイトとメタデータを削除します。生成されたサイトとメタデータファイルを削除します。
  • jekyll help: jekyll help build のように、オプションで指定したサブコマンドのヘルプを表示します。

####Jekyll のテンプレ
Jekyllの構文を使って、以下のような異なるオブジェクトを考えることができます。

  • オブジェクト

オブジェクトは Liquid にコンテンツを出力する場所を指示します。二重中括弧で表示されます。{{と}}です。例えば

{{ page.title }}

ページにpage.titleという変数を出力します。

  • タグ

タグは、テンプレートのロジックと制御フローを作成します。タグは中括弧とパーセント記号で表されます。{%と %} です。例えば、以下のようになります。

{% if page.show_sidebar %}
  <div class="sidebar">
    sidebar content
  </div>
{% endif %}

page.show_sidebarがtrueの場合、サイドバーを出力します。Jekyll で利用可能なタグについてはこちらをご覧ください。

- フィルタ

フィルタは液体オブジェクトの出力を変更します。それらは出力の中で使用され、|で区切られています。

{{ "hi" | capitalize }}

Hiを出力し、Jekyllで利用できるフィルターについてはこちらでご紹介しています。

- フロントマター

フロントマターはファイルの先頭にある2つのトリプルダッシュの行の間にあるYAMLのスニペットです。フロントマターは、例えばページの変数を設定するために使われます。

---
my_number: 5
---

フロントマターの変数は、Liquidではpage変数の下にあります。例えば、上の変数を出力するには、次のようにします。

{{ page.my_number }}

- レイアウト

JekyllはHTMLと同様にMarkdownをサポートしています。Markdownは、生のHTMLよりも冗長ではないので、シンプルなコンテンツ構造（段落、見出し、画像だけ）のページに最適です。次のページで試してみましょう。

- Includes
Includesタグを使用すると、_includes フォルダに保存されている別のファイルのコンテンツをインクルードすることができます。Includesは、サイト内で繰り返されるソースコードのための単一のソースを持っていたり、可読性を向上させたりするのに便利です。

ナビゲーションのソースコードは複雑になることがあるので、時にはそれをインクルードに移すのもいいでしょう。

ここでは、includeタグの使用法の基本的な例を示します。

以下の内容で _includes/navigation.html にナビゲーション用のファイルを作成します。

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

includeタグを使って、ナビゲーションを_layouts/default.htmlに追加してみてください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

ブラウザで http://localhost:4000 を開いて、ページを切り替えてみてください。

- データファイル

Jekyllは_dataディレクトリにあるYAML、JSON、CSVファイルからのデータの読み込みをサポートしています。データファイルは、ソースコードからコンテンツを分離してサイトのメンテナンスを容易にするための素晴らしい方法です。

ここではデータファイルの使用例を紹介します。

YAMLはRubyのエコシステムでは一般的なフォーマットです。YAMLはRubyのエコシステムでよく使われているフォーマットです。

ナビゲーション用のデータファイルを _data/navigation.yml に以下のように作成します。

- name: Home
  link: /
- name: About
  link: /about.html

Jekyll はこのデータファイルを site.data.navigation.html で利用できるようにしています。各リンクを _includes/navigation.html で出力する代わりに、データファイルを反復して出力することができるようになりました。

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

出力は全く同じになります。違うのは、新しいナビゲーション項目を追加したり、HTML構造を変更したりするのが簡単になったことですね。

CSS、JS、画像のないサイトは何の意味があるのでしょうか？Jekyllでのアセットの扱い方を見てみましょう。

####Jekyllのスタイリング
- CSSでアセットを追加してスタイリングする
CSS、JS、画像、その他のアセットの使用は、Jekyll を使えば簡単です。それらをサイトフォルダに配置すれば、構築されたサイトにコピーされます。

Jekyll サイトでは、アセットを整理しておくためにこの構造を使用することがよくあります。

.
├── assets
|   ├── css
|   ├── images
|   └── js
...

この段階では、メインのcssファイルを用意するだけです。./assets/css/main.cssに以下の内容のcssファイルを作成します。

.current {
  color: green;
}

レイアウトのスタイルシートを参照する必要があります。

layouts/default.htmlを開き、スタイルシートを<head>に追加してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/main.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

http://localhost:4000 を読み込んで、ナビゲーションのアクティブなリンクが緑色になっていることを確認してください。

次はジキルの最も人気のある機能の一つであるブログについて見ていきましょう。

####コンテンツ制作
- 投稿
ブログの記事は _posts というフォルダにあります。投稿のファイル名は、公開日、タイトル、拡張子の順になっています。

最初の投稿を _posts/2018-08-20-bananas.md に以下の内容で作成します。

---
layout: post
author: bineli
---
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, doloremque a laudantium nihil ad voluptatum optio, illum minus debitis odit fugit aut recusandae cum, commodi voluptate accusamus laboriosam earum adipisci.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, doloremque a laudantium nihil ad voluptatum optio, illum minus debitis odit fugit aut recusandae cum, commodi voluptate accusamus laboriosam earum adipisci.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, doloremque a laudantium nihil ad voluptatum optio, illum minus debitis odit fugit aut recusandae cum, commodi voluptate accusamus laboriosam earum adipisci.

これは前に作成したabout.mdのようなものですが、creatorと異なるレイアウトを持っています。authorはカスタム変数で、必須ではありません。

- Collections
それぞれの著者が自分のページを持つように、著者の肉付けを見てみましょう。

これを行うには、Collectionsを使用します。Collectionsは投稿に似ていますが、Collectionsを日付でグループ化する必要がありません。

- 設定方法
Collectionsを設定するには、それをJekyllに伝える必要があります。Jekyllの設定は、_config.ymlというファイルで行われます（デフォルトでは）。

以下のようにルートに_config.ymlを作成します。

collections:
  authors:

-Gemfile
あなたのサイトのために Gemfile を持つことは良いことです。これにより、Jekyllやその他のジェムのバージョンが異なる環境でも一貫性を保つことができます。

以下のようにルートにGemfileを作成します。

source 'https://rubygems.org'

gem 'jekyll'

その後、ターミナルで bundle install を実行してください。これにより、ジェムがインストールされ、Gemfile.lockが作成され、将来のバンドルインストール用に現在のジェムのバージョンをロックします。gemのバージョンを更新したい場合は、bundle updateを実行してください。

Gemfileを使う場合は、bundle execの前にjekyll serveのようなコマンドを実行します。つまり、完全なコマンドは以下のようになります。

> bundle exec jekyll serve

これにより、Ruby環境ではGemfileに設定されたジェムのみが使用されるように制限されます。

#ブログを書く
####プロジェクトの発表
このチュートリアルのプロジェクトは、Jekyllを使用してウェブ上で自分の才能を披露するために使用できる個人ブログを構築することです。

####プロジェクトの設定
プロジェクトを設定するには、以下のコマンドをCLIで実行する必要があります。

> jekyll new blog

このコマンドを実行すると、blogという名前の新しいJekyllプロジェクトが作成されます。blogプロジェクトは上記のような構造のフォルダになります。

_posts
.gitignore
404.html
about.md
Gemfile
Gemfile.lock
index.md
_config.yml

コマンドの実行が終了したら、以下のように実行して、簡易サイトが編集できるようになったことを確認します。

> cd blog
> bundle exec jekyll serve

コマンドラインで以下のように表示されているので、devサーバーが動作していることを確認する必要があります。

Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.

今すぐブラウザを開き、アドレスを指定してください: http://127.0.0.1:4000/ Webサーバーが効果的に動作しているかどうかを確認することができます。

#ブログを公開する
####CDNを選択する
ブログを書き終わったら、CDNサーバーを使ってオンラインでデプロイします。今回のケースでは、Alibaba Cloudが提供するObject Static StorageというCDNを使用します。

####ウェブサイトの展開
このステップでは、JAMスタック組織が推奨するAlibaba Cloud Static File Storage CDN上に静的ウェブサイトをデプロイする方法を紹介します。

1、https://www.alibabacloud.com にログインする必要があります。
2、次に、オブジェクトストレージサービスをクリックします。
3、次に、静的ウェブサイトのファイルを保存するために使用する新しいバケットを作成します。
4、バケットの作成が完了すると、作成したバケットのインターフェースにリダイレクトされます。
5、そして、バケット内にサイトのファイルをアップロードすることができます。
OSS バケットの作成とその中にファイルをデプロイする方法の詳細については、以下のチュートリアルを参照してください: https://www.alibabacloud.com/getting-started/projects/host-a-static-website-on-oss

アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
アリババクラウドジャパン公式ページ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?