Merge pull request #64 from thomasrosen/nextjs

use NextJS to statically generate to HTML

.github/workflows/deploy.yml

@@ -35,19 +35,19 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           check-latest: true
           cache: 'npm'
       - name: Install Dependencies
         run: yarn
       - name: Add gh-pages as a dev-dependency
         run: yarn add --dev gh-pages
-      - name: Build ReactJS App
-        run: yarn build
       - name: Get Music Data
         run: yarn get_music_data
       - name: Convert blog articles to JSON
         run: yarn build_blog
+      - name: Build ReactJS App
+        run: yarn build
       - name: Remove node_modules folder
         run: rm -rf node_modules
       - name: Deploy to GitHub Pages

.gitignore

@@ -1,3 +1,4 @@
+.tmp
 data_about_thomasrosen/
 public/music/
 public/static/music/

backend/index.js

@@ -43,6 +43,9 @@ app.use(function (req, res, next) {
   next()
 })
 
+app.get('/blog', function (req, res) {
+  res.redirect(302, '/articles')
+});
 app.get('/zenris', function (req, res) {
   res.redirect(302, '/articles/zenris')
 });

build_blog.js

@@ -13,10 +13,10 @@ const { generate_rss_feed } = require('./feed_generator.js')
 const dir_articles = './blog/articles/'
 const dir_images = './blog/images/'
 const dir_audio = './blog/audio/'
-const blog_build_dir = './build/blog/'
-const articles_build_dir = './build/blog/articles/'
-const images_build_dir = './build/blog/images/'
-const audio_build_dir = './build/blog/audio/'
+const blog_build_dir = './.tmp/build_blog/blog/'
+const articles_build_dir = './.tmp/build_blog/blog/articles/'
+const images_build_dir = './.tmp/build_blog/blog/images/'
+const audio_build_dir = './.tmp/build_blog/blog/audio/'
 const public_blog_dir = './public/blog/'
 
 
@@ -279,10 +279,14 @@ buildBlog()
     // copy blog_build_dir to ./public/blog
     fs.cpSync(blog_build_dir, public_blog_dir, { recursive: true, overwrite: true });
 
+    // delete tmp blog_build_dir
+    if (fs.existsSync(blog_build_dir)) {
+      fs.rmdirSync(blog_build_dir, { recursive: true });
+    }
 
-    console.info('✅ Blog build complete.')
+    console.info('✅ Blog build complete.');
 
     // end node process
-    process.exit(0)
+    process.exit(0);
   })
   .catch(console.error)

build_music_metadata.js

@@ -187,7 +187,7 @@ async function build_music_metadata() {
     playlists,
   }
 
-  fs.writeFileSync('./public/static/music/playlists.json', JSON.stringify(playlists_metadata))
-  fs.writeFileSync('./build/static/music/playlists.json', JSON.stringify(playlists_metadata))
+  fs.writeFileSync('./public/music/playlists.json', JSON.stringify(playlists_metadata))
+  // fs.writeFileSync('./build/music/playlists.json', JSON.stringify(playlists_metadata))
 }
 build_music_metadata()

get_music_data.sh

@@ -13,20 +13,10 @@ fi
 
 echo "✅ done cloneing";
 
-# for production
-mkdir -p ./build/static/music/playlists
-cp ./data_about_thomasrosen/music/playlists/* ./build/static/music/playlists
-
-echo "✅ done coping playlists to build";
-
 # for development
 mkdir -p ./public/music/playlists
 cp ./data_about_thomasrosen/music/playlists/* ./public/music/playlists
 
-# for development
-mkdir -p ./public/static/music/playlists
-cp ./data_about_thomasrosen/music/playlists/* ./public/static/music/playlists
-
 echo "✅ done coping playlists to public";
 
 node ./build_music_metadata.js

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,33 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  output: 'export',
+
+  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
+  // trailingSlash: true,
+
+  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
+  skipTrailingSlashRedirect: true,
+
+  // Optional: Change the output directory `out` -> `dist`
+  distDir: 'build',
+
+  async redirects() {
+    return [
+      {
+        source: '/blog',
+        destination: '/articles',
+        permanent: false,
+      },
+      {
+        source: '/zenris',
+        destination: '/articles/zenris',
+        permanent: false,
+      },
+    ]
+  },
+}
+
+
+module.exports = nextConfig