How and Why?
A couple of weeks ago, I’ve been working desighning this blog, it started as a digital backup of inherited cooking recipers, in the end it turnde out to be a portfolio page.
If you’re planning on starting something similart yourself, or are qurious about using some of the technologies, here are mroe details and thoughts!
Core concept
The goal is to get the Simplelest and maitainable stack, in line with my motto “IT should be siple!”, while not comporomising performance. Preferably with all the modern features like Build Tools, Treshakeing, ReusableComponents, CodeSplitting etc.
So as such, to use as much web native technologies, HTML, CSS and JS.
A secodnary goal,(or a consequence of the stack) are site Googles Core vitals are all over 98. PageSpeed Insights linkPageSpeed Insights link
The core stack
Let’s start with a quick list of the major technologies used in building this site:
I’ve also been curious about Remix and/or Solid for a long time! I think if I had more time, it would likely be a fantastic option. But Astro with all its integration offers so much freedom, and if necessary I can still add them trough Astro integrations.
Content management
The data,the DB or a CMS is the most critical part of any tech stack. So in this case theres none, Any DBSM unnesesary complictates a almost fully static site. A CMS will just add other dependencies and features that i may not even ever touch. Plain .astro or .js files may do the trick but theres a large flaw There was no way to access the content as data, since each blog post was a chunk of code. MDX and its native support in astro solves it quite elegantly, expecially with the introduction of Content Collections. and without really sacrificing anything. I still have the full power when I’m writing blog posts!
If you’re not familiar with MDX, it’s just a combination of Markdown and JSX. You can include custom Components within the MDX content. I can create components and drop ‘em right in the content, like the one here.
In terms of workflow, I edit my MDX files directly in Zed Code OSS and commit them. Major drawback to this method as with all static site generaotrs is that the page needs to rebuild each commit to master, but Its far the “hastle free” option expeciali in conjucntion with Netlify.
'/components/blog/Tools.astro'
---
import { Icon } from "astro-icon/components";
const data = [
{ title: "astro", version: "v: 4.15" },
{ title: "tailwind", version: "v: 3.4" },
{ title: "mdx", version: "v: 3.1" },
{ title: "netlify", version: "cloudflare DNS" },
];
---
<section class="grid grid-cols-2 gap-4 md:grid-cols-4">
{data.map(({ title, version }) => (
<article
class="flex flex-col items-center justify-center opacity-80
hover:opacity-100 hover:border-muted/30"
>
<Icon name={title} class="size-10 md:size-14 " />
<b class="pt-2 text-xl font-extrabold uppercase">{title}</b>
<i class="text-muted">{version}</i>
</article>
))}
</section>
Styling and CSS
For this new site, I’ve switched to TailwincdCss, After a long strugle of avoiding and implementing my own utility classes, i simply did a dif from my starting css to taiwlinds outpout, and it showd ~42% identical styles, ~21% similar or a sensible combination of two more classes. So i’ve switched to the Official integration for Astro, and its nice to have the same a more portable design system.
When navigating between pages, there should be a not so subtle slide-fade animation. If the header is in a new location, it should slide into place. This uses the very-powerful View Transitions API(opens in new tab). It isn’t yet supported in all browsers, but I think it’s a neat little progressive enhancement.
Astro made working with this API a breeze. sliding and fading things around to create the illusion that two separate elements on two separate pages are the same.
Need something similar? Fill out this simple form to get started.