Static web sites made easy.
Table of content
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.
- Uses generic file types only. [v0.1.0]
- Template system. [v0.1.0]
- Snippet system. [v0.1.0]
- Progressive builds (it only builds files that have changed, but you can
--forceit). [v0.1.0] - CSS minification. [v0.1.0]
- Blog post, recent posts and archive. [v0.1.0]
- 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!
Install node 12.13 LTS [Download link]. You can also use nvm or any other node version manager.
Install filler:
git clone https://github.com/pirobtumen/filler.git
cd filler
npm ci
npm run build
node filler --help-
build <folder> [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
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
The files inside the public folder can use any template created inside the /templates folder. The idea is to set the property @template <template filename> inside a comment in the top part of the file. Let's see an example:
File: ./public/index.html
<!--
@template main
-->
<h1>I'm the main web page!!</h1>File: ./templates/main.html
<div>
{{content}}
</div>The {{content}} will be replaced by the previous file content.
Result: ./dist/index.html
<div>
I'm the main web page!!
</div>
It also supports Markdown files:
File: ./posts/my-first-post.md
<!--
@template post
@author Some name
@title First post
@date 01-01-2019
@description First blog test
-->
# I'm the first post!!
With a list:
- A
- B
- CCurrently there are only two supported snippets:
- /snippets/scripts.html: replaced in every mode.
- /snippets/analytics.html: replaced only in
prodmod.
File: ./templates/main.html
<head>
{{snippet:script}}
{{snippet:analytics}}
</head>
<div>
{{content}}
</div>
The {{snippet:<name>}} will be replaced by the previous file content.
Result: ./dist/index.html
<head>
<script> const a = 'Hello world'</script>
<script> analytics only in prod </script>
</head>
<div>
I'm the main web page!!
</div>
The files inside the /post folder can use any template created inside the /templates folder. The idea is to set the parameter @template <template filename> 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
<!--
@template main
@author Some name
@title First post
@date 01-01-2019
@description First blog test
-->
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
<div>
I'm the main web page!!
<h1>Recent posts</h1>
{{blog:recent-posts}}
</div>
You can control the number of recent post displayed with the build --recentPosts <number> 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
<div>
<h1>{{title}} - {{date}}</h1>
<p>{{description}}</p>
<a href="{{href}}">Read more</a>
</div>
Feel free to:
- Submit bugs/features.
- Open a Pull Request with some fix/feature.
Filler is distributed under BSD 3-Clause license. Check the LICENSE.md file.