Git Product home page Git Product logo

nanogen's Introduction

Nanogen

No Maintenance Intended npm Build Status Maintainability Test Coverage

Deploy to Netlify

Minimalist static site generator, powered by Node.js

Features

  • Generate HTML pages from EJS and/or Markdown files.
  • The site can have a global layout (the common header, navigation, footer) and some pages may have a specific one.
  • It can read site metadata from a global file and have specific data for individual pages.
  • Allow partials (blocks of reusable interface components)

Getting started

Prerequisites

  • Node.js installed (version 8 or above)

Install

You may install it globally with:

npm i -g nanogen

Or run the cli directly with npx (available with npm 5.2 or above):

npx nanogen <command>

Creating a new site

To create a brand new site, navigate to the folder you want your site to be and run:

nanogen init

This will create a initial site structure like this:

/
  src/
    assets/
    layouts/
    pages/
    partials/
  site.config.js

To build the site and open it in a browser, run:

npm start

There is already a default layout inside the layouts folder, but you may add more.

Read more about Layouts.

Inside the pages folder is where you put ejs, md or html files that will generate the pages of the final site. Any file name and folder structure used here will be transposed to the resulting site (without the pages part).

Read more about Pages.

Available commands and options

You may run nanogen -h to see the available commands and options:

  Initialize a new site:

    $ nanogen init

  Start the current site:

    $ nanogen start [options]

  Build the current site:

    $ nanogen build [options]

  Options
    -c, --config <file-path>  Path to the config file (default: site.config.js)
    -p, --port <port-number>  Port to use for local server (default: 3000)

    -h, --help                Display this help text
    -v, --version             Display Nanogen version

Docs

Read the full documentation

Authors

  • Douglas Matoso - Initial work - doug2k1

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details

nanogen's People

Contributors

dmatoso-cit avatar doug2k1 avatar dpogue avatar jromest avatar karnthis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nanogen's Issues

Nanogen -w doesn't work on windows

I add a "watchmode": "nanogen -w" script to package.lock
When I write npm run watchmode in windows console it gives me next error:

Error: EPERM: operation not permitted, readlink 'D:\test\public\jsons' at Object.fs.readlinkSync (fs.js:967:18)
at checkDest (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:184:23)
at checkPaths (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:208:24)
at copyDirItem (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:133:24)
at fs.readdirSync.forEach.item (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:127:39)
at Array.forEach ()
at copyDir (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:127:23)
at mayCopyDir (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:117:10)
at onDir (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:108:12)
at getStats (D:\test\node_modules\fs-extra\lib\copy-sync\copy-sync.js:44:32)

I have /jsons folder in /assets. Normally with nanogen it's added to /public
But /public directory is empty at all. What is the reason?
UPD2 found a solution from this user: run command prompt in administrator mode. nanogen -w starts a server but after any changes it crashes with the same error.

HEROKU SUPPORT (HEROKU CANT BIND TO LOCALHOST)

I just tried to deploy my app to heroku and got back the error

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

after a lot of googling, trying and failing, it turns out that even if i specify the port using a procfile, HEROKU CANT BIND TO LOCALHOST.

So please i would like this to be fixed asap as it is for my final year project due in a month, thank you 😊

Sitemap

Will there be support for sitemap generation?

"Front matter" in partials

If i have partials/menu.ejs, I figured I should be able to use "front matter" there such that:

---
menuItems:
  - Item 1
  - Item 2
  - Item 3
---

would be available, e.g.:

<% if (partial.menuItems.tags) { %>
  <% partial.menuItems.forEach(function(item) { %>
    <span><%= item %></span>
  <% }) %>
<% } %>

Alternatively..since "menu" is site wide I could make the "menuItems" available in site.config.js.

Thought it would be a good nice-to-have though...assuming it's not complicated since page already implements this.

err during rebuild

I am getting an error during the rebuild:

[1] Error: ENOTEMPTY: directory not empty, rmdir 'public\css'
[1] at Object.rmdirSync (fs.js:684:3)

How to deploy to Netlify?

Any idea how to deploy to netlify, I got something like

Page Not found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

Any Netlify settings that needs to follow?

Confusion

I'm playing with nanogen, and I'm confused by what you mean with "Add build:prod script to build for GitHub Pages" ?
I'm very new to javascript and nodejs, so I apologize if its basic....

and thanks for the awesome script tutorial!!

iterate through pages?

Is it possible to iterate through pages?
for example to build a menu of all of the sub pages that links to each one.

For example with this folder hierarchy:

screen shot 2018-11-12 at 9 51 50 am

suggested enhancement: installing npm packages into compiled site

I think it would be a fantastic addition to be able to add Node packages to the site (like Bootstrap to make your site responsive for example) through the command line. When installing a package [npm install mypackage], allow that package to be compiled into the final rendered site.

I know you've mentioned in one other suggestion (which I thought was a valid suggestion β€” being able to use SASS stylesheets) that you think things should remain simple. While there is limited value in that, I think it'd increase the power and capability without increasing the complexity of implementation. Just my two cents.

Error including partial on a page

From a response to the blog post:

When I insert partials in the layout works perfect, but I'm getting an error when I try to do it in a page.

Error: Could not find the include file β€œ../partial/modalβ€œ

Is something I misunderstand? I'm sure the path is correct. Is my first time using ejs templates. Thanks

customizing output paths

First off, thanks for making this -- I find it very appealing.

Right now there's

fse.writeFileSync(`${destPath}/${fileData.name}.html`, completePage);

I tend to prefer something like

fse.writeFileSync(`${destPath}/${fileData.name}/index.html`, completePage);

I'm happy to just fork to keep things as concise as they are right now. But I thought I'd ask what you think.

page specific media

Any thoughts on adding the ability to organize the images inside of the folder like this:
screen shot 2018-11-12 at 9 54 58 am

& a way to iterate through the images, for page specific media of an unknown length

Is Windows supported?

I see another issue opened about Windows, but I didn't see that until after I tried to install Nanogen. During install I got these errors on Win7

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\nanogen\node_modules\fs
events):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":
"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 275 packages from 209 contributors in 28.635s

Shall I try to use nanogen or are the above mandatory?

Includes from pages

as currently setup, it seems includes do not currently work from pages folder? at least I haven't been able to figure out how to get a file included from a page.ejs file. is there an alternative I'm missing? haven't been able to track anything down.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.