10 ms·
From Gatsby gridlock to Astro bliss: my personal site redesign
- schpet 2y agoif you keep your site on github, i found keystatic to be a really nice authoring experience: https://github.com/Thinkmill/keystatic https://github.com/Thinkmill/keystatic
- jwngr 2y agoThanks for the link. I prefer the simplicity of .mdx files for now. My use case is very basic and Astro already handles it well.
- schpet 2y agokeystatic supports editing mdx files. keystatic is basically a frontend to update files on github, so if e.g. you want to write a blog post from your phone it can let you do that kind of thing.
- jwngr 2y agoOh cool, I see. Didn't get that impression when I first looked. I will check it out!
- cpursley 2y agoI don’t love js/ts but Astro is so nice. Don’t have to fiddle with react or graphql. Just upgraded to 5 beta and nothing broke. Really well managed project. Oh, and page load speed is insane.
- jwngr 2y agoYeah they really nailed the developer experience. There is very little magic to it.
- garyrob 2y agoIf you don't love js/ts maybe you'd like Civet, which transpiles to js/ts and has Astro integration. (No relationship, I've just been looking at it myself.) https://civet.dev https://civet.dev
- cpursley 2y agoThis does look nice (as a functional programmer - Elixir, elm, etc and fan of coffeescript back before modern js). Even has pipes!
- bryanrasmussen 2y agotranspiling to JS that has if, if else structures instead of just early return if makes me not trust it (based on first "pattern matching" example on civet.dev site). I guess I have my prejudices.
- abeisgreat 2y agoGreat write up, will be curious to see if Astro sticks around. It seems like all the static site gens last a few years then fade away - Jekyll, Hugo, Gatsby, etc.
- jwngr 2y agoMe too! The closer my framework is to raw HTML, JavaScript (really TypeScript nowadays), and CSS, the less lock-in I feel. Those 3 languages are continue to get better year over year. And we are get better framework abstractions every few years too. Astro feels like it hit the sweet spot, but maybe there is more to come.
- swyx 2y agoI am still not over the collapse of Gatsby (for reference i nearly joined the company in 2017, was saved only by my own character flaws). They rode the highs - being the default docs tool for React, and building a massive ecosystem of integrations you could install out of the box. But too many abstractions, divided goals between cloud and OSS, and the better stewardship/design of Nextjs brought it down. There were the simple lessons (https://swyx.io/a-world-without-plugins-cig https://swyx.io/a-world-without-plugins-cig). its easy to say in hindsight that graphql was too much for gatsby. i also believe the company went too hard for number of integrations over quality of them, an issue I had even in my interview. this was a poorer expression of the better insight that seb markbage had; just have a small api surface area bro (https://www.youtube.com/watch?v=4anAwXYqLG8 https://www.youtube.com/watch?v=4anAwXYqLG8) But the bigger lesson is bitterer. Frontend tooling isnt worth that much. the fact that vercel is pretty much the only successful frontend startup of its generation makes it an exception to the rule (there are plenty of smaller companies that are thriving, like tailwind, but it is not a venture scale startup and thats fine). People dont pay for frontend tooling. they expect it to be free, expect it to do everything, get into internicine squabbles between frameworks when they are all basically doomed compared to just betting on React sponsored by Facebook and now Vercel (and a little bit of Shopify), or going back to fullstack frameworks like Django/Rails/Laravel. all frontend tooling, nextjs included, is just leadgen, loss leaders, while investors/salespeople patiently wait until you "grow up" by... building cloud backend/ci/cd services. 5 years ago i wrote about the "frontend ceiling" for individual developer careers (https://x.com/swyx/status/1682748872047886337 https://x.com/swyx/status/1682748872047886337) - i fear this is the "frontend ceiling" for companies. I deeply admire Astro and hope they figure out a way to break the ceiling. Their recent cloud products have been encouraging.
- epolanski 2y agoGraphql was what made me hate Gatsby to be honest. I think Typescript's websites uses it (or used to), and I wanted to fix a bug in the website and holy hell if Gatsby made me dislike the experience..
- andrewingram 2y ago
- dimitrisnl 2y agoI have heard great things about astro, but my experience with Gatsby keeps me away. I would much rather keep an SSR framework like Remix and handle whatever pipeline is needed myself. No magic.
- jwngr 2y agoI felt the same way! But I came around. Take a look at the source code for a component [1]. The .astro format is pretty much just TS, CSS, and HTML. I don't even need React anymore. Way less glue code and dependencies than with Gatsby. There is a configuration file and some abstractions for things like collections, but almost everything is opt-in. [1] https://github.com/jwngr/jwn.gr/blob/master/src/components/blog/BlogPostListItem.astro https://github.com/jwngr/jwn.gr/blob/master/src/components/b...
- dimitrisnl 2y agoIt looks great, but that's a DSL I must learn and re-use nowhere else.
- cpursley 2y agoThere's not really any DSL. You just put some TS in the frontmatter for fetching/transforming at build time, TS in a script tab (if needed) and the html is just basic templating that takes props.
- ulrischa 2y agoAstro is a step in the right direction. But I wonder why in 2024 we still have to deal with proprietary component languages? I would like something like Astro with web components. Perhaps with the help of lit. With this the pure markdown content could be easily enriched with components.
- mdhb 2y agoThis is my dream also. I much much prefer lit-html syntax to Astro’s. I even found standard declarative shadow dom style components to be a pain in the ass in Astro which left a bad taste in my mouth since that’s literally just stock standard HTML.
- toinewx 2y agoCannot use React UI lib with Astro such as Mantine. With Gatsby it was possible. Astro is MPA while Gatsby provided SPA-like navigation. That's why Astro is not really a replacement.
- jwngr 2y agoNot a full replacement in all scenarios. But for my personal website with a basic blog, Astro is by far the simpler and more maintainable option. I bet that is true for most people here who maintain their own personal website.
- jaredcwhite 2y agoYou could just slap on any library like Swup.js, Turbo, etc. and get SPA-like fast navigation out of a regular "MPA" Astro site. And that's true for any MPA, actually. In addition, I believe Astro now has their own solution for this, though I haven't tried it personally: https://docs.astro.build/en/guides/view-transitions/ https://docs.astro.build/en/guides/view-transitions/
- cmgriffing 2y agoThis is a bit misleading. You are only prevented from using UI libs that use a Provider/Context (like Mantine does) since Astro does not support Context. Things like shadcn/ui work fine, even when statically rendered.
- kcrwfrd_ 2y agoYou can achieve SPA-like navigation in Astro with their transitions API, but if that’s what you’re after it’s better to use Next.js or Remix IMO. (I helped build playboy.com/magazine with Astro, which uses the transitions API for this SPA-like behavior… as well as playboy.com/app (nsfw) with Next.js)
- dceddia 2y agoAstro is great. I love that I can mix and match between markdown, plain HTML, and Svelte components as needed (and even intermix them within a page). Pretty much the sweet spot I always wanted for a blog or marketing site: 98% static stuff, 2% sprinkles of JS. In early experiments it feels like Inertia.js be this same feeling but for Rails and Laravel. I never got very far on the Gatsby train. It always felt so slow and fragile during local dev, and while GraphQL was cool it felt like total overkill for most of the data I needed to grab (like… markdown files from disk).
- rpastuszak 2y agoThis looks lovely! I've been recently working on sth similar: building a custom pipeline from my Obsidian notes into a website (untested.sonnet.io). I ended up using 11ty because I wanted to stick as close to the web platform as possible, but a part of me wishes I had tried Astro as well. Mainly because I feel that it strikes the right balance when it comes to flexibility and boilerplate. 11ty is lovely, but there was soooo much stuff I had to write from scratch. I feel like it paid off, but it took me much longer than I had hoped. One surprising side effect: I noticed that the site worked faster online than served from localhost. 5 minutes of digging after I remembered that it's served via HTTP2 w. multiplexing. I'm not even interested in adding a bundler/minify step, just plain CSS/HTML and asset optimisation w. 11ty-image is enough.
- azangru 2y agoPlus one for eleventy. Love its minimalism and flexibility, although it means that there isn't a clear guidance on assets management. It's a shame that the web still doesn't have a standard way of authoring components, and different frameworks and static-site generators, including eleventy, have to invent their own.
- rpastuszak 2y agoOK, so 11ty webc is pretty good and feels relatively low on abstraction. The only issue I've had with it was the developer UX (e.g. some components getting "stuck" during livereload, so I needed to manually restart 11ty to see the changes). Webc also supports bundles. What 11ty lacks (assuming I don't add vite, keep things minimal), are components/composition, i.e. actually being able to compose templates without seeing them as templates but as DOM. I recommend checking out some videos about .webc and progressive enhancement, there's a small paradigm shift from both React-like components map to a tree that maps to pixels and a more traditional old timey PHP-like string interpolation in templates. (I'm expressing this poorly as I'm in a rush, sorry!)
- skwee357 2y agoAstro is amazing! I use it for all my blogs, my personal website, and some of my landing pages (info in about). It’s very easy to build a static website with zero js, or pick the desired framework you want to work with. Pair it with TypeScript and you get almost 100% type safe templating and resulting websites.
- orf 2y agoAstro is fantastic. I initially used NextJS with MDX, and something simple like using relative markdown links to images was utterly impossible. I remember going down a day long rabbit hole to understand why, and it boiled down to content layer, MDX and NextJS using different, incompatible module loaders, bundlers or transpilers of some kind[1][2][3]. Ridiculous. And don’t get me started on the image component. In the end, Astro just works. No need for React (unless you want it), it’s simple, fast and produces a static site you can use without JavaScript. Data fetching is also utterly trivial, so you can have a fully static site with “live” data pulled in at compile time. I recommend it to anyone with frontend fatigue. 1. https://stackoverflow.com/questions/63957018/how-to-use-images-in-a-mdx-file-outside-of-public-folder-while-using-next https://stackoverflow.com/questions/63957018/how-to-use-imag... 2. https://mmazzarolo.com/blog/2023-07-30-nextjs-mdx-image-source/ https://mmazzarolo.com/blog/2023-07-30-nextjs-mdx-image-sour... 3. https://github.com/contentlayerdev/contentlayer/issues/11 https://github.com/contentlayerdev/contentlayer/issues/11
- indigodaddy 2y agoNice summary! Any guides you’d suggest for someone new to all of this, in terms of getting a simple blog set up with Astro?
- orf 2y agoThe getting started docs[1] are really good, I’d recommend starting there for sure. Basically you just run a few commands and you’ve got a website. Edit the Astro files to put HTML in, don’t worry about any JavaScript. Then try adding a simple “site header” component and using that. 1. https://docs.astro.build/en/tutorial/1-setup/2/ https://docs.astro.build/en/tutorial/1-setup/2/
- remipch 2y agoI don't know if it has its place here but for a minimalist static website, here is my approach: - create a simple html template using simple.css [0] - write markdown files - wrap pandoc [1] in a simple bash script to manually convert markdown to html - and that's it. By minimalist, I mean: no script, no component, no database, no react, no SEO. The result is a minimalist website that you write in markdown. It's very limited compared to full-featured frameworks, but it can do the job for a simple website. Here is mine: [2] (I'm not a web developer at all). [0] https://github.com/kevquirk/simple.css https://github.com/kevquirk/simple.css [1] https://pandoc.org/ https://pandoc.org/ [2] https://remipch.github.io/ https://remipch.github.io/
- syndicatedjelly 2y agoMy personal website was originally written this way. The compile and build script was about 20 lines of shell scripting (relying on pandoc), and could have probably been reduced further. It worked very well and I stuck with it for about 2 years before moving on to Hugo. It was a good experience to hand-roll all the components of a static site, and something every web dev should be required to do early in their career.
- indigodaddy 2y agoI quite like your philosophy and approach
- dartos 2y agoIdk if I’d call my setup minimalist, but I write blog posts in org, and use ox-Hugo to export them to hugo. I like hugo. Good tempting language and taxonomy features.
- walteweiss 2y ago[dead]
- todotask 2y agoI spent the entire time building a business network platform with Astro instead of WordPress or other web frameworks because it is exactly what I need to easily manage UI components and provide a safer JSX-like environment. In comparison to Ruby on Rails, Django, and Laravel, Astro stands on the same level but much less learning curve.
- jama_ 2y agoFully concur with the points you made. I also just finished transitioning my personal website to Astro from an Eleventy setup that I got too lazy to maintain. I made a couple of landing pages for clients and my own projects with Astro and the maintenance experience was eye-opening. Astro really is quite wondrous. If you don't stray too far from its opinionated route, it's almost magical. But some more advanced things do still take some tinkering. My sitemap and RSS with full text setups I wouldn't describe as the most elegant things in existence, but they do their job. What I'm still lacking/wondering about is whether there's a CDN static site/serverless hosting provider like Netlify, Vercel or Cloudflare, but that isn't free or $20/mo. I'd like to pay for a good service that obviously has running costs, but I don't believe there's quite something like those. Anyway, I like the website. It's easy on the eyes.
- jwngr 2y agoThanks for sharing! I use Fireabse Hosting, which I guess gets grouped in with the other services you mentioned. It's free, has a lightweight devX, and integrates with CI via GitHub actions for preview and production builds [1]. [1] https://github.com/jwngr/jwn.gr/tree/master/.github/workflows https://github.com/jwngr/jwn.gr/tree/master/.github/workflow...
- jama_ 2y agoRight, I didn't consider Google. The 360MB/day of free egress traffic (Spark plan) strike me as very peculiar. But at least it isn't Cloudflare's "unlimited" with secret limits in place, or Netlify's 100GB/month and then enormous costs on everything above. Thanks for reminding me! I'll give Firebase a look. By the way, very minor thing I noticed. Clicking on your photo on the homepage swaps backgrounds, but the timer-based swapping still runs on its fixed interval. Can look unpolished if you click it a bunch or in the wrong moment.
- jwngr 2y agoOh, thanks for letting me know! Looks like I'm not properly clearing the interval. I'll get that fixed.
- SrslyJosh 2y ago> Astro is designed as a Multi-Page Application (MPA) by default, shipping minimal JavaScript and delivering static HTML via full page reloads. So...a website. weary emoji
- joshvince 2y agoThis is my feeling too. I’m never sure why React is the tool that is reached for in this situations (an entirely unreactive page?)
- hallman76 2y agoGatsby gets shit on a lot - which I think is a but unfair. I find it to be a solid, well-documented platform. It has some rough spots, but show me a platform that doesn't. The author also complains that: > I couldn’t build the site locally or upgrade dependencies, leaving it outdated since 2019 This is true of many things in the javascript ecosystem. In react/node/js-land you HAVE to invest in maintenance (and re-writes) or be left with a legacy codebase that just might not work one day if npm install fails.
- johnchristopher 2y ago~4 years ago, redesign phase of our 50K a month public facing wordpress NGO website, agency strongly suggests moving to gatsby. We/I thought about it for 5 minutes and said no. I am still happy with that decision and I will push to take the same if/when another agency comes at us with Astro. Node CMS are autophagous.
- Already__Taken 2y agoI hear that last comment, default export was a mistake IMO. named is just so much clearer especially refactoring.
- mediumsmart 2y agoI missed out on hugo, gatsby and astro. Using 16 year old Jekyll in its fresh breath 4.3.4 manifestation from 2 weeks ago.