自己紹介、ポートフォリオ、オリジナルコース、コードスニペット、ブログなどの様々なコンテンツを掲載することができる Web サイトプロジェクトです。Next.js + Chakra-UI + mdx(markdown) をメイン技術として使用しています。
https://suzukalight.com にて公開および運用中です。コンテンツサンプルとして、下記リンクを参照ください。
- Next.js (React.js)
- Chakra UI
- markdown (next-mdx-remote)
- remark.js
- Node.js が必要です
- どの OS でも開発できます（私は Windows10 + WSL2 で開発しています）
git clone https://github.com/suzukalight/suzukalight-com
.env.local.sampleファイルを.env.localファイルとして複製し、必要に応じて設定を変更してくださいnext-seo.config.jsファイルを正しい設定に変更してください
yarn
yarn dev
http://localhost:3000 に dev server が起動します。
yarn fix
yarn test
fix: tsc, eslint, prettier が順に走りますtest: jest が走ります
yarn storybook
http://localhost:6006/ で閲覧することができます。
Vercel にデプロイしています。手順は下記記事にて公開しました；
https://suzukalight.com/blog/posts/2020-12-20-vercel-deploy
単なる markdown ブログだけではなく、以下のような種類のコンテンツを作成することができます。
- About: あなたの自己紹介
- Works: あなたのポートフォリオ
- Course: 複数の章節からなる、続きもののドキュメント
- Blog: 日記や調べ物など、比較的長文のもの
- Snippet: コードスニペットなどの、メモ書き程度のもの
これらをそれぞれのコンテンツタイプに適した形で表示する機能を有しています。
next-mdx-remote, remark.js, prism.js などを使って markdown で書かれたコンテンツを HTML へ変換して表示しています。
コンテンツは /public/contents/x ディレクトリで管理しており、そこへサブディレクトリを切って index.md(mdx) ファイルを置くと、サブディレクトリを URL とみなして自動的に公開します。画像などのコンテンツも markdown と同じディレクトリに置けば同時に公開できます。
詳細は コンテンツに関する README を参照ください。
複数の章節で構成される「続き物のドキュメント」を作成することができます。電子書籍の作成、セミナーの作成、アドベントカレンダーの実施などにお使いください。
コースの各章は作成日順で自動的に連番処理され、目次も作成されます。ほか詳細は コンテンツに関する README を参照ください。
ブログやスニペットに frontMatter.tags にタグを付与すると、タグごとの記事一覧ページや、タグ一覧ページを自動的に作成し、反映します。
/src/pages/sitemap.xml.tsx によって SSR にて自動的に生成し、更新されます。特別なコマンドなどは必要ありません。
記事のタイトルイメージは、画像ファイルの他に、emoji を指定することもできます。画像を用意するほどでもないようなコンテンツに対しても、簡単に見栄えを良くすることができます。
| 機能 | ライブラリ |
|---|---|
| カルーセル表示 | react-slick, slick-carousel |
| SNS シェアボタン | react-share |
| SEO 対策 | next-seo |
| Twitter 埋め込み | react-twitter-embed |
| シンタックスハイライト | remark-prism, remark-code-titles, remark-custom-blocks, remark-unwrap-images |