ポートフォリオを作成
公開日:2024-09-30
はじめに
- これまでに自身のスキルマップページがまとまっていなかったため、自身のポートフォリオページを作成しました。これからはこのページを更新していく予定です。
- また、ブログページも設けたため、今後は技術的なことや日々の出来事を記録していきます。
- (2024/10/06追記) コードブロックにシンタックスハイライトを追加した影響でnpmパッケージを更新しました。
ポートフォリオページについて
- ポートフォリオページはGithub PagesとGithub Actionsを使って作成しています。
- Next.jsを使って静的サイトを作成し、Github ActionsでビルドしてGithub Pagesで公開しています。
ブログページについて
- ブログページはMarkdownをHTMLに変換して表示しています。
構築手順
-
Githubリポジトリ
ys39.github.io
を作成 -
Githubページ上でGithub Actionsの設定
- Settings -> Pages -> Source にGithub Actionsを選択
- Settings -> Pages -> Custom domain に独自ドメイン(itsme.senriy.dev)を設定
-
ローカルでNext.jsのプロジェクトを作成
npx create-next-app@latest my-portfolio
-
必要なパッケージを追加
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文字列に変換するプラグイン。
-
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
-
Githubのリポジトリ設定
-
ポートフォリオページとブログページを作成
-
ソースコードはGithubを参照
-
MarkdownをHTMLに変換する手順は下記の通り
- Markdownテキストをremark()で解析して AST(mdast) を生成
- AST(mdast)をremarkRehypeでHTML の AST(hast) に変換
- AST(hast)に対して Syntax Highlight を適用
- AST(hast) を HTML に変換
- そのHTMLを文字列として出力し、テンプレートやWebページで利用可能な形にする
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();
-
-
最終的なディレクトリ構成
├── 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
-
デプロイ
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で自動ビルドするように設定しました。
- 画像の投稿がまだできていないので、今後は画像の投稿機能を追加していきたいと思います。