Axcora Framework
All-in-One Static Site Generator & CSS Framework - Built in Components with auto minify

Introduction

Axcora Framework: Modern Static Site Generator and CSS Framework

Axcora is an all-in-one static site generator (SSG) and CSS framework engineered to streamline web development, emphasizing speed, efficiency, and modern component-based architecture. By combining the strengths of an SSG with a modular CSS framework,

Axcora offers developers a powerful toolkit for building fast, maintainable, and scalable websites.

SSG: Performance and Simplicity

Axcora leverages static site generation to create pre-rendered HTML files, resulting in several advantages:

• Lightning-fast load times: Pre-generated static assets eliminate server-side processing delays, ensuring rapid page delivery.
• Optimized hosting: Static files can be deployed on simple hosting platforms or CDNs, reducing infrastructure costs and complexity.
• Improved SEO and security: With minimal server exposure and crawlable pre-rendered content, sites are naturally safer and more visible to search engines.
• Automatic optimization: Axcora implements automatic minification for CSS and JavaScript assets, reducing file sizes and further accelerating loading speeds. This process removes unnecessary whitespace and comments, providing efficient resources out of the box.

Component-based System: Reusability and Rapid Development

The Axcora framework introduces a modern component-based approach. Developers can utilize pre-built UI elements—such as buttons, cards, and navigation bars—to quickly assemble websites while ensuring design consistency. Each component is carefully crafted for:

• Modularity: Components can be reused across different pages, streamlining development workflows and maintenance.
• Customization: Easy-to-override styles allow for visual differentiation without breaking core functionality.
• Best-practices: Built with accessibility and responsiveness in mind to serve a wide range of devices and users.

CSS Framework: Utilities and Components

Axcora’s CSS framework delivers a rich set of design utilities and ready-to-use components. Highlights include:

• Consistent design system: Featuring variable-based theming and utility classes to speed up prototyping.
• Responsive design: Ensuring layouts adapt seamlessly to all device sizes.
• Automatic minification: All CSS files are minified during the build process, reducing file sizes and boosting performance without extra configuration.

Automatic Minification of CSS and JS

One of Axcora’s standout features is the built-in automated minification of both CSS and JavaScript files. During the build process, Axcora scans and compresses all assets, which:

• Reduces download times for end-users.
• Conserves bandwidth, especially important for mobile users.
• Helps meet web performance best practices without the need for additional plugins.

Summary Table: Axcora SSG Features

For more technical documentation and ready-to-use examples, refer to the official Axcora SSG site.

Building on the advantages of the Axcora framework as a static site generator (SSG) and CSS component library, it is useful to compare its benefits with leading industry CSS frameworks to clarify where Axcora stands out and what unique features it offers.

How Axcora’s SSG and CSS Components Compare to Other Frameworks

Most major CSS frameworks like Bulma, Bootstrap, and Foundation provide robust collections of pre-built responsive components and styling utilities, facilitating faster development and ensuring a consistent visual language across projects. Bulma, for example,

offers a modular, flexible architecture based on Flexbox,

allowing developers to import only the components they need—a principle also used by Axcora’s component system. Bootstrap and Foundation focus on comprehensive feature sets, grids, and a variety of interactive (JS-powered) widgets, while Bulma specializes in CSS-only, modular components for lightweight flexibility.

Axcora’s key differentiators are:

• Integration of SSG with CSS Framework: Unlike most frameworks that are CSS-only, Axcora integrates an SSG workflow, allowing developers to build full sites with static performance while taking advantage of component-based design. This bridges the gap between development speed and deployment efficiency.
• Automatic Minification: Axcora’s automatic CSS and JavaScript minification is handled at build time, so assets are always delivered in their optimized form with no extra configuration needed. This is a time-saving feature not natively present in most comparable CSS frameworks.
• Per-component SSG: With SSG at the component level, developers can re-use, update, and cache only the parts of a site that change, resulting in smarter rebuilds and even faster production deployments.
• Ease of Use & Reusability: Like Bulma, Axcora’s design system is intentionally modular, making it simple to pick, customize, and deploy only the UI components required for your project. This modular approach reduces code bloat and improves maintainability.

Table: Axcora vs. Other Popular CSS Frameworks

When to Choose Axcora

• You prioritize performance (static build, minified assets) and reusability (component-based).
• You want an all-in-one toolchain that automatically optimizes output for production environments.
• You need a modern approach where SSG and UI components are tightly integrated, rather than maintained separately.

Conclusion

Axcora offers a unique value proposition by combining a modular CSS framework with a static site generator, automated asset minification, and per-component reusability.

For developers seeking efficiency, lean output, and a seamless development-to-deployment workflow, Axcora provides practical advantages over traditional CSS frameworks like Bulma, Bootstrap, or Foundation.

---

Installation

Need to Node js - Download Node Js

Install from Source Code Project Download

• Download Source Code project
• Create new project and upload source code project into your project folder
• Access via terminal cd C:\Users\Mypc\project\
• Open terminal Run Installation npm install
• Optional you can run npm run axcora
• Run your project npm run dev
• Open localhost:3000

Clone Axcora Starter Project

You can use axcora starter project, open terminal and run

git clone https://github.com/mesinkasir/axcora-starter.git
cd axcora-starter
npm install
npm run dev
# open localhost:3000

