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

• Gatsby | https://www.gatsbyjs.com/

  • Gatsby + Netlify is recommended

• Next.js

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

• Tailwind CSS | https://tailwindcss.com/

UI Component Libraries

• Creative Tim | https://www.creative-tim.com/

  • React version | https://www.creative-tim.com/product/argon-design-system-react
  • Tons of stuff

  • Free dashboard templates, Tailwind UI components, etc.

React Based

• ⭐ shadcn | https://ui.shadcn.com/

  • Tailwind based

  • Radix based, which has great accessibility

  • Copy and paste code directly into your codebase, component by component

  • No package to install

• ⭐ Radix | https://www.radix-ui.com/

  • Focus on accessibility

• ⭐ NextUI | https://nextui.org/

  • Beautiful components

  • Figma integration

• ⭐ Ant Design | https://ant.design/
• Aceternity UI | https://ui.aceternity.com/

  • Super fancy 3D animation components

• chakra | https://v2.chakra-ui.com/

  • Choc UI | https://choc-ui.com/

    • UI components for chakra

• Tremor | https://www.tremor.so/

  • For building charts and dashboards

• Blueprint JS | https://blueprintjs.com/
• PrimeReact | https://primereact.org/
• Evergreen | https://evergreen.segment.com/
• HeadlessUI | https://headlessui.com/

  • Unstyled, fully accessible UI components for React/Vue

Non-React Based

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

• ⭐ Bulma | https://bulma.io/

  • Looks awesome

  • Pure CSS, single CSS file to add to your project

• Semantic UI | https://semantic-ui.com/

  • React version | https://react.semantic-ui.com/
• MUI (Material UI) | https://mui.com/

  • Google-style UI components for free

• Bootstrap | https://getbootstrap.com/

  • Tabler | https://tabler.io/

    • UI kit template for dashboard apps

    • Bootstrap 5 based

    • Also offer illustrations, email templates, free icons

• UIkit | https://getuikit.com/

  • Just add css and js files to project

• Tachyons | https://tachyons.io/

  • Pure CSS

• Alpine.js | https://alpinejs.dev/

  • Compose reactive behavior directly in markup (HTML)

  • Just import Alpine via <script> tag

Tailwind Based, Non-React

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

• ⭐ daisyUI | https://daisyui.com/

  • Looks incredible, top choice to try

  • But a YouTuber said the UI components have very poor accessibility (UX stuff, like not maintaining focus on a popup, things scrolling behind popups, etc.)

  • In the comments people said the accessibility issues were fixed, and that reactive behavior is not part of the scope of daisyUI

• ⭐ Mamba UI | https://mambaui.com/
• ⭐ HyperUI | https://www.hyperui.dev/
• Tailwind UI | https://tailwindui.com/

  • Makers of Tailwind CSS

  • Some free, some paid

  • Components and full UI layouts/templates

  • React and Vue compatible, but I don't think they're required

• uiverse | https://uiverse.io/
• FloatUI | https://floatui.com/
• tailwindcraft | https://tailwindcraft.com/

  • HTML + Tailwind

• Wicked Blocks | https://wickedblocks.dev/
• TailGrids | https://tailgrids.com/

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

• MarsX | https://www.marsx.dev/