GridSide is a Hugo theme for multi-page portfolio and blog sites, built around a grid-based homepage and dedicated sections for posts, projects, and gallery images.
What is GridSide?
GridSide is an open-source Hugo theme created by GitHub user chipsenkbeil. It converts Markdown content (front-matter driven posts, projects, and gallery items) into a static website with a grid-of-images homepage. The theme runs on the Hugo static site generator, so the output is plain HTML/CSS/JavaScript files that can be hosted anywhere. It uses the Materialize frontend framework (version 0.97.0) as its styling base and supports Disqus for comments.
Key Features
- Grid-based homepage — The homepage displays a grid of image cells (defined in config.toml) representing sections; hovering each cell reveals its title, and each cell links to any URL.
- Three content types — Posts, projects, and gallery images each have distinct front-matter schemas and list/single layouts; posts support optional featured images, projects support HTML5 videos (mp4, webm, ogv, 3gp) with an image fallback.
- Lazy loading and performance — Images are lazy-loaded via lazysizes.js (1.2.0) with a noscript fallback (ls.noscript.js 1.2.0), and the layout uses Masonry.js (3.3.1) for the grid plus imagesLoaded.js (3.1.8) for reflow.
- Lightbox gallery — Gallery items open in a lightbox (lightbox.js 2.8.1) showing the image title.
- Syntax highlighting — Code blocks are highlighted with Highlight.js 8.7, which includes all 130 supported languages.
- Infinite scroll — List pages can automatically load more content via infinitescroll.js 2.1.0.
- Customizable header and footer — The homepage header accepts name, description, email, and a background image; the footer holds any number of Font Awesome (4.4.0) icon+URL links.
- Extensible sections — The layout supports custom section names beyond the default post, project, and gallery by adding partial-based layout files.
Who is it for?
GridSide suits individuals who want a simple but feature-rich personal site with visual content. Developers can showcase projects with screenshots or video demos; photographers and designers can use the gallery section to present a lightboxed portfolio; bloggers can publish posts with tag/category taxonomies and syntax-highlighted code. It's also useful for anyone comfortable editing a TOML config file and Markdown front matter.
What can you do with GridSide?
- Photographers — create a gallery section and add images via front matter; each image displays in a lightbox with its title, and the whole set lazy-loads for fast browsing.
- Open-source developers — add project pages with optional MP4, WebM, OGV, or 3GP video showcases and an image fallback for browsers without HTML5 video support.
- Bloggers — write posts in Markdown with tags and categories, get automatic syntax highlighting for code snippets, and let readers join discussions via Disqus.
How does GridSide work?
Install it by cloning the repository into your Hugo site's themes folder, copy the provided exampleSite/config.toml to your site root, and populate the front matter of your content. Then run hugo server -w to preview at localhost:1313.
FAQ
Is GridSide free?
Yes, it is released under the MIT License, so you can use, modify, and redistribute it freely.
How do I add a project with a video?
Add a project content file with video_mp4, video_webm, video_ogv, or video_3gp fields in the front matter; a video_fallback image is used as the poster and for browsers that don't support HTML5 video.
Can I change the default section names?
Yes, you can create your own layout files that reference the theme's partials. For example, to rename "project" to "work", create layouts/section/work.html and layouts/work/single.html with the appropriate partials.
What JavaScript libraries are bundled?
The theme includes Materialize 0.97.0, Font Awesome 4.4.0, Masonry.js 3.3.1, imagesLoaded.js 3.1.8, Modernizr 2.8.3, Highlight.js 8.7 (all 130 languages), lazysizes 1.2.0, ls.noscript 1.2.0, lightbox.js 2.8.1, and infinitescroll.js 2.1.0.
Does GridSide support comments?
Yes, it integrates Disqus; you configure your Disqus shortname in the config.toml, and comments appear on post and project pages.
