Blog template built with Assemble.
NOTE: This repo is under development
For a live demo of the template, visit my website jonastn.com.
In order to build Assemble-Blog-Template, ensure that you have Node.js, Bower, and Grunt installed.
- Install dependencies
npm install
bower install
The build tool used is Grunt, a dependency that already should be installed locally on your system (if you read the setup section).
There are two different tasks registered with grunt:
build
task creates a json file from all posts that exists in the foldersrc/views/posts/
, and run assemble to create the distributed.html
files from.hbs
templates.rebuild
, as the name implies, rebuilds the project. All dependency files needed for distribution is copied, alljs
files is minified,sass
files compiled,css
files minified, andhtml
files created.
A successful build will create two folder: build/
and dist/
, as described in the various directories
Before being able to run this project, the task rebuild
needs to be run.
grunt rebuild
This task will create a new folder: dist/
within the root of the project folder (This is the folder which should be made accessible/copied over to a webserver, to make it available over the Internet).
To test this project locally, and make the files in dist/
available to a web-browser:
grunt connect
Navigate your web-browser to localhost:8080.
Another opportunity is to use npm
to install dependencies, rebuild and start running this project.
start
- deletes thedist/
folder, and run therebuild
andconnect
task usinggrunt
init
- install all dependencies, and start thenpm run
task
start any of these scripts:
npm run <taskName>
where taskName is one of the available npm scripts mention above.
src
: contains the source code of the projectjs
: JavaScript code needed by the generated web-pageshelpers
: Handlebars helpers made accessible within Handlebars files inviews
.
scss
: sass style defined for the project (HTML5-up)views
: handlebars layouts/pages used byAssemble.io
.layouts
: Base layouts for the website. One for standard pages, and a layout used by a blog-postpages
: building on thebase.hbs
layout filepartials
: hbs snippets accessible to other.hbs
layout/pages filesposts
: The blog-post markdown files
build
: files that are compiled from thesrc
folderdist
: production ready code, created from thebuild
folder
When packaged, the Assemble-Blog-Template consist of a index.html
page, the main page for the blog. All posts are located within the directory dist/posts/
.
All dependencies are located in dist/asset/
, where both .css
and .js
files are located. Packages from bower
and npm
are located under packages/
folders.
Assemble-Blog-Template is built with multiple libraries.
- Assemble - Static compilation of Handlebars template
- Handlebars - extension of the Mustache templating language, a logicless templating language
Other dependencies can be found in bower.json
and package.json`.
The theme used for this template is Future Imperfect
, and downloaded from HTML5UP. Thanks to N33 for generating awesome HTML5 templates!
Assemble-Blog-Template is released under the MIT license. See LICENSE for more information.