Building Static Site with Modern Tools (No React, Vue, etc)

Static Web Page refers to the web page (HTML, CSS, JS) that is the same between the server and browser. There is almost no business logic and everyone practically sees identical pages.

Just in case you just started learning web development, here is a recap of what static pages contain:

• HTML: Page layout and web content.
• CSS: Color, Padding, and other style.
• JS: UI/UX logic and communicating with other serves.

The trend for building static web pages is using a Static Site Generator like Jekyll, Hugo, Astro, NextJS, etc. We only focus on writing the web content (usually in Markdown format), and then the tool will generate a complete static page with chosen themes and be ready to deploy.

However, it is fun to code your static page even without the site generator. The article discusses building static web pages with modern tools without using frameworks like React, Vue, etc (they can be intimidating to learn).

Package Manager

We require additional libraries, frameworks, tools, etc for the project. Rather than install and deploy them manually, Package Manager helps us organize, prepare, and execute the third party.

The default package manager for JavaScript/Web in general is NPM. Other popular options are like Yarn or PNPM.

You may see a similar approach in other programming languages, like Maven/Gradle for Java, Composer for PHP, RubyGem for Ruby, or PIP for Python.

Below is the NPM basic command to illustrate what it can do.

npm init                  # initiate new project
npm install               # install package that listed in package.json
npm install -D [package]  # add new package
npm run [task]            # run custom task
npx [tool]                # run a locally installed package

// package.json
{
  // dev dependency contain library/framework/tools
  "devDependencies": {
    "alpinejs": "^3.14.1",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.4",
  },
  // custom task to run, build, etc the project
  "scripts": {
    "watch": "npm run watch-css & npm run watch-js",
    "watch-css": "npx postcss src/css/input.css -o dist/styles/output.css -w",
    "watch-js": "npx esbuild src/ts/*.ts --bundle --sourcemap=inline --outdir=dist/js --watch"
  },
}

CSS Preprocessor

Writing CSS is tricky and tends to be bloated. So people prefer to write the styles in simpler format before generating them into CSS files. The tool is called CSS Preprocessor, we can choose between popular options like Sass, LESS, and PostCSS.

Don’t be confused with CSS Framework like Bootstrap. CSS Framework aims to provide guidelines and relatively ready-to-use styles to accelerate the development.

Both coexist together, some frameworks also utilize the preprocessor. The popular framework TailwindCSS uses PostCSS to generate only the used CSS to minimize the file size.

Web Bundler

The bigger the project, the more codes are written, additional dependencies, and new files are added. Web Bundler helps to combine all the sources into static assets for the browser to be read. We can pick popular options for web bundlers like Webpack, Vite, or ESBuild.

We may consider using TypeScript, which is extended from JavaScript but more programmer-friendly (stricter). However, the browser can’t interpret TypeScript natively, so the web bundler's job is to compile the TypeScript into JavaScript.

Code Linter

Code Linter is an analysis tool used to find errors, bugs, unconventional formats, and other potential issues within the code.

Unlike other programming/script languages, HTML/JS/CSS doesn't have a compiler or interpreter to tell if something is wrong. The browser processes the static page and shows it to the user. We don’t know what browser users use. The different browsers can slightly behave differently.

Hence, code linter is not a nice-to-have tool for web development, but it can save the day. The most popular linter for web development maybe is ESLint.

Run the Static Page

We still need the server to host the static page so users can access it online. Many web hosting providers can help with this matter.

If you are okay with exposing source codes to the public (open source), GitHub has a free service called Github Page to host static sites.

For development, we can run the server on the local machine (http://localhost:[port]). Instead of installing the server software (like Nginx or Apache), we can use one of the below commands to run the local server from any folder.

npx serve                      # run web server via NPM (or)
python3 -m http.server 8080    # run web server via Python3 (or)
php -S localhost:8080          # run web server via PHP

Or simply open the *.html file from the browser.

Epilogue

We need these essential tools for fun projects and serious development (using React or Vue). Check my static page starter as a project reference for building a static site with Tailwind and AlpineJS.

Put your comment below and share your experiences.