-
Markdown Previewer is an Elm web application based on freeCodeCamp's Build a Markdown Previewer front-end project. It's implementation can be found on the master branch and the gh-pages branch contains the 3 files (app.js, index.css, and index.html) hosted by GitHub Pages at https://dwayne.github.io/elm-markdown-previewer/.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
The bin/deploy script runs a production build (the CSS is compressed with no source maps and the Elm code is optimized with mdgriffith/elm-optimize-level-2 and minified with Terser), uses git-worktree to check out the gh-pages branch into a temporary directory, copies the files HTML, CSS, and JavaScript files from the build directory, commits the changes and pushes them up to the remote repository so that GitHub Pages could host the new files.
-
Calculator
-
A web application makes use of these same ingredients, i.e. HTML, CSS, and JavaScript, but it uses significantly more JavaScript. As the JavaScript powering your web application grows in size it can bring with it a variety of problems that a few languages, like TypeScript, ReScript, PureScript, and Elm, have attempted to solve. Each of the aforementioned compile to JavaScript languages have their pros and cons but it is beyond the scope of this article to get into those details. Suffice it to say, my preference is Elm. It is also not the goal of this article to convince you to use Elm but only to show you how Elm fits into the flow of creating a web application and hosting it on GitHub Pages. So let's continue by adding Elm to our project.
-
2048
-
7GUIs
-
dwayne/elm-integer calculator live demo
-
A web application makes use of these same ingredients, i.e. HTML, CSS, and JavaScript, but it uses significantly more JavaScript. As the JavaScript powering your web application grows in size it can bring with it a variety of problems that a few languages, like TypeScript, ReScript, PureScript, and Elm, have attempted to solve. Each of the aforementioned compile to JavaScript languages have their pros and cons but it is beyond the scope of this article to get into those details. Suffice it to say, my preference is Elm. It is also not the goal of this article to convince you to use Elm but only to show you how Elm fits into the flow of creating a web application and hosting it on GitHub Pages. So let's continue by adding Elm to our project.
-
Conduit is an Elm web application that uses Browser.application. Suppose I hosted it using GitHub Pages. Then, a fresh page load for https://dwayne.github.io/elm-conduit/login would cause the GitHub Pages server to look for a file called "login" which it won't find. The GitHub Pages server would return a 404 page indicating that the file was not found. This is expected behaviour for an HTTP server. However, what we want to happen instead is for the request to be redirected to the index.html page so that the Elm web application would handle the routing for us as described here. Unfortunately, GitHub Pages doesn't support adding custom redirects. But, other hosting providers do and we'd talk about that in a separate article.
-
Git for Static Sites - Interestingly Kris Jenkins blogged about a similar approach back in 2016. I actually came to these ideas, independently of Kris' post, through a Ruby project called Octopress.
-
The bin/deploy script runs a production build (the CSS is compressed with no source maps and the Elm code is optimized with mdgriffith/elm-optimize-level-2 and minified with Terser), uses git-worktree to check out the gh-pages branch into a temporary directory, copies the files HTML, CSS, and JavaScript files from the build directory, commits the changes and pushes them up to the remote repository so that GitHub Pages could host the new files.
-
rescript
ReScript is a robustly typed language that compiles to efficient and human-readable JavaScript.
A web application makes use of these same ingredients, i.e. HTML, CSS, and JavaScript, but it uses significantly more JavaScript. As the JavaScript powering your web application grows in size it can bring with it a variety of problems that a few languages, like TypeScript, ReScript, PureScript, and Elm, have attempted to solve. Each of the aforementioned compile to JavaScript languages have their pros and cons but it is beyond the scope of this article to get into those details. Suffice it to say, my preference is Elm. It is also not the goal of this article to convince you to use Elm but only to show you how Elm fits into the flow of creating a web application and hosting it on GitHub Pages. So let's continue by adding Elm to our project.
-
The good news is that the deploy process doesn't get more complicated than what I've shown you above. The core concept remains the same. You have branches (say a master branch and several feature branches) in which you use to implement your web application and you have branches (say a staging and production branch) you use for deployment. Then, you have to tell your hosting provider, be it GitHub Pages, Netlify, Render, Cloudflare Pages, or something else, which branches you're using for your deployments.
-
pages-gem
A simple Ruby Gem to bootstrap dependencies for setting up and maintaining a local Jekyll environment in sync with GitHub Pages
The good news is that the deploy process doesn't get more complicated than what I've shown you above. The core concept remains the same. You have branches (say a master branch and several feature branches) in which you use to implement your web application and you have branches (say a staging and production branch) you use for deployment. Then, you have to tell your hosting provider, be it GitHub Pages, Netlify, Render, Cloudflare Pages, or something else, which branches you're using for your deployments.
-
A web application makes use of these same ingredients, i.e. HTML, CSS, and JavaScript, but it uses significantly more JavaScript. As the JavaScript powering your web application grows in size it can bring with it a variety of problems that a few languages, like TypeScript, ReScript, PureScript, and Elm, have attempted to solve. Each of the aforementioned compile to JavaScript languages have their pros and cons but it is beyond the scope of this article to get into those details. Suffice it to say, my preference is Elm. It is also not the goal of this article to convince you to use Elm but only to show you how Elm fits into the flow of creating a web application and hosting it on GitHub Pages. So let's continue by adding Elm to our project.
