Self Esteem

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 .md or .mdx files in src/content/posts/; frontmatter fields include title, bigTitle, emphasis, headline, excerpt, author, date, cover, tags, featured, and pageNumber.
• Generated tag archives — Tag pages at /tags/[tag] are built automatically from the tags array in post frontmatter.
• Content collections — src/content/ also holds featured/ for sidebar entries and work/ for portfolio items, each validated through content.config.ts schemas.
• RSS and social meta — An RSS feed is generated at /rss.xml, and BaseLayout includes Open Graph and Twitter meta tags for sharing.
• Reusable layouts and styling — BaseLayout and PageLayout are included, with a global SCSS file at src/styles/global.scss; STYLEGUIDE.md documents design tokens, type scale, and brand guidelines.
• Subpage starter template — _template.astro.example in src/pages/ provides a starting point for adding new pages, and Menu.astro lets 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 /work page from the work content collection, and use the /studio page for an about or services section.
• Distribute via RSS: The automatically generated /rss.xml feed 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.