Skip to content
A statically typed site generator for Elm.
Elm JavaScript HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea Setup jsconfig.json to check TypeScript against js files. Sep 16, 2019
docs Update Nov 5, 2019
elm-package/src/Pages Use a hidden div to check for Elm view changes. Oct 9, 2019
examples/docs Remove space above and below code elements Oct 22, 2019
generator Fix regression with .emu frontmatter parsing. Nov 14, 2019
src Add frontmatter decoder module. Sep 28, 2019
tests Move modules over in preparation for elm package publish. Sep 15, 2019
.gitignore Run webpack server for elm-pages build. Aug 14, 2019
.travis.yml Change node version for travis script to see if it fixes build error. Oct 7, 2019 Update changelog. Nov 14, 2019 Update Oct 19, 2019
LICENSE Add LICENSE file. Sep 20, 2019 Add link to github projects boards. Oct 28, 2019
index.js Make sure anchor headings are scrolled into view on page render. Sep 22, 2019
jsconfig.json Setup jsconfig.json to check TypeScript against js files. Sep 16, 2019
netlify.toml Update netlify config to run build script for generated elm file. Sep 16, 2019
package-lock.json Bump npm package to 1.0.41. Nov 14, 2019

elm-pages Netlify Status npm Elm package

Deploy to Netlify

A statically typed site generator, written with pure Elm.

Getting Started Resources

Key features

SEO made easy

With elm-pages, SEO is as easy as calling a type-safe, high-level Elm API and passing in data from your content's metadata.

The metadata is just Elm data that you define however you want, using a Json Decoder to grab data out of your markdown frontmatter.

import MyMetadata exposing (MyMetadata)

head : BlogMetadata -> List (Head.Tag Pages.PathKey)
head meta =
    { canonicalUrlOverride = Nothing
    , siteName = "elm-pages"
    , image =
      { url = PagesNew.images.icon
      , alt = meta.description
      , dimensions = Nothing
      , mimeType = Nothing
    , description = meta.description
    , locale = Nothing
    , title = meta.title
    |> Seo.article
      { tags = []
      , section = Nothing
      , publishedTime = Just (Date.toIsoString meta.published)
      , modifiedTime = Nothing
      , expirationTime = Nothing

Optimized for performance

elm-pages has a set of features built-in to make sure your page is blazing fast on any device.

  • Automatic page pre-rendering
  • Page content is split up per-page so page content downloads and parses just-in-time
  • Page pre-fetching on link hover

Try out elm-pages, open up Lighthouse, and see for yourself! Or check out (find the source code in the examples/docs/ folder).

Built-in type-safety

elm-pages generates static Elm data for you to make sure you don't have any broken links or images. The SEO API even uses it to make sure you are only pointing to valid images and pages so you have valid metadata!

For example, if you have a content folder like this:

- content
  - blog

Then you will be able to access those pages in a type-safe way like this from Elm:

-- this is a generated module
-- it is re-run whenever your `content` folder changes
-- just run `elm-pages develop` to start the watcher
import Pages exposing (pages)
import Pages.PagePath as PagePath exposing (PagePath)

indexPage : PagePath Pages.PathKey
indexPage =

helloPostPage : PagePath Pages.PathKey
helloPostPage =

secondPost : PagePath Pages.PathKey
secondPost =

Offline Support

elm-pages uses pure elm configuration to setup your progressive web app settings. This includes a "source icon" which is used to generate your favicons and icons for the images following best practices for a progressive web app. The image is even a type-safe ImagePath that guarantees you are using an available image!

manifest : Manifest.Config Pages.PathKey
manifest =
    { backgroundColor = Just Color.white
    , categories = [ ]
    , displayMode = Manifest.Standalone
    , orientation = Manifest.Portrait
    , description = "elm-pages - A statically typed site generator."
    , iarcRatingId = Nothing
    , name = "elm-pages docs"
    , themeColor = Just Color.white
    , startUrl = pages.index
    , shortName = Just "elm-pages"
    , sourceIcon = images.icon

It will also take care of setting up a service worker which will automatically cache the basic shell for your application's compiled Elm code and HTML container. The page content is currently cached as it is loaded, but in the future there will be an API to choose some pages to "warm up" in the cache.

What's next?

Take a look at the current projects to see the current priorities!

You can’t perform that action at this time.