Static.Quest is a web ring focused to list all the amazing static websites.
Scroll down to see the list and even join! We are here to show the world of great sites that can be made with pure HTML, CSS, and JavaScript, only relying on the client browser to render the page content.
git clone https://github.com/cjerrington/StaticQuest.git StaticQuest
cd StaticQuest
Specifically have a look at .eleventy.js
to see if you want to configure any Eleventy options differently.
npm install
npx @11ty/eleventy
Or build and host locally for local development
npx @11ty/eleventy --serve
Or build automatically when a template changes:
npx @11ty/eleventy --watch
Or in debug mode:
DEBUG=* npx @11ty/eleventy
about/index.md
shows how to add a content page.posts/
has the blog posts but really they can live in any directory. They need only thepost
tag to be added to this collection.- Use the
eleventyNavigation
key in your front matter to add a template to the top level site navigation. For example, this is in use onindex.njk
andabout/index.md
. - Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in
.eleventy.js
->templateFormats
. - The
css
andimg
directories in the input directory will be copied to the output folder (viaaddPassthroughCopy()
in the.eleventy.js
file). - The blog post feed template is in
feed/feed.njk
. This is also a good example of using a global data files in that it uses_data/metadata.json
. - This example uses three layouts:
_includes/layouts/base.njk
: the top level HTML structure_includes/layouts/home.njk
: the home page template (wrapped intobase.njk
)_includes/layouts/post.njk
: the blog post template (wrapped intobase.njk
)
_includes/postlist.njk
is a Nunjucks include and is a reusable component used to display a list of all the posts.index.njk
has an example of how to use it.
The adventure awaits
The only requirement is to have a static site! This is the honor system and we're not going to ask for the source or hosting or your site. We do have this in the data file that lists our members, just to show the various methods that are available to you to build your sites.
You can add a pull request for adding your site, or starting a Join Static.Quest issue, and it can get added by the team.
Add your website content to /src/members
folder with your information:
---
name: "Your Name",
host: "yourwebsite.com/",
feed: "yourwebsite.com/feed/",
ssg: "static site generator",
type: "blog, personal, art, technology, etc"
---