How to Create Static Blog with Assemble

home    page

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

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

back to menu ↑

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

back to menu ↑

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.

back to menu ↑

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.

back to menu ↑

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:

My blog

MY BLOG

{{> body}}

back to menu ↑

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’}}}});

back to menu ↑

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

This is our 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

I am the first message. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, esse, perferendis, earum in sunt voluptate officiis voluptates quam pariatur veritatis quisdeleniti fugit expedita aliquam est repellendus autem dolor non?

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.

first post

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

back to menu ↑

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}}

  • {{data.title}}
  • {{/ 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:

    first post with sidebar

    back to menu ↑

    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:

    first post with sidebar

    —Title: Post One—

    back to menu ↑

    {{title}}

    blahblah …

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

    back to menu ↑

    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.

    sidebar sort by date

    back to menu ↑

    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.

    back to menu ↑

    How to Create Static Blog with Assemble: benefits

    • The How to Create Static Blog with Assemble tutorial is free .
    • This guide already helps so many users follow up with interest in a timely manner.
    • The price of the How to Create Static Blog with Assemble guide is free.

    back to menu ↑

    Faq

    Tutorial summary of How to Create Static Blog with Assemble

    In this guide, we told you about the How to Create Static Blog with Assemble; please read all steps so that you understand How to Create Static Blog with Assemble in case if you need any assistance from us, then contact us.

    How this tutorial helping you?

    So in this guide, we discuss the How to Create Static Blog with Assemble, which undoubtedly helps you.

    What is actual time in which this method complete?

    The time to complete the How to Create Static Blog with Assemble tutorial is 10+ minutes.

    What are the supported Device?

    PC Laptop or Desktop


    back to menu ↑

    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.

    Compsmag
    Logo
    Shopping cart