1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Gatsby】JS歴ゼロ秒から始める、ポートフォリオサイト構築

Last updated at Posted at 2021-02-13

0.png

この記事でやること

  • 自分語り
  • Homebrew 導入
  • Xcode 導入
  • Node.js 導入
  • GatsbyCLI 導入

あらすじ

どうも、JS 歴ゼロ秒だった、自称 JC です。
普段はプログラムも含めて、音楽を歌ったり、絵を書いたりと
創作活動を行っている僕です。

普段作っているブツは、
Tumblr や forio などのポートフォリオサービスなどを使って
ログとして残してあるのですが、

ふと Twitter を見ていたらこんなツイートが流れてきました。

いいこと言うじゃん…

まあ僕も作品のジャンルバラバラだったり、
ポートフォリオサイトだと困るなーってところがあったりしていたので、
自分のホームページを作りたいなーと思っていたのでした。
そんな中、ふと Qiita を見ているとこんな記事が話題になっていました。

ボカロ P になったし、爆速ホームページを作る! - Qiita

爆速という魅惑的な単語に惹かれ、少し調べてみると、
僕の思い描いていたカスタマイズが施せることがわかってきました。

よし!オラも Gatsby で爆速ホームページ作っちゃうぞ!!

で き ま し た

できたものがこちらになります。

1.png

実際のページはこちらから

僕は極力シンプルなのが好きなのでこんな感じになりました。
いかがだったでしょうか、それではまたお会いしましょう。
ではでは…で終わるわけあるか!!

というわけで始まります、Gatsby でホームページ作り。

  • プログラミング?if とかならまあわかるけど…
  • JavaScript?そんな名前の言語知らない!!

な僕でも簡単に四苦八苦して
自前のポートフォリオサイトを作ることができたので、
本記事もそういう人向けに記述していきます。

ちなみに僕はシンプルなのが好きなので、
装飾などは特に施さずにやっていきます。

…そもそも Gatsby って何?

  • JavaScript と HTML で構成されたフレームワーク
  • 画像の最適化とビルドによる表示速度の最適化
  • プラグインが豊富で制作のサポートも充実
  • Markdown でブログを作ることができたりする

みたいな感じ。
詳しく知りたい人はググってね。

Gatsby でブログを作るまでの手順

僕の PC が Mac なので Mac での手順を記載します。
Windows とかの人は各自「Gatsby 導入」とかでググってください。

Homebrew からの Gatsby 導入

HomebrewXcodeをインストールする

  1. macOS(または Linux)用パッケージマネージャー — Homebrew
    より、Homebrew というパッケージマネージャーをインストールします。
    これは、要するに「Mac でなんやかんやを自動で管理してくれる便利なやつ」です。
    Homebrew のインストール - Qiita
    を参考にしながら導入していきましょう。

  2. Xcodeを導入します。
    これは、要するに「Mac で開発するときに使うツール」です。
    ないとHomebrewから怒られちゃうので導入しておきましょう。

# 1.
# コマンド省略
$ ~

# 2.
$ xcode-select --install

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

  1. HomebrewNode.jsをインストールします。
    これは、要するに「Java という言語を実行できる環境を構築するやつ」です。
    もっと噛み砕くと「サッカーで言うところのサッカーボール」です。
    これがないとGatsbyを動かせないので導入します。
# 1.
$ brew install node

Gitをインストールする

  1. Gitをインストールします。
    これは、要するに「好きなところでセーブできるセーブポイント」です。
    セーブしなくても俺は突き進むぜ!って人がいたらごめんなさい、
    これがないとGatsbyを世に公開することができません。
    「セーブしたところを世に公開するツール」でもあるのです。
    入れましょう。

  2. Gitを使用するには、名前とメールアドレスが必要です。
    正しいかどうかわかりませんが、僕は名前を Sotono にしています。
    本当は本名入れたほうがいいと思うけど、嫌ならいいと思います…

# 1.
brew install git

# 2.
git config --global user.name "Taro Yamada"
git config --global user.email "taro@gmail.com"

Gatsbyを導入する

  1. おまたせしました、ようやく Gatsby を導入します。
    Gatsby の使用にはGatsby-CLIというものが必要となるので、
    これをNode.jsでインストールします。
# 1.
npm install -g gatsby-cli

次回

次回から Gatsby いじりを開始していきます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?