Org-mode HTML Export with Compass/Sass

To see this package in action, check out the example page on my public Keybase.io site.

Step 1: Install Compass

Follow the installation directions from the Compass website. Note that Compass relies on Ruby, but it compiles CSS files in a way that makes life easier.

Step 2: Copy this repository

Make a copy of this repository and use that as the basis for your website project. This repository has everything you need to get started, including a framework for a Compass project with org-mode HTML styles.

You will want to run compass watch in the assets/ directory. This will generate your initial stylesheets and regenerate them every time you make changes.

Step 3: Customize the setup

1. Open include/setup.org and set some reasonable defaults. In particular, note the custom fonts being loaded.
2. Edit assets/sass/include/_variables.scss to set up your colors, basic fonts, and other elements.
3. Edit assets/sass/breakpoints/_base.scss to configure the basic CSS building blocks for your website.

Step 4: Configure Org-Export Projects

Add the following code to your org-mode initialization. Make sure to set yourwebsite-base-dir to the project directory for your raw org-mode files and yourwebsite-publish-dir to the location your static website will be generated.

(setq yourwebsite-base-dir "PATH/TO/BASE/DIRECTORY"
      yourwebsite-publish-dir "PATH/TO/PUBLISHING/DIRECTORY")

(setq org-publish-project-alist
      '(("yourwebsite.example"
         :base-directory yourwebsite-base-dir
         :base-extension "org"
         :exclude "include"
         :publishing-directory yourwebsite-publish-dir
         :publishing-function org-html-publish-to-html
         :recursive t
         :publishing-url "https://yourwebsite.example/")
        ("yourwebsite.static"
         :base-directory yourwebsite-base-dir
         :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
         :include (".htaccess")
         :publishing-function org-publish-attachment
         :publishing-directory yourwebsite-publish-dir
         :recursive t)
        ("yourwebsite"
         :components ("yourwebsite.example" "yourwebsite.static"))))

You can now export everything as a project.