【Gatsbyでブログサイト構築 その1】ブログサイトを作ろう
Last updated: 2022-03-05
${frontmatter.node.title}

ブログサイトを作ろう

目的

楽しく小遣い稼ぎをする。

このブログに書いていること

いまご覧になっているブログサイトをどのように作ったか書いています。
ググりながらコードをコピーしたりして作っていきます。
私がハマったところ、どうやって解消したかなどを書いていきます。

この記事に書いてあること

ブログサイトを作ろうとしているきっかけや、どういうものを作ろうとしているかを書いています。

きっかけ

目新しいことではないですが、担当しているプロジェクトの技術を勉強しつつ、好きなときにできることを探していたら思いつきました。

何かを発信することは何度かトライしてきました。
mixiで日記を書いたこともあります。
プロバイダのブログサイトやはてなブログも使ったりしました。
Google Cloud Platform (GCP)上にWordpressを入れて自分のサイトを作ったりもしました。
どれもなんとなく自分のものではない気がして続かなかったです。

僕はフィリピンのソフトウェア開発の会社に勤めているのですが、マネジメントが主で自分でプログラミングをほとんどやったことがありません。
そんな僕でも、自分でブログサイトを作ってみたくなりました。
ただ、WordpressのためにPHPを勉強する気にもなれず、たまたま担当プロジェクトで使っているReactを使って、ブログサイトができないか調べていたら、見つけました。

GatsbyJS

簡単にサイトができて、しかもレンタルサーバなども契約する必要がないとのことでいっちょやってみることにしました。

ブログサイトの要件定義

何を作るか見失わないためにブログサイトの要件を書いていきます。
『要件定義』という硬い言葉で書いていますが、このシステムで何を実現したいのか書いています。 途中でやりたいことが増えたら、随時追加していきます。

1. コンセプト

  • 初めてでもコツコツ勉強しながら作って、プログラミングの楽しさを実感する
  • ゆるく自分のペースでやっていく
  • 収益につながる(努力は報われることを証明する)

2. 要件のリストアップ

ここにやりたいことをリストアップして実現していきます。

  • かっこよくて見やすい
  • やってみたいことができる
    • プロジェクトマネジメントのノウハウの公開
    • フロントエンド技術の勉強
    • データ分析の勉強

3. ブログサイトづくりのための事前調査

人気のブログサイト等を参考にしながら、ブログ記事に必要な要素をリストアップしていきます。

3-1. ブログ記事の一覧の項目

まだ作っていないものもありますが、これらがあればブログサイトとして公開できそうです。

  • ヘッダー(全ページ共通)
  • パンくず(全ページ共通)
  • 全体のタイトル
  • 全体を表すイラスト
  • 全体の概要
  • 記事一覧
    • 章番号
    • サムネイル画像
    • タイトル
    • 更新日
  • サイトインデックス(全ページ共通)
  • 自己紹介(全ページ共通)
  • 検索窓(全ページ共通)
  • SNSリンク
  • フッター(全ページ共通)

3-2. ブログサイトを構成する配色案を検討します。

色見本と自分の考えるイメージを照らし合わせながら色を選びます。

あとでもいいですが、レイアウトが変わるとイメージが変わるので、僕は最初に決めました。 このサイトはグリーン系で作ります。

3-3. 技術選定

  • 開発フレームワーク
    • Gatsby
    • React
  • 開発環境
    • WSL2 (Ubuntu)
  • リポジトリ
    • Github
  • ホスティングサイト
    • Netlify

ブログサイトの要件はここまでです。

お読みいただきありがとうございました。