Figuring out how you want to set up your website is hard. Over the years, I’ve tinkered with just about everything — from SaaS solutions like Squarespace, Wordpress and Cargo to web frameworks like React and Gatsby to plain old HTML/CSS/JS, I’ve tried it all. Depending on the project, each has its merits.

How it works

There are 5 components to the site:

  1. Source code published on GitHub → https://github.com/atemp-studio/www.git
  2. Static site files hosted in an Amazon Web Services S3 bucket
  3. DNS/traffic management handled by Cloudflare
  4. This Notion-based sub-site
  5. A Shopify site for our e-commerce needs

1. Source code

Repository architecture

.
├── .github
│  └── workflows
│     └── [workflow.yml](<https://github.com/atemp-studio/www/blob/main/.github/workflows/workflow.yml>) (Builds site and deploys to s3 bucket)
├── src
│  ├── fonts
│  │  └── All the font files I'm using
│  ├── icons
│  │  ├── favicon.ico
│  │  ├── Windows 98 title bar icons (minimize, maximize, close)
│  │  └── Emoji images to use for mobile dropdown
│  ├── images
│  │  └── Store promo image, as shown in Windows-98-esque window
│  ├── scss
│  │  ├── [_helpers.scss](<https://github.com/atemp-studio/www/blob/main/src/scss/_helpers.scss>) (Mixin for creating @font-face rules)
│  │  ├── [_windows98.scss](<https://github.com/atemp-studio/www/blob/main/src/scss/_windows98.scss>) (Styling for Windows-98-esque window)
│  │  └── [main.scss](<https://github.com/atemp-studio/www/blob/main/src/scss/main.scss>) (Where most of the styling takes place)
│  ├── ts
│  │  └── [main.ts](<https://github.com/atemp-studio/www/blob/main/src/ts/main.ts>) (Mainly handles draggable window functionality)
│  ├── types
│  │  └── [main.d.ts](<https://github.com/atemp-studio/www/blob/main/src/types/main.d.ts>) (Create window type so transpilation works)
│  └── [index.html](<https://github.com/atemp-studio/www/blob/main/src/index.html>) (Plain and simple)
├── .gitignore
├── [LICENSE](<https://github.com/atemp-studio/www/blob/main/LICENSE>) (Source code licensed under Apache 2.0)
├── package-lock.json
├── [package.json](<https://github.com/atemp-studio/www/blob/main/package.json>) (Manage project)
├── README.md
├── tsconfig.json
└── [webpack.config.js](<https://github.com/atemp-studio/www/blob/main/webpack.config.js>) (Instructions for building the project)

./src

All the code that matters lives in the src directory, the rest just builds it. No frameworks are used… the site’s too simple to need that. It’s complex enough, though, to warrant a slight upgrade from a vanilla HTML/CSS/JS build. Instead of CSS, we use SCSS; instead of JavaScript we use TypeScript. When deployed, the project is transpiled into plain HTML, CSS, and JavaScript using Webpack, as defined in webpack.config.js.

2. Hosting

Once built, the site is deployed to an S3 bucket. Unlike GitHub, Cloudflare and Notion, S3 isn’t free, but it’s pretty damn cheap. At the time of writing, S3 storage is just $0.023/GB/month. With the site currently measuring just 652.2 kB, our monthly bill is $0.000015. The nice people at AWS round this down to $0.

Powered by Fruition