Re: [O] Best way to create blog for company web site with Orgmode

[Eric S Fraga]

On Thursday, 10 Mar 2016 at 08:37, Alan Schmitt wrote:

[...]

> Note that I suck at design and CSS, but I think this is orthogonal to
> the matter at hand ;)

Orthogonal but key: I use org to generate a static web site which
includes a quasi-blog.  The org side is all about content and meaning
and I let the CSS be responsible for the look and feel of the actual
site.

-- 
: Eric S Fraga (0xFFFCF67D), Emacs 25.0.90.1, Org release_8.3.3-535-g7213aa

Re: [O] Best way to create blog for company web site with Orgmode

[Alan Schmitt]

On 2016-03-09 20:18, Rainer Hansen  writes:

> Sometimes I should read more carefully what I write. I want to use a
> static web site generator! So Wordpress is no option for me.

I maintain several very basic web sites in org. *Basic* is the keyword
here. Here is an example: http://ajacs.inria.fr/

Note that I suck at design and CSS, but I think this is orthogonal to
the matter at hand ;)

Each page is its own org file, and there is an additional file for the
left-hand bar.

Here is what index.org starts with:

#+INCLUDE: "common.org"

* body
  :PROPERTIES:
  :CUSTOM_ID: mainbody
  :HTML_CONTAINER_CLASS: container-mainbody
  :END:

** Welcome to the AJACS web site
Content goes here


The common.org is like this:

#+TITLE: AJACS
#+OPTIONS: toc:nil num:nil
#+HTML_HEAD: 

* sidebar
  :PROPERTIES:
  :CUSTOM_ID: sidebar
  :HTML_CONTAINER_CLASS: container-sidebar
  :END:

- [[http://ajacs.inria.fr/][Home]]
- [[./members.org][Members]]
- [[./meetings.org][Meetings]]

#+begin_center
#+ATTR_HTML: :width 100
[[./files/ANR.png]]\\
ANR-14-CE28-0008  
#+end_center


The layout is done using CSS. Here is an excerpt:

#+begin_src css
.container-mainbody {
margin-left:  200px;
padding: 10px;
}

.container-sidebar {
float: left;
width: 200px;
padding-top: 12px;
}

#postamble {
clear: both;
}

#mainbody, #sidebar {
display: none;
}

#text-sidebar li a {
color: rgb(54, 117, 148);
text-decoration: none;
}

#address {
display: none;
}

#text-address {
color: rgb(54, 117, 148);
text-align: center;
}

#mainheading {
text-align: center;
}

.container-sidebar ul {
list-style: none;
}
#+end_src


Finally this is all exported using a very simple Makefile

#+begin_src make
EMACS=emacs
BATCH_EMACS=$(EMACS) --batch -Q -l init.el

PUB_FILES=index.html meetings.html internships/proxies.html style.css

%.html: %.org common.org
$(BATCH_EMACS) $*.org -f org-html-export-to-html

all: $(PUB_FILES)

publish: $(PUB_FILES)
rsync -azR --no-p --rsh=ssh -O $^ gf:/home/groups/ajacs/htdocs/

.PHONY: all publish
#+end-src


Oh, I need to show the init.el as well for the export:

