💾

GatsbyJS+Netlifyでブログを始める方法【ロードマップ】

今回から数回に分けてGatsbyJSを使ったブログ作成の方法を紹介したいと思います。

前置きとして、僕の場合はGatsbyJSどころかReact・Javascriptを全く知らない状態から3日かかってこのブログを開設できました。本当はもっと早く出来るはずなのですが、無知すぎて時間がかかりすぎました。


自分で見返すためにも他の人が同じ失敗をしないためにも、GatsbyJSでブログを始める方法をロードマップ形式でメモしておこうと思います。


今回のロードマップでの完成形はこちらです。


#2019.08.07 複数の記事を修正しました。

Node・npm・Gitのインストール〜GatsbyJSのインストール

まず初めにパソコンにNodeとnpmをインストールする方法を紹介します。GatsbyJSを使ったブログ作成はここから始まります。Gitは後々ファイルをGithubにアップロードする時に使います。またこのときにインストールしたnpmを使ってGatsbyJSもインストールします。


内容:パソコンにNodeJSとnpmとGitのインストール。npmを使ったGatsbyJSのインストール。


テーマのカスタマイズ〜CSSを反映させる

僕が実際に使っているテーマ(gatsby-starter-blog)を使って紹介します。自分もあまり詳しくないので、あまり難しいカスタマイズはしません。具体的にはコピーライトの表示やブログ名の変更をします。


またテーマのカスタマイズ後、CSSを反映させます。そうすることで背景色や文字色が変えられるのでオリジナリティが出せるようになります。CSSの反映にはいくつかの方法がありますが、今回は一番簡単な方法を使います。


内容:テーマを自分のブログに合わせて編集する。CSSを反映させる。


Githubにアップロード〜Netlifyに登録・ブログ立ち上げ

作ったブログを公開するためにファイルをGithubにアップロードします。解説には初心者向けのGithubDesktopを使います。またアップロードしたブログを実際に公開する方法まで紹介します。


内容:GithubDesktopを使ったアップロード。NetlifyとGithubの接続からNetlifyドメインでのブログ立ち上げまで


記事の更新について

最後に記事の更新方法を開設します 。多くのブログでは省略されていますが、実際に僕が困ったことでもあるので記事にしようと思います。


内容:Githubを使った記事の更新方法


📌記事作成中(公開予定)













WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation