CIP-001 — Static Website (Astro)

NoxSecurity static website: an Astro-based marketing site built with TailwindCSS and TailwindUI, intended to be hosted in S3 behind CloudFront. This repo contains the site source and developer instructions — infrastructure provisioning and deployment live in the CIP-001 infrastructure module.

---

Overview

This repository contains the static website for the CIP-001 project. The site is implemented with:

• HTML5
• TailwindCSS (via CDN)
• TailwindUI components (compatible with TailwindCSS)
• Hugeicons (icon library via CDN)
• jQuery (for easier JavaScript)
• Custom CSS/JS in assets/

Structure

root/
├── index.html
├── assets/
│   ├── css/
│   │   └── styles.css
│   └── js/
│       └── main.js
└── README.md

Usage

• Edit index.html for your content.
• Add custom styles to assets/css/styles.css.
• Add custom JS to assets/js/main.js.

Deployment

• Upload all files to your S3 bucket.
• Set index.html as the default document.
• All assets are loaded via CDN for fast performance.

Libraries

• TailwindCSS
• TailwindUI
• Hugeicons
• jQuery

---

Astro Starter Kit: Basics

npm create astro@latest -- --template basics

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

To learn more about the folder structure of an Astro project, refer to our guide on project structure.

=================================================================

• Astro (JS) as the site framework
• TailwindCSS + TailwindUI for styling and components
• Hugeicons + jQuery for icons and convenience where used
• Standard static assets in public/ and page/components in src/

This project is part of CIP-001 (static site on S3 + CloudFront). The Terraform/IaC and CI/CD pipeline that provisions the S3 bucket, CloudFront distribution, DNS, ACM certificate, API Gateway and Lambda (contact backend) are stored in the CIP-001 infrastructure module (see Deployment notes).

Quickstart — local development

1. Install dependencies

   npm ci

2. Run dev server (Astro + Vite)

   npm run dev

   • By default Astro/Vite listens on localhost:4321. If you need it reachable on the network:

     npm run dev -- --host 0.0.0.0

3. Build for production

   npm run build

4. Preview the production build locally

   npm run preview

Docker (development)

A Dockerfile is included for containerized development. It installs dependencies and runs the dev server.

• Build image (optional):

  docker build -t cip-001-website:dev .

• Run container (bind mount recommended to iterate):

  docker run --rm -it -p 4321:4321 -v "$(pwd)":/workspace -w /workspace cip-001-website:dev npm run dev -- --host 0.0.0.0

Environment variables

• The site uses a public environment variable: PUBLIC_AWS_API_GATEWAY_ENDPOINT (exposed to client). Configure it in your shell or CI so Astro can inject it at build/dev time.

• Example (Linux/macOS):

  export PUBLIC_AWS_API_GATEWAY_ENDPOINT="https://api.example.com"

• See astro.config.mjs for the env schema.

Project structure (relevant files)

/
├── public/
│   └── favicon.svg
├── src
│   ├── assets
│   │   └── astro.svg
│   ├── components
│   │   └── Welcome.astro
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       └── index.astro
└── package.json

• src/ — Astro pages, components, layouts (pages like index.astro, services.astro)
• public/ — Static assets (images, static files)
• src/layouts/ — Layouts (Layout.astro)
• src/components/ — Reusable components (Header.astro, Footer.astro, etc.)
• src/pages/ — Top-level routes and pages
• astro.config.mjs — Astro configuration (env schema, Vite plugins)
• tailwind.config.mjs — Tailwind configuration
• package.json — npm scripts and dependencies
• Dockerfile — containerized dev image

Recommended npm scripts (already expected)

• dev — start dev server (npm run dev)
• build — build site for production (npm run build)
• preview — preview built site (npm run preview)

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

Deployment notes

• This repository holds the site source only. The recommended deployment target for production is AWS S3 served via CloudFront.
• The CIP-001 infrastructure module (Terraform) provisions the S3 bucket, CloudFront distribution, TLS (ACM), Route53 records and the serverless contact backend. See the sibling repo: Projects/cip-001_static-site-on-s3-and-cloudfront/infrastructure for Terraform code and deployment instructions.
• Typical deployment flow:
  1. Build the site: npm run build
  2. Sync the generated output (Astro's dist/ or configured output dir) to the S3 bucket created by the infra module.
  3. Invalidate CloudFront (if needed) or configure automated invalidation in the pipeline.
• CI/CD: Add a pipeline job to run build, upload to S3, and invalidate CloudFront. The infrastructure repo contains examples and recommended patterns.

Troubleshooting

• If the dev server is not reachable from other machines, run dev with --host 0.0.0.0 or use the Docker container mapped port.
• When changing env vars used by Astro, restart the dev server or rebuild.

Contributing

• Make UI/content changes in src/pages and src/components.
• Keep CSS changes in the Tailwind utility classes or in src/styles (where present).
• Open PRs against this repo. Changes to deployment (Terraform/CICD) should be proposed in the infrastructure module.

License

• Check repository root for license information (this project follows the portfolio's license policy).

Links

• Infrastructure / deployment (Terraform & CI): ../infrastructure (Projects/cip-001_static-site-on-s3-and-cloudfront/infrastructure)
• Main portfolio root: ../../.. (cip_project-root)