はじめに

ご訪問ありがとうございます。サイト管理者の onuma です。この度 onuma-ryota.com ver7.0.0 をリリースしたため報告させていただきます。 この3年間の間で色々なデザイン、技術スタック、機能を経て今の形に落ち着きました。本記事ではそんな ver7.0.0 について紹介したいと思います。

今回使用した技術スタック

• フロントエンド: Gatsby.js
  • 生 JavaScript で書いています。
  • CSS フレームワークは使用していません。CSS を大量に書くのが辛かったので少し後悔しています。
  • gatsby-starter-defaultのテーマから作成しました。
• バックエンド: 言語とかフレームワークは特になし
  • メール送信などは Netlify に付属している機能でいけました。
  • Blog に関しては Markdown ファイルを読み込んでいます。
  • 画像の配信はCloudinaryから実施しています。
• ホスティング: Netlify
  • 特に CD を用意しなくても、Github に Push するだけでホスティングできるのは便利
  • Netlify Functions というサーバーレスでコードを実行できるサービスも提供してくれているみたいなので、ちょっとした処理がほしくなってもどうにかなりそう。

特徴

デザイン

• サイト、及びロゴは@ayano58764615さんにデザインしていただきました。ロゴは桜文鳥がモチーフになっています。かわいい印象の強い桜文鳥をかっこよく転換していただきました!

ロゴ↑

トップページ↑

ブログの記事管理

• ブログの記事はマークダウンで管理しています。DB やバックエンドのロジックを用意しなくていいので色々楽をできます。
• コードのシンタックスハイライトは Prism.js で実施しました。

type Person struct {
    Name string `json:"name"`
}

func (p *Person) sayName() string {
  return p.Name
}

マークダウンファイルで執筆中↑

タグ、カテゴリー、ページネーションのかけ合わせに苦労した

• Gatsuby.js ではgatsby-node.jsという設定ファイルに設定を書くと、ビルド時に雛形を元にページを生成してくれます。各ブログページ生成やページネーションで 1 ページあたりに表示するコンテンツの量もこのファイルで指定します。
  • 今回タグやカテゴリを考慮した上でページネーションを作成する必要があり、面倒なロジックを書く必要がでたため苦労しました。

お問い合わせがあったら LINE に通知する

• 一応、今回のポートフォリオサイトにはお問い合わせフォームが設けてあります。何かありましたらご連絡いただければと思います。
• フォームはNetlify Formsを使って実装しました。
  • フォームに入力して送信するとNetlify Formsにデータが届きます。ここで bot 等による投稿を弾いたあと、私のメールアドレスに転送されます。
    • 転送を検知して LINE に通知が来るように設定してあります。

今後の予定

• とにかく記事数を増やしたいです。
• 潰せるだけ CSS のブレを修正したいです。
  • 機能デザイン両面ともより良いものにしていきたいと思います。
• 現在個人開発中のものや、その他開発中のものも準備が出来しだい掲載したいです。
• Google Analytics を入れたいです。

最後までお読み頂きありがとうございました！これからよろしくお願いします。