<commit_before>---
title: 静的Webサイトのつくりかた その1
date: 2016-02-28 10:25 JST
tags:
- howto
- Programming
- ruby
- middleman
---

![n0h0.com](2016/n0h0-com.png)

## はじめに
これからの一連の記事は、2016年2月27日に行われた[福井技術者の集い その5](http://fukuitech.connpass.com/event/24445/)での僕の発表した内容を、加筆ならびに修正し、よりわかりやすくまとめ直したものとなります。

## 静的Webサイトとは
これから作成する静的Webサイトとは、twitterやfacebookなどのような、アクセスに応じて配信するファイルが変化するようなものではなく、このブログのように、決まったhtml、css、JavaScriptのファイルを返す単純なWebサイトのことを指します。

## 静的Webサイトを作る道具
さて、静的Webサイトをつくるのに必要な道具は、極論を言ってしまえばテキストエディタ以外に必要ありません。

しかし、htmlの手書きは、閉じタグを忘れたりすることもあります。cssの手書きは、デザインによってはベンダープレフィックス(webブラウザによって異なるスタイルの書き分け)などを全て書き並べる必要が出てくることもあるでしょう。
デザインのうえでの共通部分(ヘッダーやフッターなど)も、全てコピーアンドペーストするのでしょうか？

そこで、静的Webサイトを作ってくれるツールを使って、作っていきます。

## 静的Webサイトジェネレーター
静的Webサイトを作ってくれるツールのことを、「静的Webサイトジェネレーター」と呼びます。
[Top Open-Source Static Site Generators - StaticGen](https://www.staticgen.com/)に主要な静的Webサイトジェネレーターが載っていますが、とにかく量が多いです。
一体どれを選べばよいのでしょう。

今回は、このブログでも使っている[middleman](https://middlemanapp.com/jp)を使用します。
採用の理由としては、

- Rubyで書かれている
- 僕に使用経験がある

などです。
同じくRubyで書かれている静的Webサイトジェネレーターに[jekyll](http://jekyllrb.com/)があります。こちらはGitHub pagesという簡単に静的Webサイトを作成できるGitHub上のサービスで採用されているツールです。

## middlemanで静的Webサイトをつくる
### Rubyの環境構築
middlemanはRubyで書かれているので、PCにRubyの実行環境がない場合は、環境を整えてやる必要があります。<commit_msg>Add link to series of how to make static web page<commit_after>---
title: 静的Webサイトのつくりかた その1
date: 2016-02-28 10:25 JST
tags:
- howto
- Programming
- ruby
- middleman
---

![n0h0.com](2016/n0h0-com.png)

## はじめに
これからの一連の記事は、2016年2月27日に行われた[福井技術者の集い その5](http://fukuitech.connpass.com/event/24445/)での僕の発表した内容を、加筆ならびに修正し、よりわかりやすくまとめ直したものとなります。

## つくりかた記事リスト
- [静的Webサイトのつくりかた その1](/2016/how-to-make-static-website-part1/)
- [静的Webサイトのつくりかた その2](/2016/how-to-make-static-website-part2/)

## 静的Webサイトとは
これから作成する静的Webサイトとは、twitterやfacebookなどのような、アクセスに応じて配信するファイルが変化するようなものではなく、このブログのように、決まったhtml、css、JavaScriptのファイルを返す単純なWebサイトのことを指します。

## 静的Webサイトを作る道具
さて、静的Webサイトをつくるのに必要な道具は、極論を言ってしまえばテキストエディタ以外に必要ありません。

しかし、htmlの手書きは、閉じタグを忘れたりすることもあります。cssの手書きは、デザインによってはベンダープレフィックス(webブラウザによって異なるスタイルの書き分け)などを全て書き並べる必要が出てくることもあるでしょう。
デザインのうえでの共通部分(ヘッダーやフッターなど)も、全てコピーアンドペーストするのでしょうか？

そこで、静的Webサイトを作ってくれるツールを使って、作っていきます。

## 静的Webサイトジェネレーター
静的Webサイトを作ってくれるツールのことを、「静的Webサイトジェネレーター」と呼びます。
[Top Open-Source Static Site Generators - StaticGen](https://www.staticgen.com/)に主要な静的Webサイトジェネレーターが載っていますが、とにかく量が多いです。
一体どれを選べばよいのでしょう。

今回は、このブログでも使っている[middleman](https://middlemanapp.com/jp)を使用します。
採用の理由としては、

- Rubyで書かれている
- 僕に使用経験がある

などです。
同じくRubyで書かれている静的Webサイトジェネレーターに[jekyll](http://jekyllrb.com/)があります。こちらはGitHub pagesという簡単に静的Webサイトを作成できるGitHub上のサービスで採用されているツールです。

## middlemanで静的Webサイトをつくる
### Rubyの環境構築
middlemanはRubyで書かれているので、PCにRubyの実行環境がない場合は、環境を整えてやる必要があります。
{'fraction_non_alphanumeric': 0.10503121557106133, 'fraction_numerical': 0.029379360998898273, 'mean_word_length': 9.80952380952381, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6000566', 'n_tokens_mistral': 2125, 'n_tokens_neox': 1925, 'n_words': 100}