Self Esteem is a magazine-style editorial template built with Astro that delivers a full-viewport cover homepage, an MDX blog with tag archives, and an RSS feed as a complete static site.
What is Self Esteem?
Self Esteem is an open-source Astro template that re-implements a CodePen magazine layout by Aysenur Turk as a full project. It takes Markdown and MDX content stored in content collections and generates a static site with a magazine-cover index page, a blog index at /blog, individual post pages at /blog/[slug], tag archive pages at /tags/[tag], a studio page, a contact page, a data-driven work/portfolio page, a 404 page, and an RSS feed at /rss.xml. The template is published on GitHub by m-durana under the MIT License.
Key Features
- Full-viewport magazine cover — The homepage at
/presents a magazine-style cover with a featured article hero, supporting an editorial feel out of the box. - MDX blog with frontmatter — Write posts as
.mdor.mdxfiles insrc/content/posts/; frontmatter fields includetitle,bigTitle,emphasis,headline,excerpt,author,date,cover,tags,featured, andpageNumber. - Generated tag archives — Tag pages at
/tags/[tag]are built automatically from thetagsarray in post frontmatter. - Content collections —
src/content/also holdsfeatured/for sidebar entries andwork/for portfolio items, each validated throughcontent.config.tsschemas. - RSS and social meta — An RSS feed is generated at
/rss.xml, andBaseLayoutincludes Open Graph and Twitter meta tags for sharing. - Reusable layouts and styling —
BaseLayoutandPageLayoutare included, with a global SCSS file atsrc/styles/global.scss;STYLEGUIDE.mddocuments design tokens, type scale, and brand guidelines. - Subpage starter template —
_template.astro.exampleinsrc/pages/provides a starting point for adding new pages, andMenu.astrolets you add nav links.
Who is it for?
Self Esteem suits writers, designers, and Astro developers who want a magazine-style publication without building one from scratch. Independent writers and editors can use it to publish long-form articles with a dramatic cover page. Designers can reuse the editorial typography and layout for portfolio or studio sites. Astro developers can study how content collections, tag generation, and RSS feeds are wired together.
What can you do with Self Esteem?
- Publish a magazine blog: Create a front page that looks like a magazine cover, with featured posts and sidebar content.
- Build a portfolio: Populate the data-driven
/workpage from theworkcontent collection, and use the/studiopage for an about or services section. - Distribute via RSS: The automatically generated
/rss.xmlfeed lets readers subscribe to new posts.
How does Self Esteem work?
Scaffold a new project with npm create astro@latest -- --template m-durana/self-esteem-astro (also available for pnpm, yarn, and bun), or clone the repository directly and run npm install. Use npm run dev to preview at http://localhost:4321 and npm run build to output a static site to ./dist. To add a post, drop a .md or .mdx file into src/content/posts/ following the documented frontmatter schema; to add a page, copy _template.astro.example to a new file in src/pages/.
Pricing
Self Esteem is free to use and modify under the MIT License.
FAQ
Is Self Esteem free?
Yes, the template is open-source under the MIT License, so you can use it for personal or commercial projects without a license fee.
How do I feature a post on the magazine cover?
Set featured: true in the post's frontmatter; the template places featured posts in the homepage hero and sidebar.
What content formats are supported?
Posts can be written as Markdown (.md) or MDX (.mdx) files inside src/content/posts/.
Does Self Esteem include an RSS feed?
Yes, an RSS feed is generated at /rss.xml, and social meta tags are included in BaseLayout.
How do I add a new subpage?
Copy src/pages/_template.astro.example to a new .astro file in src/pages/, edit its props, and add a link in src/components/Menu.astro if it should appear in navigation.
