14 Aug 2021

Hello World

As is surely traditional, the first post on this blog is both:

A test that the blogging software works.
A description of that blogging software.

This blog is written using org-static-blog, and should have an automatically generated RSS feed. The link to that feed is in the header, so the appropriate icon ought to appear in your address bar. See below for more on this.

I'm writing in emacs using org-mode, and will be publishing on github pages, having followed this excellent introduction. Hopefully by the time you read this, I'll have joined up my custom domain, as described here.

How the blog publishing works

I followed the instructions in the org-static-blog README, which were very straightforward. But in case you're interested in how this particular page works, my config looks something like the code below.

I can create a new blog post with M-x org-static-blog-create-new-post, type it up in org-mode markup, and "publish" with M-x org-static-blog-publish. Publishing generates all the HTML, and the RSS feed. I check the result into git, and github pages does the rest.

In docs/blog/static/gds.css I have:

body {
    background-color: #000;
    color: #eec;
}
a:link { 
    color: #0DF; 
}
a:visited {
    color: #909
}

#postamble {
    font-size: small;
    color: #775
}
#preamble {
    font-size: small;
    color: #775
}

…and in a file called org-static-blog-config.el I have something like:

(setq org-static-blog-publish-title "Kindness City Blog")
(setq org-static-blog-publish-url "https://www.kindness.city/blog/")
(setq org-static-blog-publish-directory "~/workspace/kindnesscity/docs/blog/")
(setq org-static-blog-posts-directory "~/workspace/kindnesscity/src/blog/posts/")
(setq org-static-blog-drafts-directory "~/workspace/kindnesscity/src/blog/drafts/")
(setq org-static-blog-enable-tags t)
(setq org-static-blog-use-preview t)
(setq org-export-with-toc nil)
(setq org-export-with-section-numbers nil)

;; This header is inserted into the <head> section of every page:
(setq org-static-blog-page-header
      "<meta name=\"author\" content=\"Gareth Smith\">
     <meta name=\"referrer\" content=\"no-referrer\">
     <link href= \"static/gds.css\" rel=\"stylesheet\" type=\"text/css\" />")

;; This preamble is inserted at the beginning of the <body> of every page:
(setq org-static-blog-page-preamble
      "<div class=\"header\">
       <a href=\"https://www.kindness.city/blog\">Kindness City Blog</a>
     </div>")

;; This postamble is inserted at the end of the <body> of every page:
(setq org-static-blog-page-postamble
      "<div id=\"social\">
       <p>
       There's no comments mechanism in this blog (yet?), but I welcome 
       <a href=\"mailto:blog-feedback@kindness.city.com\">emails</a> and 
       <a href=\"https://twitter.com/totherme\">tweets</a>. If you choose to 
       email me, you'll have to remove the <tt>.com</tt> from the end of my 
       email address by hand.
       </p>
     </div>
     <div id=\"archive\">
       <a href=\"https://www.kindness.city/blog/archive.html\">Other posts</a>
     </div>")

;; This HTML code is inserted into the index page between the preamble and
;;   the blog posts
(setq org-static-blog-index-front-matter
      "<h1>Dear diary... </h1>\n")
(add-to-list 'auto-mode-alist (cons (concat org-static-blog-posts-directory ".*\\.org\\'") 'org-static-blog-mode))
(add-to-list 'auto-mode-alist (cons (concat org-static-blog-drafts-directory ".*\\.org\\'") 'org-static-blog-mode))