---

Personal Blog

Frontend system for my personal website EbbiLogue.
Backend here

Based off the Tailwind Nextjs Starter Blog

This is a Next.js, Tailwind CSS project which is based on Next App directory with React Server Component and uses Contentlayer to manage markdown content.

Some features and designs come from Azurtelie. Thanks!

TODO:

• Random banner images from Claudinary/GooglePhotos/Local
• Banner preview for blogs
• Japanese support
• Store static resources online
• New homepage design
• Game Collection Page
• Useful Tools Page
• New blog list design
• AI Chat Avatar Support
• New album design
• Music api support

Problems

• Google Photos API needs to be fixed: baseUrl will expire after a while
• Refresh will make the language reset
• Carousel area may disppear sometimes

Original Features From the Template

• Next.js with Typescript
• Contentlayer to manage content logic
• Easy styling customization with Tailwind 3.0 and primary color attribute
• MDX - write JSX in markdown documents!
• Near perfect lighthouse score - Lighthouse report
• Lightweight, 85kB first load JS
• Mobile-friendly view
• Light and dark theme
• Font optimization with next/font
• Integration with pliny that provides:
  • Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
  • Comments via Giscus, Utterances or Disqus
  • Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, and Emailoctopus
  • Command palette search with Kbar or Algolia
• Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
• Math display supported via KaTeX
• Citation and bibliography support via rehype-citation
• Automatic image optimization via next/image
• Support for tags - each unique tag will be its own page
• Support for multiple authors
• 3 different blog layouts
• 2 different blog listing layouts
• Support for nested routing of blog posts
• Projects page
• Preconfigured security headers
• SEO friendly with RSS feed, sitemaps and more!

Installation

Prerequisite: Node and Yarn

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install 18
nvm use 18

npm i --global yarn

yarn

Please note, that if you are using Windows, you may need to run:

set PWD="$(pwd)"

Development

First, run the development server:

yarn dev

Open http://localhost:6060 with your browser to see the result.

Edit the layout in app or content in data. With live reloading, the pages auto-updates as you edit them.