Elm Blog GitHub - Part 1
Host Elm code on 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

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
at the command line:
...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
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>
    <meta charset="utf-8" />
    <title>Your Blog Title</title>
    <script src="elm.js"></script>
  <body id="page-body">
    <div id="elm-app"></div>
      var app = Elm.Main.init({
        node: document.getElementById("elm-app"),
GitHub Pages looks for
when serving your site at username.github.io.
This does two important things for Elm:
References your compiled Elm app JavaScript output (
<script src="elm.js"></script>
Tells Elm what node to run our app within:
<div id="elm-app"></div>
  var app = Elm.Main.init({
    node: document.getElementById("elm-app"),

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
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:
Clone your repository locally.

Step 6. - Publish it!

Commit your code. You can ignore
Make sure you commit
We typically ignore compiled code, but this simplifies the steps for this exercise.
Push your commit(s) to GitHub.
Woohoo! You've just hosted an Elm blog on GitHub Pages.
Go to
and check it out!

Next steps

part 2
we'll make the site more interesting with a title and content section.
If you have any feedback, I would love to hear from you:
Sharing is caring:
about this article.
© 2018 Jared M. Smith