git rev-parse --show-toplevel

Git Advent Calendar 2015

http://qiita.com/advent-calendar/2015/git

gitのadventカレンダー見てたら知らないコマンドとかいっぱいあって参考になるものばかり。

gitのルートディレクトリとるコマンド

http://qiita.com/karupanerura/items/721962bb7da3e34187e1

そんな中で見つけたgitのルートディレクトリとるコマンド

git rev-parse --show-toplevel

いつも .. やってたんでaliasつけとこうと思い、aliasを考えた。

git root

gitのrootだから grt かなと思って、おもむろに grt ってうったら「そんなのねーよ」と言われない。

おかしいと思って、 alias grt したら、

grt='cd $(git rev-parse --show-toplevel || echo ".")'

すでに設定されてた!
oh-my-zsh使ってるから多分そのgitプラグインが設定してたんだろう。

gitのadventカレンダー見て、自分はoh-my-zshとネーミングセンスが一緒なんだ、という発見があった。



hexoで静的サイトを作成しロリポップにデプロイする

ロリポップ!を申込む

https://lolipop.jp/

ユーザー専用ページのFTP情報を確認

https://user.lolipop.jp/?mode=account

必要な情報

  • host: FTPサーバー
  • user: FTP・WebDAVアカウント
  • pass: FTP・WebDAVパスワード

hexoの設定

https://hexo.io/docs/deployment.html#FTPSync

Install hexo-deployer-ftpsync.

$ npm install hexo-deployer-ftpsync --save

_config.yml編集

1
deploy:
  type: ftpsync
  host: <host>
  user: <user>
  pass: <password>
  • 最低限これだけでデプロイ可能
  • その他オプションは公式サイト参照

デプロイしてみる

hexo deploy


これからReactをはじめる君へ 〜nodeのインストールから〜

Reactをはじめる

公式サイト:https://facebook.github.io/react/

To install React DOM and build your bundle with browserify:

1
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

To install React DOM and build your bundle with webpack:

1
$ npm install --save react react-dom babel-preset-react
$ webpack

「npmってなに?」という人はここから

Node.jsをインストールする

直接nodeをインストールしてもいいけど、バージョン上げ下げする必要がある可能性があるので、バージョン管理ツールから入れるのがオススメ。

直接でいい人は何も考えずに

1
brew install node

nodeを入れると一緒にnpmも入る。

nodeのバージョン管理

バージョン管理ツールいっぱいある。

  • nvm
  • nodebrew
  • ndenv

ここではndenvを使用する。

anyenvをインストール

githubのndenvから直接インストールしたら、READMEにも書いてあるのに、ndenv installコマンドがなくてあせった。

ndenvはanyenvからインストールする。

インストール方法は下記などを参考に

http://qiita.com/nownabe/items/ce344150f7211b9b2a6d

これでnodeとnpmのインストールまで完了。

「browserify, webpackってなに?」という人はここから

なんやかんやモジュールとか管理してうまいことしてくれるやつ。

詳しくはこの辺を参照

http://qiita.com/yosisa/items/61cfd3ede598e194813b

ここではwebpackを使用する。

1
module.exports = {
  entry: './js/main.js',
  output: {
    path: __dirname,
    filename: 'build/bundle.js'
  }
};

ここまでできたら改めて、reactをインストールする。

Reactをはじめる(再)

https://facebook.github.io/react/docs/getting-started.html

reactをインストール

To install React DOM and build your bundle with webpack:

1
$ npm install --save react react-dom babel-preset-react
$ webpack

なんかWARNでた人はここをみる

package.jsonがない

1
npm WARN ENOENT ENOENT: no such file or directory, open 'path/to/package.json'

npm initしよう。

nameがreact

1
$ npm install --save react react-dom babel-preset-react
npm ERR! Darwin 14.5.0
npm ERR! argv "/path/to/.anyenv/envs/ndenv/versions/5.4/bin/node" "/path/to/.anyenv/envs/ndenv/versions/5.4/bin/npm" "install" "--save" "react" "react-dom" "babel-preset-react"
npm ERR! node v5.4.0
npm ERR! npm  v3.3.12
npm ERR! code ENOSELF

npm ERR! Refusing to install react as a dependency of itself
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /private/var/www/react/npm-debug.log

なんかいろいろエラー出たらpackage.jsonを確認

1
{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

nameがreactになっていたら違うのにする。

リポジトリを指定してない

1
npm WARN EPACKAGEJSON react-tutorial@1.0.0 No repository field.

リポジトリを指定しない時は、"private": trueを追加

1
{
  "name": "react-tutorial",
  "version": "1.0.0",
  "private": true,
  ...省略...

Babel is a JavaScript compiler.

とりあえずbabelもいれとけと。

1
npm install --global babel-cli
npm install babel-preset-react
1
babel --presets react src --watch --out-dir build
1
Note:
If you are using ES2015, you will want to also use the babel-preset-es2015 package.

es2015?という人はこの辺を参考に

http://qiita.com/kamijin_fanta/items/e8e5fc750b563152bbcf

webpackでbabelを使う

babel-loaderを使います。(don’t use jsx-loader! use babel-loader instead.)

github: https://github.com/babel/babel-loader

1
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

webpack.config.jsにloaderを使う記述を追記する。

1
module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname,
    filename: 'build/bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react']
        }
      }
    ]
  }
};

生成されたbuild/bundle.jsがコンパイルされていれば成功。

1
$ webpack --watch

上記を実行しておくとファイルを保存するたびにコンパイルしてくれる。

チュートリアルをはじめる

https://facebook.github.io/react/docs/getting-started.html

簡単なサンプルを動かす

公式の記述からちょっとだけ書き換えている。

1
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="build/bundle.js"></script>
  </body>
</html>
1
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

image


hexo's markdown power check

H2

H3

H4

H5
H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
  3. Actual numbers don’t matter, just that it’s a number
    1. Ordered sub-list
  4. And another item.

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

    To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
    Note that this line is separate, but within the same paragraph.⋅⋅
    (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  • Unordered list can use asterisks
  • Or minuses
  • Or pluses

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

Some text to show that the reference links can follow later.

Here’s our logo (hover to see the title text):

Inline-style:
alt text

Reference-style:
alt text

Inline code has back-ticks around it.

1
2
var s = "JavaScript syntax highlighting";
alert(s);
1
2
s = "Python syntax highlighting"
print s
1
No language indicated, so no syntax highlighting.
But let's throw in a &lt;b&gt;tag&lt;/b&gt;.

Colons can be used to align columns.

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown Less Pretty
Still renders nicely
1 2 3

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>

<dt>Markdown in HTML</dt>
<dd>Does not work very well. Use HTML <em>tags</em>.</dd>
</dl>

Three or more…


Hyphens


Asterisks


Underscores

Here’s a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but…
This line is only separated by a single newline, so it’s a separate line in the same paragraph.