Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pirobtumen/filler

Modern website generation made easy 💻🚀
https://github.com/pirobtumen/filler

blog filler static-site-generator template-engine

Last synced: 12 days ago
JSON representation

Modern website generation made easy 💻🚀

Awesome Lists containing this project

README 

        
[![TravisCI](https://travis-ci.com/pirobtumen/filler.svg?branch=master)](https://travis-ci.com/pirobtumen/filler)

[![Coverage Status](https://coveralls.io/repos/github/pirobtumen/filler/badge.svg?branch=master)](https://coveralls.io/github/pirobtumen/filler?branch=master)



# Filler



Static web sites made easy.



**Table of content**



- [Filler](#filler)

  - [Objective](#objective)

  - [Features and Roadmap](#features-and-roadmap)

  - [Examples](#examples)

- [Usage](#usage)

  - [Installation](#installation)

  - [Commands](#commands)

- [Documentation](#documentation)

  - [Folder structure](#folder-structure)

  - [Template system](#template-system)

  - [Snippet system](#snippet-system)

  - [Blog system](#blog-system)

- [Contribute](#contribute)

- [License](#license)



## Objective



Filler is a tool to create a static website using templates, reusing code and saving time. Its main purpose is to be as simple as possible to use.



## Features and Roadmap



- [x] Uses generic file types only. [v0.1.0]

- [x] Template system. [v0.1.0]

- [x] Snippet system. [v0.1.0]

- [x] Progressive builds (it only builds files that have changed, but you can `--force` it). [v0.1.0]

- [x] CSS minification. [v0.1.0]

- [x] Blog post, recent posts and archive. [v0.1.0]

- [x] Markdown support.

- [ ] Improve logging system.

- [ ] Improve error system.

- [ ] Docs and GitHub pages.

- [ ] Serve project: build in memory and watch for file changes.

- [ ] Support saving into cloud storage (AWS S3, Google Cloud Storage...).

- [ ] Example templates.

- [ ] "init" command.

- [ ] Multilingual sites.

- [ ] Webpack support.

- [ ] React support.

- [ ] Server Side Rendering.

- [ ] SEO features.

- [ ] Any proposal? Contribute!



## Examples



- [www.pirobits.com](https://www.pirobits.com) - [Source: GitHub](https://github.com/pirobtumen/pirobits.com)



# Usage



## Installation



Install node 12.13 LTS [[Download link](https://nodejs.org/en/download/)]. You can also use nvm or any other node version manager.



Install filler:



```shell

git clone https://github.com/pirobtumen/filler.git

cd filler

npm ci

npm run build

node filler --help

```



## Commands



- build \ [OPTIONS]



  - folder: project folder path. E.g.: "~/Projects/myweb".

  - --output: output folder path. Default: ./dist

  - --force: force build all files. Default: false

  - --mode [dev, prod]: build mode. Replace specific snippets. Default: dev

  - --recentPosts [number]: number of recent posts rendered. Default: 5



# Documentation



## Folder structure



Create the following file structure:



```

- ~/Projects/myweb

  - /posts -> files can be named freely

    - post1.html

  - /snippets -> supports only two by now: scripts, analytics

    - scripts.html -> replaced in all modes

    - analytics.html -> replaced only in prod mode

  - /templates -> files can be named freely

    - main.html

  - /public -> files and structure can be created freely

    - index.html

    - 404.html

    - /assets

      - logo.png

    - /styles

      - styles.css

```



Build command for development:



`node filler ~/Projects/myweb`



Build command for production (injects analytics):



`node filler ~/Projects/myweb --mode prod`



The output folder will contain:



```

- /dist

  - index.html

  - 404.html

  - /post

    - post1.html

  - /assets

    - logo.png

  - /styles

    - styles.css

```



## Template system



The files inside the public folder can use any template created inside the `/templates` folder. The idea is to set the property `@template ` inside a comment in the top part of the file. Let's see an example:



```html

File: ./public/index.html



I'm the main web page!!


```



```html

File: ./templates/main.html



{{content}}



```



The `{{content}}` will be replaced by the previous file content.



```

Result: ./dist/index.html



I'm the main web page!!



```



It also supports Markdown files:



```markdown

File: ./posts/my-first-post.md



# I'm the first post!!



With a list:

- A

- B

- C

```



## Snippet system



Currently there are only two supported snippets:



- /snippets/scripts.html: replaced in every mode.

- /snippets/analytics.html: replaced only in `prod` mod.



```

File: ./templates/main.html



  {{snippet:script}}

  {{snippet:analytics}}





{{content}}



```



The `{{snippet:}}` will be replaced by the previous file content.



```

Result: ./dist/index.html



   const a = 'Hello world'

   analytics only in prod  





I'm the main web page!!



```



## Blog system



The files inside the `/post` folder can use any template created inside the `/templates` folder. The idea is to set the parameter `@template ` inside a comment in the top part of the file. It will also have some extra properties: `@title`, `@description`, `@author` and `@date (dd-mm-yyyyy)`. These properties are used to build the `{{blog:recent-post}}` and `{{blog:archive}}`.



```

File: ./post/my-first-post.html



My firs blog post content

```



If you want to use `{{blog:recent-posts}}` or `{{blog:archive}}`, you need to create the `/template/recentPost.html` or `template/archivePost.html` template in order to render them. For example:



Then you can insert the markups `{{blog:recent-posts}}` or `{{blog:archive}}` where you want, for example in the main page:



```

Result: ./dist/index.html



I'm the main web page!!

Recent posts


{{blog:recent-posts}}



```



You can control the number of recent post displayed with the `build --recentPosts ` argument.



Inside the recent posts or archive templates, the post properties can be injected and will replace the template markups:



- {{title}}: Post title (@title)

- {{description}}: Post description (@description)

- {{author}}: Post author (@author)

- {{date}}: Post date (@date)

- {{href}}: Post link href



Some examples:



```

File: ./template/recentPost.html



  
{{title}} - {{date}}


  
{{description}}


  Read more



```



# Contribute



Feel free to:



- Submit bugs/features.

- Open a Pull Request with some fix/feature.



# License



Filler is distributed under BSD 3-Clause license. Check the LICENSE.md file.