Using MediaWiki to Build a “normal” Website

by Steven Garrity in , ,

Despite the misleading title, this is not a tutorial on how to use MediaWiki to build a website. Rather, it is an observation that MediaWiki can be used to build sites that look and feel like tradition (non-Wiki) websites.

What the heck is a “wiki”?

First, some background. A wiki is a special kind of website that anyone can edit. Pages on a wiki-powered website have an “edit” button, and anyone can make a change. MediaWiki is one of many software systems that can be used to power wiki sites. MediaWiki is most well known as the software behind the Wikipdia.

When I first started playing with MediaWiki to do some visual customization for the Mozilla wiki, I felt a little bit like I was wandering lost through a jungle of PHP, HTML, and CSS. However, after stripping out a lot of the features I didn’t want or need, I started to get the hang of visually customizing the MediaWiki interface.

I’ve since done some minor skin/theme design for our silverorange wiki, and the WikiPEI site, though I hope to improve both in the coming months.

What I’ve found most interesting about MediaWiki is that people are starting to use it to build “normal” non-wiki websites. Pages can be locked-down, so only certain users have editing privledges. This essentially merges the administration tools of the website into the front-end of the site. This merger has the advantage of making administration easier and more direct. However, it can also make the experience of browsing the site (as a non-editor) and bit less enjoyable (hence the attitude that “wikis are ugly and weird”).

While I’m not about to advocate MediaWiki as the ideal content management system for all websites, it is an interesting use of the technology. Some of the design folks in the Linux group at Novell have been pumping out some pretty slick looking websites based on MediaWiki. Here are some examples of their work:

Examples of MediaWiki-powered “Normal” Websites

Hula website screenshot
Hula Project
Hula is a free/open-source calendar/mail server. The Hula Project website was the first site I found that had a traditional stable website feel to it, but was built on MediaWiki. The header is bold and attractive, and the primary navigation is dead-simple.

Mono website screenshot
The Mono Project
Recently redesigned, the Mono site has a light, fun, cartoon-y feel to it. If it weren’t for the “edit” links sprinkled throuout, you’d never know it was a wiki.

Bealge website screenshot
Beagle Project
Beagle is a desktop search tool for Linux. The Beagle website follows the model of the Hula site, with a bold header, and simple navigation.

Are there other good examples of sites powered by MediaWiki (or other wikis) that look and feel like beautiful websites, rather that weird plain old wikis?

 

22 thoughts on “Using MediaWiki to Build a “normal” Website”

  1. We have been experimenting with putting a slightly more rigid site structure on top of MediaWiki for a client who basically needs to have a reasonably typical site, but that will be able to change with their audience’s needs. The only cost effective way is something like a simplified wiki.

    Most of the time so far has been spent taking a lot of the excess out, but we are still hanging on to MediaWiki as it seems to have the best core of all the PHP-Based wiki’s we have looked at.

  3. Jevon: I’ve found that a lot of the setup work involves stripping a lot of the ugly wiki UI stuff out of the way as well. If I get the time/energy, I might release a MediaWiki skin that works as a good starting point for a simple-looking/feeling website without all of the Wiki-junk.

  4. Yes, please do! I’d love to be able to shift my whole site over to a wiki. One really cool thing I’d love to do would be the ability to set a certain stylesheet for certain wikipages… Can mediawiki do this?

  5. Please let me know too when you get to it Mr. Garrity. I’ve been working on a project for a while now but decided that all my work was for naught and I should use mediaWiki.

    Thanks!

  7. Can someone post a link to a HOWTO on how to modify MediaWiki and use it as simple CMS system?

    I have an installation of mediawiki running but I don’t know how to alter the layout and design. Any suggestions on where to start?

  8. My favorite version of Linux uses an adaptation of Mediawiki, which turned my head.

    It really hides the wikiness. This led me to consider a wiki for my whole site.

    I am still trying to decide between drupal and Mediawiki for my site, which is a collection of random PHP and static pages dating back to 1995.

    It would be helpful if there were some clear documentation. The theme and template section of Mediawiki documentation is confusing. I can probably hack it, but I’m going to break something in the process and it would be much easier with a little explanation of what all that gunk in the skin script does. It would nice if they cleanly separated code and template by using Smarty (yes, I believe you can use Smarty with it, but that would just be another obscure learning curve).

    Reading some disabled templates in the source, it appears they had problems with PHPTal templating failing to compile (I’ve not had that problem with Smarty or at least only temporary). The default template is now back to pure php, which is okay with me if they would just separate app logic and template logic into separate files. It is intimidating for non-technical people to edit with class definitions in there. It’s not something I enjoy deciphering either, when I am used to going from a mockup to a Smarty template quickly and easily.

    BTW I develop for another site, folkstreams.net, and I chose Smarty for the platform, so you know where I’m coming from.

  11. Better yet, is there any chance we can take a look at the PHP file for any of the themes you reference? I’ve already started to make some progress today on customizing Mediawiki, but there are a couple of things I just can’t seem to get right. I understand if there are IP issues, but just thought I would ask.

  13. Notice that the three examples you give are all from the same stable. I was particularly impressed by the beagle site. The mono site has taken some time to get up to the same standard (it languished in “default mediawiki mode” for quite some time).

  15. Does anyone have any information re. how to embed quicktime movies (ideally linked with a poster frame) within a wiki?

    thanks in advance,

    Jarret

  16. I have used MediaWiki for the past few months and many people have commented that it looks too much like Wikipedia because I’m using the default monobook.css style and I really want to create my own so that I can customize my whole site that uses MediaWiki, phpBB and WordPress and I want to create my own template.

    Any links to a “how-to” would be appreciated by myself and other.

  17. Just a few words to say that it’s hard for non-coding people to build an alternative to the default mediawiki apparence. Are modified mediawiki skins (Mono or Beagle/Arstechnica site) GPL’ed ? Of course, i also raise one hand for a “how-to” to achieve this :°)

    Thanks in advance, Pierre

  18. I feel the core code is to complex for it’s own good. The templating system is a perfect example of such. phpBB or b2evolution both have very templating systems… esp b2evolution. Why can’t mediawiki take on somethng like this? seems even the mediawiki team is confused as to how to explain the templating system.

  22. Would love to read a follow up on this article. I’ve gutted and rebuilt my blog and PHPBB templates, created CSS that works well across both systems along with my static site. Was planning on fitting the wiki to match, but just realized i may need to start over, reskinning the wiki first. Not sure where to start with wiki styling. Thought it would be more obvious.

Comments are closed.