BlogCord

BlogCord is an Astro blog template that recreates the layout of a Discord client: tags become channels, posts appear as chat messages, and pressing Ctrl/Cmd+K opens a quick switcher instead of a conventional search box. Developers add Markdown files to a content collection and get a styled, deployed blog with no client-side framework attached.

What is BlogCord?

BlogCord is a static blog template built for Astro 5 that restyles a blog as a Discord server. The input is Markdown posts stored in src/content/posts/; the output is a static site with a server rail, a channel sidebar, a message-style feed, tag channel pages, an RSS feed, and a sitemap. It runs on Astro's static build, so it deploys to any static host. Source metadata lists the repository as the work of an individual author under an MIT license.

What makes BlogCord stand out?

• Discord-style layout — a server rail on the far left, a channel sidebar, and a message-style post feed; the sidebar collapses into a drawer on mobile screens.
• Tags as channels — every tag defined in a post's frontmatter becomes its own channel page at tags/[tag], with the tag list generated from content.
• Astro Content Collections — a schema in src/content.config.ts validates each post's title, description, pubDate, tags, pinned, and draft fields.
• Pinning and drafts — the pinned flag lifts a post to the top of the feed, and draft removes it from production builds.
• Three themes — dark, light, and AMOLED variants driven by CSS variables in src/styles/global.css, with the selection remembered per visitor.
• Ctrl/Cmd+K search — a client-side quick switcher backed by a generated search.json index, plus RSS and sitemap output.
• Optional Giscus comments — comment threads can be enabled through settings in src/site.config.ts.
• Tailwind CSS v4, no client framework — styling uses Tailwind CSS v4 with Astro and no React, Vue, or Svelte runtime.

Who is it for?

Developer-bloggers who like chat UIs: writers comfortable editing Markdown can publish posts and organize them into tag channels without touching the layout code.

Astro users looking for a theme: developers already on Astro can drop their posts into the content collection and adjust site.config.ts for title, description, URL, and author.

Discord communities: a community maintainer can turn a tag-based content archive into a site that visually matches the Discord server where the community already lives, with Giscus enabling comments.

What can you do with BlogCord?

• Publish a personal blog: add Markdown files with frontmatter in src/content/posts/ and each one renders as a message in the feed with its tags becoming channels.
• Recolor to match a brand or server: edit the CSS variables under :root, [data-theme='light'], and [data-theme='amoled'] in src/styles/global.css.
• Ship to a static host: the static build output in ./dist works on Vercel, Netlify, Cloudflare Pages, and GitHub Pages; for project sites on a subpath, set base in astro.config.mjs.

How does BlogCord work?

Install dependencies with npm, run npm run dev for a local server on port 4321, and npm run build to type-check and produce a static build in ./dist. Node 22.12 or newer is required. Configuration lives in three places: src/site.config.ts for site settings and Giscus, src/styles/global.css for theme colors, and src/content/posts/ for content.

FAQ

Is BlogCord free?

Yes. The repository is published under the MIT license, so you can use and modify the template. It is listed on the official Astro themes portal, and a live demo is hosted on Vercel.

Does BlogCord need JavaScript or a client framework?

It uses Astro with Tailwind CSS v4 and ships no client framework such as React, Vue, or Svelte. Interactive pieces like the Ctrl/Cmd+K quick switcher and theme switching are handled without a framework dependency, and the site builds to static output.