# static-timeline-generator: an Eleventy template for static timeline pages

> Molly White's static timeline generator is a forkable Eleventy project that turns a single JavaScript data file into a filterable timeline webpage, deployed as static files to GitHub Pages or any host. It fits a writer who wants a visual timeline without a CMS, and it does not fit a site that needs per-entry editing after publication.

**molly/static-timeline-generator** — Create static timeline webpages.

- Repository: https://github.com/molly/static-timeline-generator
- Website: https://molly.github.io/static-timeline-generator/
- Stars: 543 · Forks: 81
- Language: JavaScript
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/molly-static-timeline-generator

## A template for one good timeline page, meant to be forked

The static timeline generator exists to make static timeline webpages, and the README frames it as easily forkable rather than as a tool. The model is visible in the package name, timeline-template, and in the description, an easily-forkable project to create timelines. The sample the author points at is a Wikimedia timeline, and a preview of the generated site is deployed on GitHub Pages, so the output is not hypothetical. The audience is a writer, an educator or a documentation author who wants a chronological narrative with filters and images, and who does not want to run a content management system to get one. The project is JavaScript, MIT licensed, and the generated site is plain static HTML, CSS and JavaScript, which means the hosting decision is separate from the content decision.

## One content file drives the whole page

Almost all the content you need to change is in the src data content file, and the README documents its shape in detail. The entries array is required and holds the items in display order, and each entry needs a unique id, a title, a body and either a datetime or a date. Optional fields do most of the visual work. Categories become checkboxes at the top of the page and let readers filter the timeline, and they may not contain commas, though hyphen or space separated values are both accepted and are displayed with the first letter capitalised. A color field picks the circle on the timeline line, with green, red and grey predefined and more definable in a custom stylesheet. A faicon field names a Font Awesome icon for that circle, given without the fa- prefix. Images carry a source, an optional link, alt text and an optional caption, and body text is HTML, which means multiple paragraphs need explicit paragraph tags or the tool adds one around the text.

## Dates are parsed by moment.js, so the format is your problem

Date handling is the one place where a small mistake produces a broken page, and the rule is simple to state and easy to get wrong. The datetime field accepts any format that moment.js recognises, and the author's own habit is to write a date and a time with a hyphen between the hours and minutes. If an entry has no time, the date field is used instead, with a plain year-month-day value. Since either datetime or date must be present, an entry that carries neither will not render as intended, and a datetime written in a format moment.js cannot parse will sort incorrectly, which is worse than a missing one because the entry still appears. Header and footer are optional HTML blocks, and the meta section sets the page title, an optional page description and an optional author, which feed the title tag and the meta tags. Every one of these fields is a plain object in a JavaScript file, with no schema validation, so a typo surfaces as a rendering problem rather than a build error.

## The build is Eleventy, and two npm scripts run it

The site is generated by Eleventy, and the package manifest keeps the commands short. The two scripts that matter are the serve script, which builds and serves the static files locally, and the build script, which runs the build step without starting a development server:

```json
	"serve": "npx @11ty/eleventy --serve",
	"build": "npx @11ty/eleventy",
```

The install step is a plain npm install in the cloned directory, and the README notes that the local server is served at the local port 8080. The output of a build is a _site directory containing static HTML, CSS and JavaScript files, and that directory is the deliverable. The dependency list explains the rest of the stack: Eleventy itself at version 1.x, eleventy-sass for stylesheet compilation, moment for the date parsing described earlier, ejs for templating, postcss with autoprefixer for CSS processing, and a Prettier and ESLint setup for formatting and linting, including the eslint-plugin-prettier and eslint-config-prettier combination. The test script is a placeholder that prints an error and exits, so there is no test suite to lean on when you change the data file.

## Deploying the _site directory, not the source

Because the output is static files, deployment is a file copy and the README lists the options. For GitHub Pages the recipe is to create a branch holding the built files by pushing the _site directory as a subtree, and then to select that branch as the deployment source in the repository settings. The README also points to Netlify, Vercel and Render, and gives the concrete settings for Render: create a new static site, set the build command to the build script and the publish directory to _site. The same pattern works on any static host, and the README suggests looking at Eleventy documentation since that is the tool powering the project, noting that some hosts support Eleventy in convenient ways. One detail to watch for when you follow the text: the deploy section writes the build command as npm run-script buld, with the letters transposed, so copy the correct spelling from the manifest rather than from that sentence.

## Filtering needs JavaScript, the layout does not

Two properties of the output matter for a site that is going to be read on phones and shared widely. The first is responsiveness: the README states that timelines will render well on tablets and on mobile devices, and it shows screenshots of both. The second is the no-JavaScript case, and the README is specific about the degradation. Without JavaScript enabled the page degrades gracefully, but posts will show in a single-column timeline and the filters will not show. In other words, the content survives, the interactivity does not, and the category checkboxes are the feature that disappears first. Browser support is stated as all modern browsers, with IE below version 9 not supported. For a site whose argument is that it is a static page, that fallback is the right shape, but it is worth knowing that the filtering is the part you are giving up when scripting is unavailable.

## An MIT template with a 2026 push and no releases

The project is a template rather than a product with a release line, and the metadata reflects that. There are no GitHub releases, the repository is not archived, and the last push was on 2026-04-18, so the template is still being adjusted even though nothing is versioned in the usual way. The licence is MIT, which for a template means you can take it, change it, and publish the result without the copyleft obligations that the GPL would impose, which is the point of a forkable starting point. The upstream repository referenced in the manifest is the timeline-template project, and the bugs and homepage links point there as well, so a fork that has drifted should still report issues to the original. The practical maintenance advice is short: the data file is the part you will edit, the stylesheet is the part you will extend with your own colours, and the images in the source img folder are the part you will replace with your own favicon and OpenGraph image.

## Conclusion

static-timeline-generator fits a writer, educator or project lead who wants one well designed timeline page and is happy to edit a JavaScript data file and run a build to publish changes. It does not fit a site whose entries are edited by many people, or one that needs JavaScript-driven filtering to work. Verify first that the moment.js date strings in your entries parse as you expect, since the README accepts any format moment.js recognises, then check the generated page with JavaScript disabled to see the single column fallback, and publish the _site directory rather than the source tree.

## FAQ

### How do I build and preview a static timeline site locally?

Clone the repository, run npm install from the directory, and then use the serve script, which builds the project and serves the static files locally at http://localhost:8080. The build script runs the same build without starting the development server.

### Where do I put the content of the timeline?

Almost all the content is in the content.js file under the source data directory. The entries array is required, and each entry needs a unique id, a title, a body, and either a datetime or a date, with optional categories, color, icon, image and links.

### What date formats does the timeline accept?

The datetime field accepts any format that moment.js recognises, and the author normally uses a date and time with a hyphen between hours and minutes. If an entry has only a date, the date field is used instead, written as a plain year-month-day value.

### How do I publish the generated timeline to GitHub Pages?

The README says to create a branch containing the static files in the root directory by pushing the _site directory as a subtree, and then to choose that branch under the deploy from a branch option in the repository settings. Other static hosts work too, with a build command and a publish directory of _site.

## Sources

- [Issues](https://github.com/molly/static-timeline-generator/issues)
- [License: MIT](https://github.com/molly/static-timeline-generator/blob/main/LICENSE)
- [molly/static-timeline-generator on GitHub](https://github.com/molly/static-timeline-generator)
- [Project website](https://molly.github.io/static-timeline-generator/)
- [README](https://github.com/molly/static-timeline-generator/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/molly-static-timeline-generator