koblog

高校生のWEBデザインブログ

Gatsbyで知識ゼロからブログを作るまでの道のり【体験談】

サムネイル
今回はGatsbyJSを使ってゼロからブログを作る方法を紹介します。

 

他の記事と違い(?)純粋な解説記事ではないのでほとんど需要がない内容ですが、書きたいことを書いて参考になればと思います。今回は体験談なので、作り方だけを知りたい方は下の記事をどうぞ。

 

リンク: Gatsby+Netlifyでブログを始める方法【ロードマップ】

(サブブログに飛びます)

 

 

Gatsbyでブログを作ろうと思った理由

サブブログでも書いていますが、主な理由は下の4つです。

・オフラインで書きたかった
はてなブログの広告が嫌だった
Gatsby(React)に興味があった

・表示が爆速

 

そしてもう一つ電車の中で気づいたことですが、Gatsby製ブログはオフラインでも見ることができます。このような事が今まではてなブログで書いてきた僕からしたら、とても興味が惹かれるポイントになりました。

 

Gatsbyで作るブログはとにかく自由度が高いです。

 

僕の構築環境

・パソコン

・JS知識ゼロの高校生

GitHub+Netlify

 

GatsbyJavascriptのReactを使います。Reactに関しては知らなくても公式サイトで習得することができます。しかし英語かつJavascriptを知っていること前提なので少しハードルは高めです。

 

またGitHub+Netlifyはブログの公開に使います。僕は契約をしていませんが、独自ドメインを設定することもできます。

 

パソコンに関しては何でも大丈夫ですが、基本的にChrome OSでは無理です。Mac・Windoswならどちらでも大丈夫です。スペックもそこまで必要ないと思います。

 

大まかな手順

1.パソコンにGatsbyをインストール

2.ローカルでブログを立ち上げる

3.ブログのカスタマイズ

4.Githubにアップロード

5.Netlifyで公開

 

大まかな手順はこんな感じです。このなかでも特に難しい(=つまづきやすい)のは Gatsbyのインストールとカスタマイズです。今回僕はCatnoseさんがGitHubで公開しているコードを参考にしたので何とかなりましたが、一からカスタマイズするとかなり難しいです。

 

手順について詳しくはサブブログで書いています。 

リンク: Gatsby+Netlifyでブログを始める方法【ロードマップ】 

 

失敗しやすいポイント

コマンドプロンプト・ターミナルになれていない

コマンドプロンプト・ターミナルに慣れていない人は絶対に覚えるべきです。僕は知らずに始めたので、本当はプラグインをブログのフォルダーにインストールしなければいけないところを、パソコン本体にインストールしてしまいました。

 

最初ははそのことにも気づかず起動しないことを不思議に思いつつも、やっとcd フォルダー名を使えばいいことに気づいたころには数日後。完全に遠回りしました。

 

npmのエラーで使えない

サブブログでも対処法を紹介していますが、Javascriptを全く知らなかったため、はじめはとても困りました。参考にしていたブログでは同じようなエラーが起きていないので、どうやらパソコンでの設定が原因のようです。今回は結局海外のブログを参考にして解決しました。

 

英語が読めない

公式サイトは英語です。普通の英語はそこそこ読めますが、やはり専門用語もでてくるのでかなり難しいです。Google翻訳と電子辞書で必死に翻訳したのは内緒です。

 

リンク:https://www.gatsbyjs.org/

 

周りに頼る人がいない

これは僕の場合ですが、周りに頼る人・話ができる人がいません。親や友達は全く興味がないです。また他の人の場合でもあまりGatsbyでブログを作ろうとしている人は周りにいないと思います。なので他の方で困っている人はTwitterなどで声をかけてくれれば、できるだけの手伝いたいと思っています。知識はなくても体験談はあります。

 

最後に

今回はほとんど体験談になってしまいましたが、サブブログではきちんと解説しているので良かったらみてください。ちなみに名前ですが「Koblog」(大文字)です。

 

リンク:https://pensive-dubinsky-5fa5b1.netlify.com/

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる