1 #+OPTIONS: H:3 num:nil toc:t \n:nil @:t ::t |:t ^:t -:t f:t *:t TeX:t LaTeX:t skip:nil d:(HIDE) tags:not-in-toc
2 #+STARTUP: align fold nodlcheck hidestars oddeven lognotestate
3 #+SEQ_TODO: TODO(t) INPROGRESS(i) WAITING(w@) | DONE(d) CANCELED(c@)
4 #+TAGS: Write(w) Update(u) Fix(f) Check(c)
5 #+TITLE: Publishing Org-mode files to HTML
6 #+AUTHOR: Sebastian Rose
7 #+EMAIL: sebastian_rose gmx de
10 #+CATEGORY: worg-tutorial
13 [[file:../index.org][{Back to Worg's index}]]
17 This Tutorial describes one of many ways to publishing Org-mode files to
18 XHTML. We use the publishing mechanism to keep the =*.html= files separated
19 from our =*.org= files and to access them via web browser. Simply exporting the
20 Org-mode files to HTML would leave them in =~/org/=.
22 The XHTML files we create will work every where, on any host, with or without
23 network access, and even when accessed through the =file:///= protocol. To
24 achieve this goal, we use
26 - no absolute paths in HTML,
27 - no server side scripting to navigate our output directories,
28 - no =base= element (which is optional as of XHTML 1.0 strict) and
29 - no software, but emacs, Org-mode and a web browser.
31 All this means, we are able to check and use the result of work immediately,
36 Throughout this tutorial, let's assume that all our Org-mode files live beneath
37 =~/org/= and we publish them to =~/public_html/=.
39 Let's further assume you're already familiar with the note taking basics in
40 org and able to add a little content to the Org-mode files we add to our project
41 during this tutorial. Please add at least one headline to each of the files.
43 The first thing to do is to create the folder =~/org=. This is where our notes
44 files live. Inside =~/org/= we have a folder =css/= for stylesheets and
45 scripts, and a folder called =img/= (guess what's in there).
47 The first file we add to that folder (and to subdirectories later on) is called
48 =index.org=. This name was choosen, since Org will publish the files to those
49 with the basename of the source file plus the extension =.html= [fn:1]. Thus
50 =~/org/index.org= will once be =~/public_html/index.html= -- the startpage.
52 Let's add another file and call it =~/org/remember.org=. After adding a
53 stylesheet, =~/org/= looks like this:
62 When ever you want to add link to a file, do it the usual way. To link from
63 =index.org= to =remember.org=, just write
64 : [[file:remember.org][remember]]
65 Org will convert those links to HTML links for you on export:
66 : <a href="./remember.html">remember</a>
68 Same is true for images. To add an image, put it in =~/org/img/test.jpg= and
70 : [[file:img/test.jpg]]
72 You may test your links by clicking on them. To test image links you may also
73 try to turn on =iimage-mode= [fn:2] which works without problems here.
75 Optionally, set up the stylesheet as shown in section Special comment
76 section. The recommended way is to use a real stylesheet though.
78 * Publishing the /org/ project
80 To publish the =~/org/= project to HTML, we'll have to setup the variable
81 =org-publish-project-alist= [fn:3]. I tend to split each project in three basic
82 /components/ as described in the manual. We need these different components,
83 since we want org to use two different functions to publish dynamic content
84 (org => html) and static content like scripts, images, stylesheets or even
85 .htaccess files (org => copy). The third component is just for convenience and
86 tells org to execute the former ones.
88 =org-publish-project-alist= may be adjusted using customize (=M-x
89 customize-variable RET org-publish-project-alist RET=), but I prefere to
90 use an extra file to setup my projects, since there are quite a few. To follow
91 this tutorial use the =*scratch*= buffer and put all the Lisp in this section
94 First of all, enter this into the =*scratch*= buffer:
96 #+begin_src emacs-lisp
97 (require 'org-publish)
98 (setq org-publish-project-alist
101 ;; ... add all the components here (see below)...
106 Be sure to put all the /components/ below right there where the comment line
109 ** The /notes/ component
111 The /notes/ component publishes all the Org-mode files to HTML. Hence the
112 =publishing-function= is set to =org-publish-org-to-html=. Here is an example
113 of the notes component:
115 #+begin_src emacs-lisp
117 :base-directory "~/org/"
118 :base-extension "org"
119 :publishing-directory "~/public_html/"
121 :publishing-function org-publish-org-to-html
122 :headline-levels 4 ; Just the default for this project.
127 Note, that =headline-levels= may be adjusted [[Overwrite the defaults][on a per file basis]] to overwrite
130 The most important settings here are:
132 | =base-directory= | The components root directory. |
133 | =base-extension= | Filename suffix without the dot. |
134 | =publishing-directory= | The base directory where all our files will be published. |
135 | =recursive= | If =t=, include subdirectories - we want that. Subdirectories in =:publishing-directory= are created if they don't yet exist. |
136 | =publishing-function= | If and how org should process the files in this component. In this case: convert the Org-mode files to HTML. |
138 ** The /static/ component
140 The /static/ component just copies files (and their folders) from
141 =:base-directory= to =:publishing-directory= without changing them. Thus
142 let's tell Org-mode to use the function =org-publish-attachment=:
144 #+begin_src emacs-lisp
146 :base-directory "~/org/"
147 :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
148 :publishing-directory "~/public_html/"
150 :publishing-function org-publish-attachment
154 *Note* that =:publishing-function= is set to =org-publish-attachment=.
156 ** The /publish/ component
158 To publish all with one command, we add the /publish/ component. For this
159 component I usually drop the suffix and just use the basename of the
162 #+begin_src emacs-lisp
163 ("org" :components ("org-notes" "org-static"))
166 Now =M-x org-publish-project RET org RET= publishes everything
167 recursively to =~/public_html/=. Target directories are created, if they
170 ** Pooh - can we publish now?
172 The good message is *yes, we can*. Just one little hump. Since we've put the
173 definition for our publishing components in the =*scratch*= buffer, again,
174 make shure all the /components/ are enclosed by the lines
176 #+begin_src emacs-lisp
177 (require 'org-publish)
178 (setq org-publish-project-alist
181 ;; ... all the components ...
186 Move to the end of the first line and press =C-x C-e= to load
187 =org-publish=. Now go to the end of the last line and press =C-x C-e=
188 again. Repeat the last step after every change to your
189 =org-publish-project-alist=.
191 To publish your Org-mode files just type
192 =M-x org-publish-project RET org RET= or use one of the shortcuts listed in
193 the manual. If nothing went wrong, you should now be able to point your
194 browser to http://localhost/~user/, if =mod_userdir= is set up. If
195 not, simply navigate to file:///home/user/public_html (you might use
196 /file -> open/ from the file menu of your browser.
200 As we add more and more files to =~/org/=, we will soon end up with filenames
201 like '=networking-ssh-sshd-config.org=' or longer. What we need is a
206 : | `- stylesheet.css
218 in the /notes/ and /static/ components already, we would have to do it now at
219 the latest to export the subdirectories too.
221 * Overwrite the defaults
223 The defaults set by =org-publish-project-alist= may be overwritten. You might
224 want to justify the export properties for single files. Be it the level of
225 headlines, include extry scripts or different stylesheets. Org offers ways to adjust
226 the settings for a single file.
228 ** The export options template
230 The first choice is the /export options template/ on top of the file. When in
231 an Org-mode file, =M-x org-insert-export-options-template= does the trick for
232 us. This command adds the following lines to the beginning of our file:
235 : #+TITLE: filename.org
236 : #+AUTHOR: Firstename Lastname
237 : #+EMAIL: arthur-dent@example.tld
238 : #+DATE: <2008-08-25 Mo>
240 : #+TEXT: Some descriptive text to be emitted. Several lines OK.
241 : #+OPTIONS: H:3 num:t toc:t \n:nil @:t ::t |:t ^:t -:t f:t *:t TeX:t LaTeX:nil skip:nil d:t tags:not-in-toc
242 : #+INFOJS_OPT: view:nil toc:t ltoc:t mouse:underline buttons:0 path:http://orgmode.org/org-info.js
245 : #+STYLE: <link rel="stylesheet" type="text/css" href="../stylesheet.css" />
247 All we have to do now is to alter the options to match our needs. All the
248 options are listed in the wonderful Org-mode manual. Note though, that these
249 options are only parsed on startup (i.e., when you first open the file). To
250 explicitly apply your new options move on any of those lines and press =C-c=
253 ** <<<Special comment section>>>
255 Also, CSS style variables may be using a special section may be
256 #insert/appended to Org-mode files:
258 : * COMMENT html style specifications
261 : # org-export-html-style: "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/stylesheet.css\" />"
264 =css/stylesheet.css= suits the needs for a file in the root folder. Use \\
265 =../css/stylesheet.css= in a subfolder (first level), \\
266 =../../css/stylesheet.css= for a file in a sub-sub-folder.
268 * Tired of export templates?
270 If you're like me, you will soon get tired of adding the same export options
271 template to numerous files and adjust the title and paths in it. Luckily,
272 Org-mode supports laziness and offers an additional way to set up files. All
273 we need is a directory (e.g. =~/.emacs.d/org-templates/=) and create the
274 following files there:
277 This file contains all export options lines. The special comment section
278 will not work for files in subdirectories. Hence we always use the export
280 :#+STYLE: <link rel="stylesheet" type="text/css" href="stylesheet.css" />
281 ...suitable for each file in the projects root folder
282 (=~/org/= or =~/B/= in the examples). Just drop the =#+TITLE= since this
283 will be different for every file and automatically set on export (based on
284 the filename if omitted).
286 This file contains all export options lines for the stylesheet suitable for
287 each file in a subfolder of the projects root folder (e.g. =~/org/emacs/=
288 or =~/org/networking/=). Just drop the =#+TITLE= again. The options line
289 for the stylesheet looks like this:
290 :#+STYLE: <link rel="stylesheet" type="text/css" href="../stylesheet.css" />
292 + Add more files for more levels.
294 Now remove the special comment section from the end of your Org-mode files in
295 the project folders and change the export options template to
297 : #+SETUPFILE: ~/.emacs.d/org-templates/level-N.org
300 Replace =N= with distance to the root folder (=0=, =1= etc.) of your project
301 and press =C-c= twice while still on this line to apply the
302 changes. Subsequent lines still overwrite the settings for just this one file.
307 Also, these /level-N/ files give us the chance to easily switch between different
308 export setups. As an example, we could have a separate stylesheet and
309 =org-info.js= setup for presentations, and put the appropriate options in a
310 file named =level-0-slides.org=:
312 : #+INFOJS_OPT: path:org-info.js
313 : #+INFOJS_OPT: toc:nil view:slide
314 : #+STYLE: <link rel="stylesheet" type="text/css" href="slides.css" />
316 Now it's as simple as typing '/-slides/' to change the appearance of any file
321 As we get used to note taking in org, we might add an =org= directory to most
322 of our projects. All those projects are published as well. Project '=~/B/='
323 is published to '=~/public_html/B/=', '=~/C/=' is published to
324 '=~/public_html/C/=', and so on. This leads to the problem of common
325 stylesheets and current JavaScripts --- and to a new /component/.
327 ** The /inherit/ component
329 Once we get tired of copying the static files from one project to another, the
330 following configuration does the trick for us. We simply add the /inherit/
331 component, that imports all the static files from our =~/org/= directory [fn:4].
332 From now on, it will be sufficient to edit stylesheets and scripts just
335 #+begin_src emacs-lisp
337 :base-directory "~/org/"
339 :base-extension "css\\|js"
340 :publishing-directory "~/public_html/B/"
341 :publishing-function org-publish-attachment
345 :base-directory "~/B/"
347 :index-filename "sitemap.org"
348 :index-title "Sitemap"
350 :base-extension "org"
351 :publishing-directory "~/public_html/B/"
352 :publishing-function org-publish-org-to-html
357 :base-directory "~/B/"
359 :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
360 :publishing-directory "~/public_html/B/"
361 :publishing-function org-publish-attachment)
363 ("B" :components ("B-inherit" "B-notes" "B-static"))
366 *Note*, that the inheritance trick works for non org directories. You might
367 want to keep all your stylesheets and scripts in a single place, or even add
368 more /inheritance/ to your projects, to import sources from upstream.
370 *Note* also, that =B-inherit= exports directly to the web. If you want to track
371 the changes to =~org/*.css= directly in =~/B=, you must ensure, that =B-inherit= is
372 the first component in =B= since the components in =B= are executed in
373 the sequence listed: first get the new stylesheet into =B=, then execute
378 As I use [[file:../code/org-info-js/index.org][org-info.js]] and track Worg git, I use "=inherit-org-info-js=" in all
381 #+begin_src emacs-lisp
382 ("inherit-org-info-js"
383 :base-directory "~/develop/org/Worg/code/org-info-js/"
386 :publishing-directory "~/org/"
387 :publishing-function org-publish-attachment)
389 ;; ... all the rest ... ;;
391 ("B" :components ("inherit-org-info-js" "B-inherit" "B-notes" "B-static"))
392 ("C" :components ("inherit-org-info-js" "C-inherit" "C-notes" "C-static"))
393 ("D" :components ("inherit-org-info-js" "D-inherit" "D-notes" "D-static"))
394 ("E" :components ("inherit-org-info-js" "E-inherit" "E-notes" "E-static"))
397 ...means, =B= =C= =D= and =E= use my local stylesheets and always the latest
398 version of =org-info.js=.
402 Once there are lots of files and subdirectories, we're in the need of ways to
403 easily navigate our notes in a browser. What we need now, is an index, an
404 overview of all our note files.
408 Org-modes great publishing also generates a recursive sitemap (called /index
409 file/ in the manual). It's name defaults to =index.org=, which get's in our
410 way, since we have a real startpage as =index.html= [fn:5]. Fortunately there is
411 a configuration option to change the name of the generated sitemap. To
412 generate the sitemap, add these lines to the /notes/ component:
415 #+begin_src emacs-lisp
416 :auto-index t ; Generate index.org automagically...
417 :index-filename "sitemap.org" ; ... call it sitemap.org ...
418 :index-title "Sitemap" ; ... with title 'Sitemap'.
421 The sitemap will reflect the tree structure of the project. To access the
422 sitemap easily, we could do two things:
424 1. Setup the '/UP/' link of the Startpage to link to =sitemap.html= (see next
426 2. use the '=#+INCLUDE: sitemap.org=' directive. Most of my Org-mode files
427 contain a chapter called "/Links/" at the end of the file, which contains
428 a subsection /Sitemap/ that in turn just consists of that
429 diretive. For the =index.org= files in the root directory, I include the
430 /index file/ as the first section.
434 Another way to get additional links to navigate the structure is
435 [[file:../code/org-info-js/index.org][org-info.js]]. Let's set it up like this (either in every file, or in
436 =org-level-N.org=, where =N > 0=):
438 : #+LINK_UP: index.html
440 This makes the little /UP/ link ('=h=') point to the =index.html= in the
443 The =index.org= in the root of the project has the /index file/ as section 2
444 (which I may reach pressing '=n=' then), and the same option set like this:
446 : #+LINK_UP: sitemap.html
448 For an =index.org= in a subdirectory:
450 : #+LINK_UP: ../index.html
452 The =LINK_HOME= always points to the same file:
454 : #+LINK_HOME: http://localhost/~user/index.html
456 Please consider replacing the last one with a relative path (which will be
457 different for every level of subdirectories).
459 No matter where we are, we may always press =H n= and we face the sitemap.
460 No matter where we are, we may always press =h= to move up the tree.
464 This is a list of LaTeX symbols understood by Org-mode. You may use most of
465 those LaTeX symbols to get the desired results (shown in the first column)
466 when exporting to HTML. Note though, that not all symbols are translated to
467 HTML. They are listed anyway, since they may be used for LaTeX export
468 nonetheless. Some characters in the first column are invisible (spaces). To
469 see them, mark the part of the table using the mouse.
471 You may produce special HTML characters for verbatim =#+BEGIN\_HTML= sections
472 using http://www-atm.physics.ox.ac.uk/user/iwi/charmap.html (download link on
473 the bottom of that page).
477 |-------------+----------------------|
479 | \iexcl | ~\iexcl~ |
481 | \pound | ~\pound~ |
482 | \curren | ~\curren~ |
484 | \brvbar | ~\brvbar~ |
490 | \laquo | ~\laquo~ |
496 | \plusmn | ~\plusmn~ |
500 | \acute | ~\acute~ |
501 | \micro | ~\micro~ |
503 | \middot | ~\middot~ |
506 | \cedil | ~\cedil~ |
508 | \raquo | ~\raquo~ |
509 | \frac14 | ~\frac14~ |
510 | \frac12 | ~\frac12~ |
511 | \frac34 | ~\frac34~ |
512 | \iquest | ~\iquest~ |
513 | \Agrav | ~\Agrav~ |
514 | \Aacut | ~\Aacut~ |
515 | \Acirc | ~\Acirc~ |
516 | \Atild | ~\Atild~ |
518 | \Aring | ~\Aring~ ~\AA~ |
519 | \AElig | ~\AElig~ |
520 | \Ccedil | ~\Ccedil~ |
521 | \Egrave | ~\Egrave~ |
522 | \Eacute | ~\Eacute~ |
523 | \Ecirc | ~\Ecirc~ |
525 | \Igrave | ~\Igrave~ |
526 | \Iacute | ~\Iacute~ |
527 | \Icirc | ~\Icirc~ |
530 | \Ntilde | ~\Ntilde~ |
531 | \Ograve | ~\Ograve~ |
532 | \Oacute | ~\Oacute~ |
533 | \Ocirc | ~\Ocirc~ |
534 | \Otilde | ~\Otilde~ |
536 | \times | ~\times~ |
537 | \Oslash | ~\Oslash~ |
538 | \Ugrave | ~\Ugrave~ |
539 | \Uacute | ~\Uacute~ |
540 | \Ucirc | ~\Ucirc~ |
542 | \Yacute | ~\Yacute~ |
543 | \THORN | ~\THORN~ |
544 | \szlig | ~\szlig~ |
545 | \agrave | ~\agrave~ |
546 | \aacute | ~\aacute~ |
547 | \acirc | ~\acirc~ |
548 | \atilde | ~\atilde~ |
550 | \aring | ~\aring~ |
551 | \aelig | ~\aelig~ |
552 | \ccedil | ~\ccedil~ |
553 | \egrave | ~\egrave~ |
554 | \eacute | ~\eacute~ |
555 | \ecirc | ~\ecirc~ |
557 | \igrave | ~\igrave~ |
558 | \iacute | ~\iacute~ |
559 | \icirc | ~\icirc~ |
562 | \ntilde | ~\ntilde~ |
563 | \ograve | ~\ograve~ |
564 | \oacute | ~\oacute~ |
565 | \ocirc | ~\ocirc~ |
566 | \otilde | ~\otilde~ |
568 | \divide | ~\divide~ |
569 | \oslash | ~\oslash~ |
570 | \ugrave | ~\ugrave~ |
571 | \uacute | ~\uacute~ |
572 | \ucirc | ~\ucirc~ |
574 | \yacute | ~\yacute~ |
575 | \thorn | ~\thorn~ |
578 | \Alpha | ~\Alpha~ |
580 | \Gamma | ~\Gamma~ |
581 | \Delta | ~\Delta~ |
582 | \Epsilon | ~\Epsilon~ |
585 | \Theta | ~\Theta~ |
587 | \Kappa | ~\Kappa~ |
588 | \Lambda | ~\Lambda~ |
592 | \Omicron | ~\Omicron~ |
595 | \Sigma | ~\Sigma~ |
597 | \Upsilon | ~\Upsilon~ |
601 | \Omega | ~\Omega~ |
602 | \alpha | ~\alpha~ |
604 | \gamma | ~\gamma~ |
605 | \delta | ~\delta~ |
606 | \epsilon | ~\epsilon~ |
607 | \varepsilon | ~\varepsilon~ |
610 | \theta | ~\theta~ |
612 | \kappa | ~\kappa~ |
613 | \lambda | ~\lambda~ |
617 | \omicron | ~\omicron~ |
620 | \sigmaf | ~\sigmaf~ ~\varsigma~ |
621 | \sigma | ~\sigma~ |
623 | \upsilon | ~\upsilon~ |
627 | \omega | ~\omega~ |
628 | \thetasym | ~\thetasym~ ~\vartheta~ |
629 | \upsih | ~\upsih~ |
631 | \bull | ~\bull~ ~\bullet~ |
632 | \hellip | ~\hellip~ ~\dots~ |
633 | \prime | ~\prime~ |
634 | \Prime | ~\Prime~ |
635 | \oline | ~\oline~ |
636 | \frasl | ~\frasl~ |
637 | \weierp | ~\weierp~ |
638 | \image | ~\image~ |
640 | \trade | ~\trade~ |
641 | \alefsym | ~\alefsym~ |
647 | \crarr | ~\crarr~ |
653 | \forall | ~\forall~ |
655 | \exist | ~\exist~ |
656 | \empty | ~\empty~ |
657 | \nabla | ~\nabla~ |
659 | \notin | ~\notin~ |
663 | \minus | ~\minus~ |
664 | \lowast | ~\lowast~ |
665 | \radic | ~\radic~ |
667 | \infin | ~\infin~ |
674 | \there4 | ~\there4~ |
677 | \asymp | ~\asymp~ |
679 | \equiv | ~\equiv~ |
687 | \oplus | ~\oplus~ |
688 | \otimes | ~\otimes~ |
691 | \lceil | ~\lceil~ |
692 | \rceil | ~\rceil~ |
693 | \lfloor | ~\lfloor~ |
694 | \rfloor | ~\rfloor~ |
698 | \spades | ~\spades~ |
699 | \clubs | ~\clubs~ |
700 | \hearts | ~\hearts~ |
701 | \diams | ~\diams~ |
702 | \smile | ~\smile~ |
707 | \OElig | ~\OElig~ |
708 | \oelig | ~\oelig~ |
709 | \Scaron | ~\Scaron~ |
710 | \scaron | ~\scaron~ |
713 | \tilde | ~\tilde~ |
716 | \thinsp | ~\thinsp~ |
721 | \ndash | ~\ndash~ |
722 | \mdash | ~\mdash~ |
723 | \lsquo | ~\lsquo~ |
724 | \rsquo | ~\rsquo~ |
725 | \sbquo | ~\sbquo~ |
726 | \ldquo | ~\ldquo~ |
727 | \rdquo | ~\rdquo~ |
728 | \bdquo | ~\bdquo~ |
729 | \dagger | ~\dagger~ |
730 | \Dagger | ~\Dagger~ |
731 | \permil | ~\permil~ |
732 | \lsaquo | ~\lsaquo~ |
733 | \rsaquo | ~\rsaquo~ |
735 | \arccos | ~\arccos~ |
736 | \arcsin | ~\arcsin~ |
737 | \arctan | ~\arctan~ |
754 | \liminf | ~\liminf~ |
755 | \limsup | ~\limsup~ |
770 For more information you might want to read the great [[http://orgmode.org/manual/][Org-mode manual]]
771 ([[http://orgmode.org/#sec-4][download]]). One of the nicest mailing lists on this planet, BTW, is
772 [[http://lists.gnu.org/archive/html/emacs-orgmode/][emacs-orgmode (archive)]] where you might as well find answers to your
783 [fn:1] You may customize the file suffix for exported files like this:
784 =M-x customize RET org-export-html-extension=.
786 [fn:2] ...by typing =M-x iimage-mode RET=. iimage-mode even shows *.svg images, if
787 =librsvg= was present on compile time. FIXME: is this true for emacs22 ?
789 [fn:3] All components of =org-publish-projects-alist= are documented in the [[http://orgmode.org/manual/Project-alist.html#Project-alist][Org Mode
792 [fn:4] Files may be copied from arbitrary src directories to any target directory
795 [fn:5] This is primarily because of the behaviour of servers. When we navigate
796 to http://orgmode.org/worg/ we will face the =index.html= if present.