Skip to content

guilherme-codes/htmg

Repository files navigation

HTMG - Static Site Generator

HTMG is a lightweight static site generator built with Node.js that supports both HTML and Markdown files. It's designed to be a simple, zero-configuration solution for creating static websites.

Features

  • Simple and easy to use
  • Zero configuration needed
  • Support for HTML and Markdown files
  • Built-in layouts and partials system
  • SEO meta tags generation
  • Asset minification
  • Sitemap generation
  • Customizable directory structure

Quick Start

Make sure you have Node.js installed, then run:

npx htmg init

This will generate a basic template structure. To start developing your site:

npm run dev

Default directory structure

your-project/
  ├── pages/         
  ├── layouts/        
  ├── public/         
  └── dist/           

Customization

HTMG can be customized using a .env file in your project root. While the default configuration works out of the box, you can customize the directory structure and site settings:

# Directory Configuration
OUTPUT_DIR=dist        # Output directory for built files
PAGES_DIR=pages       # Source directory for your content
LAYOUTS_DIR=layouts   # Directory containing your layouts
PUBLIC_DIR=public     # Directory for public assets

# Site Configuration
SITE_URL=https://example.com  # Your website URL for SEO.

Project Structure

/layouts (or custom LAYOUTS_DIR)

Contains HTML layouts and their partials. Each layout should be in its own directory.

Example structure:

layouts/
  └── default/
      ├── index.html
      ├── head.html
      └── footer.html

Example usage in index.html:

<!-- include: head -->
<body>
    <!-- page_content -->
</body>
<!-- include: footer -->

/plubic (or custom PUBLIC_DIR)

Contains all static files used in your website:

  • JavaScript files
  • CSS stylesheets
  • Images
  • Other static resources

/pages (or custom PAGES_DIR)

Contains your website content in either HTML or Markdown format. The content will be injected into the specified layout at the <!-- page_content --> placeholder.

Pages can include headers to specify metadata:

<!-- 
layout: default
title: What is Markdown?
meta-description: In this article you will know more about Markdown.
meta-locale: auto-generated
meta-type: article
meta-title: Know more about MD!
meta-name: My site name
-->

Available metadata options:

  • layout: Specifies which layout to use
  • title: Page title
  • meta-description: SEO description
  • meta-locale: Language/locale information
  • meta-type: Content type
  • meta-title: SEO title
  • meta-url: Page URL (can be auto-generated)
  • meta-name: Site name

Building

To build your site for production:

npm run build

The build process:

  1. Generates the static site in the /dist directory (or custom OUTPUT_DIR)
  2. Maintains the same folder structure as defined in /pages
  3. Minifies all public assets: HTML, CSS and JS files
  4. Generates SEO meta tags based on page metadata
  5. Creates a sitemap for better search engine indexing

Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

License

This project is open source and available under the MIT License.

About

HTMG is a simple and powerful static HTML Generator

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published