Intro
This is the first post in a series where we use Go to build a full web project with a web framework, templating, HTMX, and TailwindCSS. The goal is to build something from the ground up, utilizing frameworks and packages that are both interesting and new (to me at least), and document the learning process as we go along.
Motivation
I am constantly tinkering with and learning new tools, techniques, languages, etc., but primarily in private with varying levels of success/completion. To be clear, I am a 'coder', not a 'developer', but enjoy learning new tech and building things.
I've been digging into HTMX lately (using Python web frameworks) and find the concepts and approach to be interesting and promising. The idea of hypermedia driven systems over the current practice of JavaScript based frameworks (I never really got into React, played with Vue, and enjoy Svelte/SvelteKit) and the ability to chose your language/framework for the backend while primarily leveraging HTML/CSS on the frontend just seems refreshing.
With that said, I tend to do most of my 'learning' in private...private GitHub repos, no external collaboration/feedback, etc. But a recent tweet by Kelsey Hightower motivated me to move some of that learning into public eye.
By doing this in public, I hope to:
- Improve ability to communicate thought process and progress through documentation and walkthrough
- Drive the project through completion -> accountability to readers that are interested in what we are doing here
- Get feedback and input from readers, both on the technology/approach and how best to communicate said progress to the reader
Outside of learning the fundamentals of the language (which won't really be covered in this series), having an actual "thing" to build helps me to maximize breadth and depth of the tech and stay motivated to keep going.
I try to pick something that:
1) has practical use (at least for me, even better if more broadly applicable to others)
2) incorporates full functionality (frontend, backend, database, etc.)
3) pushes me into unfamiliar territory (new languages, concepts, patterns, etc.)
The Project
With the background and motivation out of the way, what are we going to build? I think a blogging platform hits all the points covered in the previous section while also allowing for progressive addition of new functionality as the project progresses.
Initial thoughts on the major steps/milestones in the project:
Foundation
Get the initial stack wired up
1) Setting up the development environment - I currently use devcontainers for most things, but may also dig into nix -> isolated, portable, repeatable development environment
2) Exploring Echo - understand routing, requests, response, etc.
3) Incorporate Templ - integration with Echo, template composition, etc.
4) Integrating TailwindCSS - config for use with Echo/Templ, development cycle, deployment, etc.
5) Add in HTMX - endpoints, template structure, concepts, etc.
6) hyperscript for interactivity - client side interactivity
Basic Blog
Be able to render posts written in Markdown
1) Routes - basic routes (home, about, posts, individual post, etc.)
2) Templates - template composition, HTMX, hyperscript, TailwindCSS, etc.
3) Markdown Processing - Markdown files just embedded into the app, basically just a static site builder
Functional Platform
Blog post CRUD
1) Database - incorporate DB into the app, persist blog posts, etc.
2) Build in Editor - Markdown editor built into the platform
Further Out
1) Authentication - interested in adding passkeys/webauthn as the primary authentication mechanism
2) User Management - owner can create/edit posts, users can comment on posts
3) Comments - support user post comments
4) Deployment - get this thing up and running in the real world (service provider selection, end to end deployment process, etc.)
5) ?????? - we'll see where things take us
The Stack (for now)
Go - programming language
Echo - web framework for Go
Templ - HTML templating for Go
HTMX - hypermedia functionality in HTML
hyperscript - frontend interactivity
TailwindCSS - utility-first CSS framework
Up Next
Getting the development environment setup is the first order of business. I use Windows with WSL for most of my dev work, using VSCode with devcontainers, so you should be able to use the repo on any platform with VSCode, Docker, and the VSCode remote development extension installed.
We will cover getting the prerequisites installed (VSCode, Docker, extension) and setting up the devcontainer with the required tooling, extensions, etc. in hopes that you can follow along regardless of your OS of choice.
If this project sounds interesting or your have any ideas/feedback along the way, please let me know in the comments. Looking forward to building and learning with you.
Top comments (0)