Web

Web制作

hero

このサイトについて

私はエンジニアとして仕事をする際にNotionに大量のメモを取っています。

また、人にコードを教えるときもNotionで記事を書いて配っています。

そうしていると、

・自分用のメモを自分だけで見るのはもったいない。何か他の人の役に立つものがあるかも知れない。
・Notionで大量に書いた記事そのままでは、他の人は何がどこに書いてあるか分かりづらい。

こういったことを考えるようになり、このサイトを作り始めました。

まだまだ作り始めたばかりなので、試行錯誤中ですが、参考程度に読んでいただけたらと思います。

 

Thanks:このサイトの技術スタック

素晴らしいものを世の中に出してくれてありがとうございます。
私はあなた達の仕事を尊敬します。(願わくば私もそのような人でありたい)

 

Next.js

Reactのフレームワークです。app routerを採用しました。

https://nextjs.org/

 

Vercel

Next.jsで作ったサイトをdeployしています。とても楽。

https://vercel.com/

 

GSAP

画面にアニメーションを付けるのに利用しました。

https://gsap.com/

 

microCMS

ヘッドレスCMS。無料ではモデルが3つしか作れないので、後述のNewtと併用。
有料になると一気に料金上がる。。。

https://microcms.io/

 

Newt

ヘッドレスCMS。
こちらも使いやすい。ただ、記事の上限が2MBだったので、画像を多用する記事作成で制限に引っかかってしまった。画像だけ他で管理するのも面倒なので、どうしよう。NotionかKurocoを検討中。

https://www.newt.so/

 

Kuroco

ヘッドレスCMS。

使いやすい。従量課金性なので運用しながら様子を見てみる。

https://kuroco.app/ja/

 

Firebase

Googleログイン機能を試しに入れてみました。

まだ何も機能はないですが、お気に入り機能とか付けていきたいと思っています。

 

Next.js+ヘッドレスCMSではじめる! かんたんモダンWebサイト制作入門

書籍:このサイトを構築するのに大変参考にさせてもらいました。

https://amzn.to/401u5EV

 

HubSpot

CRM・SFA・MA・CMSで使われるサービスですね。

Formで使っています。reCaptchaを入れたら、スパムが止まりました。

https://www.hubspot.jp/

 

 

 

フォルダ構成

良い構成を模索中

.
├── README.md
├── app
│   ├── _actions
│   ├── _components
│   ├── _constants
│   ├── _libs
│   ├── _styles
│   ├── api
│   ├── contact
│   ├── favicon.ico
│   ├── globals.css
│   ├── input
│   ├── layout.tsx
│   ├── linux
│   ├── lp
│   ├── news
│   ├── not-found.module.css
│   ├── not-found.tsx
│   ├── page.module.css
│   ├── page.tsx
│   ├── portfolio
│   ├── robots.txt
│   ├── sitemap.ts
│   ├── system
│   └── web
├── database-debug.log
├── dataconnect
├── dataconnect-debug.log
├── doc
├── firebase.json
├── firestore-debug.log
├── firestore.indexes.json
├── firestore.rules
├── functions
├── generated
├── img-mv.jpg
├── next-env.d.ts
├── next.config.mjs
├── no-image.webp
├── node_modules
├── package-lock.json
├── package.json
├── public
├── storage.rules
├── tsconfig.json
└── ui-debug.log


 

 

Thanks Design

素晴らしい素材をありがとう。

 

時短だ

https://jitanda.com/

 

フリーペンシル

https://iconbu.com/