最新のサイト構築手順


## Hugo

[hugo](http://gohugo.io/)などがトレンドです。一瞬でサイトを構築できますし、GitHub Pagesなどを使って公開できます。

```bash:
$ git clone https://github.com/syui/hugo-theme-air

$ cd hugo-theme-air

$ cp config.toml.backup config.toml

$ hugo server
```

`hugo`コマンドがビルドコマンドになります。

`public`をリポジトリに`push`すればそれで公開できます。

ただし、ブランチには注意しなければなりません。`url:user.github.io`の場合は、`user.github.io`というリポジトリを作成し、マスターブランチに`push`します。

`url:user.github.io/repo`の場合は、`gh-pages`ブランチに`push`します。

### GitHub Pagesの仕様

```json:分かりやすい明示
[
	{
		"url" : "${user}.gihub.io",
		"repo" : "${user}.gihub.io",
		"branch" : "master"
	},
	{
		"url" : "${user}.gihub.io/${reponame}",
		"repo" : "${reponame}",
		"branch" : "gh-pages"
	}
]
```

```bash:gh-pagesブランチを使う
$ cd ./public
$ git init
$ git remote ${git}
$ git checkout -b gh-pages
$ git add -A
$ git commit -m "first commit"
$ git push -u origin gh-pages
$ firefox ${user}.github.io/hugo-theme-air
```

## Wercker

[Wercker](http://wercker.com/)を使うと`push`を察知して、自動デプロイしてくれます。`theme`は、`themes/`にあるディレクトリ名を指定。

```wercker.yml
box: wercker/default
build:
    steps:
        - arjen/hugo-build:
                version: "0.14"
                theme: hugo-theme-air
                flags: --buildDrafts=true
deploy:
    steps:
    - lukevivier/gh-pages@0.2.1:
        token: $GIT_TOKEN
        basedir: public
```

## Bootstrap

```bash:
$ bower install bootstrap
```

基本的には、`bower`でインストールした後、ファイルを読み込みます。ここで、`.min`はだいたいが元のファイルを1行にしたものです。なぜなら、1行にまとめたほうが速くなるからです。できる限り`.min`を使いましょう。

```html:
<head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="{{ .Site.BaseURL }}bower_components/bootstrap/css/bootstrap.min.css">
    <script src="{{ .Site.BaseURL }}bower_components/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/bootstrap.css">
</head>
```

前提として、`.Site.BaseURL`は以下の様な形式になります。`Hugo`の場合は、末尾の`/`に注意です。


```toml
baseurl = "https://${user}.github.io/${theme}/"
```

### Bootstrap Enhancement

BootstrapのDropdownメニューをカスタマイズし拡張したものです。

```bash:
$ cd bower_components/bootstrap/dist/css
$ curl -sLO https://raw.githubusercontent.com/behigh/bootstrap_dropdowns_enhancement/master/dist/css/dropdowns-enhancement.css

$ bower_components/bootstrap/dist/js
$ curl -sLO https://raw.githubusercontent.com/behigh/bootstrap_dropdowns_enhancement/master/dist/js/dropdowns-enhancement.js
```

```html:
<head>
    <!-- bootstrap -->
    {{ bootstrap }}
    
    <link rel="stylesheet" href="{{ .Site.BaseURL }}bower_components/bootstrap/css/dropdowns-enhancement.css">
    <script src="{{ .Site.BaseURL }}bower_components/bootstrap/js/dropdowns-enhancement.js"></script>
</head>
```

## Font Awesome

[font-awesome](https://github.com/FortAwesome/Font-Awesome)は、アイコンフォントです。基本的にファイルサイズは大きいですが色々あります。

```bash:
$ bower install font-awesome
```

```html:
<link rel="stylesheet" href="{{ .Site.BaseURL }}bower_components/font-awesome/dist/css/font-awesome.min.css">
```

```html:
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
```

大体の手順が分かってきたと思うので、以下は省略します。

## Octicons

[octicons](https://github.com/github/octicons/)

GitHubのアイコンフォント。

```bash:
$ bower install octicons
```

## その他

```bash:
# シンタックスハイライト
$ bower install highlightjs

# かっこいいバックグラウンドエフェクト
$ bower install particles.js

# ミニマムなレイアウト
$ bower install milligram

# GitHubを利用したコメントシステム
$ bower install async
$ bower install m2w/talaria

# ターミナルを真似たレイアウトと機能
$ bower install jquery.terminal

# 簡易なテンプレート総合
# https://modernizr.com
$ git clone https://github.com/Modernizr/Modernizr
$ cd Modernizr
$ npm install
$ ./bin/modernizr -c lib/config-all.json
```