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"]
css [shape=plaintext, label="stylesheets"]
{rank=same; txt css media}
iki_engine [shape=box, label="web engine"]
/* paths */
reader -> webpages [dir=back]
editor -> txt -> iki_engine
designer -> media -> iki_engine
designer -> css -> 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"]
css_stored [shape=box, label="Sass files"]
{rank=same; txt_stored media_stored css_stored}
/* paths */
editor -> webpages [dir=back]
editor -> content_form -> txt_stored -> webpage_new
media_stored -> webpage_new
css_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"]
css_stored [shape=box, label="Sass files"]
{rank=same; txt_stored media_stored css_stored}
/* paths */
designer -> webpages [dir=back]
designer -> git -> txt_stored -> webpage_new
media_stored -> webpage_new
css_stored -> webpage_new
}
"""]]
