{"id":22300,"date":"2014-10-31T18:01:35","date_gmt":"2014-10-31T10:01:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22300"},"modified":"2025-04-04T02:01:24","modified_gmt":"2025-04-03T18:01:24","slug":"blogging-with-assemble","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/","title":{"rendered":"How to Create a Static Blog with Assemble"},"content":{"rendered":"<p>Today, we\u2019ll explore <a href=\"https:\/\/assemble.io\/\" rel=\"nofollow noopener\" target=\"_blank\">Assemble<\/a>, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/jekyll\/\">Jekyll<\/a>, Assemble offers additional flexibility and features, enhancing its power significantly.<\/p>\n<p>Features like Permalink, Bootstrap Boilerplates, and LESS compiler elevate Assemble beyond traditional static site tools, equipping it with capabilities akin to a comprehensive CMS. In this guide, we\u2019ll walk you through the steps to use Assemble for building your own static blog.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/\" class=\"ref-block__link\" title=\"Read More: How to Remove Unnecessary CSS Using Grunt\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Remove Unnecessary CSS Using Grunt<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/unload-unnecessary-css.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-20055 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/unload-unnecessary-css.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Remove Unnecessary CSS Using Grunt<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tUsing a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website....\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Step 1: Install Project Dependencies<\/h2>\n<p><strong>Assemble requires Grunt to function<\/strong> (refer to our previous posts on <a href=\"https:\/\/www.hongkiat.com\/blog\/node-js-server-side-javascript\/\">Node.js<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/grunt\/\">Grunt<\/a> for further assistance). After setting up Node and Grunt, create a <code>package.json<\/code> file in your project folder to list the Node packages needed to build your blog.<\/p>\n<p>Insert the following JSON configuration into your <code>package.json<\/code> file:<\/p>\n<pre>\r\n{\r\n  \"devDependencies\": {\r\n    \"assemble\": \"~0.4.40\",\r\n    \"grunt\": \"~0.4.5\",\r\n    \"grunt-contrib-connect\": \"~0.8.0\",\r\n    \"grunt-contrib-watch\": \"^0.6.1\"\r\n  }\r\n}\r\n<\/pre>\n<p>This configuration specifies that our project depends on <a href=\"https:\/\/gruntjs.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Grunt<\/a>, <a href=\"https:\/\/github.com\/gruntjs\/grunt-contrib-connect\" rel=\"nofollow noopener\" target=\"_blank\">Grunt Connect<\/a>, <a href=\"https:\/\/github.com\/gruntjs\/grunt-contrib-watch\" rel=\"nofollow noopener\" target=\"_blank\">Grunt Watch<\/a>, and Assemble. Next, install these packages by running the following command in the Terminal:<\/p>\n<pre>npm install<\/pre>\n<h2>Step 2: Configure Grunt Tasks<\/h2>\n<p>Once the dependencies are in place, create a <code>gruntfile.js<\/code> and add the following script:<\/p>\n<pre>\r\nmodule.exports = function(grunt) {\r\n  grunt.initConfig({\r\n    pkg: grunt.file.readJSON('package.json')\r\n  });\r\n  \r\n  grunt.loadNpmTasks('assemble');\r\n  grunt.loadNpmTasks('grunt-contrib-connect');\r\n  grunt.loadNpmTasks('grunt-contrib-watch');\r\n  \r\n  grunt.registerTask('default', ['connect:livereload', 'assemble', 'watch']);\r\n};\r\n<\/pre>\n<p>This script configures grunt to load and register the dependencies we just installed with <code>npm install<\/code>. These tasks will be activated in the following steps.<\/p>\n<h2>Step 3: Organize Your Blog\u2019s File Structure<\/h2>\n<p>Next, we\u2019ll structure the folders and files for our blog as follows:<\/p>\n<pre>\r\nMyBlog\/\r\n  package.json\r\n  gruntfile.js\r\n  app\/\r\n  layout\/\r\n    default.hbs\r\n  content\/\r\n    page\/\r\n      index.hbs\r\n    blog\/\r\n      first-posting.hbs\r\n  partials\/\r\n<\/pre>\n<p>Assemble permits us to customize our file and directory setup via <code>gruntfile.js<\/code>. For simplicity, we\u2019ll start with the default structure shown above.<\/p>\n<h2>Step 4: Designing the Blog Layout<\/h2>\n<p>In Assemble, <strong>layouts form the backbone of your pages<\/strong>. We created a layout file named <code>default.hbs<\/code> in the <code>MyBlog\/app\/layout\/<\/code> folder in the previous step. Assemble utilizes the Handlebars templating language, denoted by the <code>.hbs<\/code> extension.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/\" class=\"ref-block__link\" title=\"Read More: Beginner\u2019s Guide to Using Handlebars.js\" rel=\"bookmark\"><span class=\"screen-reader-text\">Beginner\u2019s Guide to Using Handlebars.js<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/a-look-into-handlebarsjs.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-19736 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/a-look-into-handlebarsjs.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Beginner\u2019s Guide to Using Handlebars.js<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>The <code>default.hbs<\/code> file will serve as the template for all pages in the blog. We will incorporate <a href=\"https:\/\/getbootstrap.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap<\/a> through the <a href=\"https:\/\/www.bootstrapcdn.com\/\" rel=\"nofollow noopener\" target=\"_blank\">BootstrapCDN<\/a> to establish the styling foundation of our blog. Add the following HTML code to <code>default.hbs<\/code>:<\/p>\n<pre>\r\n&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"UTF-8\"&gt;\r\n&lt;title&gt;My Blog&lt;\/title&gt;\r\n&lt;link rel=\"stylesheet\" href=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.2.0\/css\/bootstrap.min.css\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n&lt;div class=\"container\"&gt;\r\n&lt;div class=\"row\"&gt;\r\n&lt;div class=\"col-md-12\"&gt;\r\n&lt;h1 class=\"page-header text-center\"&gt;MY BLOG&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"col-md-9 main\"&gt;\r\n{{&gt; body }}\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<h2>Step 5: Configure Grunt Tasks<\/h2>\n<p>Next, update the <code>Gruntfile.js<\/code> to specify how Assemble should process and compile the directories and files. Open <code>Gruntfile.js<\/code> and insert the following configuration into the <code>Grunt.initConfig<\/code> section:<\/p>\n<pre>\r\ngrunt.initConfig({\r\n  pkg: grunt.file.readJSON('package.json'),\r\n  watch: {\r\n    assemble: {\r\n      files: [\r\n        'app\/content\/blog\/*.hbs',\r\n        'app\/content\/pages\/*.hbs',\r\n        'app\/layouts\/*.hbs',\r\n        'app\/partials\/*.hbs'\r\n      ],\r\n      tasks: ['assemble']\r\n    },\r\n    livereload: {\r\n      options: {\r\n        livereload: '&lt;%= connect.options.livereload %&gt;'\r\n      },\r\n      files: [\r\n        '.\/dist\/*.html'\r\n      ]\r\n    },\r\n  },\r\n  assemble: {\r\n    options:{\r\n      layoutdir: 'app\/layouts',\r\n      flatten: true,\r\n      layout: 'default.hbs',\r\n      partials: 'app\/partials\/*.hbs'\r\n    },\r\n    page: {\r\n      files: {\r\n        'dist\/': ['app\/content\/page\/*.hbs']\r\n      }\r\n    },\r\n    blog: {\r\n      files: {\r\n        'dist\/': ['app\/content\/blog\/*.hbs']\r\n      }\r\n    }\r\n  },\r\n  connect: {\r\n    options: {\r\n      port: 8800,\r\n      hostname: 'localhost',\r\n      livereload: 35728\r\n    },\r\n    livereload: {\r\n      options: {\r\n        open: true,\r\n        base: '.\/dist'\r\n      }\r\n    }\r\n  }\r\n});\r\n<\/pre>\n<h2>Step 6: Create a Page and Your First Blog Post<\/h2>\n<p>Now, let\u2019s build a page. Open the <code>index.hbs<\/code> file in the <code>MyBlog\/app\/content\/page\/<\/code> folder and add the following content:<\/p>\n<pre>\r\n&lt;h3&gt;Home Page&lt;\/h3&gt;\r\n\r\n&lt;section&gt;\r\n&lt;p&gt;This is our Home Page.&lt;\/p&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>Execute the <code>grunt<\/code> command in the Command Prompt or Terminal. This action will convert the <code>index.hbs<\/code> file into an HTML file and open it in your browser. Let\u2019s see how it looks:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/home-page.jpg\" height=\"307\" width=\"500\" alt=\"home page\"><\/figure>\n<p>Next, we\u2019ll generate the first post for our blog. Open the <code>first-post.hbs<\/code> file in the <code>MyBlog\/app\/content\/blog\/<\/code> folder and insert the following content:<\/p>\n<pre>\r\n&lt;h3&gt;First Post&lt;\/h3&gt;\r\n&lt;section&gt;\r\n&lt;p&gt;I am the first post. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, esse, perferendis, earum in sunt voluptate officiis voluptates quam pariatur veritatis quis deleniti fugit expedita aliquam est repellendus autem dolor non?&lt;\/p&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>Run the <code>grunt<\/code> command again to generate the <code>first-post.html<\/code> file in the newly created <code>dist<\/code> folder. Visit <code>localhost:8800\/first-post.html<\/code> in your browser to view the first post. It should appear as shown in the image below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/first-post.jpg\" height=\"321\" width=\"500\" alt=\"first post\"><\/figure>\n<p>You can create additional posts by adding more <code>.hbs<\/code> files in the <code>MyBlog\/app\/content\/blog\/<\/code> folder.<\/p>\n<h2>Step 7: Create a Sidebar List of Blog Posts<\/h2>\n<p>Next, let\u2019s create a sidebar to list blog posts, utilizing Assemble\u2019s \u201cPartial\u201d feature for reusable code fragments. Start by creating a new file named <code>sidebar.hbs<\/code> and add the following code, then save it in the <code>MyBlog\/app\/partials\/<\/code> folder:<\/p>\n<pre>\r\n&lt;h3&gt;Sidebar&lt;\/h3&gt;\r\n{{#each pages}}\r\n&lt;li class=\"list-unstyled\"&gt;\r\n&lt;a href=\"{{relative dest this.dest}}\"&gt;{{ data.title }}&lt;\/a&gt;\r\n&lt;\/li&gt;\r\n{{\/each}}\r\n<\/pre>\n<p>Include the Sidebar partial in the <code>default.hbs<\/code> file as shown below:<\/p>\n<pre>\r\n&lt;div class=\"col-md-3 sidebar\"&gt;\r\n{{&gt; sidebar }}\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>The <code>#each<\/code> helper iterates over all blog posts in the <code>MyBlog\/app\/content\/blog\/<\/code> folder, listing them in the sidebar. The appearance is depicted in the following image:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/first-post-with-sidebar.jpg\" height=\"186\" width=\"500\" alt=\"first post with sidebar\"><\/figure>\n<h2>Step 8: Implementing Variables<\/h2>\n<p>Assemble enables the use of variables through YAML front matter (YFM), which is an optional section at the top of a page for managing metadata. To demonstrate, let\u2019s specify the title of a post. Open <code>first-post.hbs<\/code> and modify the code as follows:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/first-post-with-sidebar.jpg\" height=\"186\" width=\"500\" alt=\"first post with sidebar\"><\/figure>\n<pre>\r\n---\r\ntitle: Post One\r\n---\r\n\r\n&lt;h3&gt;{{ title }}&lt;\/h3&gt;\r\n&lt;section&gt;\r\nblahblah...\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>The <code>{{title}}<\/code> tag will display \u201cPost One,\u201d the title we defined above.<\/p>\n<h2>Step 9: Organizing the List of Posts by Date<\/h2>\n<p>Assemble allows for sorting blog posts by specified attributes. Here, we\u2019ll arrange our blog posts in the sidebar by date. First, add a date to the YAML front matter in <code>first-post.hbs<\/code> as shown:<\/p>\n<pre>\r\n---\r\ntitle: Post One\r\ndate: 2014-07-10\r\n---\r\n<\/pre>\n<p>Update the other post files in the <code>MyBlog\/app\/content\/blog\/<\/code> folder similarly. Then, adjust the <code>sidebar.hbs<\/code> to display the date below each post title:<\/p>\n<pre>\r\n&lt;ul class=\"list-unstyled\"&gt;\r\n{{#withSort pages \"data.title\"}}\r\n&lt;li&gt;\r\n&lt;h4&gt;&lt;a href=\"{{relative dest this.dest}}\"&gt;{{ data.title }}&lt;\/a&gt;&lt;\/h4&gt;\r\n&lt;small&gt;Posted on: {{formatDate data.date \"%B %d, %Y\"}}&lt;\/small&gt;\r\n&lt;\/li&gt;\r\n{{\/withSort}}\r\n&lt;\/ul&gt;\r\n<\/pre>\n<p>The posts in the sidebar are now ordered by date, as depicted in the image below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/sidebar-with-sorting-by-date.jpg\" height=\"409\" width=\"500\" alt=\"sidebar sorting by date\"><\/figure>\n<h2>Conclusion<\/h2>\n<p>We\u2019ve successfully created a simple blog using Assemble. As shown, Assemble is an effective alternative for building websites. For hosting, you might consider using a free service like <a href=\"https:\/\/www.heroku.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Heroku<\/a> or GitHub Pages, both of which support Node.js, to make your site publicly accessible.<\/p>","protected":false},"excerpt":{"rendered":"<p>Today, we\u2019ll explore Assemble, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with Jekyll, Assemble offers additional flexibility and features, enhancing its power significantly. Features like Permalink, Bootstrap Boilerplates, and LESS compiler elevate Assemble beyond traditional static site tools, equipping it with capabilities akin to a comprehensive&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3408],"tags":[],"topic":[4520,4523],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Static Blog with Assemble - Hongkiat<\/title>\n<meta name=\"description\" content=\"Today, we&#039;ll explore Assemble, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with Jekyll,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Static Blog with Assemble\" \/>\n<meta property=\"og:description\" content=\"Today, we&#039;ll explore Assemble, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with Jekyll,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-31T10:01:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:01:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/home-page.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"How to Create a Static Blog with Assemble\",\"datePublished\":\"2014-10-31T10:01:35+00:00\",\"dateModified\":\"2025-04-03T18:01:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/\"},\"wordCount\":733,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blogging-with-assemble\\\/home-page.jpg\",\"articleSection\":[\"Blogging\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/\",\"name\":\"How to Create a Static Blog with Assemble - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blogging-with-assemble\\\/home-page.jpg\",\"datePublished\":\"2014-10-31T10:01:35+00:00\",\"dateModified\":\"2025-04-03T18:01:24+00:00\",\"description\":\"Today, we'll explore Assemble, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with Jekyll,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blogging-with-assemble\\\/home-page.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blogging-with-assemble\\\/home-page.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blogging-with-assemble\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Static Blog with Assemble\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Static Blog with Assemble - Hongkiat","description":"Today, we'll explore Assemble, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with Jekyll,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Static Blog with Assemble","og_description":"Today, we'll explore Assemble, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with Jekyll,","og_url":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-10-31T10:01:35+00:00","article_modified_time":"2025-04-03T18:01:24+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/home-page.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"How to Create a Static Blog with Assemble","datePublished":"2014-10-31T10:01:35+00:00","dateModified":"2025-04-03T18:01:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/"},"wordCount":733,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/home-page.jpg","articleSection":["Blogging"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/","url":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/","name":"How to Create a Static Blog with Assemble - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/home-page.jpg","datePublished":"2014-10-31T10:01:35+00:00","dateModified":"2025-04-03T18:01:24+00:00","description":"Today, we'll explore Assemble, a Grunt plugin that simplifies the creation and management of static sites. While it shares similarities with Jekyll,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/home-page.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/blogging-with-assemble\/home-page.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Static Blog with Assemble"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5NG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=22300"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22300\/revisions"}],"predecessor-version":[{"id":73716,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22300\/revisions\/73716"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22300"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}