Awesome

NavPress

NavPress is a CLI tool for generating static navigation websites. It allows you to quickly build a navigation site through a configuration file, supporting both development and production modes.

Features

• Simple Configuration: Define your navigation and sidebar through a single configuration file.
• Supports both development and production builds.
• Built-in SSR support, automatically generating static HTML files.
• Integrates with Tailwind CSS and Vue.js.

Preview

View Demo

Installation

You can install navpress globally via npm:

npm install -g navpress@latest

Or install it locally in your project:

npm install navpress@latest --save-dev

Quick Start

Fork repository and deploy to gihub pages

1. Fork this repository by clicking the "Fork" button at the top right corner of this page.
2. Go to your forked repository's settings on GitHub.Scroll down to the "GitHub Pages" section.
3. Under "Source", select the gh-pages branch from the dropdown menu.
4. Click "Save".

After a few minutes, your site should be available at https://<your-github-username>.github.io/navpress/.

Customize Development

1. Create a Configuration File

Create a navpress.config.js file in the root directory of your project and define your navigation and sidebar:

export default {
  title: 'My Static Site Generator',
  description: 'A simple static site generator with configurable navigation',
  logo: '/navpress/images/logo.svg',
  github: 'https://github.com/aaronlamz/navpress',
  base: '/navpress/',
  meta: {
    title: 'My Custom Title',
    description: 'This is a description for SEO.',
    keywords: 'static site, generator, SEO',
    author: 'Author Name',
  },
  sidebar: [
    {
      text: 'Home',
      link: '/',
      items: [
        {
          text: 'Group 1',
          link: '#group1',
          items: [
            { text: 'Child 1', link: 'https://example.com/child1' },
            { text: 'Child 2', link: 'https://example.com/child2' },
            { text: 'Child 2', link: 'https://example.com/child2' },
          ],
        },
        {
          text: 'Group 2',
          link: '#group2',
          items: [
            { text: 'Child 3', link: 'https://example.com/child3' },
            { text: 'Child 4', link: 'https://example.com/child4' },
            { text: 'Child 2', link: 'https://example.com/child2' },
          ],
        },
        {
          text: 'Group 3',
          link: '#group3',
          items: [
            { text: 'Child 3', link: 'https://example.com/child3' },
            { text: 'Child 4', link: 'https://example.com/child4' },
          ],
        },
        {
          text: 'Group 4',
          link: '#group4',
          items: [
            { text: 'Child 3', link: 'https://example.com/child3' },
            { text: 'Child 4', link: 'https://example.com/child4' },
          ],
        },
      ],
    },
    {
      text: 'About',
      link: '/about',
      expanded: false,
      items: [
        {
          text: 'Group A',
          link: '#groupA',
          items: [{ text: 'Child A1', link: 'https://example.com/childA1' }],
        },
      ],
    },
  ],
}

2. Start the Development Server

Start the development server with the following command:

navpress dev

The development server will automatically open in your browser and display the navigation page.

3. Build the Static Website

Build the static website with the following command:

navpress build

The built static files will be output to the dist directory. You can deploy the dist directory to any static web hosting service.

Configuration Options

navpress.config.js

• title: The website title.
• description: The website description.
• sidebar: The configuration for the sidebar, an array that can nest multiple groups.

Contribution

We welcome contributions of any kind! If you find bugs or have new ideas, please submit an Issue or open a Pull Request.

License

MIT