Introduction and Features of Geek Blog

INTRODUCTION -️ October 19, 2021

Introduction

Geek blog is a starter boilerplate for Gridsome which is a static site generator powered by Vue. It allows you to quickly start writing your technical documentation for any kind of project.

Features of Geek Blog

  • Markdown Parser (for creating post and pages)
  • Blog Post
  • Pages
  • Taxonomies: Categories and Tags
  • Featured Image (recommended size 16:9 ratio)
  • Code Syntax Highlighter (shikijs)
  • Global Search for Posts and Pages (fuse.js)
  • Post Excerpt
  • Recent Post
  • Related Post
  • Approximate read time for posts
  • Pagination for Blog, Tags, Categories
  • Github Comments (issue based) (VSSUE)
  • SEO Friendly
  • Sitemap
  • RSS Feed
  • TOC
  • Google Analytics
  • and more in future maybe 🥳

Simple Navigation

Any good documentation has great navigation. This boilerplate has support for an organized sidebar fore cross-page navigation as well as an automatic generated table of contents for each page in your documentation.

The search component which is shipped with this boilerplate, automatically indexes all headlines in your markdown pages and provides instant client side search powered by Fuse.js.

Dark Mode

This seems to be a must have for any site in current year. Click the icon at the top right of the page and try it out for yourself!

TailwindCSS

This starter uses Windi + TailwindCSS for layout and styling. You can easily configure it by editing the tailwind.config.js file. PurgeCSS is included as well to keep the bundle size as low as possible and the website fast and snappy!

Changing Colors

The most important colors are defined in the windi.config.js file, play with it and customize looks on your own.

Greater SEO Support

This boilerplate is SEO friendly with Sitemap, RSS Feed and Google Analytics, which pre-built out of the box.

Make it your own

Of course this is just a starter to quickly get you going. After downloading and installing you can do whatever you want with this boilerplate. Check out the src folder and take a look at the components.

Geek blog uses TailwindCSS. Colors and spacing can easily configured. To change the accent color, you only need to touch a single line in the code.

Don't like how something was designed or implemented? Just change the code and make it your way.

Contribute

If you find any spelling mistakes or have improvements to offer, I am open to anyone who has ideas and wants to contribute to this starter boilerplate.

intro features
Back to Blog
Comments Powered by Vssue

Initializing...