Hikko

Hikko is a Next.js configurator that generates websites from a single config file, featuring a wide range of components and comprehensive theming support for easy customization.

Warning

Hikko is currently in early development and is not yet ready for practical use.

💡 Tip: A website generated by Hikko is completely free to host using Vercel, Netlify, or any other static site hosting service ♡

Table of Contents

• Features
• Usage
  • Installation
    • Clone the repository
    • Navitgate to the project directory
  • Write a config file
  • Test your site (optional)
• to-do
• License
• Contributing 🌱

Features

• Zero Code: Hikko generates a website from a single config file, no need to write any code.
• Components: Hikko comes with a wide range of components to build your website.
• Theming: Hikko supports comprehensive theming to customize your website easily:
  Each theme can include global CSS, component-specific CSS, and even an entirely new component structure.

Usage

Installation

Clone the repository

git clone git@github.com:devnyxie/hikko.git

Navitgate to the project directory

cd hikko
# or just open the project in your favorite code editor

Write a config file

# config.yaml
site_title: "My Site"
site_description: "This is my site"
theme: "example"
pages:
  - name: Home # Page name
    path: "" # Page path, "/"
    components:
      - componentName: blog # ./common/components/blog/Blog.tsx
        options: # Component related options
          title: "My Blog <3"
  - name: about
    path: about
    components:
      - componentName: profile

Test your site (optional)

`npm install` or `yarn`
# This command will install all the dependencies required by the configurator and the website.

`npm run dev` or `yarn dev`
# This command will:
# 1. Run the configurator to generate the website
# 2. Start a development server
# 3. Start a watcher to regenerate the website on any Hikko related file change.

Warning

It's important to try to build your website before deploying it to ensure that everything is working as expected. It's easy to pass wrong props to components, and since we are using TypeScript, website will simply not build if there are any errors.

npm run build
# This command will:
# 1. Run the configurator to generate the website
# 2. Build the website

npm run start
# This command will:
# Start the built website

to-do

• Build an actual wide range of components
• Create some themes
• Create ./presets for easy customization
• Global Sitemap (SEO)

License

This project is licensed under the Apache License 2.0.

Contributing 🌱

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.