Smashing Magazine’s Redesign Powered by Hugo (JAMstack)

Smashing Magazine website won’t be running on WordPress anymore; in fact, it won’t have a back end at all. They are moving to a JAMstack (JavaScript, APIs and Markdown). The new website is powered by Hugo static site generator.

Here’s the link to the new design (still in Beta). next.smashingmagazine.com

Content is stored in Markdown files. HTML is pre-baked using the static site generator Hugo, combined with a modern asset pipeline built with Gulp and webpack, all based on the Victor Hugo boilerplate.

You can read more about the transition here.

Disclaimer: I don’t work for Smashing Magazine :slight_smile:

8 Likes

Netlify has a post on it too here.

H/t @budparr

3 Likes

This is great news for raising Hugo’s profile. I just came here to see if anyone had mentioned it, after coming across the Netlify article, myself.

I’ve gotta say though, I did find the “sound of own trumpets being blown” in the article a bit much.

Netlify seems overly proud of their [no doubt extremely lucrative] role in what seems to have been basically packaging a bundle of other people’s open source projects together for a client.

Smashing magazine seems equally smug…

By doing this Smashing further solidifies that they ‘practice what they preach’ and are pioneers in modern web development

… in their case for their ‘pioneering’ discovery—several years after most of the rest of us—that WordPress is a bloated mess and static site generators are the way forward.

Can’t wait to see what the pair of them “invent” next!

1 Like

I agree with that observation @stiobhart, it sounds their PR department was also writing along.

Those overly positive words from them did prompt me to do a webpagetest (see here). A start render time of 1,8sec and a load time of 3,5sec is not that good.

Their DOM interactive of 800ms is good, but that time as well as their 200-300ms time to first byte, is also something that can be achieved with WordPress (and caching), I personally think.

Funny thing, in my opinion, is that their main site (on WordPress) performs roughly as quick as their Netlify JAMstack. Here’s the WordPress speedtest, this is their beta version, and here’s the comparison between them.


(Sorry for the sceptical message, if it’s too negative I’d happily edit it because I don’t mean to sound that negative. Because it’s of course awesome that Hugo is used by a well-known website.)

1 Like

That kind of depends. The big selling point in this case is the CDN part, i.e. serving the static content from a fast CDN close to the user. WordPress caching is static, too, but limited to the WordPress server(s) – potentially on the other side of the earth.

1 Like

I can understand your skepticism, but there is more to performance than just running a single pagespeed test. I know you’ve already included time to first byte, but also consider:

  1. Time to first byte
  2. Time to first render
  3. Critical render path
  4. Fewer HTTP requests
  5. CDNs close to the user (@bep already mentioned this)
  6. All the other build tools the frontend world uses for things like concatenation, minification, image optimization, etc.

The docs concept site–obviously built in Hugo and also hosted on Netlify–is rocking a 100/100 (and will soon be much prettier thanks to @budparr.

So even if a single test shows a marginal difference for you as a single user, there are a lot more considerations, not the least of which is actual vs experiential performance. Also, I don’t think the question was whether “Can Wordpress do this?” as much as it was “Can Wordpress do this as effectively as Hugo and a JAMStack solution as developed and supported by Netlify?” The video also talks about consolidating the different platforms, using Netlify’s really slick and intuitive SPA CMS layer, and the beauty of outsourcing all your backend worries to a company that just kind of “takes care of all of it.” There are tons of improvements to authors and editors for the site too…all thanks to Hugo:)

That said, I can see why Netlify would focus on speed because it’s an intuitive and quantitative metric, but there are so many other reasons to use Hugo over Wordpress that maybe their PR just didn’t prioritize. (I trust their decisions.) For one thing, content is considerably less exportable in a WP install. Wordpress requires a relational database and has, in many ways, a much stricter content data model than Hugo. You can write in markdown in Wordpress as well, but that’s an indication that the tool itself can’t ignore the brilliantly simplistic model of small, well-composed, self-contained content files with embedded metadata.

As an example from my job, I took a couple thousand notes (Markdown files), generated them into a responsive website with search (using lunr.js) for my colleagues on an internal-only site, and then used pandoc to spit them out into PDFs and other formats. This setup took less than a day, and now all the content (which my job requires me to give top priority) isn’t dependent on any of the aforementioned tools. The site builds in less than a couple seconds too, which is freakin’ incredible.

Wordpress can offer much of the above but not without adding complexity at an order of magnitude…

I can expand if you need more examples.

6 Likes

Netlify put quite a bit of effort into this project and the fanfare is well deserved, in my opinion. They’ve open-sourced their work for us all to benefit from, including a content editor, commenting system, and commerce tools. I’ve been following and building in static since 2012 and for one am ecstatic about the mindshare in the development community this will gain. Good for us, all around.

As for the Wordpress vs argument, I think that’s a red herring, and I wish they would have focused more on where they were going, and less on where they were coming from.

4 Likes

Note, in your comparison, @Jura that the new site is nearly twice as heavy as the old site, yet is still slower. Still, a distraction. I’d guess Smashing Mag’s motivation was indeed due in part to make a radical change and help others adopt the technologies formerly know as static site generators.

1 Like

I got some numbers from Netlify;

  • Around 7500 content pages.
  • TOTAL build/deployment around 2 minutes.
  • Of that TOTAL, the Hugo part was around 13 seconds.
11 Likes

THAT IS AMAZING!

7500 pages in 13 seconds? Wow! Hugo is a beast!

2 Likes

This is great news for the Hugo community! Haven’t read the Netlify article, but would be nice to hear how they manage the content administration with 7500 pages (phew). Especially so since they’re only the second (?) commercial blog build on Hugo after swedish Piraja (yes, this is an unshameful plug) :smiling_imp:

4 Likes

What happened to this? It didn’t seem to come to pass, and there have been no commits for months. Did they run into problems?

The GitHub repo looks stale, but I suspect they are working on an internal repo.

According to this recent YouTube they are still working on it and plan to release this year:

1 Like

I suspect that if they pull it off it won’t be with Hugo. We migrated from Jekyll to Internal generator to Hugo and find it super powerful. But with that power comes the challenge that Hugo belongs to another line of thinking than every other common web technology you’re likely to use it with.

After using it for two years I still need to trawl the documentation for 20 minutes for every new line I write. If feels like coding a web page on a HP calculator that is powered by a 5GHz CPU.

Sorry for the negative outlook. I applaud the new documentation, but the core challenge with Hugo is the mental model you have to adopt. It seems to be build for CS graduates, not for ordinary web hacks.

Your post has little to do with this topic, and I’m not sure what the motivation behind it was, but it belongs in another thread. If Smashing Magazine wants to use Hugo, up to them. What you want to use, up to you.

3 Likes
3 Likes

Cool!

1 Like

Interesting. About time to see Hugo used for a big website. BUT that landing page is all shades of red. lol

1 Like

But they use a “vintage Hugo”:

I created this issue to suggest they upgrade:

2 Likes