How to Create Static Blog with Assemble

Hello friends today we gonna learn about How to Create Static Blog with Assemble. So read this article, How to Create Static Blog with Assemble step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

• Guide: How to Create Static Blog with Assemble
• Step 1. Install project dependency
• Step 2. Load and record grunt tasks
• Step 3. Folder and file structure
• Step 4. The blog layout
• Step 5. Configure the Grunt tasks
• Step 6. Generate page and first message
• Home Page
• First message
• Step 7. Make a list of blog posts
• Sidebar
• Step 8. Using variables
• {{title}}
• Step 9. Order message list
• {{data.title}}
• Conclusion
• How to Create Static Blog with Assemble: benefits
• Faq
• Final note

Guide: How to Create Static Blog with Assemble

Today we’re going to review Assemble, a Grunt plugin that allows us to easily create and manage static sites. Editing may look a bit like Jekyll, but it gives more flexibility and features to the table that makes him more powerful.

Permalink, Bootstrap Boilerplates and LESS compiler are the features that makes Assemble a comparable tool into a full-fledged CMS application. Here we show you how to use Assemble to create a static blog

Step 1. Install project dependency

Assembly requires Grunt to function (see our previous posts on Node.js and Grunt if you need more help). Once Node and Grunt are all set up, create a package.json file in the project folder to specify the Node packages we will use to build our blog.

Add the following code 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 code in package.json tell Node that our project will depend on Grunt, Grunt Connect, Grunt Watch, and Assemble. Now we will install these packages by running this command through the Terminal.

npm install

Step 2. Load and record grunt tasks

After all dependencies are downloaded create grunfile.js and put the following lines in:

module.exports = function (grunt) {grunt.initConfig ({package: 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 load and register the dependencies we just downloaded via the npm install command. We will make these tasks “work” later in the following steps.

Step 3. Folder and file structure

We will now organize the folder and file structure of our blog, as follows:

MyBlog / package.jsongruntfile.jsapp / layout / default.hbscontent / page / index.hbsblog / first-posting.hbspartials /

Assemble allows us to configure the file and directory organization through the gruntfile.js. But let’s just keep going for now up with the default configuration, as shown above.

Step 4. The blog layout

In Assemble, Layouts are the foundation of a pageIn step 3 we created a layout file named default.hbs in the MyBlog / app / layout / folder. The .hbs extension is used because Assemble uses the Handlebars template language.

The default.hbs is used by all pages in the blog that reference this file. In this we will be using Bootstrap via the BootstrapCDN to set the styling base for our blog. Then we add the following codes indefault.hbs:

Step 5. Configure the Grunt tasks

As the next step, create a Gruntfile.js to configure directories and files for Assemble to compileOpen Gruntfile.js and add the following codes in the Grunt.initConfig section:

grunt.initConfig ({pkg: grunt.file.readJSON (‘package.json’), view: {assemble: {files: [‘app/content/blog/*.hbs’,‘app/content/pages/*.hbs’,‘app/layouts/*.hbs’,‘app/partials/*.hbs’], tasks: [‘assemble’]}, livereload: {options: {livereload: ‘<% = connect.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 access the server hostname from outside: ‘localhost’, livereload: 35728}, livereload: {options: { open: true, base: ‘./dist’}}}});

Step 6. Generate page and first message

Now we can build a pageLet’s open the index.hbs file in MyBlog / app / content / page / folder and add the content.

back to menu ↑

Home Page

Run the grunt command from the command prompt or terminal. This command generates the index.hbs file in an HTML file and immediately launches the file in the browser. Let’s see the result in the browser.

We will too generate the first message from our blog. Open the first-post.hbs in the MyBlog / app / content / blog / folder and lay out the content like so.

back to menu ↑

First message

Run the grunt command again and you will see the first-post.html file generated in a newly created folder called dist. Navigate to localhost: 8800 / first-post.html in the browser, you should see the first post is the same as the image below.

You can create more posts by creating more .hbs files and placing them in the MyBlog / app / content / blog / folder.

Step 7. Make a list of blog posts

Now we are going to create a list of posts and post them in the blog sidebarTo do this, we will use the Partly feature of Assemble. A “partial” is a reusable piece of code that can be included on the other pages.

The sidebar is meant to contain a list of our blog posts as well as the link to the post in question. Let’s create a new file called sidebar.hbs. Add the following code and save it in the MyBlog / app / Partials / folder.

back to menu ↑

Sidebar

{{#each pages}}

{{/ each}}

Then call the Sidebar partially in default.hbs, as follows:

The #each is a loop that shows all our blog posts in MyBlog / app / content / blog / folder. The result is shown below:

Step 8. Using variables

With Assemble, we can use a variable with YAML front matter. YFM (YAML front matter) is an optional section placed at the top of a page and used to track metadata for the page and its contentWe will use it to specify the title of the post; open first-post.hbs, and edit the code as follows:

—Title: Post One—

back to menu ↑

{{title}}

The {{title}} tag is filled with “Post One” which we defined at the top.

Step 9. Order message list

With Assemble we can order and sort the list of messages based on the specified ‘term’As an example, here we’ll arrange our blog posts by date in the sidebar. Let’s customize our post by adding a date to the YML front matter as below:

—Title: Post Onedate: 2014-07-10—

Also change other post files in MyBlog / app / content / blog /. Next, in the sidebar.hbs, we will display the date below the post title. Change the code as follows:

{{# withSort pages “data.title”}}
• back to menu ↑

  {{data.title}}

  Posted on: {{formatDate data.date “% B% d,% Y”}}

{{/ withSort}}

The result is the message list in the sidebar arranged by date.

Conclusion

Now we have generated a simple blog with Assemble. Assemble can be used as an alternative website building tool as we have already shown you. And if you want, you can use a free web hosting service like Github Pages or servers that support Node.js like Heroku to get your site online.

How to Create Static Blog with Assemble: benefits

Faq

Final note

I hope you like the guide How to Create Static Blog with Assemble. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Create Static Blog with Assemble, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Create Static Blog with Assemble”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Create Static Blog with Assemble, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.