Mugichoko's blog

Mugichoko’s blog

プログラミングを中心としたメモ書き.

Jekyllを使ってみる

Webページ作成に疎い私が,とあることからJekyll(ジキル)を使うことになったため,色々と把握した内容をまとめた.

目標

  • Jekyllで何ができるのか把握する
  • Jekyllを使って簡単なWebサイトを作ってみる

Jekyllで何ができるのか

Jekyllは静的サイト生成ツールのようだ.私が把握している限りだと,テンプレとなるファイルを用意すれば,後はHTML,Markdown,Textileといった自分が好きなマークアップファイルを編集して,コマンドを打つだけで,最終的に必要なWebページ用ファイルを全て用意できるというところが便利なようだ.

ということで,Webページの作成が以下の様な手順になるということだ.

  1. テンプレをどこかから入手
  2. (例えば)Markdownを編集して内容を記述
  3. Jekyllのコマンドを入力してWebページ用ファイルを生成
  4. サーバにアップロード

言うならば,はてなブログやっていることを,ローカルで行うイメージかと思う.

静的サイト

初見では,この言葉の意味が分からなかった.結論から言えば,静的サイトとは昔ながらの普通のWebサイトということだ.

まず静的サイトはHTMLファイルをベースにしているもので、1990年代後半から2000年代前半辺りの個人ウェブサイトは大体が静的サイトと言ってもよいでしょう。

動的サイトはアクセスするたびに形が変わる可能性があるウェブサイト、そう言い換えられます。

静的サイトと動的サイトの違いは何?いまさら聞けないIT用語 | IT情報より

Jekyllを使って簡単なWebサイトを作成

Windowsへのインストール

ここを見れば一発だが,備忘のため以降にまとめる. jekyllrb.com

Jekyllのインストール

  1. RubyInstaller for Windowsをダウンロードしてインストール
  2. コマンドプロンプトを開いて gem install jekyll bundler を実行
  3. 上手くインストールされているか jekyll -v を実行して確認
    • jekyll 3.8.1 の様にバージョン情報が表示されればOK!!

日本語ページもあるようです. http://jekyllrb-ja.github.io/docs/home/

Bundlerのインストール

  1. Bundlerも必要なので bundle install を実行
  2. 上手くインストールされているか bundle -v を実行して確認
    • Bundler version 1.16.1 の様にバージョン情報が表示されればOK!!

ブラウザで表示させるまでのコマンド

  1. オフィシャルのお試しセットをダウンロード: https://github.com/jekyll/minima
    • 以降,zipでダウンロードしてPATHに展開したとする
  2. コマンドプロンプトを開きPATHへ移動
  3. jekyll build --destination ./build を実行
    • 直下に,build フォルダができてファイルが吐き出される
  4. jekyll serve を実行してローカルサーバを立ち上げ
  5. ブラウザでhttp://localhost:4000にアクセス
    • 以下のようなページが開かれる

f:id:Mugichoko:20180524173238j:plain

独自のページを作る

個人的にはMarkdownで編集敵るところが便利だと思うので,この観点から,以下の記事が参考になると思う.また,お試しで作成したら,更新しようと思う.

blog.leko.jp