Elm Blog GitHub

Share your journey into Elm while learning it by creating a blog in Elm and hosting it for free on GitHub Pages.

If you're just arriving, read the introduction first.

Step 0. - Work through the beginning of An Introduction to Elm

If you haven't walked through the beginning of An Introduction to Elm to the "Core Language" section do that now. And by "walk through" I mean do the examples and play with the code. It's easy and fun to read. By the end you'll be ready to start writing your blog in Elm.

Make sure you have Elm installed, too. You'll know it worked when you can run elm at the command line:

elm

...and see a message starting with this:

Hi, thank you for trying out Elm 0.19.1...

Step 1. - Write some Elm code

Create a src/Main.elm file with the following code:

module Main exposing (main)

import Html exposing (..)


main =
    text "Here's what I learned while exploring Elm..."

Step 2. - Compile your Elm code

elm make src/Main.elm --output=elm.js

You should see some packages download and finally:

Success! Compiled 1 module.

Step 3. - Add index.html

Fire up your favorite text editor. Add the following to index.html in the root of your project:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Your Blog Title</title>
    <script src="elm.js"></script>
  </head>
  <body id="page-body">
    <div id="elm-app"></div>
    <script>
      var app = Elm.Main.init({
        node: document.getElementById("elm-app"),
      });
    </script>
  </body>
</html>

GitHub Pages looks for index.html when serving your site at username.github.io.

This does two important things for Elm:

References your compiled Elm app JavaScript output (elm.js):

<script src="elm.js"></script>

Tells Elm what node to run our app within:

<div id="elm-app"></div>
<script>
  var app = Elm.Main.init({
    node: document.getElementById("elm-app"),
  });
</script>

Step 4. - Run your app locally

elm reactor

This will start the built-in Elm web server.

If you get elm: Network.Socket.bind: resource busy (Address in use) then specify an open port:

elm reactor --port=8088

Go to http://localhost:8000/index.html.

You should see the text "Here's what I learned while exploring Elm...".

You've written an application! Granted it doesn't do much yet, but you can get pretty far with good content.

Next we're going to work on publishing it.

Step 5. - Create a GitHub page

Create a GitHub page with your GitHub username: username.github.io.

Clone your repository locally.

Step 6. - Publish it!

Commit your code. You can ignore elm-stuff.

Push your commit(s) to GitHub.

Woohoo! You've just hosted an Elm blog on GitHub Pages.

Go to username.github.io and check it out!

Next steps

In part 2 we'll make the site more interesting with a title and content section.