Home

このサイトができるまで

Ko Yamaura

はじめに

大学の時に訳もわからず無我夢中でポートフォリオサイトを作っていたのですが、全然いけてないので作り直しました。

仕事ではインフラ(AWS)、バックエンド(PHP)をメインで行っているので、フロントの開発はど素人ですが、せっかくなので gatsbyjs を使って作ろうと思いました。

「自分のポートフォリオサイトを用意したいなー」という人がこの記事を読んだら同じように作れた！というのが理想ですね。頑張ります。

モチベ

モチベは大事です、大抵の場合、やる気と理想は高いが先が長すぎて途中で挫折がほとんどだと思うので、何事も小さく始めるべきだと思います。 自分はこういうモチベでした。

  • 時間をかけたくない
  • お金もかけたくない

やったこと

実際にサイトを用意する上で行ったことを順番に書きます。

  1. gatsbyjs のチュートリアルをやる https://www.gatsbyjs.com/docs/tutorial/
  2. お名前.com でドメインを取得 https://www.onamae.com/?btn_id=onamaetop_header_logo_19th_newdesign
  3. aws のアカウントを用意
  4. route 53, ACM を設定
  5. cloudfront,s3 を設定
  6. てきとー html ファイルをアップロード、cloudfront のキャッシュをパージ、作ったドメインでページが見れるか確認
  7. gatsbyjs で実装

1 でおよそ 1 日、2 ~ 6 の項目で半日くらいです。そのあとは体裁を整えて再度手順 6 の繰り返すことになります。

それぞれの項目での注意点

用意したページ

  • index(トップページ)、ブログ一覧を兼ねる
  • ブログ詳細
    • マークダウンで書きたい
    • 記事のページ用の db は持ちたくない
  • about
    • 自己紹介と連絡先を表示
  1. このサイトができるまでに何をしたのか

まとめ

いかがでしたか?ちょっとまだ出来等に書いた記事なので、あとで図とかを用意しますけど、結局誰向けに書くべきかはっきりしないことには内容も変わってきますかね。

余談 インフラ

最初は github.io で公開してドメインを当てればいいかなとも思いましたが、勉強のためにも AWS で構築しようと思いました。 ただ、ブログ記事のために db を用意するか考えましたが、gatsby にマークダウンファイルから html を生成するプラグインがあり、URL を作れるので git 管理下におこうと思いました。 結果、利用したのは

  • route 53
  • cloudfront
  • s3 bucket です。

料金的には xxxx くらいかなと思いますが、まだ出したばっかりなので、具体的にいくらかはある程度運営してからまた記事にします。