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
- Open include/setup.org and set some reasonable defaults. In particular, note the custom fonts being loaded.
- Edit assets/sass/variables.scss to set up your colors, basic fonts, and other elements.
- 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
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.