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.
- 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.
You can install navpress globally via npm:
npm install -g navpress@latestOr install it locally in your project:
npm install navpress@latest --save-dev- Fork this repository by clicking the "Fork" button at the top right corner of this page.
- Go to your forked repository's settings on GitHub.Scroll down to the "GitHub Pages" section.
- Under "Source", select the
gh-pagesbranch from the dropdown menu. - Click "Save".
After a few minutes, your site should be available at https://<your-github-username>.github.io/navpress/.
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 desc
8000
ription 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' }],
},
],
},
],
}Start the development server with the following command:
navpress devThe development server will automatically open in your browser and display the navigation page.
Build the static website with the following command:
navpress buildThe built static files will be output to the dist directory. You can deploy the dist directory to any static web hosting service.
title: The website title.description: The website description.sidebar: The configuration for the sidebar, an array that can nest multiple groups.
We welcome contributions of any kind! If you find bugs or have new ideas, please submit an Issue or open a Pull Request.