Asaba Harumasa's Blog

A blog for Harumasa from Section 6 to express his thoughts!

Comment

Inspiration

As a member of the HSO Section 6, Harumasa experiences a range of complex internal thoughts, observations, and reflections stemming from his demanding profession, his unique medical condition, and his somewhat cynical yet occasionally insightful worldview.

Currently, he lacks a dedicated and private space to articulate these thoughts, leading to potential emotional bottling, missed opportunities for self-reflection and processing, and a lack of personal connection with others who might share similar experiences or appreciate his perspective.

This absence of a consistent outlet hinders his ability to organize his thoughts, express his unique experiences, and potentially find a sense of personal connection beyond Section 6.

What it does

This blogs provides Harumasa a blogging platform with:

  • MDX support (JSX in Markdown)
  • Multiple blog layouts and listing views
  • Tag and author management
  • Commenting systems
  • Mobile responsiveness
  • Dark mode

How we built it

  • Frontend: Next.js (with App Directory), React Server Components, Tailwind CSS.
  • Content: Managed via Contentlayer, written in Markdown/MDX.
  • Styling: TailwindCSS with customizable themes.
  • Configuration: Modular, with dedicated files for metadata, authors, layout, and components.
  • Deployment: Supports Vercel, Netlify, GitHub Pages, and static exports.

Challenges we ran into

One of the main challenges encountered during development was ensuring compatibility between server-side features and static site exports. Some features, such as commenting systems and newsletters, rely on server-side functions which cannot run in static hosting environments. Additional challenges included integrating various third-party services (like analytics and search tools) while maintaining performance and adapting content management workflows using Contentlayer.

Accomplishments that we're proud of

The project successfully delivers a high-performance, production-ready blog template that is both flexible and lightweight. It achieves a near-perfect Lighthouse score and supports a wide range of features including dark mode, SEO enhancements, and responsive design. It also offers seamless integration with several analytics platforms, commenting tools, and newsletter services. The architecture is designed to be developer-friendly, with clear configuration files and extendable components.

What we learned

Through building this project, the team gained valuable experience with modern frontend development using React Server Components and the Next.js App Directory. They learned how to structure and type content using Contentlayer and how to manage complex customization through modular configuration. Additionally, they developed an understanding of how to support both dynamic and static site features, and how to ensure performance and accessibility across various deployment environments.

What's next

Future efforts should focus on verifying the compatibility of the blog across different hosting providers, especially in static environments like GitHub Pages. Usability testing for authors and end-users would help refine the content creation and navigation experience. End-to-end tests should be developed for dynamic features such as the commenting systems, newsletter forms, and command palette search. Furthermore, performance testing after customization or adding new features will be important to ensure the site remains fast and responsive.

Built With

Share this project:

Updates