#+begin_src emacs-lisp
(add-to-list 'load-path (file-name-directory load-file-name))

(require 'local_settings)

(require 'org)
(require 'ox-html)

(setq org-html-postamble nil)
#+end_src


The local-settings.el file allows us to collaborate using different kind
of installations for org.

#+begin_src emacs-lisp
(setq emacsd-dir "/Users/schmitta/.emacs.d/")

;; (add-to-list 'load-path (concat emacsd-dir "org/emacs/site-lisp/org"))

(setq package-user-dir (concat emacsd-dir "elpa"))
(package-initialize)

(provide 'local_settings)
#+end_src

Best,

Alan

-- 
OpenPGP Key ID : 040D0A3B4ED2E5C7
Monthly Athmospheric CO₂ (2016-02, Mauna Loa Obs.): 404.02


signature.asc
Description: PGP signature

Re: [O] Best way to create blog for company web site with Orgmode

[Brett Viren]

Rainer Hansen  writes:

> Sometimes I should read more carefully what I write. I want to use a
> static web site generator! So Wordpress is no option for me.

Ah, okay! That makes more sense.  One day I will also learn to read what
I write.  :)

> Of course I could use Bootstrap with an Org-based static site
> generator. However, I my thinking is that I need to do a lot of
> customizations to use it as a blogging engine. Perhaps I am wrong. I
> would be happy if someone on the mailing-list has done it and can show
> that it is quite straight forward to do.

Yes, this desire to have the HTML match the CSS (without touching the
CSS) is one thing that drove me to rolling my own generator.  I didn't
want to muck with Org HTML export to make that match happen.

In the end, I found that most of what I wanted from Bootstrap relates to
what I think of as "outer" HTML - the banner, nav bar, menus, table of
contents, etc.  It ends up mattering less to me for the "inner" HTML of
the actual blog post or page payload content.  

If ever I do need to, I'm prepared develop some code to do some
rewriting of Org HTML during the generation.

> Yes, easy is relative. What I mean is that I can set it up in less than
> 4 hours through configuration. I want to be able to reuse the visual
> theme implemented in CSS for the rest of the web site in the time limit
> mentioned before.

When my system has some more polish then maybe your 4 hour limit can be
satisfied.  Right now, being my only customer, it may not pass your
definition of "easy".  But, you are welcome to take a look and try.

> Could you please provide some links? I am especially interested in
> tutorials on setting them up.

I don't guarantee that it will live up to its name but here is my
generator:

  https://github.com/brettviren/joyful-web

It's mostly Python based and uses Jinja2 templates.  Emacs is used to
generate a JSON dump of the org-element tree, to produce the HTML body
text and to make a PDF.

I don't have many examples in the source but I do inside my actual Org
content area.  Some things to look at include the main config file:

  https://github.com/brettviren/org-pub/blob/master/joy.cfg

an example template:

  https://github.com/brettviren/org-pub/tree/master/templates/topic.html

and, maybe look at how I call "joy" to rebuild the site.  I use "waf" to
do that and its control file is:

  https://github.com/brettviren/org-pub/blob/master/wscript

I only have this working on my laptop now so I can't show you the
results at the moment.  

-Brett.


signature.asc
Description: PGP signature

Re: [O] Best way to create blog for company web site with Orgmode

[Rainer Hansen]

Rainer Hansen  writes:

> Sometimes I should read more carefully what I write. I want to use a
> static web site generator! So Wordpress is no option for me.
>
> Sorry for the confusion.
>
> Brett Viren  writes:
>
>> Rainer Hansen  writes:
>>
>>> I wonder what is the best way to create a blog for a company website
>>> with Orgmode. I do not want to use a static web site generator. The
>>> design of the web site is relying on Bootstrap and customs CSS.
>>
>> Just curious, why does wanting to use Bootstrap rule out an Org-based
>> static site generator for you?
> Of course I could use Bootstrap with an Org-based static site
> generator. However, I my thinking is that I need to do a lot of
> customizations to use it as a blogging engine. Perhaps I am wrong. I
> would be happy if someone on the mailing-list has done it and can show
> that it is quite straight forward to do. 
>>
>> I'm slowly developing just such a beast.  It Works For Me(TM) but is
>> still a bit raw for others unless they can deal with some Python
>> hacking and spotty documentation.
>>
>>> It should be easy to setup and to maintain for me?
>>
>> I think maybe you can better define what you mean by "easy"?  
>>
> Yes, easy is relative. What I mean is that I can set it up in less than
> 4 hours through configuration. I want to be able to reuse the visual
> theme implemented in CSS for the rest of the web site in the time limit
> mentioned before.
One more comment from my side. I am especially interested in writing my
blog posts in Orgmode and exporting them to either Jekyll or
Nikola. Does Jekyll or Nikola with the respective need less blog text
special syntax adaptations to post?

>
>> In the end, developing my own generator was easier than trying to adapt
>> existing ones.  There are a lot of great ones out there, especially if
>> you expand to allow Markdown ones (either native authoring or using
>> Org's Markdown export), but none do exactly what I wanted.
>>
>> -Brett.
> Could you please provide some links? I am especially interested in
> tutorials on setting them up.

Re: [O] Best way to create blog for company web site with Orgmode

[Rainer Hansen]

Arkadiusz Drabczyk  writes:

> On 2016-03-08, Rainer Hansen  wrote:
>> Hi,
>>
>> I wonder what is the best way to create a blog for a company website
>> with Orgmode. I do not want to use a static web site generator. The
>> design of the web site is relying on Bootstrap and customs CSS.
>> It should be easy to setup and to maintain for me?
>>
>> I am not only looking for proposals of tool chains but also why I should
>> use the proposed one.
>>
>> I do not want to have a lot of work in translating the existing CSS into
>> some new kind of format just for the web site generator.
>
> Are you going to use WordPress in conjunction with Bootstrap (I don't
> know if it's even possible)?  If yes, then
> https://github.com/punchagan/org2blog is a great choice.
Sorry for misleading you. I want to use a static web site
generator. Because of that WordPress is no option.

Re: [O] Best way to create blog for company web site with Orgmode

[Rainer Hansen]

Sometimes I should read more carefully what I write. I want to use a
static web site generator! So Wordpress is no option for me.

Sorry for the confusion.

Brett Viren  writes:

> Rainer Hansen  writes:
>
>> I wonder what is the best way to create a blog for a company website
>> with Orgmode. I do not want to use a static web site generator. The
>> design of the web site is relying on Bootstrap and customs CSS.
>
> Just curious, why does wanting to use Bootstrap rule out an Org-based
> static site generator for you?
Of course I could use Bootstrap with an Org-based static site
generator. However, I my thinking is that I need to do a lot of
customizations to use it as a blogging engine. Perhaps I am wrong. I
would be happy if someone on the mailing-list has done it and can show
that it is quite straight forward to do. 
>
> I'm slowly developing just such a beast.  It Works For Me(TM) but is
> still a bit raw for others unless they can deal with some Python
> hacking and spotty documentation.
>
>> It should be easy to setup and to maintain for me?
>
> I think maybe you can better define what you mean by "easy"?  
>
Yes, easy is relative. What I mean is that I can set it up in less than
4 hours through configuration. I want to be able to reuse the visual
theme implemented in CSS for the rest of the web site in the time limit
mentioned before.

> In the end, developing my own generator was easier than trying to adapt
> existing ones.  There are a lot of great ones out there, especially if
> you expand to allow Markdown ones (either native authoring or using
> Org's Markdown export), but none do exactly what I wanted.
>
> -Brett.
Could you please provide some links? I am especially interested in
tutorials on setting them up.

Re: [O] Best way to create blog for company web site with Orgmode

[Brett Viren]

Rainer Hansen  writes:

> I wonder what is the best way to create a blog for a company website
> with Orgmode. I do not want to use a static web site generator. The
> design of the web site is relying on Bootstrap and customs CSS.

Just curious, why does wanting to use Bootstrap rule out an Org-based
static site generator for you?

I'm slowly developing just such a beast.  It Works For Me(TM) but is
still a bit raw for others unless they can deal with some Python
hacking and spotty documentation.

> It should be easy to setup and to maintain for me?

I think maybe you can better define what you mean by "easy"?  

In the end, developing my own generator was easier than trying to adapt
existing ones.  There are a lot of great ones out there, especially if
you expand to allow Markdown ones (either native authoring or using
Org's Markdown export), but none do exactly what I wanted.

-Brett.


signature.asc
Description: PGP signature

Re: [O] Best way to create blog for company web site with Orgmode

[Arkadiusz Drabczyk]

On 2016-03-08, Rainer Hansen  wrote:
> Hi,
>
> I wonder what is the best way to create a blog for a company website
> with Orgmode. I do not want to use a static web site generator. The
> design of the web site is relying on Bootstrap and customs CSS.
> It should be easy to setup and to maintain for me?
>
> I am not only looking for proposals of tool chains but also why I should
> use the proposed one.
>
> I do not want to have a lot of work in translating the existing CSS into
> some new kind of format just for the web site generator.

Are you going to use WordPress in conjunction with Bootstrap (I don't
know if it's even possible)?  If yes, then
https://github.com/punchagan/org2blog is a great choice.
-- 
Arkadiusz Drabczyk