beautiful websites using Emacs's org mode

Question

Are there any beautiful websites published using Emacs' org mode? I followed the online tutorial, but the generated websites are too ugly. Are there any existing beautiful org templates (with nice css sheets)?

http://orgmode.org is published with Org. But I guess it does not qualify as "beautiful". — bzg, Aug 22 '12 at 00:58
Does [this](http://doc.norang.ca/org-mode.html) fit the bill? — suvayu, Aug 23 '12 at 11:59
@bzg that's not bad. but where can I read the .org file? Thanks — bobzhang, Aug 24 '12 at 19:06

score 27 · Answer 1 · answered Sep 06 '12 at 13:15

27

I create my class websites using org-mode. Example: http://cse3521.artifice.cc/

That site involves regular text, code, math, flash/image embeds, tables, etc.

Source code is available here: https://github.com/joshuaeckroth/cse3521-website

answered Sep 06 '12 at 13:15

Joshua Eckroth

271
2
4

1

Very nice site material -- but if I am not mistaken, the master file (index.org) is not included in the github repo. I would like to see how it is done! – Marco Aug 17 '13 at 16:13
2

The index.html is manually created. I wanted to decide the layout, indentation of the topic list, etc. – Joshua Eckroth Oct 30 '13 at 20:07
This is great. I am using the template for my course work. Thanks. – Mohamad Elmasri Jul 27 '15 at 02:27
Ditto from me. Thanks for providing this! – Vultan Sep 08 '16 at 19:03

score 10 · Answer 2 · answered Aug 21 '12 at 12:48

10

There is http://msnyder.info which uses org-mode and I think is nicely styled. However, he also customizes the publishing system to get HTML5 output and better styling. Read more about that here.

answered Aug 21 '12 at 12:48

bnbeckwith

1,005
6
7

2

@JimGarrison back online as it seems :) – AdrieanKhisbe Oct 09 '14 at 17:04

score 9 · Answer 3 · answered Aug 23 '13 at 09:05

You could simply use the Solarized CSS which gives you appealing results including nice usability enhancement (like collapsable sections).

See http://thomasf.github.io/solarized-css/

To appy to any org-mode HTML export add the following lines in your .emacs:

 (setq org-export-html-style-include-scripts nil
       org-export-html-style-include-default nil)
 (setq org-export-html-style
   "<link rel=\"stylesheet\" type=\"text/css\" href=\"solarized-light.css\" />")

score 7 · Answer 4 · answered Sep 16 '14 at 08:14

7

Fresh and new template (I found it on the mailing list):

https://github.com/fniessen/org-html-themes

answered Sep 16 '14 at 08:14

Dror

12,174
21
90
160

score 6 · Accepted Answer · answered Aug 21 '12 at 12:17

6

My site isn't generated from OrgMode, but from Muse, and you can re-use parts of my templates - I took one of free designs by Andreas Viklund.

answered Aug 21 '12 at 12:17

Alex Ott

80,552
8
87
132

This answer doesn't address the question that was asked. – tremoloqui Jan 19 '13 at 18:38
3

if you don't know, Muse & Org-mode are very close to each other, that's why I pointed to my site – Alex Ott Jan 20 '13 at 09:38

score 6 · Answer 6 · answered Jan 17 '13 at 23:38

6

I just created new github repository for the template to use org-mode + jekyll + twitter bootstrap.

Check out http://github.com/cinsk/jekyll-org/ for the source, and see the example in http://cinsk.github.com/jekyll-org/

answered Jan 17 '13 at 23:38

cinsk

1,576
2
12
14

score 6 · Answer 7 · answered Oct 21 '13 at 10:27

6

Go through official org-mode page listing sites : Web pages made with Org-Mode

answered Oct 21 '13 at 10:27

Kedar.Aitawdekar

2,364
1
23
25

score 4 · Answer 8 · answered Feb 14 '13 at 09:55

4

I use org-mode + jekyll to publish my blog (blog.jenkster.com). 'Beautiful' is probably a stretch, but it's clean & clear, and the nicest setup I've ever found for including code-snippets in what I'm writing.

answered Feb 14 '13 at 09:55

Kris Jenkins

4,083
30
40

score 3 · Answer 9 · answered Jun 26 '13 at 09:13

3

My Web site at http://www.pirilampo.org/ is all made from Org mode (and only it). You'll find the CSS source there as well (LP'ed from an Org file with Org Babel -- LP = Literate Programming).

answered Jun 26 '13 at 09:13

fniessen

4,408
19
18

score 2 · Answer 10 · answered Aug 24 '12 at 00:11

2

How about this page? It shows how to set up the combo Emacs Org-mode & Jekyll in order to publish a static website or blog ---This is what is used at www.gorgnegre.com. Hope it helps.

answered Aug 24 '12 at 00:11

gorgnegre

21
1

score 1 · Answer 11 · answered Aug 21 '12 at 13:36

I just read about Hyde, a static website generator powered by python & django.
http://ringce.com/hyde
To set it up is really easy and minimalistic.
We can use our favorite text editor to edit the content, hence org-mode.

Then I saw those two projects which intent to link even more org and hyde, but never tried : https://github.com/dustinlacewell/ghorg
https://github.com/punchagan/org-hyde

That sounds very appealing to me !

score 1 · Answer 12 · answered Oct 04 '12 at 01:00

Here is my site http://sydi.org that generated by orgmode, but its language is not English but Chinese. I think weather a site is beautiful and fit your eyes or not isn't depend on which tool used to make pages out, more important, well designed css & js do that.

I use orgmode generate html and fix something by elisp (orgmode hooks) on origins. If you need any help, I'm very pleasure.

score 0 · Answer 13 · answered Aug 29 '12 at 04:09

Check out http://renard.github.com/o-blog/ - it's not strictly using org-mode, but an org-mode add-on (and also the subject of the site) called o-blog. I haven't done anything serious with it, but it looks pretty cool. It easily integrates with twitter bootstrap for all the nice pretty things it provides.

beautiful websites using Emacs's org mode

13 Answers13