When it comes to the tech stack for personal portfolios many devs decide to go with static site generators due to SEO, speed, performance, security, version control, hosting, maintainability and other concerns.
What's your take on this?
Do you prefer Gatsby, Next or some others like Jekyll, Hugo and Nuxt? Or none of them and use your own approach?
Latest comments (25)
I use Jekyll although I have to admit it can become quite slow when the site grows. Should I decide to change, I'd probably go either Gridsome way or Zola way.
I don't have a personal portfolio yet 🙃.
With that said, a personal site is where you can explore tech stacks with relatively more freedom compared to making websites for clients/products. Gatsby, Next, and dozens of other (meta-)frameworks take different approaches; naturally, they all address some aspects well and some other different aspects not very well.
IMO you should choose a stack you're interested in, but not very familiar/skilled with. That way, you get a better understanding of how it works, and whether it would be a good fit for your next production site.
I personally went with Gatsby for my portfolio website and do not regret it :)
I read an article recently about Gatsby (I think it was on dev.to) which pointed out that even though Gatsby renders static pages, by default it then proceeds to download a big fat JS bundle to do the "hydration" thing. In many cases (a portfolio site comes to mind) that's just overkill and unnecessary overhead (according to the author).
I would tend to agree, but then it got interesting - the author pointed out that there are workarounds (Gatsby plugins) which do away with the JS bundle and the hydration so that you have a truly minimal static site, without JS, generated with Gatsby.
The author then proceeded to question "what then is the point of Gatsby" but it got me thinking nevertheless.
Plain HTML and CSS, anything more is excessive
I felt similar, but after making a Gatsby site recently, I see two real advantages.
Regarding Markdown: I think having content in Markdown has a lot to be said for it, especially as I can easily syndicate the same content to dev.to, hashnode, medium, etc. To add content, I just open a text file and blog without having to delicately copy and paste new files and content into DOM structure. Views like the collection page also auto-update, adding one blog posts to my site updates 3-4 visual views, (homepage, collection, tags, etc.) this would take much longer by hand and is more error-prone.
Regarding plugins: When adding an SEO plugin, for example. I modified one template, I populated the meta description from the same markdown description data, and it was much faster than editing all previous posts to add that same functionality. Also, future data edits roll out to all the various places, again less error-prone.
Those points are fair but this seems like overkill for a personal portfolio. Especially the SEO
After long initial picking options and trying this and that I’ve settled with Nuxt.js full static and Storyblok. It’s relatively easy (more so if you already know Vue, which is also easy to learn), configurable and flexible. Gridsome/Gatsby force the supposed “right way” of doing things a little bit too much for my liking
Currently my working solution has been good old Server Side Includes. Yes, that is
.shtmlfiles. It isn't perfect, but works very well for a small personal site and it is simple. The challenging part is to split the repeating parts into their own HTML files and then include these as needed. The downside compared to pure HTML files is that you need to have a server running to be able to make sure you don't make mistakes before pushing changes to production.However over time I probably make most of my smaller sites run on Deno + Oak. It is very simple to do the static parts with that combination and you don't really need to have any kind of bundle, build, or compile phase if you don't want to. And things feel much easier in general as there is no
node_modulesto deal with. I guess the biggest challenge is to make sure the Deno app keeps on running in production :)I built my portfolio website using Next its pretty good but I did have a lot of bugs getting the pages to render properly at the start. If I was to do it again I would most likely go with Gatsby because it does not seem to be difficult to get it working with a CMS which would be good for freelance jobs. So it just makes sense to use it more often so that I become a natural with it. create-react-app is still my default way for creating react apps.
We are big fans of 11Ty or Eleventy - however, you want to call it. 😀
We got over a 35% performance boost compared to WordPress.
11ty was super simple to learn, build, and extend. Only took us 1.5 days to code and deploy to Firebase. The more popular site generators had more 'stuff', more 'plugins' - seemed too much for our needs. Even Google's web.dev platform runs on 11ty.
Gatsby, Jekyll, Hogo - I am sure they are all good. It all depends on the size and complexity of your needs.
Bottom line: Use any open Static Site Generator, with a bias towards Open Source.
They are way better than WordPress (or any old school CMS). You will enjoy a faster site, more security, and much more freedom.
I switched from Gatsby, to Gridsome (Vue), and then finally to Eleventy. I am really loving the experience. I actually understand almost everything under the hood. It's really nice.
Static Site Generator does not obliviate the need for CMS. Actually,
Can you elaborate on the "35% performance boost", what metrics does that apply to, how did you measure it?
We measured based on Google PageSpeed Insights, Google LightHouse, GTMetrix, and various tools.
If you run Google PSI - you can see for yourself.
Run PSI few times on both. To get the median score. Also note that the new site has more images, more SVG, and more JS.
We still managed to get a lot better performance using 11ty 👍
Cool ... however, I just checked out your old site and your new site and my impression is that the 35% is a gross underestimation! Every link I click takes seconds to load with the old site, and loads in a fraction of a second with the new site. The difference feels more like 350% than like 35%.
No wonder if all pages are simply statically generated and don't need to be loaded from a database and then dynamically generated (although I wouldn't expect the improvement to be that large).
Glad you see the BIG IMPROVEMENT Leob. CDN cache may make it better but if you truly compare apples-to-apples, Static Site is WAY faster - no doubt! 👍🚀
I use 11ty for my portfolio (and many of my projects)
You got me thinking, I was inclined to believe that Gatsby was the greatest thing since sliced bread but in many cases it's just overkill, I've heard good things about Eleventy so I definitely want to check it out as a plausible alternative.
I used ssg from nextjs to build my portfolio, I think it's an overkill since it's only serve one page. I think I will remake it with plain html/css/js
Neither :) I wanted something Vue based so went with Gridsome (the Vue based Gatsby equivalent) deployed on Netlify.
AFAIK, there is no alternative to Server-Side Rendered SPA in ones that take more traditional approaches, e.g. Jekyll, Hugo. -- Is there something analogous to <Link/> for other SSG?
I prefer Nuxt.js, but that is because it is convenient, not necessary because it is perfect for SEO. Also, fully static generated mode is relatively new.. Want some components in Markdown (MDX)? That is also relatively new.
Actually, I am looking at Next.js for stark simplicity, of folder structures, at the same level of Nuxt. (Nuxt is much more fully featured, though.)
Gatsby might be a better choice, for exactly that it is not truly simple, but has lots of useful plugin, including lazy image loading and MDX. However,
I loved my experience using Gatsby! Re-did my site using it in just a few short weeks on the weekends. Highly recommend it!