Elm Blog GitHub - Part 1
Host Elm code on GitHub
Draft

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

Make sure you commit

elm.js

too.

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

username.github.io

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:

dev@jaredmsmith.com

Sharing is caring:

about this article.

Elm Blog GitHub - Part 1Host Elm code on GitHubDraft

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