Front End

Summary

Hugo (and its existing themes) is geared toward sites with a lot of markdown content. It's a simple publishing framework for markdown content. If I'm just posting articles, blogging, or making a simple personal/portfolio website, Hugo is a great choice.

But it's also highly customizable if you make your own theme. If you do, you can build literally any type of website with it. Although, for single page apps (SPAs) with highly dynamic content like dashboards or things like Google Maps, a React based framework and SSG is probably better.

Gatsby: If I need to create any custom UI (dashboard, custom layout, custom buttons, etc.), make a React app. There are tons of free UI component libraries for React. Try using Gatsby as the framework.

Top choice tech stacks to try:

  • Normal website (blog, portfolio, business)

    • Theme-based: Hugo + Hugo theme (Congo, Hugo Fresh, Hextra, Doks)

      • Just create content, let theme do the design

    • Custom: Hugo + daisyUI, Tailwind UI, Mamba UI, HyperUI

      • Create my own design using off-the-shelf UI components that can be dropped in (headers, footers, navbars, heroes, cards, etc.)

  • Dynamic single-page app

    • Gatsby + Netlify + Ant Design, Radix, shadcn, NextUI

    • Copy/paste off-the-shelf UI components into site design

Tech Stack for Dynamic/Interactive Apps

  • Node.js / npm - package manager

  • vite - build manager and dev server with hot reloads (like hugo server)

  • react - most popular dynamic app javascript framework

  • shadcn - off-the-shelf UI components for react

  • gatsby - static site generator for react apps

  • cypress - unit and end-to-end testing for web apps

  • netlify - static site host/CDN

JAM Stack

https://jamstack.org/

SSGs (Static Site Generators)

For React

Non-React

  • Hugo

Other Popular Tools

  • Vite

UI Design Tools

Levels

  • Level 1 (lowest)

    • Pure CSS

  • Level 2 - utility classes

    • Tailwind CSS - basically group CSS settings into class names to use in HTML; move CSS into to HTML

    • Semantic UI - higher level than Tailwind, UI component level

  • Level 3 - UI component libraries

    • On top of Tailwind

      • daisyUI - semantically named classes, things like "primary button", etc., use the class names in HTML

    • On top of pure CSS

      • Bulma

      • Bootstrap (try others before this, others seem nicer)

    • On top of React

      • Ant Design

      • shadcn

      • Radix

      • NextUI

CSS Utility Classes

UI Component Libraries

React Based

Non-React Based

These could be good candidates for Hugo since they don't require React.

Tailwind Based, Non-React

These could be good candidates for Hugo since they don't require React.

Static Site Deployment Platforms

  • Netlify | https://www.netlify.com/

    • Seems extremely popular, every SSG and framework points you to it, integrates with all of them

  • Cloudflare Pages | https://pages.cloudflare.com/

    • I'm using it currently, it's great, super fast and easy to use, excellent

    • Includes many other cloud features like storage buckets, serverless functions (workers), etc.

    • All cloud services seem to have a generous free tier

  • Vercel | https://vercel.com/

    • Really interesting, seems to have a lot of features, would like to try

  • Laravel Vapor?

    • Mentioned in a YouTube video, haven't looked into it much, seems relatively popular

IDEs

Last updated