stackbit / jamstackthemes

A list of themes and starters for JAMstack sites.

Jamstack Themes

A list of themes and starters for the Jamstack and static site generators. https://jamstackthemes.dev

Submit A Theme

Anyone can submit an open-source theme by doing a pull request.

1. Fork this repo and create a new markdown .md file in content/theme folder. For example hugo-air.md.
2. Add the required front-matter as shown in the Example Theme below.
3. Submit a pull request

💡 Another option is to add a new file using the Github UI (click the "add file" button)

Example Theme

---
title: "My Theme Name"
github: https://github.com/username/repo
demo: https://www.demo.com 
author: authorname
date: 2024-03-18
ssg:
  - Astro
cms:
  - No CMS
css:
  - Tailwind 
archetype:
  - Blog
  - Portfolio
description: This is an amazing theme and this is a small description about it!
---

# A simple starter kit for Astro.js

This theme is a lightweight starter kit. It also gives you a well organised starting point to extend it for yourself.

## Features

* Customisable design tokens to make it your own  
* Customisable global data and navigation  
* Tags and tag archives  
* Progressively enhanced, semantic and accessible  

Submission Guidelines

• Any open source themes with a public github repo can be submitted.
• Please make sure the demo links to a theme demo and not your personal/business site. The demo url must use https
• at least 1 ssg is required.
• at least 1 cms is required. If your theme uses markdown (no CMS) the cms should be "No CMS"

jamstackthemes's Issues

Subscribe Form

Please add subscribe form to notify new theme updates via email.

My theme isn't visible in your directory #233

