More than static

Static sites to progressive web applications are now a continuum. Theoretically, this has always been true: enhance an HTML and CSS site enough with JavaScript, and you have an interactive application. In 2017, though, React-based Gatsby began calling itself a generator for “Static Progressive Web Apps”. Even more recently, Next.js and Nuxt.js have begun making lists of static site generators without even claiming the title.

So on that long line from simple static site to progressive web app, how do you know where to stop?

Same way you know where to start, and that’s what we’ll go over here.

If your site is going to be a single page for a while, use a text editor to create an index.html file. Your future self may thank you:

updating a website in 2010:
> vi index.html

updating a website in 2019:
> gem install jekyll
> create 20 template files
> rvm install 2.5.3
> compiler errors
> permissions problems
> googling
> editing 30 files
> writing a custom script to remove all references to 'localhost'

You can grab a one-page template, and your ‘static site generator’ is whichever text editor you choose to edit it.

If you’re going to have multiple pages, and you want to post regular updates each having their own page, pick a static site generator with the shortest dependency tree.

Hugo is a good one.

Any static site generator will let you avoid needing to type <p>Paragraph and <strong>style</strong> tags</p> and instead write your pages and posts in markdown (with some extra metadata at the top of the file).

If you’re familiar with React, and would like to make your templates with React, Gatsby is a good choice. If you


main reason for Next.js is to do server-side rendering with React

If you really want a static site generator,

Hugo

Why would you want to use Gatsby JS: You’re very familiar with React, and you want to make your templates with React. And if you might want to use React on the front end site (and here can overlap with Next.js)

consider how you get the data?

Files lying around, or pull it from somewhere? From a content management system or GitHub by the API?

If someone really wants a static page, just a single HTML file just one index.html makes sense. But if you want more pages, then it

If they want to reuse the templates from the application to the static site, they could use Gatsby. If they like React for making templates.

Hugo works straightforward with a directory.

Just some markdown.

Keep the application at a subdomain?

If they want it to be partially dynamic, to have a part of the website to be dynamic, being static, then it might make sense to use Gatsby and take advantage of having React.


Redux - you use if you have a lot of states to manage, and we don’t, so we just use the React states.

Redux makes it a bit complicated.

Redux is very nice. It’s theoretically, it’s a very nice abstraction for managing states. But you lose a bit of the semantics of your application, because it organizes code by its own

It’s very testable but you won’t recognize your application. It’s fine; a lot of people are using it.

In our case we just have one object to send, but if you have a lot of states to handle it’s worthwhile. But it’s an abstraction that requires a lot of thought. If you look at it you won’t recognized collections between the parts.

It has a state object; a tree, a nested JavaScript object. Then it has actions and reducers. An action triggers reducers, and a reducer acts to update a state, taking data from the action.

So you define actions with a very simple thing. You are showing some tweets or something; tweets would be in your states, say in an array. You’d have an action that says ‘get tweet from trigger’ it has to trigger a syncrounous

you do that, you won’t see teh big picture anymore,

It’s a way of deconstructing your application. Reducers, actions, instead of thinking about twitter data source, you have an abstraction that costs.

The good part is all the reducers are very simple functions that take a previous state and produce a next state. It’s very nice but you tend to lose the whole. That’s why i prefer Cycle.js; but actually no-one’s doing that. But it allows you to organize your application in a way that makes sense to a human.

With React, everyone tells but Redux is the favorite. There are alternatives like Modux

it has a mental cost.


Consulted ‘sources’, so to speak:

https://prismic.io/blog/how-gatsby-and-nextjs-really-work

https://www.gatsbyjs.org/blog/2017-10-03-smartive-goes-gatsby/

https://nextjs.org/docs/ https://nextjs.org/blog/next-5/

https://2018.badcamp.org/session/overview-static-site-generators-drupalists

https://www.gatsbyjs.org/

https://web.archive.org/web/20170709055140/https://www.gatsbyjs.org/

https://snipcart.com/blog/choose-best-static-site-generator