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: <! DOCTYPE html>
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.
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.
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.
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—
{{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”}} {{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.
