How denysvitali/thebestmotherfuckingwebsite works
1. This repository is a static website project, not a traditional app with a backend. The whole architecture centers on generating a deployable dist/ site from source assets under src/, then serving that output through static hosting infrastructure.
2. The content/layout layer is Pug-based. src/pug/index.pug is the page template source, which is compiled into HTML during the build. This is the main structural boundary for the site’s markup.
3. The presentation layer is authored in Less via src/less/main.less. That stylesheet is compiled and bundled into the final site assets, separating style authoring from the deployed CSS.
4. Client-side behavior lives in TypeScript/JavaScript. src/index.ts is the TypeScript entrypoint, and src/js/main.fucking.js suggests there is also existing JavaScript logic or legacy script content. These are bundled for browser execution rather than run on a server.
5. Static assets are kept alongside the source, including images in src/img and the web manifest in src/dist/site.webmanifest. That indicates the site includes browser-facing metadata and asset delivery as part of the compiled output.
6. The build pipeline is webpack-driven. webpack.config.js and webpack.config.prod.js define how templates, styles, scripts, and assets are transformed into deployable files. tsconfig.json confirms TypeScript compilation is part of that pipeline.
7. The repository appears to keep some distributable files in version control under src/dist/, including LICENSE.txt and a js/ bundle. That suggests the project may ship prebuilt static assets alongside source, or preserve generated files that are part of the site’s final payload.
8. Deployment is purely static-file based. The README says to run yarn run build and deploy the contents of dist/, so the runtime artifact is just a directory of HTML/CSS/JS/assets rather than a service with APIs or databases.
9. There is explicit web-server configuration for nginx under nginx/. The main config plus snippets for CORS, gzip, and security headers show the site is intended to be served by a static web server with production-grade HTTP settings, not by application middleware.
10. Docker support is included via Dockerfile, so the site can be packaged into a container that serves the built static files. This is a deployment boundary only; it does not introduce application logic.
11. CI/CD is present through .github/workflows/deploy.yml and .travis.yml. That implies automated build-and-deploy flow from source to static hosting, likely with publishing of the generated dist/ artifact.
12. CNAME indicates the site is tied to a custom domain, reinforcing that the final architecture is “build static site → publish to hosting/CDN/nginx → serve globally.” The project’s main data flow is one-way: authored source in src/ becomes compiled assets in dist/, which are then served to browsers.
Main entry points: webpack.config.js Webpack config · thebestmotherfuckingwebsite.conf Site vhost · index.ts TypeScript entry · nginx.conf Nginx config
Components 20
Source
Authoring inputs for the site
- Pug template · Main page structure source compiled to HTML
src/pug/index.pug - Less styles · Primary stylesheet source compiled into site CSS
src/less/main.less - TypeScript entry · Browser code entrypoint bundled for the site
src/index.ts - Legacy script · Existing JavaScript logic bundled for the browser
src/js/main.fucking.js - Images · Visual assets shipped with the site
src/img - Web manifest · Browser manifest included in the site payload
src/dist/site.webmanifest - JS bundle · Generated browser JavaScript output preserved in version control
src/dist/js
Build
Tooling that compiles source into the deployable site
- Webpack config · Primary bundling and asset pipeline configuration
webpack.config.js - Prod config · Production-specific webpack overrides
webpack.config.prod.js - TypeScript config · TypeScript compilation settings used by the build
tsconfig.json - Dist site · Final deployable site artifact produced by the build
Deploy
Packaging and automation for publishing the built site
- Dockerfile · Container packaging for serving the built static files
Dockerfile - Deploy workflow · Automated build-and-deploy workflow
.github/workflows/deploy.yml - Travis CI · Legacy CI configuration for build or release automation
.travis.yml - CNAME · Custom domain binding for the published site
CNAME
Serve
Static web server configuration and hosting setup
- Nginx config · Primary static server configuration
nginx/nginx.conf - Site vhost · Virtual host for the deployed website
nginx/thebestmotherfuckingwebsite.conf - Security headers · Reusable security header rules
nginx/snippets/security.conf - CORS snippet · Reusable cross-origin access rules
nginx/snippets/cors.conf - Gzip snippet · Reusable compression rules
nginx/snippets/gzip.conf
Connections 19
- Pug template → Webpack config: compiled by · Page template is processed through the bundler
- Less styles → Webpack config: bundled by · Styles are compiled into the deployable CSS
- TypeScript entry → Webpack config: bundled by · TypeScript entry is part of the client bundle
- Legacy script → Webpack config: bundled by · Legacy browser script is included in the build
- Images → Webpack config: copied by · Static images are copied into the final site
- Web manifest → Webpack config: packaged by · Manifest file is included in the built payload
- Webpack config → Dist site: produces · Main build emits the deployable static site
- Prod config → Webpack config: extends · Production settings refine the base bundling setup
- TypeScript config → TypeScript entry: configures · TypeScript compiler settings support the browser entrypoint
- JS bundle → Dist site: included in · Prebuilt JS assets are part of the final output
- Dist site → Dockerfile: served by · Container image serves the built static files
- Dist site → Nginx config: served by · Static output is deployed behind nginx
- Nginx config → Site vhost: includes · Main nginx config pulls in the site vhost
- Site vhost → Security headers: includes · Site config applies security headers
- Site vhost → CORS snippet: includes · Site config applies CORS rules
- Site vhost → Gzip snippet: includes · Site config applies compression rules
- Deploy workflow → Dist site: builds · CI workflow generates the deployable site
- Travis CI → Dist site: builds · Legacy CI also targets the static site artifact
- CNAME → Dist site: points to · Custom domain resolves to the published site