Blog is a Nuxt.js-powered blog template that generates a static site from markdown posts, styled with TailwindCSS and SCSS, and published live at explosion-scratch.github.io/blog.
What is Blog?
Blog is a static blog template built with Nuxt.js (version 2, based on the documented directory structure) that renders markdown posts using Nuxt Content and Tailwind Prose. The repository provides a front page with a dynamically generated SVG ripple effect and post pages featuring a scroll progress bar, gradient titles, and interactive Vue components embedded in iframes. It outputs a fully static site via yarn generate and is designed to be hosted on GitHub Pages.
Key Features
- Markdown-first content — Posts are written in markdown and pulled into the post list with Nuxt Content, then styled with Tailwind Prose and the Prism Duotone Sea code theme.
- Animated front page — A CSS
drop-shadowripple effect is applied to an SVG path, randomly built at runtime from 10 keyframes. - Scroll progress bar — JavaScript measures scroll progress and sets the width of a progress element, with a CSS transition for smooth motion.
- Adaptive header — The header hides for the first 150px of scrolling, then re-appears and shows on hover toward the top of the screen.
- Gradient post titles — Titles use CSS
background-clip: textwith a linear gradient from green to blue, handled by Autoprefixer for cross-browser support. - Interactive examples — Live code examples are embedded via Vue components inside iframes, letting readers interact with demos without leaving the post.
- Server-side prev/next navigation — Bottom buttons compute the previous and next post at build time and link to them when they exist.
- Yarn-based build — Install dependencies with
yarn install, develop with hot reload atlocalhost:3000viayarn dev, and generate a static site withyarn generate.
Who is it for?
Blog is for developers who want a Nuxt-based static site for personal or technical writing. It suits technical bloggers who want markdown content with syntax highlighting and live demos, developers learning Nuxt who can study a production project using Nuxt Content, Tailwind, SCSS, and custom Vue components, and open-source authors who want a clean blog design with a permissive (if attribution-requiring) license.
What can you do with Blog?
- Technical bloggers: Write posts in markdown, get syntax-highlighted code with Prism Duotone Sea, and embed live demos through Vue components in iframes.
- Developers learning Nuxt: Study a production Nuxt.js project that uses Nuxt Content, Tailwind, SCSS, and custom Vue components.
- Open-source authors: Fork the repository and adapt the design; the license requires CC BY-NC-SA 4.0 and credit with a link back to the original author when reused outside of a GitHub fork.
How does Blog work?
The blog reads markdown files from a content directory (managed via Nuxt Content), converts them to HTML with Tailwind Prose styling, and builds a static site. The front page generates a ripple effect at runtime, and post pages compute navigation server-side. The build is triggered with yarn generate, which outputs static files ready for hosting.
FAQ
Is Blog free to use?
The code is open-sourced by explosion-scratch, but with a custom license: reuse requires CC BY-NC-SA 4.0, credit near the top of the README or project description, and credit on the site linking to the GitHub profile. Forking via GitHub's fork button exempts the README credit requirement.
What frameworks does Blog use?
Blog is built with Nuxt.js (a Vue framework), uses TailwindCSS and SCSS for styling, Nuxt Content for markdown-based posts, and Prism for code highlighting. JavaScript handles scroll progress, header visibility, and ripple generation.
Can I modify Blog to create my own blog?
Yes, you can fork the repository and customize it. The README explains the directory structure: assets for uncompiled files like Sass, components for Vue components, layouts for page shells, pages for routes, plugins for pre-Vue instantiation scripts, static for files mapped to the root, and store for Vuex.
Is Blog statically generated?
Yes, yarn generate produces a fully static site that can be hosted anywhere, including GitHub Pages as demonstrated by the live site at explosion-scratch.github.io/blog.
