📚

製作したホームページのスタックを解説

2022/06/13に公開

活動や宣伝の都合上、ホームページが必要になったので作りました。結果、手っ取り早くそれっぽいものができたので満足しています。

https://info.secretsoup.org

制作にあたって使っているフレームワーク・サービスの紹介

  • なるべく工数をかけたくない
  • なるべく費用をかけたくない
  • とはいえクオリティは高い方がいい

このような考えに基づき、次の2つを使用しています

  • Webサイトの構築: GatsbyJS
  • Webサイトのホスティング: CloudflarePages

解説

続いて、上記で紹介したツールについて簡単に解説します。

GatsbyJS

https://www.gatsbyjs.com/

簡単にサイトを構築できるいわゆるサイトジェネレーターと呼ばれるものです。テーマを活用すればコマンド打つだけでそれっぽいWebサイトを構築できます。プラグインも充実しており機能を簡単に追加できたりと、その後のカスタマイズも可能です。
サイトを作るための具体的な手順については調べればたくさん出てくるので割愛。

Gatsby製のサイト開発に必要な知識

Gatsbyで作られたサイトの開発をおこなっていく際には、次の知識が必要になってきます。

  • HTML/CSS
    そもそもの話になりますがGatsbyに限らず、サイトを作るときは基本的に必要になります。ちなみに自分はCSSが嫌いです。
  • ReactJS
    GastbyはReactJSというフレームワークをもとに作られています。したがってReactJSの知識も必要です。ネットを見ると参考になる記事やチュートリアルが充実しているので独学する際にも困らないと思います

https://reactjs.org/

Cloudflare Pages

今回製作したホームページではホスティングサービスとして、CloudflarePagesを使用しています。
ホスティングサービスとはWebサイトを簡単にWeb上に公開するためのサービスです。近年はさまざまなホスティングサービスが存在しますが、小規模なサイトは基本的に無料で利用できます。

https://pages.cloudflare.com/

他ホスティングサービスとの比較

VercelやNetlify等あるが、シンプルに高速さや同サービス内でドメインの取得・管理もできる利便性からCloudflarePagesに決めました。また、比較検討の際には次の記事が参考になりました
https://riq0h.jp/2021/08/07/132024/

最後に: チュートリアルの紹介

説明だけではわからないと思うので、とりあえずやってみるといいと思います。自分に必要な情報を自分で集め、勉強を進めたり開発ができるようになることを期待します。

GitHubで編集を提案

Discussion