How To Build A Static Blog Using Assemble

Today, we are going to take a demeanour during Assemble, a Grunt plugin that allows us emanate and conduct immobile sites with ease. Assemble might be somewhat identical to Jekyll, though it brings some-more coherence and facilities to a list that creates it some-more powerful.

Permalink, Bootstrap Boilerplates, and LESS compiler are a facilities that creates Assemble a allied apparatus to a bone-fide CMS application. Herein, we will uncover we how to use Assemble to emanate a immobile blog.

Recommended Reading: How To Unload Unnecessary CSS With Grunt

Step 1. Installing Project Dependency

Assemble requires Grunt to function (refer to a prior posts on Node.js and Grunt if we need serve assistance). Then, once Node and Grunt are all set, emanate a package.json record in a plan folder to mention a Node packages that we will occupy to build a blog.

Add a following formula in package.json:

 "devDependencies": 
 "assemble": "~0.4.40",
 "grunt": "~0.4.5",
 "grunt-contrib-connect": "~0.8.0",
 "grunt-contrib-watch": "^0.6.1"
 

These lines of formula in package.json tells Node that a plan will be contingent on Grunt, Grunt Connect, Grunt Watch and Assemble. Now, we will implement these packages by regulating this authority around a Terminal.

npm install

Step 2. Load and Register Grunt Tasks

After all a dependencies are downloaded, emanate grunfile.js and put a following lines in:

module.exports = function(grunt) 
 grunt.initConfig(
 pkg: grunt.file.readJSON('package.json')
 );

 grunt.loadNpmTasks('assemble');
	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-watch');

	grunt.registerTask('default', ['connect:livereload','assemble','watch']);
;

The lines we put in gruntfile.js above merely load and register a dependencies that we have only downloaded by a npm install command. We will make these tasks “work” after in a following steps.

Step 3. Folder and File Structure

We will now organize a folder and record structure of a blog, as follows:

MyBlog/
	package.json
	gruntfile.js
	app/
		layout/
			default.hbs
		content/
			page/
				index.hbs
			blog/
				first-posting.hbs
		partials/

Assemble allows us to configure a record and office classification by a gruntfile.js. But, for now, let’s only keep adult with a default configuration, as shown above.

Step 4. The Blog Layout

In Assemble, Layouts set a substructure of a page. In Step 3, we have combined a blueprint record named default.hbs in a MyBlog/app/layout/ folder. The .hbs prolongation is used since Assemble uses a Handlebars templating language.

Reas Also: A Look Into: Handlebars.Js

The default.hbs will be used by all pages in a blog that refers to this file. Herein, we will use Bootstrap around a BootstrapCDN to set a styling bottom for a blog. We afterwards supplement in a following codes indefault.hbs:

!DOCTYPE html

html lang="en"
head
	meta charset="UTF-8"
	titleMy Blog/title
	link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/head

body
	div class="container"
		div class="row"
			div class="col-md-12"
				h1 class="page-header text-center"MY BLOG/h1
			/div
			div class="col-md-9 main"
			 physique 
			/div
		/div
	/div
/body

/html

Step 5. Configuring a Grunt Tasks

As a subsequent step, emanate a Gruntfile.js to configure directories and files for Assemble to compile. Open Gruntfile.js and supplement a following codes in a Grunt.initConfig section:

grunt.initConfig(
	pkg: grunt.file.readJSON('package.json'),
	watch: 
		assemble: 
			files: [
				'app/content/blog/*.hbs',
				'app/content/pages/*.hbs',
				'app/layouts/*.hbs',
				'app/partials/*.hbs'
			],
			tasks: ['assemble']
		,
		livereload: 
 options: 
 livereload: ''
 ,
 files: [
 './dist/*.html'
 ]
 ,
	,
	assemble: 
		options:
			layoutdir: 'app/layouts',
			flatten: true,
			layout: 'default.hbs',
			partials: 'app/partials/*.hbs'
		,
		page: 
			files: 
				'dist/': ['app/content/page/*.hbs']
			
		,
		blog: 
			files: 
				'dist/': ['app/content/blog/*.hbs']
			
		
	,
connect: 
 options: 
 port: 8800,
 // change this to '0.0.0.0' to entrance a server from outside
 hostname: 'localhost',
 livereload: 35728
 ,
 livereload: 
 options: 
 open: true,
 base: './dist'
 
 

);

