Add GitHub Actions workflow for deployment, update README, and enhanc…

…e styling and content
dayongkr · Nov 12, 2024 · 3f1be76 · 3f1be76
1 parent 0b45f0d
commit 3f1be76
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 19 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -0,0 +1,70 @@
+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:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Get Next.js cache
+        uses: actions/cache@v4
+        with:
+          path: .next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.ts', '**.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-
+
+      - name: Build
+        run: pnpm build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  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
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## 이다용 블로그
+# 이다용 블로그
 
 안녕하세요, 프론트엔드 개발자 이다용이에요.
 

diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "export",
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -7,19 +7,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106",
-    "next": "15.0.3"
+    "react-dom": "19.0.0-rc-66855b96-20241106"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.3"
+    "typescript": "^5"
   },
   "packageManager": "[email protected]"
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,19 +3,25 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --background: #2c3639;
+  --foreground: #dcd7c9;
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  @apply text-lg antialiased;
+}
+
+.prose * {
+  @apply mb-4;
+}
+
+.prose h1 {
+  @apply text-4xl font-bold;
+}
+
+.prose a {
+  @apply underline underline-offset-4;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import Link from "next/link";
 
 const pretendard = localFont({
   src: "./fonts/PretendardVariable.subset.woff2",
-  variable: "--font-pretendard",
   display: "swap",
   weight: "75 920",
   style: "normal",
@@ -23,7 +23,16 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <body className={`${pretendard.variable} antialiased`}>{children}</body>
+      <body className={pretendard.className}>
+        <div className="mx-auto max-w-screen-md py-8 px-4">
+          <nav className="mb-8">
+            <Link href="/" className="font-bold text-2xl">
+              이다용
+            </Link>
+          </nav>
+          {children}
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,40 @@
+import { ExternalLink } from "@/components/ExternalLink";
+import Link from "next/link";
+
 export default function Home() {
-  return <main></main>;
+  return (
+    <div className="flex flex-col gap-8">
+      <article className="prose">
+        <h1 className="!text-xl">
+          세상에 도움이 되는 것들을 만드는 것을 좋아하는 소프트웨어 엔지니어
+          이다용입니다.
+        </h1>
+        <p>
+          다양하고 많은 사람이 모이는 웹 생태계를 좋아하고, 특히 사용자와 밀접한
+          프론트엔드 개발을 좋아합니다.
+        </p>
+        <p>
+          문제를 가능한 단순한 방법으로 해결하고자 노력하고, 반복되는 작업을
+          자동화하여 생산성을 높이는 것을 좋아합니다.
+        </p>
+        <p>
+          말하는 것보다 듣는 것을 좋아하고, 상대방이 가지고 있는 좋은 부분을
+          배우고자 노력합니다.
+        </p>
+        <p>
+          새로운 은행 경험을 제공하고 있는{" "}
+          <ExternalLink href="https://www.tossbank.com/">토스뱅크</ExternalLink>
+          에서 프론트엔드 개발자로 2025년 1월에 입사할 예정입니다.
+        </p>
+      </article>
+      <h2 className="text-2xl">최근 글</h2>
+      <Link href="/posts/1">
+        <article>
+          <h3 className="text-2xl font-bold">글 제목</h3>
+          <p className="text-lg mb-2">글 요약</p>
+          <p className="text-sm">24.11.06</p>
+        </article>
+      </Link>
+    </div>
+  );
 }
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -0,0 +1,13 @@
+export function ExternalLink({
+  href,
+  children,
+}: Readonly<{
+  href: string;
+  children: React.ReactNode;
+}>) {
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  );
+}