Build and deploy static site (#142)

* Set defaults for gunicorn

* Ignore output directory

* Fix redirected URLs

* Add link to songs

* Add 'make dist'

* Update 'make deploy'

* Fix broken URLs

* Tweak wget

* Fix redirects

* Add servers to Makefile

* Add single make target for build

* Force https for cloudinary

* Use https for src in content

* Use https when making static HTML

* Revert "Force https for cloudinary"

This reverts commit 6ab7c0b57ec303bc5acc14af7a4f2445c2cc9c40.

* Deploy to Netlify

Removing IE hack that cause a failure

* make update in dist

* Use Cloudinary for /files

* Move redirects to Netlify config

* Update docs

* Add 404 page

.gitignore

@@ -13,3 +13,6 @@ media
 .env
 .gunicorn
 .envrc
+dist/
+*.pem
+.netlify

Makefile

@@ -8,10 +8,13 @@ manage := $(python) manage.py
 fixture_apps := music news shows
 fixture := hth/jahhills.json
 
-webapp := jahhills_staging
-webapp_dir := webapps/$(webapp)
-webapp_branch := $(shell git rev-parse --abbrev-ref HEAD)
-webapp_process := $(notdir $(CURDIR))
+keyfile := .localhost-key.pem
+certfile := .localhost.pem
+certnames := localhost $(HOST)
+
+# This and `make deploy` have been replaced by `netlify deploy`
+# Leaving them in as an example for rsync-based deployment
+webhost := webfaction:webapps/jahhills_static
 
 .PHONY: update
 update:
@@ -45,16 +48,62 @@ css:
 docs:
 	make -C docs html
 
+# Serving via https:// to ensure that Cloudinary URLS are https://
+.PHONY: serve-wsgi
+serve-wsgi: $(keyfile) $(certfile)
+	$(bin)/gunicorn \
+		--env DEBUG=False \
+		--env DJANGO_SETTINGS_MODULE=hth.settings \
+		--bind $(HOST):$(PORT) \
+		--keyfile $(keyfile) \
+		--certfile $(certfile) \
+		--workers 4 \
+		--access-logfile - \
+		--error-logfile - \
+		hth.wsgi:application
+
+# See macOS gotcha: https://github.com/FiloSottile/mkcert/issues/199
+$(keyfile):
+	mkcert -key-file $(keyfile) -cert-file $(certfile) $(certnames)
+
+# Inspired by https://apex.sh/blog/post/pre-render-wget/
+# Using --max-redirect=0 to catch missing trailing slashes,
+# which cause redirects, which yield spurious .html files
+wget := wget --no-verbose \
+		--directory-prefix=dist \
+		--no-host-directories \
+		--adjust-extension \
+		--retry-connrefused \
+		--max-redirect=0
+
+server := https://$(HOST):$(PORT)
+
+.PHONY: html
+html: 404
+	$(wget) --recursive --level=inf --execute robots=off $(server)
+
+# Ignoring expected 404 error from wget, but letting others through
+.PHONY: 404
+404:
+	error=`$(wget) --content-on-error $(server)/404 2>&1` ;\
+	code=$$? ;\
+	[[ $$error =~ "ERROR 404" ]] || ( echo $$error; exit $$code )
+
+.PHONY: dist
+dist:
+	set -e ;\
+	rm -rf dist ;\
+	make update ;\
+	make serve-wsgi & make html ;\
+	kill % ; wait
+
+.PHONY: serve-dist
+serve-dist:
+	$(python) -m http.server \
+		--directory dist \
+		--bind $(HOST) $(PORT)
+
 .PHONY: deploy
 deploy:
-	ssh webfaction 'bash -l -c "\
-		cd $(webapp_dir) && \
-		git fetch && \
-		git checkout $(webapp_branch) && \
-		git merge --ff-only && \
-		make update restart"'
-
-.PHONY: restart
-restart:
-	supervisorctl restart $(webapp_process)
-	supervisorctl status $(webapp_process)
+	rsync --archive --compress --verbose \
+		dist/ $(webhost)

README.md

@@ -6,6 +6,8 @@ Launched on April 12, 2016, in conjunction with the band's fifth album, [A Band
 
 As with the [first iteration](https://github.com/bhrutledge/hallelujahthehills.com), this is an exercise in using the framework. This time around, the focus is on [test-driven development](http://www.obeythetestinggoat.com/), [best practices](http://twoscoopspress.org/collections/everything/products/two-scoops-of-django-1-11), and [YAGNI](http://en.wikipedia.org/wiki/You_aren't_gonna_need_it). Launched as an [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product), with enhancements and bugs across the stack tracked in [GitHub Issues](https://github.com/bhrutledge/jahhills.com/issues).
 
+Deployed as a [static site](https://github.com/bhrutledge/jahhills.com/pull/142) to minimize server requirements.
+
 Anyone is welcome to [explore the data](./data/README.md).
 
 ## Getting Started
@@ -32,10 +34,10 @@ Recompile CSS on Sass changes with `make css`.
 
 ## Production infrastructure
 
-- Hosted on [Webfaction](https://www.webfaction.com)
-- Managed by [Supervisor](http://supervisord.org/index.html)
-- HTTPS via [Let's Encrypt](https://letsencrypt.org)
-- Monitoring via [UptimeRobot](https://uptimerobot.com)
+- Domain registered on [Namecheap](https://www.namecheap.com/) (w/ DNS and email forwarding)
+- Static site hosted on [Netlify](https://www.netlify.com/)
+- Media hosted on [Cloudinary](https://cloudinary.com/)
+- Monitored with [UptimeRobot](https://uptimerobot.com)
 
 ## Deployment
 
@@ -45,6 +47,10 @@ Dump local content changes with `make dumpdata`.
 
 Commit and push to GitHub.
 
-Update web host and restart server with `make deploy webapp=jahhills`.
+Build the static site with `make dist`.
+
+View the static site with `netlify dev`.
+
+Deploy and publish the static site with `netlify deploy`.
 
 Publish the data with `make -C data publish`.

hth/static/css/socicon.css

@@ -3,8 +3,7 @@
 @font-face {
   font-family: "socicon";
   src:url("fonts/socicon.eot");
-  src:url("fonts/socicon.eot?#iefix") format("embedded-opentype"),
-    url("fonts/socicon.woff") format("woff"),
+  src:url("fonts/socicon.woff") format("woff"),
     url("fonts/socicon.ttf") format("truetype"),
     url("fonts/socicon.svg#socicon") format("svg");
   font-weight: normal;

hth/static/sass/styles.scss

@@ -26,6 +26,11 @@
         }
     }
 
+    &-footer {
+        margin-top: $large-spacing;
+        clear: both;
+    }
+
     @include media($xlarge-screen) {
         @include outer-container($xlarge-max-width);
 

hth/templates/home_page.html

@@ -3,7 +3,7 @@
 
 {% block main_content %}
 <figure class="hero-img large-spacing">
-    <a href="/music/im-you"><img src="{% cloudinary_url 'hth_iu_photo_banner.jpg' %}" alt="Press photo banner image"></a>
+    <a href="/music/im-you/"><img src="{% cloudinary_url 'hth_iu_photo_banner.jpg' %}" alt="Press photo banner image"></a>
 </figure>
 
 <section id="news" class="container">

hth/templates/music/release_list.html

@@ -25,5 +25,9 @@ <h3 class="content-title">
         </article>
         {% endfor %}
     </div>
+
+    <div class="container-footer">
+        <a href="{% url 'song_list' %}">All songs and lyrics</a>
+    </div>
 </article>
 {% endblock %}

hth/templates/music/song_list.html

@@ -8,13 +8,13 @@ <h1 class="container-header">Songs</h1>
 
     {% for song in song_list %}
     <article class="content song">
-        <h3 class="content-header content-title">
+        <p class="content-title">
             {% if song.has_details %}
             <a href="{{ song.get_absolute_url }}">{{ song.title }}</a>
             {% else %}
             {{ song.title }}
             {% endif %}
-        </h3>
+        </p>
     </article>
     {% endfor %}
 </article>

hth/urls.py

@@ -2,7 +2,6 @@
 from django.contrib import admin
 from django.conf import settings
 from django.conf.urls.static import static
-from django.views.generic.base import RedirectView
 
 from . import views
 
@@ -13,13 +12,6 @@
     url(r'^news/', include('hth.news.urls')),
     url(r'^live/', include('hth.shows.urls')),
     url(r'^', include('hth.music.urls')),
-
-    url(r'^calendar',
-        RedirectView.as_view(pattern_name='gig_list', permanent=True)),
-    url(r'^music/releases/(?P<path>.*)',
-        RedirectView.as_view(url='/music/%(path)s', permanent=True)),
-    url(r'^music/songs/(?P<path>.*)',
-        RedirectView.as_view(url='/songs/%(path)s', permanent=True)),
 ]
 
 if settings.MEDIA_URL and settings.MEDIA_ROOT:

netlify.toml

@@ -0,0 +1,37 @@
+[build]
+  publish = "dist/"
+
+[dev]
+  port = 8000
+
+[[redirects]]
+  from = "/calendar/*"
+  to = "/live/"
+
+[[redirects]]
+  from = "/music/releases/*"
+  to = "/music/:splat"
+
+[[redirects]]
+  from = "/music/songs/*"
+  to = "/songs/:splat"
+
+[[redirects]]
+  from = "/iu-advance"
+  to = "/music/im-you/"
+
+[[redirects]]
+  from = "/abistfo"
+  to = "/music/a-band-is-something-to-figure-out/"
+
+[[redirects]]
+  from = "/hyedse"
+  to = "/music/have-you-ever-done-something-evil/"
+
+[[redirects]]
+  from = "/nokwhn"
+  to = "/music/no-one-knows-what-happens-next/"
+
+[[redirects]]
+  from = "/portrait"
+  to = "/music/portrait/"