自分のサイトを作ってみた

リポジトリ

GitHubのリポジトリを置いときます

• フロントエンド
• ブログのコンテンツ

使用した技術

フロントエンド

• Next.js
  • 今見ているページのフロントエンド
  • SSGでビルドしてGitHub Pagesで配信している
• Tailwind CSS
• react-markdown
  • Markdownで書いたブログ記事をjsx要素に変換する

コンテンツ管理

ブログ記事を書くためのシステムやツール

• Obsidian
  • ここでブログ用のMarkdownを編集する
  • フロントとは別のリポジトリでアップロードして、それをフロントのビルド時に参照する

掲載するコンテンツ

• /
  • トップページ
  • プロフィールやSNSのリンクを配置する
• /skill
  • 技術スタックの一覧ををグラフの形で表示する
  • /skill/[id]
    • 各技術要素の詳細を解説する
    • 現在制作中
• /work
  • これまで作ってきた作品の一覧を表示する
  • /work/[slug]
    • 作品の詳細を解説する
    • 現在制作中
• /blog
  • ブログの一覧
  • /blog/[slug]
    • ブログの記事
  • /blog/tag/[tag]
    • タグ別の記事一覧

ビルド・デプロイ

ビルドとデプロイはGitHub Actionsを用いて行いました。 このサイトはGitHub Pages上で配信されています。

基本的にはnextjs.ymlを用いればよいですが、いくつか設定事項があります。

• next.config.jsにoutput: 'export'の設定を追加してoutディレクトリにビルド後のコードが出力されるように設定する必要がある
• 当プロジェクトではpnpmを利用しているため、そのための設定を追記
• 別リポジトリで管理しているブログ記事のデータを引っ張ってくる処理の追加

設定事項を追記したあとのファイル

参考にしたサイト： 2023年8月版: Next.jsをGitHub ActionsでGitHub Pagesにデプロイする方法

これから

これからやりたいことを書いて今回の記事を終えたいと思います。

• /skill/[id], /work/[slug]を実装する
• ブログ記事を充実させる