elm-pages

A statically typed site generator for Elm.

Static site generator
dillonkearns/elm-pageselm-pages.comelm-pages

README

elm-pages Netlify Status Build Status npm Elm package


All Contributors

Deploy to Netlify

A statically typed site generator, written with pure Elm.

Getting Started Resources


- Quick start repo (live site hosted here)
- [Introducing elm-pages blog post](https://elm-pages.com/blog/introducing-elm-pages)
- Quick Start page in docs site
- [examples folder](https://github.com/dillonkearns/elm-pages/blob/master/examples/) (includes https://elm-pages.com site source)

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.

  1. ```elm
  2. import MyMetadata exposing (MyMetadata)

  4. head : BlogMetadata -> List (Head.Tag Pages.PathKey)
  5. head meta =
  6.   Seo.summaryLarge
  7.     { canonicalUrlOverride = Nothing
  8.     , siteName = "elm-pages"
  9.     , image =
  10.       { url = PagesNew.images.icon
  11.       , alt = meta.description
  12.       , dimensions = Nothing
  13.       , mimeType = Nothing
  14.       }
  15.     , description = meta.description
  16.     , locale = Nothing
  17.     , title = meta.title
  18.     }
  19.     |> Seo.article
  20.       { tags = []
  21.       , section = Nothing
  22.       , publishedTime = Just (Date.toIsoString meta.published)
  23.       , modifiedTime = Nothing
  24.       , expirationTime = Nothing
  25.       }
  26. ```

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 https://elm-pages.com
(find the source code in the [examples/docs/](https://github.com/dillonkearns/elm-pages/tree/master/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:

  1. ```shell
  2. - content
  3.   - blog
  4.     - index.md
  5.     - hello-world.md
  6.     - second-post.md
  7. ```

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

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


  9. indexPage : PagePath Pages.PathKey
  10. indexPage =
  11.   pages.blog.index


  14. helloPostPage : PagePath Pages.PathKey
  15. helloPostPage =
  16.   pages.blog.helloWorld


  19. secondPost : PagePath Pages.PathKey
  20. secondPost =
  21.   pages.blog.secondPost
  22. ```

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!

  1. ```elm
  2. manifest : Manifest.Config Pages.PathKey
  3. manifest =
  4.     { backgroundColor = Just Color.white
  5.     , categories = [ Pages.Manifest.Category.education ]
  6.     , displayMode = Manifest.Standalone
  7.     , orientation = Manifest.Portrait
  8.     , description = "elm-pages - A statically typed site generator."
  9.     , iarcRatingId = Nothing
  10.     , name = "elm-pages docs"
  11.     , themeColor = Just Color.white
  12.     , startUrl = pages.index
  13.     , shortName = Just "elm-pages"
  14.     , sourceIcon = images.icon
  15.     }
  16. ```

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!

https://github.com/dillonkearns/elm-pages/projects

Contributors ✨


Thanks goes to these wonderful people (emoji key):


Daniel Marín
💻
Steven Vandevelde
💻
Johannes Maas
📓 💻
Wiktor Toporek
💻
Luke Westby
💻


This project follows the all-contributors specification. Contributions of any kind welcome!