Build and Host Your NextJS Static Blog for Free
Build and Host Your NextJS Static Blog for Free
A simple side project to take Brazilian Jiu-Jitsu video timestamp notes.
This post will share my experience building a statically generated website, BJJ Notes using NextJS deployed to Render.
Source: Unsplash
Why did I build a statically generated website?
Since learning BJJ, I’ve wanted to build a simple website where I could timestamp Brazilian Jiu-Jitsu (BJJ) videos then add notes to those timestamps. I want to write these notes in markdown format. BJJ has many small details in every single position. I think it’s best to capture them with video timestamps and notes. The timestamps help me remember the details behind each position, submission, or guard.
Why NextJS?
I’ve been trying to learn as much with React. I found out about NextJS from my previous company. When I came across NextJS’s tutorial, I noticed an option to generate a static site. The example project is perfect for what I need since it is already generating blog posts from a markdown file using Server Side Rendering.
Why Render?
I’ve been using Render in my other side projects, including my website:ardy.me. I find it easy to use because of its good GitHub integration. The fact that it offers free hosting for static web sites makes my decision to choose a no-brainer.
High-level design
The web app will work as follows.
Theory of operation
- Web app reads from the markdown file under the
posts/folder. - Display the post when running with Server Side Rendering. Useful for local testing by running
npm run dev - Build the static website by running
npm run build
Product requirements
- The user should be able to embed YouTube videos by specifying the video ID in the markdown file.
- The user should be able to write timestamps with notes for the YouTube video in the markdown file.
- The web app should be able to read from the markdown file and display them as Posts.
- The web app should be able to generate a static website that doesn’t need a backend server.
Design goals
- The web app can be run as a Server-Side Rendered app locally to test it quickly.
- We can generate the static website from the web app during build time.
- We can host the static website in any CDN or static website service provider.
Starter NextJS app
Start from the NextJS Create app tutorialhere. Once the app is complete, we can modify it to achieve the product requirements that we are aiming for. Let’s highlight below what I have added and changed for my BJJ Notes project.
Main components of the app
Let’s dissect the app’s main components below, particularly the Video and timestamps, which are the primary additions to the original Starter NextJS App.
Video and timestamps
Found in:components/video.tsx
The video component contains the methods to render the YouTube video and the timestamps with notes. I’m using thereact-youtubepackage to display the YouTube video.
As for the timestamps, I’m parsing the timestamp value from the Markdown. The displayed timestamps anchor tags then trigger the_seekTofunction when clicked.
TheseekToandlistHtmlfunctions used for video timestamps.
TheseekTofunction skips the video to the specified timestamptime. TheeventTargetobject provides access to the player event handers.
Deployment to Render
Render provides free hosting for static websites. You can find my Render configuration in thisrender.yamlfile in the root folder of the repository.
render.yamlFile to configure to Render deployment build.
The YAML file is telling Render to deploy a static website from the specified GitHub repository. Render’s build pipeline will run the`