Step 6. Generating Page and First Post

We can now build a page. Let’s open index.hbs record in MyBlog/app/content/page/ folder and supplement a content.

h3Home Page/h3

section
pThis is a Home Page. /p
/section

Through a Command Prompt or Terminal, run grunt command. This authority will beget a index.hbs record into a html record and immediately launch a record in a browser. Let’s demeanour during a outcome in a browser.

We will also beget a initial post of a blog. Open a first-post.hbs inside a MyBlog/app/content/blog/ folder and lay out a content, like so.

h3First Post/h3
section
pI am a initial post. Lorem ipsum grief lay amet, consectetur adipisicing elit. Odio, esse, perferendis, earum in sunt voluptate officiis voluptates quam pariatur veritatis quis deleniti fugit expedita aliquam est repellendus autem grief non?/p
/section

Once again run thegrunt authority and we will see a first-post.html record generated in a newly combined folder named dist. Navigate to localhost:8800/first-post.html on a browser, we should find a initial post to be a same as a picture below.

You can emanate some-more posts by formulating more.hbs files and place them inside in a MyBlog/app/content/blog/ folder.

Step 7. Create a List of Blog Posts

Now, we will emanate a list of posts and put it in a blog sidebar. To do so, we will use a Partial underline of Assemble. A “Partial” is a reusable bit of codes that can be enclosed into a other pages.

The Sidebar is meant to enclose a list of a blog posts as good as a couple to a particular post. Let’s make a new record named sidebar.hbs. Add a following formula in and save it inside a MyBlog/app/partials/ folder.

h3Sidebar/h3
#each pages
li class="list-unstyled"
	a href="relative dest this.dest" data.title /a
/li
/each

Then, call a Sidebar prejudiced in default.hbs, as follows:

div class="col-md-3 sidebar"
 sidebar 
/div

The #each is a loop that will list all of a blog posts in MyBlog/app/content/blog/ folder. The outcome is shown below:

Step 8. Using Variables

With Assemble, we can use a non-static regulating YAML front matter. YFM (YAML front matter) is an discretionary territory that is placed during a tip of a page and is used for progressing metadata for a page and a contents. We will use it to mention a post title; open first-post.hbs, and cgange a formula like so:

---
title: Post One
---

h3 pretension /h3
section
blahblah...
/section

The title tab will be filled with “Post One” that we’ve tangible on top.

Step 9. Ordering list of posts

Assemble allows us to sequence and arrange a list of post formed on a ‘term’ specified. As an example, here we will sequence a blog posts on sidebar by a date. Let’s cgange a post by adding date on YML front matter like below:

---
title: Post One
date: 2014-07-10
---

Also cgange other post files in MyBlog/app/content/blog/. Then, on a sidebar.hbs, we will arrangement a date next a post title. Modify a formula like this:

ul class="list-unstyled"
#withSort pages "data.title"
	li
		h4a href="relative dest this.dest" data.title /a/h4
		smallPosted on: formatDate data.date "%B %d, %Y"/small
	/li
/withSort
/ul

The outcome is a post list in a sidebar that is systematic by date.

Conclusion

Now we have a elementary blog generated with Assemble. Assemble can be used as an choice apparatus to build websites as we’ve already shown you. And should we wish to, we can use a giveaway web hosting use like Github Pages or servers that support Node.js like Heroku to put your site online.

How To Build A Static Blog Using Assemble