summaryrefslogtreecommitdiff
path: root/ikiwiki/website.mdwn
blob: ceb81153366f1d0c6e57546d921b4fae662e683d (plain)

Ikiwiki for regular websites

[[Ikiwiki]] can be used to build and administrate regular websites.

Websites built with ikiwiki is more complex than plain static websites, but simpler than most web-based content management systems (CMS).

This page provides a short introduction to using ikiwiki-based websites, aimed at website owners and webdesigners (but not [[technicians|tech]]).

[[!toc levels=2]]

Static web pages for static content

Static content is information that is identical for any user reading it.

Static web pages are created once and then served by the web server to all readers of the website:

[[!graph height=8 width=8 src=""" { reader [shape=house, label="Reader"]

webpages [label="static pages"]

reader -> webpages [dir=back]

} """]]

ikiwiki produce static web pages for all static content.

Dynamic web pages for temporary content

The website can have a search routine added. The form to do a search can be static, but the web page showing the search results is unique to each search:

[[!graph height=8 width=8 src=""" { reader [shape=house, label="Reader"]

/* targets */
webpages [label="static pages"]
webpages_searchresult [label="search results", style=dotted]
{rank=same; webpages webpages_searchresult}

search_query [shape=plaintext, label="search query"]

search_db [shape=box, label="search index"]

/* paths */
reader -> webpages [dir=back]
reader -> search_query -> search_db -> webpages_searchresult

} """]]

Administration roles

Often the website owner writes the text content themselves, but hire external web designers to structure the site and apply graphical "makeup".

Typically, editors need simple access only to edit their texts, while web designers need freedom to express their creative ideas.

ikiwiki-based websites are setup to reflect that:

[[!graph height=8 width=8 src=""" { /* roles */ reader [shape=house, label="Reader"] editor [shape=house, label="Editor"] designer [shape=house, label="Designer"] {rank=same; reader editor designer}

/* targets */
webpages [label="website"]

/* input data */
txt [shape=plaintext, label="text"]
media [shape=plaintext, label="graphics"]
tmpl [shape=plaintext, label="templates"]
{rank=same; txt tmpl media}

iki_engine [shape=box, label="web engine"]

/* paths */
reader -> webpages [dir=back]
editor -> txt -> iki_engine
designer -> media -> iki_engine
designer -> tmpl -> iki_engine
iki_engine -> webpages

} """]]

Editing

Text content can be edited using a simple web interface.

The static website is navigated to locate the page to edit, a dynamic web-based edititing form is started for that page, and saving the form causes the static web page to be regenerated.

[[!graph height=8 width=8 src=""" { /* roles */ editor [shape=house, label="Editor"]

/* targets */
webpages [label="static pages"]
webpage_new [label="new static pages"]
{rank=same; webpages webpage_new}

/* input data */
content_form [label="dynamic edit form", style=dotted]

/* stored data */
txt_stored [shape=box, label="text content"]
media_stored [shape=box, label="graphics files"]
tmpl_stored [shape=box, label="html templates"]
{rank=same; txt_stored media_stored tmpl_stored}

/* paths */
editor -> webpages [dir=back]
editor -> content_form -> txt_stored -> webpage_new
media_stored -> webpage_new
tmpl_stored -> webpage_new

} """]]

Designer may prefer the more powerful git interface.

Exact same processing, but editing the files directly on the desktop, maybe even while offline.

[[!graph height=8 width=8 src=""" { /* roles */ designer [shape=house, label="Designer"]

/* targets */
webpages [label="static pages"]
webpage_new [label="new static page"]
{rank=same; webpages webpage_new}

/* input data */
git [shape=plaintext]

/* stored data */
txt_stored [shape=box, label="text content"]
media_stored [shape=box, label="graphics files"]
tmpl_stored [shape=box, label="html templates"]
{rank=same; txt_stored media_stored tmpl_stored}

/* paths */
designer -> webpages [dir=back]
designer -> git -> txt_stored -> webpage_new
media_stored -> webpage_new
tmpl_stored -> webpage_new

} """]]