Building the Blog

Now that you have a taste of Jekyll, it’s time to tackle some advanced concepts that will help you engineer your site for a smooth experience. In this section, I show you how to add a dynamic contact form, site map, and subscribe form.

Remember that Jekyll is a static page generator, which means that activities such subscription forms, contact forms, and Twitter and Facebook page widgets are not rendered within a page. However, you can source those task to third-party plugins or apps and subsequently convert a monologue into a conversation.

To implement a contact form for this article, I use Formspree, which provides a free API to implement a contact form (Listing 3). You can change your contact information, and any communication made through this section will be sent to an email address of your choice. Simply add the code to a new contact.html file, and under front matter use permalink: < contact > to create a new permanent link section at the top of the page.

Listing 3: Contact Form

<form action="https://formspree.io/abc@gmail.com"
   method="POST">
   <input type="text" name="name">
   <input type="email" name="_replyto">
   <input type="submit" value="Send">
</form>

A site map comprises all the URLs associated with a website listed in a single file, which is the feeding ground for search engine crawlers. If you want your blog posts to be listed by the different search engines, a site map plays a significant role in validating your presence on the world wide web.

To add a site map, you have to add the jekyll-sitemap gem to Gemfile so that bundle can automatically fetch and install it; then, simply add the gem to _config.yml :

plugins:
 - jekyll-sitemap

Proceed to compile the website again with

bundle exec jekyll serve

and you should be able to access the site map at localhost:8000/sitemap.xml .

Subscription systems have become a mainstay on blogs and websites to remind readers of regular updates and provide a site owner with a wider reach and constant appeal. To create this system, I used MailChimp, a nifty subscribing system that allows you to get up to 2,000 subscribers for free – a wholesome number for a small website. As your audience size increases, you can always opt for the paid version.

Simply create a MailChimp account, and when you sign in, choose List s from the menubar to create your subscriber list. Once you have created a new list, proceed to generate the code by selecting Subscriber Form under your newly created list and generating the style of code you want. Finally, save the code in a new newsletter.html file under the _includes directory. You can then use this code anywhere you like (Figure 4).

Figure 4: A subscription form allows readers to subscribe to a blog.

Hosting

Jekyll is compatible with GitHub Pages, so it is just a matter of adding a new repository and committing the project. To begin, you create a GitHub repository (e.g., linuxmagazine in this example) and use the command line to add all the project files. Assuming you have preconfigured Git, the process should be routine: Simply change to your project file directory and issue the following commands:

git add .
git commit -m 'first commit'
git remote add origin https://github.com/shashpant/linuxmagazine.git
git push origin master

Be sure to replace the repository link with your own, then open your repository on GitHub and navigate to the settings. Next, scroll down to the GitHub Pages static site hosting service (Figure 5), select the master branch, and click Save . GitHub will process your website, and within minutes, your site should be up and running.

Figure 5: The GitHub Pages section under repository settings.

Conclusion

The efficacy of Jekyll is in the same league as costly counterparts, paving the way for inexpensive website creation. The Jekyll Liquid implementation and the flexibility of front matter and Liquid syntax evokes object-oriented programming concepts, providing the potential for clean coding. The combination of HTML, JavaScript, and CSS allows you to render typical website components. A plethora of third-party add-ons, themes, and handy code makes Jekyll a thriving platform for content creation.

However, Jekyll’s rolling release feature can be a weakness. The destructive way in which updates are handled can be cumbersome and can even break your website.

Overall, I am pleased with the modularity and stability of Jekyll. The icing on the cake is the GitHub support and free hosting. If you are looking to make a website, Jekyll is a viable option.