GithubHelp home page GithubHelp logo

yerkopalma / gener Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 184 KB

:cyclone: Simple static site generator

Home Page: https://www.npmjs.com/package/gener

License: MIT License

JavaScript 86.58% HTML 13.37% CSS 0.05%
static-site-generator generator blog

gener's Introduction

gener npm version

Build Status test coverage js-standard-style

Simple static site blog generator

Install

$ npm install -g gener

Basic usage

cd to the folder where you want the dist files to be created, and run:

$ gener

This will create an index.html and bundle.js file, that is your blog, congratulations ๐ŸŽ‰. Add those files to a static server and you are done. Now for this to work, you need a posts folder, containing, at least, one post. A post is made of two files, a markdwon file and a json file, both with the same name. The md file is the actual content of your post, in markdown format. The json file is a configuration file, you can add the next properties to that files:

  • author (optional): An object with the data of the author of the post. It has a name (string) property and a social (object) property. Social properties are social network names (key) and links to its (value).
  • date (optional): An object with three properties (day, motnh, year), all of them are 1 based integers.
  • title: A string with the title of the post.
  • subtitle: Subtitle of the post.
  • tags(optional): An array of strings with the tags of the post.

Customization

There are two things that can be customized: Global config, through config.js file, and layouts through layouts folder.

Global config

In the root directory, you can add a config.json file. You can customize the following options:

  • author: A string with the owner (you) of the site.
  • name: The blog's name.
  • domain: Blog domain, (will) add a CNAME file with this value.
  • layout: The name of the layout to be used, by default use the default layout, if you change that, you should add layouts files to the layouts folder.
  • styles: An array of strings containing stylesheets to be added to the index.html file.
  • scripts: An array of js scripts. These are not added as script tags to the index.html file, they are runned after the view is mounted, otherwise, you wouldn't have access to the DOM of your blog.
  • classes: An object with posible custom classes for your rendered post. Useful in case your layout is made with some framework, like bootstrap, that make extensive use of css class to define styles.

Layouts

To customize layouts, add a layouts folder in the root directory. The folder contains the custom layouts that you want to add, those layouts are Handlebar files, with the name that you defined previously in your config.json file. If there is a layout folder and no layout property in your config file, the layouts templates would be ignored. Currently, there is two supported layouts, one for the list of posts and one for each post, and they should be named <layout-name>.hbs and <layout-name>-post.hbs. For example, if you have a config file like this:

{
    "name": "Some blog",
    "layout": "awesome"
}

You should have two layout files: layouts/awesome.hbs and layouts/awesome-post.hbs. Also, keep in mind that the post layout have access to each post config property and to a content property, with the html of your post, so you must use triple braces, and the main layout have access to the properties of the global config file and a posts property which is an array with the posts info.

License

MIT ยฉ Yerko Palma.

gener's People

Contributors

yerkopalma avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

gener's Issues

Add dev mode

Add a basic static server and watch for changes in source files (posts and layouts folder and config.json file).

$ gener -s src --dev

The dist option should be ignored

Implement CLI

  • Basic task (no flag) 1.0.0
    • Require local posts files
    • Build local output
    • Minify output (*)
    • Merge local config file
    • Use local layouts if availaibles
  • Custom source (-s flag) 1.1.0
  • Custom output (-d flag) 1.2.0

(*) Just bundled in a single file, not actually minified

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.