dockerについて~環境セットアップ(ubuntu vagrant)~

環境の準備(vagrant ubuntu)

A list of base boxes for Vagrant - Vagrantbox.es で適当なvagrant boxを探した

下記の説明がついていたものがあり、docker が最初からはいってるぽいので、とりあえず、これを使ってみることにした。
Ubuntu 14.04 with Docker enabled (based on amd64 server iso file)

1
vagrant box add ubuntu-docker-enabled https://github.com/jose-lpa/packer-ubuntu_14.04/releases/download/v2.0/ubuntu-14.04.box

Docker はいってないやつもあり、dockerのインストールから始めたい場合に備えてこちらも準備しておくことにした
Ubuntu 14.04 (based on amd64 server iso file)

1
vagrant box add ubuntu-14 https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/14.04/ubuntu-14.04-amd64.box

とりあえず最初に追加した、ubuntu-docker-enabled で試してみる

1
vagrant init ubuntu-docker-enabled

説明にあるようにdocker 最初から入っていた。

1
2
vagrant@vagrant:~$ docker -v
Docker version 1.5.0, build a8a31ef

version 1.5.0 と バージョンが古いのでアップグレードする

1
2
3
$ wget -qO- https://get.docker.com/ | sh
$ docker -v
Docker version 1.7.1, build 786b29d

upgradeしてたのでは手間という意味では最初から入ってる意味はあまりないのかもしれない

次はdockerがはいっていないほうの vagrant box で dockerのinstall setupをする

1
2
vagrant init ubuntu-14
vagrant up

あと、ここをみて dockerをinstall
Docker Docs installing docker on ubuntu

1
2
3
4
$ wget -qO- https://get.docker.com/ | sh

$ docker -v
Docker version 1.7.1, build 786b29d

hexoについてあれこれ

easy insatall, easy start

install Hexo with npm

1
$ npm install hexo-cli -g

Once Hexo is installed, run the following commands to initialise Hexo in the target .

1
2
3
$ hexo init blog
$ cd blog
$ npm install

initial structure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
blog(root)
node_modules
│ └ *
scaffolds
│ ├ draft.md
│ ├ page.md
│ └ post.md
source
│ └ _posts
│ └ hello-world.md
themes
│ └ landscape (default theme)
.gitignore
├ _config.yml (configuration file.)
db.json
package.json

create post

1
$ hexo new hexo_easy_post

hexo-easy-post.md was created in source/_posts dir.

1
2
3
4
5
blog(root)
├ source
│ └ _posts
│ ├ hello-world.md
│ └ hexo-easy-post.md

hexo generateでstaticなファイル群を作成する前にお手軽に新しく書いた記事を確認したい場合は次のコマンドを使う。

1
2
$ hexo server
INFO Hexo is running at http://0.0.0.0:4000/

http://localhost:4000 にアクセスして確認

generate static file

1
$ hexo generate

static files was generated in blog(root)/public.
public下の日付フォルダ/hello-easy-post/index.html 等が先程、 $ hexo new hexo_easy_post で新しく投稿したマークダウン形式ファイル(blog(root)/source/_posts/hexo_easy_post.md)を元に生成されたファイルになる。
このblog(root)/publicをドキュメントルートとして指定すれば作成した記事を公開できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
blog(root)
├ public
│ ├ 2015
│ │ └ 07
│ │ └ 08
│ │ ├ hello-world
│ │ │ └ index.html
│ │ └ hexo-easy-post ← this
│ │ └ index.html
│ ├ archives
│ │ ├ 2015
│ │ │ ├ 07
│ │ │ │ └ index.html
│ │ │ └ index.html
│ │ └ index.html
│ ├ css
│ │ ├ fonts
│ │ │ ├ FontAwesome.otf
│ │ │ ├ fontawesome-webfont.eot
│ │ │ ├ fontawesome-webfont.svg
│ │ │ ├ fontawesome-webfont.ttf
│ │ │ └ fontawesome-webfont.woff
│ │ ├ images
│ │ │ └ banner.jpg
│ │ └ style.css
│ ├ fancybox
│ │ ├ helpers
│ │ │ ├ fancybox_buttons.png
│ │ │ ├ jquery.fancybox-buttons.css
│ │ │ ├ jquery.fancybox-buttons.js
│ │ │ ├ jquery.fancybox-media.js
│ │ │ ├ jquery.fancybox-thumbs.css
│ │ │ └ jquery.fancybox-thumbs.js
│ │ ├ blank.gif
│ │ ├ fancybox_loading.gif
│ │ ├ fancybox_loading@2x.gif
│ │ ├ fancybox_overlay.png
│ │ ├ fancybox_sprite.png
│ │ ├ fancybox_sprite@2x.png
│ │ ├ jquery.fancybox.css
│ │ ├ jquery.fancybox.js
│ │ └ jquery.fancybox.pack.js
│ ├ js
│ │ └ script.js
│ └ index.html

theme

テーマの選択はblog(root)/_config.ymlでおこなわれている。
例えば、lightという別のテーマに変更したい時はlightにいってzipでダウンロード。ダウンロードしたフォルダの名前をlightに変更し、blog(root)/themesの下に配置して、blog(root)/_config.ymlの設定を変更すればテーマをかえられる。

blog(root)/_config.yml

1
theme: landscape ← this

テーマをカスタマイズしたい時。
例えば, サイドバーに google adsenseを設置したいような時は blog(root)/themes/landscape/layout/_widget
に adsense.ejsを作成して、blog(root)/themes/landscape/_config.yml に定義すればよい。

structure

1
2
3
4
5
6
blog(root)
├ themes
│ ├ landscape
│ │ └ layout
│ │ └ _widget
│ │ └ adsense.ejs

blog(root)/themes/landscape/_config.yml

1
2
3
4
5
6
7
8
9
# Sidebar
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts
- adsense ← add

_variables.styl を編集すればフォントのサイズを変更できる。

cssはstylusを使用している。
temlate engine は ejs。

Hexoでブログをはじめたよ

hexoでブログを始めた。
簡単でわかりやすかった。
npmをつかっているのもいい。
マークダウンでかけるのもいい。

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment