おかしんどっとあいおー

ブログ育成日記 001「開発環境構築」

前回記事はこちら「ブログ育成日記 000「ブログ育成日記はじめます」 | おかしんどっとあいおー

今回は開発環境構築からGatsbyを動かしてみるまでを書いていきます。 「コマンドラインの知識」、「HTML&CSSの知識」、「GitとGithubの知識」は最低限必要なので、そのあたりに不安のある人は以下のコンテンツをサラッと通してみるのが良いでしょう。

Node.jsのインストール

Install NVM, Node.js, Yarn via Homebrewを参考にnvmやyarnなどをインストールします。なおyarnをnpmでインストールするのはYarnをnpmでインストールするのは非推奨です。

XCodeのインストール

スクリーンショット 2019-02-17 21.02.21

Homebrewのインストール

macOS 用パッケージマネージャー Homebrewをインストールします。

ターミナルから以下のコマンドを実行します。

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nvmのインストール

Node.jsのバージョン管理をするために creationix/nvm をインストールしします。

    $ brew install nvm
    
    ==> Downloading https://github.com/creationix/nvm/archive/v0.33.11.tar.gz
    ==> Downloading from https://codeload.github.com/creationix/nvm/tar.gz/v0.33.11
    ######################################################################## 100.0%
    ==> Caveats
    Please note that upstream has asked us to make explicit managing
    nvm via Homebrew is unsupported by them and you should check any
    problems against the standard nvm install method prior to reporting.
    
    You should create NVM's working directory if it doesn't exist:
    
      mkdir ~/.nvm
    
    Add the following to ~/.zshrc or your desired shell
    configuration file:
    
      export NVM_DIR="$HOME/.nvm"
      [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
      [ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion"  # This loads nvm bash_completion
    
    You can set $NVM_DIR to any location, but leaving it unchanged from
    /usr/local/opt/nvm will destroy any nvm-installed Node installations
    upon upgrade/reinstall.
    
    Type `nvm help` for further information.
    
    Bash completion has been installed to:
      /usr/local/etc/bash_completion.d
    ==> Summary
    🍺  /usr/local/Cellar/nvm/0.33.11: 7 files, 138.7KB, built in 9 seconds

指示どおりに ~/.zshrc~/.bashrc に以下を追記します。

    export NVM_DIR="$HOME/.nvm"
    [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"

インストール出来たかどうかを確認します

    $ source ~/.zshrc
    $ nvm --version
    0.34.0

nodeのインストール

    $ nvm ls-remote | tail -n 20
   v10.10.0
   v10.11.0
   v10.12.0
   v10.13.0   (LTS: Dubnium)
   v10.14.0   (LTS: Dubnium)
   v10.14.1   (LTS: Dubnium)
   v10.14.2   (LTS: Dubnium)
   v10.15.0   (LTS: Dubnium)
    ->     v10.15.1   (Latest LTS: Dubnium)
    v11.0.0
    v11.1.0
    v11.2.0
    v11.3.0
    v11.4.0
    v11.5.0
    v11.6.0
    v11.7.0
    v11.8.0
    v11.9.0
   v11.10.0
    
    $ nvm install 10.15.1
    $ node --version
    v10.15.1
    $ npm --version
    6.4.1
    $ npm install -g npm
    $ npm --version
    6.7.0
    $ nvm use default
    Now using node v10.15.1 (npm v6.7.0)

yarnのインストール

    $ brew install yarn --ignore-dependencies
    $ ln -s ~/.nvm/versions/node/ /usr/local/Cellar/
    $ ln -s ~/.nvm/versions/node/v10.15.1/ /usr/local/Cellar/node
    $ which node
    /Users/shintaro.okamura/.nvm/versions/node/v10.15.1/bin/node
    $ yarn --version
    $ which yarn
    /usr/local/bin/yarn
    $ yarn --version
    1.13.0

gatsby-cliのインストール

    $ yarn global add gatsby-cli
    $ gatsby --version
    2.4.8

Gatsbyでブログを作成する

GatsbyJSには簡単に開発が出来るように様々なStarterが存在しており、Starter Library | GatsbyJSで公開されています。例えば、「gatsby-starter-calpa-blog: Gatsby Starter | GatsbyJS」を使えばほぼ完成されたこのようなブログが簡単に作成できます。

ですが、Reactにすでに習熟しているので無ければ、あまり手の込んだStarterは使わないことをオススメします。「何やってるかわからない」からですw

というわけで今回はGatsbyJS公式のテンプレートである「gatsbyjs/gatsby-starter-blog」を使います。

    $ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
    $ cd blog
    $ yarn develop
    

http://localhost:8000/を開くとブログらしきものが完成していると思います。

スクリーンショット 2019-02-17 22.33.32

確認できたら Ctrl-C で一度開発環境を停止します。

GithubにPush

Githubで新しくリポジトリを作ります。今回作ったのはこちら

okash1n/blog

$ git init
$ git remote add origin git@github.com:okash1n/blog.git
$ git add .
$ git commit -m "gatsby new"
$ git push --set-upstream origin master

今回はここまで!


okash1n

Written by okash1n