‎

How I'm making my website with orgmode in Emacs.

–> Insert joke about recursion here <—

I have tried many times, to get a good personal website up and running, but as many times as I've tried, I have always ended up with an over-complicated hot mess of a site with too many confusing wordpress-addons or dead pages.

And whenever I've tried building the site myself, my CSS always end up being an even hotter mess that never renders as imagined on the varios screen-types.

Thus, I have long thought: "Something simple would be nice". And after laughing hard about this Motherfucking website and this Better motherfucking website I started thinking: Hey, why not just use emacs and org-mode to get it done?

So I looked around and was enormously happy to come across this post/guide by the amazing System Crafters - one of the best Emacs tutors, I have found:

https://systemcrafters.net/publishing-websites-with-org-mode/building-the-site/

After following this tutorial, which also taught me how to set up a shell-script in the websites local directory that runs an elisp build-script everytime it's invoked:

#!/bin/sh
emacs -Q --script build-site.el

I can now write my pages in org-mode, type: 'M-x eshell' and see them export the pages as .HTML and put them in a directory named "public" which I can then push to my webserver, using Filezilla along with a customized CSS-page that I specify in the build-site.el:

;; Customize the HTML output
(setq org-html-validation-link nil            ;; Don't show validation link
      org-html-head-include-scripts nil       ;; Use our own scripts
      org-html-head-include-default-style nil ;; Use our own styles
      org-html-head "<link rel=\"stylesheet\" href=\"THIS_IS_WHERE_THE_LOCATION_OF_YOUR_CHOICE_OF_CSS_GOES\" />")

I downloaded the stylesheet, I want to use, to be sure I could make staying changes to it. If you want that, just point the <link>-tag to the local name of the file, rather than the URL.

For reference, here is my complete build-site.el with thanks to SystemCrafters:

;; Set the package installation directory so that packages aren't stored in the
;; ~/.emacs.d/elpa path.
(require 'package)
(setq package-user-dir (expand-file-name "./.packages"))
(setq package-archives '(("melpa" . "https://melpa.org/packages/")
                         ("elpa" . "https://elpa.gnu.org/packages/")))

;; Initialize the package system
(package-initialize)
(unless package-archive-contents
  (package-refresh-contents))

;; Install dependencies
(package-install 'htmlize)

;; Load the publishing system
(require 'ox-publish)

;; Customize the HTML output
(setq org-html-validation-link nil            ;; Don't show validation link
      org-html-head-include-scripts nil       ;; Use our own scripts
      org-html-head-include-default-style nil ;; Use our own styles
      org-html-head "<link rel=\"stylesheet\" href=\"simple.css\" />")

;; Define the publishing project
(setq org-publish-project-alist
      (list
       (list "org-site:main"
             :recursive t
             :auto-sitemap nil
             :sitemap-filename "sitemap.org"
             :base-directory "./content"
             :publishing-function 'org-html-publish-to-html
             :publishing-directory "./public"
             :with-author nil           ;; Don't include author name
             :with-creator t            ;; Include Emacs and Org versions in footer
             :with-toc nil                ;; Include a table of contents
             :section-numbers nil       ;; Don't include section numbers
             :time-stamp-file t)))   

;; Generate the site output
(org-publish-all t)

(message "Build complete!")

The last bit just writes a string to the terminal, letting me know if all went well. If it doesn't - like if a link is dead or formatted wrong - it will just go on building forever, so usually you'll know if something is up.

Bonus-tip/janky navigation solution

To get basic navigation, I manually add this piece of custom HTML to the top of each .org page:

#+HTML: <div id="navigation" class="hjemknap">
#+INCLUDE: "sitemap.org" :lines "3-"
#+HTML: </div>

So you can find your way back home again :)