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?
- Fork a copy of this repo to your github account and clone to your local machine
-
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.
Signup with www.netlify.com using your github account
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
- Customise it by modifying contents of
_data/site.js
- Modify index.njk, about.njk as needed
- Write you posts in markdown. All posts will reside ins
posts
- 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. - git commit the changes if any and push it to origin
- netlify.com will automatically build the external blogsite.
Your feedback will be most appreciated - thanks for taking the time to read
References
- @11ty
- Ian Feather account of moving from jekyll to 11ty
- Paul Robert Lloyd experience moving from jekyll to 11ty
- Highlighting code
- starter code for this blogsite template
- Create a blog using Jamstack
Attribution
Image in this post by: Cookie_studio / Freepik
Top comments (0)