Setup Next.js

.gitignore

@@ -5,4 +5,5 @@ node_modules
 aero-deploy.tar.gz
 aero-debug.log
 debug.log
-dist
+dist
+.next

components/layout.js

@@ -0,0 +1,32 @@
+import Head from "next/head"
+import Link from "next/link"
+const Layout = (props) => {
+  const { title, children } = props
+  const siteTitle = "yude.jp"
+  return (
+    <div className="page">
+      <Head>
+        <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
+        <link rel="icon" href="/static/images/favicon.ico" />
+      </Head>
+      <main>
+        {/*
+        {title ? <h1 className="page-title">{title}</h1> : ``}
+        */}
+        <div className="page-main">
+          {children}
+        </div>
+      </main>
+      
+      <style jsx global>{`
+        body {
+            text-align: center;
+        }
+        .avatar{
+            border-radius: 50%;
+        }
+      `}</style>
+    </div>
+  )
+}
+export default Layout

css/index.module.css

@@ -0,0 +1,3 @@
+.avatar{
+    border-radius: 50%;   
+}

docs/CNAME

@@ -1 +0,0 @@
-yude.moe

docs/index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="assets/images/favicon.ico">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="canonical" href="https://yude.jp">
-    <title>yude.jp</title>
-    <style>
-        body{text-align: center}
-    </style>
-</head>
-
-<body>
-    <picture>
-        <source type="image/webp" srcset="assets/images/avatar.webp" style="width:200px; border-radius: 50%"
-            class="load">
-        <img alt="Profile Pic" src="assets/images/avatar.png" style="width:200px; border-radius: 50%" class="load">
-    </picture>
-    <h1>yude.jp</h1>
-    <p>This page is under the construction.</p>
-    <p>For now, please visit <a class="darkmode-ignore" href="https://yude.moe">yude.moe</a>. Thank you.</p>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
-<script>
-
-  function addDarkmodeWidget() {
-    const options = {
-        label: '🌓'
-    }
-    const darkmode = new Darkmode(options);
-    darkmode.showWidget();
-  }
-  
-  window.addEventListener('load', addDarkmodeWidget);
-</script>
-</body>
-</html>

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "yude.jp",
+  "version": "1.0.0",
+  "description": "Front page of yude.jp",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next -p 30501",
+    "build": "next build",
+    "start": "next start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yudemoe/yude.jp.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/yudemoe/yude.jp/issues"
+  },
+  "homepage": "https://github.com/yudemoe/yude.jp#readme",
+  "dependencies": {
+    "@zeit/next-css": "^1.0.1",
+    "next": "^10.0.6",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}

pages/about.js

@@ -0,0 +1,5 @@
+export default () => (
+    <div>
+      <p>This is the about page</p>
+    </div>
+  )

pages/index.js

@@ -0,0 +1,23 @@
+import Layout from "../components/Layout"
+import Link from 'next/link'
+import Image from 'next/image'
+
+const Index = () => (
+
+    <Layout title="ホーム">
+      <div>
+      <Image className="avatar"
+        src    = "/static/images/avatar.png"
+        alt    = "yude's avatar"
+        width  = {200}
+        height = {200}
+        />
+        <p>🔨 This page is under the construction. 🔨</p>
+        <p>For now, please visit <Link href="https://yude.moe"><a>yude.moe</a></Link>.
+        </p>
+      </div>
+    </Layout>
+    
+  )
+  
+export default Index