Install Axcora Global on your device

Open terminal and Install Axcora CLI Global

npm i -g axcora

Check axcora version

axcora -V
# or
axcora --version

Create new project

axcora init myproject
cd myproject
npm install 
axcora dev
# open localhost:3000

---

Configuration

First you need to setup your site, access on content/_data/site,yml

And update with your need, site.yml default look like this

# Site Information
title: "Axcora Framework"
description: "Modern static site generator with built-in CSS framework"
url: "http://localhost:3000"
author: "Axcora Team"
image: "/img/logo.jpg"
logo: "/img/logo.jpg"
favicon: "/img/logo.jpg"
blog:
  posts_per_page: 6
  show_excerpts: true
# Navigation Menu
navbar:
  - title: "Home"
    url: "/"
  - title: "About"
    url: "/about/"
  - title: "Blog" 
    url: "/blog/"
  - title: "Tags" 
    url: "/tags/"
  - title: "Categories" 
    url: "/categories/"
  - title: "Github" 
    url: "https://github.com/sponsors/mesinkasir/"
  - title: "Support"
    url: "https://ssg.axcora.com/support/"
# Social Media
social:
 - name: Github Sponsor
   url: "https://github.com/sponsors/mesinkasir"
 - name: Via Gumroad
   url: "https://creativitaz.gumroad.com/coffee"
 - name: Via Paypal
   url: "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=JVZVXBC4N9DAN"
 - name: Via Midtrans
   url: "https://app.midtrans.com/payment-links/1647457988722"
# Theme settings
show_blog_list: true
search:
  enabled: false
theme:
  enable_dark_mode: true
  default_theme: "light"
dark_light:
  enabled: true

---

Home Page

To update home page you can access on content/index.md

Default index look like this

---
layout: index
title: "Axcora Framework - All-in-One Static Site Generator & CSS Framework"
description: "Modern static site generator with built-in CSS framework, components, dark mode, and automatic build system for developers."
hero:
 title1: "All-in-One Static Site Generator"
 title2: "& CSS Framework"
 description: "Build beautiful, responsive websites with our modern static site generator ,commplete CSS framework with the components, automatic build system, and dark mode support" 
 version: 🚀 Axcora v1.0 is launch now!
 button1: 
   text: 📚 View Documentation
   url: https://ssg.axcora.com/install/
 button2: 
   text:  🎯 Explore Components
   url: https://ssg.axcora.com/components/
---

---

Static Page

You can create a new static page on content and create new markdown file , eg about.md

Next you can use this frontmatter markdown format

---
title: About Axcora
description: Modern static site generator built with TypeScript for fast, scalable websites
layout: page
---
### About Axcora
Axcora is designed for developers who want a **simple yet powerful** static site generator. Built with modern technologies and focused on **developer experience**.
### Why Choose Axcora?
- **Zero Configuration** - Works out of the box
- **TypeScript Native** - Full type safety
- **Hot Reload** - Instant development feedback
- **SEO Optimized** - Built-in best practices

---

Blog Page

To update blog you can access on content/blog , you can create new article or update your blog post.

Frontmatter markdown format:

---
title: "Hello Axcora!"
date: "2025-01-15"
tags: 
 - webdev
 - ssg
 - typescript
 - Tes tag
 - Typescript
category: "tutorial dev"
description: "Axora - New static site generator with complete components"
image: "/img/logo.jpg"
---
## 💖 Support Axcora: Donate & Help Us Grow
**Axcora** is a free and open-source project dedicated to providing developers a modern, fast, and user-friendly static site generator. We believe open software empowers everyone to build beautiful, scalable websites with ease.

---

Components - CSS & Themes

Axcora is an all-in-one static site generator (SSG) and CSS framework designed to make web development faster and more efficient for developers. Its core approach is flexibility: you select only the CSS and JS components you need for each theme or per-article, and Axcora automatically minifies and serves just the required assets per page. This means your site loads faster and follows modern best practices by avoiding unnecessary code.

Work with components

Complete Implementation:

---
layouts: base
css:
  theme: 'essentials'
  components:
    - buttons
    - cards
    - navbar
    - badge
    - glass
    - forms
    - badge
    - search
    - hero
js:
  - navbar
  - theme
  - search
---
This is article post
You can also easy drop component like this :
{ axcora-card title="Card" card_title="Card Title" text="Content in here" footer="footer here" }

Component Installation Example

npm i axcora-accordion

Components on markdown or axcora templating

{ axcora-accordion id="demo" title1="Axcora Accordion" text1="hello world lopre ipsum dolor" title2="Axcora Accordion 2" text2="hello world lopre ipsum dolor 2" title3="Axcora Accordion 3" text3="hello world lopre ipsum dolor 3" }

Work with CSS

You can use css as you need on your project, You can also create new template per article or per templating.

Implementation :

css:
  theme: 'essentials'
  components:
    - buttons
    - cards
    - navbar
    - badge
    - glass
    - forms
    - badge
    - search
    - hero

Work with JS

You can use js as you need on your project, You can also create new template per article or per templating.

Implementation :

js:
  - navbar
  - theme
  - search

Work with Themes

You can select themes for your website project too.

Implementation:

css:
  theme: 'brutal'

More detail about component - see components documentation

More detail CSS - see CSS documentation

More detail Themes - see Themes documentation