ポートフォリオを作成

公開日：2024-09-30

#Portfolio#Weblog

はじめに

  • これまでに自身のスキルマップページがまとまっていなかったため、自身のポートフォリオページを作成しました。これからはこのページを更新していく予定です。
  • また、ブログページも設けたため、今後は技術的なことや日々の出来事を記録していきます。
  • (2024/10/06追記) コードブロックにシンタックスハイライトを追加した影響でnpmパッケージを更新しました。

ポートフォリオページについて

  • ポートフォリオページはGithub PagesとGithub Actionsを使って作成しています。
  • Next.jsを使って静的サイトを作成し、Github ActionsでビルドしてGithub Pagesで公開しています。

ブログページについて

  • ブログページはMarkdownをHTMLに変換して表示しています。

構築手順

  1. Githubリポジトリ ys39.github.io を作成

  2. Githubページ上でGithub Actionsの設定

    1. Settings -> Pages -> Source にGithub Actionsを選択
    2. Settings -> Pages -> Custom domain に独自ドメイン(itsme.senriy.dev)を設定

  3. ローカルでNext.jsのプロジェクトを作成

    npx create-next-app@latest my-portfolio

  4. 必要なパッケージを追加

    npm install @svgr/webpack remark gray-matter @tailwindcss/typography
npm install rehype rehype-highlight remark-rehype rehype-stringify # シンタックスハイライト用
    • @svgr/webpack : SVGファイルをReactコンポーネントに変換
    • @tailwindcss/typography : Tailwind CSSでテキストスタイルを適用
    • remark: Markdownを解析し、mdast(MarkdownのAST)を生成するライブラリ。
    • remark-rehype: mdastをhast(HTMLのAST)に変換するプラグイン。
    • gray-matter: Markdownのフロントマター（メタデータ）を解析するライブラリ。
    • rehype: hastを解析・変換するためのHTML用ライブラリ。
    • rehype-highlight: hast内のコードブロックにシンタックスハイライトを適用するプラグイン。
    • rehype-stringify: hastをHTML文字列に変換するプラグイン。

  5. Github Actionsの設定

    • .github/workflows/nextjs.yml を作成
    # Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: 'pages'
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            echo "runner=yarn" >> $GITHUB_OUTPUT
            exit 0
          elif [ -f "${{ github.workspace }}/package.json" ]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager"
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: ${{ steps.detect-package-manager.outputs.manager }}
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
          generator_config_file: next.config.mjs
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
          # Generate a new cache whenever packages or source files change.
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
          # If source files changed but packages didn't, rebuild from a prior cache.
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Build with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} next build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

  6. Githubのリポジトリ設定

  7. ポートフォリオページとブログページを作成

    • ソースコードはGithubを参照

    • MarkdownをHTMLに変換する手順は下記の通り

      1. Markdownテキストをremark()で解析して AST(mdast) を生成
      2. AST(mdast)をremarkRehypeでHTML の AST(hast) に変換
      3. AST(hast)に対して Syntax Highlight を適用
      4. AST(hast) を HTML に変換
      5. そのHTMLを文字列として出力し、テンプレートやWebページで利用可能な形にする
      6. layout.tsx でhighlight.jsを読み込みコードブロックにシンタックスハイライトを適用
      const processedContent = await remark() // remark で Markdown を解析して AST(mdast) を生成
  .use(remarkRehype) // AST(mdast) を HTML の AST(hast) に変換
  .use(rehypeHighlight) // AST(hast)に対して Syntax Highlight を適用
  .use(rehypeStringify) // AST(hast) を HTML に変換
  .process(content);
const contentHtml = processedContent.toString();

  8. 最終的なディレクトリ構成

    ├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── posts
│   └── 001_portfolio.md # ブログ記事
├── prettier.config.mjs
├── src  // ソースコード
│   ├── app
│   │   ├── weblog
│   │   │   ├── [slug]
│   │   │   │   └── page.tsx # ブログ記事のページ
│   │   │   └── page.tsx # ブログ一覧ページ
│   │   ├── favicon.ico
│   │   ├── fonts
│   │   │   ├── GeistMonoVF.woff
│   │   │   └── GeistVF.woff
│   │   ├── github-mark.svg # Githubアイコン
│   │   ├── globals.css # グローバルCSS
│   │   ├── layout.tsx # レイアウト
│   │   ├── logo-only.svg # Zennロゴ
│   │   ├── me.webp # プロフィール画像
│   │   ├── page.tsx # ポートフォリオページ
│   │   └── types
│   │       └── post.ts # ブログ記事の型
│   └── components # コンポーネント
│       └── breadcrumb.tsx # パンくずリスト
├── tailwind.config.ts
├── node_modules
└── tsconfig.json

  9. デプロイ

    git add -A
git commit -m "Commit message"
git push origin main
    • Github Actionsでビルドが成功するとGithub Pagesに公開される
    • https://itsme.senriy.dev にアクセスするとポートフォリオページが表示される

まとめ

  • Next.jsを使ってポートフォリオページを作成しました。Github Pagesで公開し、Github Actionsで自動ビルドするように設定しました。
  • 画像の投稿がまだできていないので、今後は画像の投稿機能を追加していきたいと思います。

参考

😄 END 😀