A blogsite template using @11ty

I was reading an article on Serverless, this lead me to few terms/technologies/concepts that I wasn't familiar ; Jamstack and static generators. Exploring this terms led me to an introductory video on Creating a blog. This encouraged me to build a customisable blogsite template with following features:

• Customisable blogsite ( modify _data/site.js )
• Two column site - left column acting as navigator to blog posts
• uses @11ty to build
• uses bootstrap 4 for styles
• is responsive
• uses highlightjs for code blocks
• blog posts are markdown files (see samples: /posts/*.md )
• search blog content (left navigator shows resulting posts)

Where can I try it out?

Here is the live site on netlify.com (images load a bit slowly - dont know why?)

How do I use this template?

1. Fork a copy of this repo to your github account and clone to your local machine

2. Install and build locally

    
   $ cd ~/blosite # change directory to you blogsite
   $ npm install
   $ npx @11ty/eleventy --serve
   # Browse locally to check if you can access the blogsite
   # check the search function too.
   

3. Signup with www.netlify.com using your github account

4. Build this repo using netlify.com (when you signup - netlify.com will guide you - chose defaults and you are done)

If the first 4 steps were successful i.e. you are able to see your site on netlify then proceed with customisation

1. Customise it by modifying contents of _data/site.js
2. Modify index.njk, about.njk as needed
3. Write you posts in markdown. All posts will reside ins posts
4. Ensure you update variables in frontmatter especially date to date of posting (as YYYY-MM-DD )else it defaults to file creation date which will keep changing to build date and thus not preserving order of the blogs in left navigator.
5. git commit the changes if any and push it to origin
6. netlify.com will automatically build the external blogsite.

Your feedback will be most appreciated - thanks for taking the time to read

References

1. @11ty
2. Ian Feather account of moving from jekyll to 11ty
3. Paul Robert Lloyd experience moving from jekyll to 11ty
4. Highlighting code
5. starter code for this blogsite template
6. Create a blog using Jamstack

Attribution
Image in this post by: Cookie_studio / Freepik