++content ++google analytics

3 years ago · 3e807a47f9
2 changed files with 119 additions and 6 deletions
--- a/content/u/blog/how-to-sneak-in-a-static-cms/contents.lr
+++ b/content/u/blog/how-to-sneak-in-a-static-cms/contents.lr
@ -44,3 +44,98 @@ to *save* something. With Django CMS Blog, you have the standard
 have to wait seconds. Depending on my distance to our blog this might
 take 1 second (Europe) or about 5 seconds (South Korea). While this
 does not sound like much, it **feels** very long.
+
+While google apps (which we don't use for our blog)
+like google drive (which has other issues as well)
+take a different approach in *autosaving*, this also blocks if you
+have a weak network link.
+
+While it is just a few seconds, it is a huge difference between just
+being able to write in [emacs](https://www.gnu.org/software/emacs/)
+(yes I was converted from vim) versus writing in a browser, waiting
+for the website to return.
+
+### Reducing latency
+
+While editing with "high" latency is a problem of the writer, latency
+while loading the result is a metric that directly affects the readers
+*feeling* about a website. If it takes too long to a website, you,
+dear reader, are about to leave this website very fast. Even if I
+write the greatest and best content, you won't like it.
+
+So by switching to a static CMS, the dynamic processing time is
+removed and pages can load as fast as the round trip time (RTT)
+between the web server and you.
+
+
+### Reducing the inhibition threshold for writing blog articles
+
+Let's come to the third and maybe most important point: reducing the
+inhibition threshold for writing blog articles. Let's put some
+background into this: we are a small, Swiss based hosting company
+loving open source. However, the emphasises is on **small**.
+
+So we cannot (nor do we want to ) afford huge marketing / adwork / paid
+advertisements. But our strategy is to **do good and talk about it**.
+
+However if the barrier for writing and publishing is high, we won't
+write much about the things we do. And I think with a static CMS,
+geeks (like me) are having a much easier time to actually write a blog
+entry.
+
+## How to do it
+
+Now let's have a look on how to sneak in a static CMS into an existing
+company website. [ungleich.ch](https://ungleich.ch) is powered
+by our [Django CMS](https://www.django-cms.org)
+based CMS (full [source code is
+online](https://code.ungleich.ch/ungleich-public/dynamicweb/)).
+
+The Django instance is running behind nginx, which allows us to proxy
+different parts of the website to different backends and to serve
+static assets directly from the filesystem.
+
+On the other hand we have a static web server named
+*staticweb.ungleich.ch* that hosts various static pages.
+
+The existing URLs of ungleich.ch should all stay as they are without
+any conflict. For this reason the new static cms is placed at
+**/u/**. The static pages are generated on a client machine and are
+uploaded using the following Makefile snippet:
+
+```
+BUILDDIR=../ungleich-staticcms-build
+DESTINATION=ungleichstatic@staticweb.ungleich.ch:/home/services/www/ungleichstatic/staticcms.ungleich.ch/www/
+
+all: publish
+
+publish: build permissions
+	rsync -av $(BUILDDIR)/ $(DESTINATION)
+
+permissions: build
+	find $(BUILDDIR) -type f -exec chmod 0644 {} \;
+	find $(BUILDDIR) -type d -exec chmod 0755 {} \;
+
+build:
+	lektor build -O $(BUILDDIR)
+```
+
+The last step to sneak in the CMS was to modify the nginx
+configuration of ungleich.ch with the following snippet:
+
+```
+    location /u/ {
+        proxy_pass https://staticcms.ungleich.ch;
+    }
+```
+
+## What's next?
+
+As you can see in this post, the design does not fully (*cough*) fit
+the regular design of ungleich.ch. However Lektor uses jinja2, which
+is very similar to what we already use in the
+[existing dynamicweb
+project](https://code.ungleich.ch/ungleich-public/dynamicweb/).
+
+If you want to join the discussion about this, I invite you to our
+open chat on [chat.ungleich.ch](https://chat.ungleich.ch).
--- a/templates/layout.html
+++ b/templates/layout.html
@ -1,16 +1,34 @@
 <!doctype html>
-<meta charset="utf-8">
-<link rel="stylesheet" href="{{ '/u/static/style.css'|url }}">
-<title>{% block title %}Welcome to {% endblock %} ungleich.ch</title>
+<head>
+    <!-- Google analytics -->
+
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+        ga('create', 'UA-62285904-1', 'auto');
+        ga('send', 'pageview');
+    </script>
+
+    <!-- End Google Analytics -->
+
+
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ '/u/static/style.css'|url }}">
+    <title>{% block title %}Welcome to {% endblock %} | ungleich.ch</title>
+</head>
+
 <body>
  <header>
    <h1>{{ self.title() }}</h1>
    <nav>
      <ul class="nav navbar-nav">
        <li{% if this._path == '/' %} class="active"{% endif
-          %}><a href="{{ '/'|url }}">Welcome</a></li>
+          %}><a href="{{ '/'|url }}">ungleich.ch</a></li>
        {% for href, title in [
-          ['/u/blog', 'Blog'],
+          ['/u/blog', 'the new ungleich blog'],
        ] %}
          <li{% if this.is_child_of(href) %} class="active"{% endif
            %}><a href="{{ href|url }}">{{ title }}</a></li>
@ -22,6 +40,6 @@
    {% block body %}{% endblock %}
  </div>
  <footer>
-    &copy; Copyright 2019 by ungleich.
+    &copy; Copyright 2019 by <a href="https://ungleich.ch">ungleich</a>.
  </footer>
 </body>