Hello, thanks for the merge but I couldn't find the theme being shown at https://jamstackthemes.dev/.
Its being 4 days since PR got merged. :(

PR #233

Error Building Site

I got this error when trying to build site using

Hugo Serve

Error: Error building site: failed to render pages: render of "home" failed: "C:\Users\Dell\Projects\jamstackthemes\themes\jamstackthemes\layouts\index.rss.xml:24:38": execute of template failed: template: index.rss.xml:24:38: executing "index.rss.xml" at <substr (replace .Params.github "/" "-") 19>: error calling substr: start position out of bounds for 0-byte string

How to create a new types of template page

I've created my own portfolio site from Exto stackbit theme.
I have a problem about create a new type of page similar to the blog page.
Would you like to guide me on create a new type of page with Exto theme?

Add Netlify CMS Themes

The Netlify team maintains and updates a list of Netlify CMS templates (website, repo) which can be added to JAMstack Themes.

Convert Last Commit Date to "Time Ago" Format

Each theme displays the date of its last commit using a standard date format of "last commit Oct 19, 2019". It would be better if it used a "time ago" format ie "last commit 2 hours ago"

The exact formatting and details of the time ago format can be whatever makes sense.

We'd prefer not use javascript which modifies the DOM in the client, as it will significantly impact performance. It would be great the date format was converted at build using standard Hugo functionality.

https://jamstackthemes.dev/index.json seems to be invalid JSON

Error: Parse error on line 998:
...    "ssg": ["Jekyll""Hugo""Gatsby"],   
-----------------------^
Expecting 'EOF', '}', ':', ',', ']'

Theme not appearing in search results on the site

Hello,

I can access my theme's intro page that jamstackthemes.dev renders through the URL :

https://jamstackthemes.dev/theme/gatsby-netlifycms-blog-web-app/

However, my theme doesn't appear in the search results, using filters like

SSG -> Gatsby,
CMS -> NetlifyCMS,
CMS -> Bulma,
ArcheType -> Blog

It's pretty much possible many other sites might also be having the same issue of NOT being iuncluded in the search results.

filters menu bugs

there is a difference in the number of themes displayed
when on the homepage (https://jamstackthemes.dev/)

themes page (https://jamstackthemes.dev/theme/)

Number of themes does not add up

If i sort on Gridsome, it says there is 6 themes in the sidebar, but only 5 shows up. Have not had the time to check the code today, might do a pull request if i find it, if no one finds it before me. It seems to be an issue only with the Gridsome themes, the others I have checked seems right.

Stars not getting updated

Many of my themes have more stars now but the site is still showing the old count.
For example:

serial programmer

https://jamstackthemes.dev/theme/jekyll-theme-serial-programmer/

https://github.com/sharadcodes/jekyll-theme-serial-programmer

Capture image shows underlines on the links on some themes

With reference the capture image of https://jamstackthemes.dev/theme/hugo-theme-docura/,

As you can see, the tool you are using to capture site image has been added the underlines for the links of the docura website. As I can't see the same behavior of the other captures, I think this may related the theme. May I know the tool you use to generate these captures as I can't see this behavior on common browsers?

Improve RSS Feed

Currently we output an RSS feed at https://jamstackthemes.dev/index.xml - This is generated using Hugo Output formats in the config.toml and the template layouts/index.rss.xml

It works, kinda. When the feed is viewed in an RSS Reader (Feedly was used for testing) its not very useful. Ideally the RSS Feed should have.

• should themes sorted by submission date.
• show a thumbnail preview of each theme
• display the themes title along with the ssg and cms tags

Confilcting with another site on the server

I'm having issues with the site that I am in the process of building with this theme not coming up when I get to it's assigned URL. I've checked and apache is configured properly.

Iterate through top level taxonomies in partials/filters.html

At the moment the filters in the sidebar themes/jamstackthemes/layouts/partials/filters.html are semi-hardcoded. I render each taxonomy using {{ range .Site.Taxonomies.ssg }}`

I'd prefer that this template iterated through the top level taxonomies ie {{ range .Site.Taxonomies }} rendering a filter group for each taxonomy. So when content for a new top level taxonomy is added the filters will display this taxonomy without needing to update the partial template.

Get the scrub-themes.js script working

The scrub-themes script needs to be rewritten to implement the functionality mentioned in this comment in #12 and this comment in #26.

The scrub-themes.js script needs to update the theme markdown files in content/theme/ by:

• Adding or updating a stale flag to the frontmatter for any theme who has not had a recent commit to it's specified branch
• Adding the github_branch setting with the repo's default branch name, only when no branch is explicitly specified in the frontmatter already.

This process should be driven by the theme data stored in data/themes.json (which is generated by the generate-github.js script). Each theme object stored within the themes.json has the appropriate last_commit and branch that should be used in implementing the above requirements.

Help Categorise Our Themes

Help us better categorise our themes.

We have over 1000 themes, every theme has ssg and cms categories but most do not have css and archetype. Help us add these categories to the existing themes.

Please update the categories on at least 10 themes before submitting a PR

Example: Look over the existing themes in the content/themefolder - For example content/theme/11ty-hylia.md

This theme has categories for ssg and cms - please don't change these.

---
title: Eleventy Hylia
github: 'https://github.com/andybelldesign/hylia'
demo: 'https://hylia.website/'
author: Andy Bell
ssg:
  - Eleventy
cms:
  - NetlifyCMS
date: 2019-06-11T20:15:02.000Z
github_branch: master
featured: true
description: >-
  Hylia is a lightweight Eleventy starter kit to help you to create your own
  blog or personal website.
stale: false
---

To add categories for css and archetype you might add the following front-matter

css:
  - Bootstrap
archetype:
  - Blog
  - Portfolio
  - Multi Purpose

You will need to look at the themes github repo and live demo to determine which CSS framework it uses. Not all themes use a css framework, do not add a css category if that is the case.

You will need to assess what kind of site it is (the archetype) - Is it a blog? a Portfolio?

Which categories can I add?

To understand which categories you can add look at the content/css and content/archetype folders. Inside each of the sub folders is an _index.md file. The title of the that file equals the category.

Site Not Rendering properly

Wrong date used for last commit date

This was reported in a previous issue (#12) and was decided it was best to open a separate issue for it. Below are the original reported details:

...the value being used to report the last commit is the "pushed_at" key of the github repo object. This time value is representative of the time a commit was made to any branch of the repo, not just the master branch. So this is not reflective of recency of the master branch that users would probably be looking for. I think the correct value to use would be the date of the last commit of the master branch.

Using the repo hauke96/hugo-theme-hamburg as an example:

• Retrieving the repo's object and looking at the pushed_at key we see (at the time of this writing): "2019-08-23T13:18:15Z"
• Retrieving the master branch's last commit object and looking at the commit.author.date key we see (at the time of this writing): "2019-08-19T23:59:44Z"
• Retrieving the dev branch's last commit object and looking at the commit.author.date key we see (at the time of this writing): "2019-08-23T13:18:14Z"

Given the above, the value used as the last commit ("2019-08-23T13:18:15Z") is really representative of the dev branch, not the master branch. If the last commit is supposed to representative of repo activity that might be fine, it depends on what is meant to be conveyed and may be worthy of clarification on the front-end (e.g. maybe "last activity" is better instead of "last commit" which I think might be thought of as "last commit on master").

JugglerX responded to the above via comment in the previous issue:

• Get the correct value for last_commit from the Github API in the generate-github.js script. It should be the "last commit on master"

Some Demo are not allowed to be displayed in iframes

Hi there,

a new theme was added recently, Juma.

Unfortunately, the live demo of Juma can't be displayed on some browsers:

Firefox Dev edition:

The "Learn more" link points to this doc about X-Frame

Chromium:

Technical details:

• Firefox 96.0b9 (64-bit) on Debian 10
• Chromium Version 90.0.4430.212 (Developer Build) built on Debian 10.9, running on Debian 10.10 (64-bit)

Reduce size of github repo (image assets are very large)

You have to separate the repo between the site and content data.

$> ncdu ./

<
--- ./stackbithq/jamstackthemes ---
  231.5 MiB [##########] /.git
   81.5 MiB [###       ] /static
  968.0 KiB [          ] /themes
  928.0 KiB [          ] /content
  500.0 KiB [          ] /draft
   72.0 KiB [          ] /data
   12.0 KiB [          ] /archetypes
    4.0 KiB [          ]  README.md
    4.0 KiB [          ]  generate-github.js
    4.0 KiB [          ]  generate-thumbnails.js
    4.0 KiB [          ]  capture-screenshots.js
    4.0 KiB [          ]  LICENSE
    4.0 KiB [          ]  .gitignore
    4.0 KiB [          ]  config.toml
    4.0 KiB [          ]  package.json
    4.0 KiB [          ]  netlify.toml

 Total disk usage: 315.5 MiB  Apparent size: 312.1 MiB  Items: 1453 

I think a submodule will be fine.

I just can't find my theme

It's been 6 days with PR, but I still can't find my theme in your directory :(

PR: #185

Eleventy & 11ty Themes

Both are the same SSG - so you can remove 11ty

The number of domes on the home page is displayed problem

paginate = 18
layouts/index.html This html file references {{ partial "pagination.html" . }}
But the home page still shows all the data

"Last Commit" tab not working.

Navigating to https://jamstackthemes.dev/#ssg=gatsby and clicking on "Last Commit" produces this error:

homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:144 Uncaught TypeError: attrA.toLowerCase is not a function
at mixitup.Mixer.compare (homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:144)
at homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:142
at Array.sort ()
at mixitup.Mixer.sortOperation (homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:142)
at mixitup.Mixer.getOperation (homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:302)
at mixitup.Mixer.multimix (homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:296)
at mixitup.Control.handleClick (homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:81)
at HTMLDocument.self.handler (homeBundle.min.68cf540628598023fedf4b8282d691e35fddb910d381cb9c8c6f3c2f599f1ef0.js:73)

Astro themes

Would you consider adding Astro in your SSGs list?
https://astro.build/

Add ZEIT deploy buttons

I'd love to work on a PR to make the themes deployable. Where do you think would be the best place?

Some ideas:

I'd love to hear your thoughts!

Build a Hugo Theme Based on This

I downloaded this repo a year and a bit ago, thinking it was a theme, not realizing it was the entire site. I was trying to use it to create a program bank for my summer camp. However, I couldn't reverse engineer it well enough to determine what I needed to change to fit my requirements.

Categories in URL hash fragment

It would be nice to add the selected categories in the URL hash fragment in order to share the page with the selected filters applied.

Hello friend How to generate a json file in the date directory

If there is a question, please help me to answer it, thank you
themes.json stackbit.json errors.json

Building site locally requires Hugo Extended version

Hello. I am getting an error while trying to hugo serve

Error: Error building site: TOCSS: failed to transform "style.scss" (text/x-scss): resource "scss/scss/style.scss_953250851a1795a33f24521b79ead981" not found in file cache

Hugo version : v0.68.1

I have also tried with 0.57.2 as stated in the netlify.toml but I am getting an error about the same file:

Building sites … ERROR 2020/03/24 20:00:42 error: failed to transform resource: TOCSS: failed to transform "style.scss" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information Total in 3817 ms Error: Error building site: logged 1 error(s)

Customizing Theme & Content to Use Template on My Site

@TomasBankauskas

• How do I rename the filters in the sidebar?
• Is it possible to have options in a filter change based on the state of another filter?
• How do I remove the banner?
• How do I change the site title and logo?

jamstackthemes theme

Hi,

It's not quite an issue. I'm looking for a similar theme for applications/plugins database. Is there template which used for https://jamstackthemes.dev/ ?
Or, if there is not, is it ok to adopt sources of this repo for my needs, basically - rename the taxonomies and theme->software? Under the same license (MIT) of course.

Add a section for Zola themes

www.getzola.org

Update site

I can't understand, my topic seems to have been added to the collection, but it's been a week and it's still not on the site. how often is your site updated?

Asking explanation .

Please clarify why did you mentioned this line in your readme .
"We also advise you not to purchase products from the following companies: Themefisher and Gethugothemes. "
Can you legally do that ? If yes, in which ground ? In which terms do you think Themefisher and Gethugothemes did something unethical ?
I need a proper explanation .
Thanks

Add DraftBox Themes

Please add DraftBox themes to JAMstack Themes

Add Strapi cms

Noticed Strapi is not included in the cms list. Would be great to have it there since I have a theme using it that I'd like to submit.

Need help for getting access to 2 themes that were removed recently

Hello,

I need help to get access/zip or fork for the themes that were removed recently as a part of 85cbfd1#diff-b88c2ab0ca8f928c08975a99dd8a1dc8d90327c965351a90673ad4ac64e962e6

1. content/theme/stackbit-app-nextjs.md
2. content/theme/stackbit-personal-nextjs.md

Would be great help, Thanks !!

Make Icons Super Slick

For the SSG and CMS icons I tried to source the correct logos and use SVG icons where possible. Some are still .png and some of the SVG's don't seem to be well created.

I'd like to get all the icons looking slick.

• Get all the icons in (correctly created) SVG format which can be used in color or black/white.
• Replace any .png icons
• Update any icons which are the incorrect branding (Mkdocs, Pelican?)

Feel free to submit a single icon or many. The current icons are located in static/images/icons

You will also need to update the path to the icon in the relevant markdown file. Ie if you updated the pelican icon you would need to update the icon field in content/ssg/pelican/_index.md

there is no new related data in theme.json

hi，When I add a new theme, the image is generated in the static directory, but the relevant data is not added in themes.json

Is it a problem with build.js configuration?

please help take a look ，thanks a lot！

_{Sent from PPHub}

Some demos have graphical bugs

Hi there,

some demos ( 3 out of first 10 in homepage ) have graphical glitches:

https://jamstackthemes.dev/demo/theme/hugo-digital-garden/
https://jamstackthemes.dev/demo/theme/urban/
https://jamstackthemes.dev/demo/theme/tradly/

(to reproduce the bug in the last one, scroll down to the bottom of the page)

Spotted by @aqvarun

The "Theme Info" button is broken on demo page

Hi,

"Show me the bug"

Allright:

• browse any theme demo page. For example https://jamstackthemes.dev/demo/theme/bilberry-hugo-theme/
• in the top-right corner, click on "Theme info"

You should be redirected to the very same page, i.e the same demo page

Expected behavior

The link should point to the theme details. For Bilberry, this is https://jamstackthemes.dev/theme/bilberry-hugo-theme/

Can I submit Premium Hugo themes

Hello Team ,
I am the founder of gethugothemes.com . We have almost 40+ hugo themes in our directory . Most of them premium . Is there any way to put our premium themes in your website ?
And thanks for creating such a great directory .
Thanks