Static Site Generator vs. Javascript Framework vs. Full Stack Website Development

[ToffeeLa]

Since we obviously have some pretty good coders/programmers in here...

I can create my own static sites pretty well with html/css and bodging around with js and php when/if I need to. And the last couple of sites, I've stuck my toe into WP waters, just to see what all the cms fuss was about.

As a small-scale independent publisher, would it be worth my time and energy to learn the latest js thoroughly and any other supplementary stuff (for example, something like React/Redux)? Or is that better left to others that you can hire in on an as-needed basis (or fiddle about with yourself if you need a specific feature for a site)?

And, if the answer is yes, what would you recommend? (The questions here were sparked by reading the Gutenberg thread and then realising I had no idea what some of this 'creating custom blocks' was about.)

 

[SmokeTree]

As a small-scale independent publisher, would it be worth my time and energy to learn the latest js thoroughly and any other supplementary stuff (for example, something like React/Redux)?

It really depends on what kind of sites you're building and how much control you want over them. If you are creating several small/medium sites and don't need a bunch of customization (e.g. different sidebars/footers/headers depending on page) or you just want to publish sites then move on, then you can get by with WP. If you want full control over every aspect of the site and already know your way around the HTML/CSS, then something like Hugo (https://gohugo.io/) might be a better option for you for static sites or an actual framework for Saas/Dynamic Sites such as Rails, Django, Node,js or my personal favorite, Phoenix.

A lot of folks learn WP because it's easy to get started and can take you to the 80% of what is needed to get an initial site up and running. The problem is, that sometimes things are are extremely easy to do with a static sites require you to find a plugin for WP and that's where that remaining 20% causes the headache. The end result is that many people develop a dependency on plugins and many times their sites get hacked because all it takes is a bit of bad/malicious code in a plugin to compromise a site. I do quite a bit of sysadmin work and have seen many a WP site compromised because of one tiny plugin.

As to whether you should know JS, React, etc thoroughly? The answer is, no you don't need to know any of those technologies inside and out and master them. You just need to get your feet wet and learn as you go through trial/error and a lot of Stack Overflow (https://stackoverflow.com) queries.

 

[FIREman]

As a small-scale independent publisher, would it be worth my time and energy to learn the latest js thoroughly and any other supplementary stuff (for example, something like React/Redux)? Or is that better left to others that you can hire in on an as-needed basis (or fiddle about with yourself if you need a specific feature for a site)?

It really depends on your end goal. Do you want to produce a software product that has a rich, app-like experience for the end user? Then yes, it is possible that the latest front-end tech may be of benefit to you. However, it is very dependent on situation. Not all situations call for the latest front-end tech, and many web SaaS products can also be easily built without touching front-end frameworks like React.

I have worked on multiple nodejs-based static site generators before (react static, gatsby), and I would advise you to avoid them like the plague (unless you're already very familiar with the ecosystem). Do not touch them, do not think of them, do not read about them. The bloat and unnecessary complexity for content-based web pages is mind-boggling.

However, there is a very specific use case for learning frontend tech like React. The only valid reason to do so, is when you want to target multiple platforms at once. This means that you want to build the web, iOS and Android clients all in one go, with as much code sharing as possible, through tech like React Native. This is the ONLY time that you should consider frontend tech like React for building your entire user interface. You can learn React for tiny interactive widgets, but it should be as an afterthought, and not the primary focus.

So, to answer your question as to whether you should learn front end tech as a publisher, I would say no. The ROI is too low to justify the effort spent considering that your main money maker is in static content. Only consider it if you need to show dynamic content on your static sites through small widgets.

If you are building a site that is more like a SaaS, you want full control over every aspect of the site and already know your way around the HTML/CSS, then something like Hugo (https://gohugo.io/) might be a better option for you.

I do not agree that you should use hugo for a SaaS product. Static sites should be for static content, like the marketing pages, content posts. If dynamic content is needed, like user authentication and dashboards, stick to a reliable full-stack web framework like ruby-on-rails, django, laravel, phoenix, etc.

 

[SmokeTree]

I do not agree that you should use hugo for a SaaS product

I had forgotten that I included SaaS products in my recommendation of Hugo and edited my post to reflect that. Agree that a full-stack framework would be the best choice for a SaaS/Dynamic Site for that but definitely not a good fit for WP. I normally use Phoenix these days for Web Apps and haven't looked back in a few years now.

 

[Calamari]

(The questions here were sparked by reading the Gutenberg thread and then realising I had no idea what some of this 'creating custom blocks' was about.)

Custom blocks are the same as partials in the static site world. If you already are using html/css than go all in on html5, css, and js using a static site generator like hugo. Combined they're way more powerful than wordpress and make much better websites.

I've used both wordpress and static site generators and I'm never going back to wordpress.

 

[bernard]

Pardon my ignorance, but what's the editing experience like with these static site generators. Is there anything like Drag and Drop or is css knowledge required.

 

[ToffeeLa]

Many thanks for the replies and advice. I'll leave the React bookmarks in their folder until needed then!

Not quite sure on the concept of static site generators if I'm already coding my own small/medium static sites? Is it because you can use plug-ins for an SSG like you can with WP?

 

[SmokeTree]

Not quite sure on the concept of static site generators if I'm already coding my own small/medium static sites? Is it because you can use plug-ins for an SSG like you can with WP?

It's mainly because of code reuse. Instead of having to code the header, sidebar, footer, etc on every page, you can just code it once as a "partial" and insert it into your layouts. Every time your site is generated it will include the bits of code where you want them. If you've ever had to code a static site without the help of some sort of SSG framework, you'll know how much "fun" it is to have to update, say, the footer on every single page of your site if something changes, like the copyright date. I'd recommend reading up on Hugo, Jekyll, etc and spend a couple of hours going through the "getting started" stuff as it's a lot easier to understand once you've seen what it can do firsthand. Here's the one for Hugo (https://gohugo.io/getting-started).

 

[ToffeeLa]

It's mainly because of code reuse. Instead of having to code the header, sidebar, footer, etc on every page, you can just code it once as a "partial" and insert it into your layouts. Every time your site is generated it will include the bits of code where you want them. If you've ever had to code a static site without the help of some sort of SSG framework, you'll know how much "fun" it is to have to update, say, the footer on every single page of your site if something changes, like the copyright date. I'd recommend reading up on Hugo, Jekyll, etc and spend a couple of hours going through the "getting started" stuff as it's a lot easier to understand once you've seen what it can do firsthand. Here's the one for Hugo (https://gohugo.io/getting-started).

I kind of wondered if that was what it was, but I currently use php includes to do that (so, for example, an ad or affiliate block, a footer, a header and different menus would all be done with includes).

 

[FIREman]

Pardon my ignorance, but what's the editing experience like with these static site generators. Is there anything like Drag and Drop or is css knowledge required.

Are you referring to content editing or site customization? Content editing depends on how you store your data. Site customization will require html/css knowledge, as well as the underlying programming language used for the templates.

I normally use Phoenix these days for Web Apps and haven't looked back in a few years now.

Nice to see another elixir dev out in the wild, I've been using phoenix too for my saas backend, the dev productivity is like no other framework that I've used. I opted for a react frontend though, since I'm also targeting mobile.

Not quite sure on the concept of static site generators if I'm already coding my own small/medium static sites?

The key benefit of static sites is the elimination of the hosting server/database. Your site will be more secure, without any possibility of data breaches, without any downtime regardless of traffic size. This means that you will sleep easier at night, knowing that your money makers are always up.
Sure,you trade some complexity in terms of setting up and customizing the site and storing your data, but you gain more customization features, less vendor lock in, less dependencies, and a huge improvement in security. There are plenty of free static hosting options (gitlab, github, netlify), and the big 3 cloud services all provide file hosting for pennies per GB stored. Yep, PER GB. Meaning your costs plummet to near zero.

 

[Calamari]

I kind of wondered if that was what it was, but I currently use php includes to do that (so, for example, an ad or affiliate block, a footer, a header and different menus would all be done with includes).

I'm sure that's a fine way to work. I'd stick with that and improve your skills with html, css, and js.