最新のサイト構築手順 #JavaScript

Hugo

hugoなどがトレンドです。一瞬でサイトを構築できますし、GitHub Pagesなどを使って公開できます。

$ 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の仕様

分かりやすい明示

[
    {
        "url" : "${user}.gihub.io",
        "repo" : "${user}.gihub.io",
        "branch" : "master"
    },
    {
        "url" : "${user}.gihub.io/${reponame}",
        "repo" : "${reponame}",
        "branch" : "gh-pages"
    }
]

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を使うと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

$ bower install bootstrap

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

<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の場合は、末尾の/に注意です。

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

Bootstrap Enhancement

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

$ 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

<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は、アイコンフォントです。基本的にファイルサイズは大きいですが色々あります。

$ bower install font-awesome

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

<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

GitHubのアイコンフォント。

$ bower install octicons

その他

# シンタックスハイライト
$ 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