Easily host your own web sites | part 4: web design (DIY)

Feb 4, 2013 by     No Comments    Posted under: Technology

Contents


web designThere are many different ways of approaching web design and development, ranging from packages that do all the hard work for you, to coding the thing from scratch. If you were of the former persuasion, then I suspect you wouldn’t be reading this series, so we’re going to look at two different DIY approaches: moderate DIY (requiring little or no programming) and geek/hacker (getting your hands dirty with code). We’ll concentrate on the former, today.

Moderate DIY: Content Management Systems

I’ve been through the loop a few times with several different content management systems. These are software packages that typically provide a high level of functionality for your website, without involving you in lots of programming. There are some big names in this field, in both the commercial and open source worlds. In the latter case, the “big players” include:

There are hundreds of CMSes out there. By all means, experiment and try a few out. They have many things in common, so you’ll learn useful skills whatever you do. If you want to hit the ground running though, I would recommend checking out WordPress. Each iteration of WordPress is becoming more friendly to the web developer as well as the end user (content editor). The installation is a breeze. If your target website is a blog or a simple corporate website, WordPress is a great choice. There are some caveats, however.

WordPress may well be the most popular and most widely deployed CMS on the planet. This has pros and cons. On the one hand, you will find a large community of helpful and knowledgeable users, lots of documentation and a decent rate of product improvement. On the other hand, WordPress’s success makes it a large target. WordPress has suffered from some fairly high-profile security flaws. Because it drives so many web sites, WordPress is a tempting target for spammers and identity thieves alike. In short, if you plan to use WordPress (and I think you should), you’ll need to be committed to keeping up to date with security patches. Fortunately, applying WordPress patches is simplicity itself. You shouldn’t find it too onerous to keep it up to date – unless you are managing a hundred WP websites; but even then, there are tools for that

For the remainder of this section, I’ll proceed along the basis that you’ve selected WordPress as your CMS of choice. I’ll also assume that you are setting this up on the server created by following the earlier parts of this series (that is, you are using Virtualmin as your server/website management solution).

Installation

The installation of WordPress is well documented on the WordPress website, so I’ll not rehash that here. Let me suggest a couple of things to assist your installation though.

First, for each WordPress site, it is easiest to start from scratch, setting up a new site/domain within Virtualmin. If this is the very first site you’ve set up with Virtualmin, you will also be creating your first “user”. Virtualmin can handle multiple users on a single server, where each user is a kind of “mini administrator” of the website(s) within his or her control.

Virtualmin will by default create a username that corresponds to the first part of the domain you specify. So if your domain is “fredbloggs.changeip.com”, your user name will be “fredbloggs”. Virtualmin will also create (by default) a new MySQL database of the same name (“fredbloggs”). This MySQL user will have full control over the database.

If however, this is the not the first website you’ve created with Virtualmin, you have the option of adding the website to an existing user’s profile (in which case, you need to ensure you’re creating a sub- server), or creating a new user/domain/MySQL database. If you go down the sub-server route, you’ll be using the original username for your credentials, but your MySQL database name will be different (again, corresponding to the first part of the domain, by default).

To flesh this out a bit, you might do the following:

Site 1
Type: Virtual Server
Domain: fredbloggs.changeip.com
Username: fredbloggs
MySQL database: fredbloggs
MySQL username: fredbloggs
Web site root directory: /home/fredbloggs/public_html

Site 2
Type: Virtual Sub-server
Domain: funkyshop.changeip.com
Username: fredbloggs
MySQL database: funkyshop
MySQL username: fredbloggs
Web site root directory: /home/fredbloggs/domains/funkyshop.changeip.com/public_html

Note the different root directories (where the web site’s files are stored). I’d recommend the following procedure for obtaining and extracting the WordPress files:

  • Go to the WordPress download page
  • Make a note of the URL for the “tar.gz” download. This is a Linux-friendly compressed archive. At the moment the address is http://wordpress.org/latest.tar.gz, but that may of course change.
  • Fire up an SSH connection to your server.
  • Navigate to the web site root directory.
  • If you logged on as root, use “su” to change to the website owner: su fredbloggs
  • Use the command “wget” to download the WordPress archive file: wget http://wordpress.org/latest.tar.gz
  • Extract the files: tar zxf latest.tar.gz
  • Move the extracted files out of the newly-created “wordpress” directory into the current directory: mv wordpress/* .
  • Tidy up the archive file and the now empty directory: rmdir wordpress; rm latest.tar.gz
  • Proceed with the installation per the instructions on the WordPress site.

Design

Restyling a CMS is never a trivial task. If you are creating a commercial site, it may well be best to engage the services of an experienced WordPress designer. Until then, you have some other options. For starters, there are a lot of WordPress themes freely available which will completely change the look and feel of your site. Most of these themes can be customised in various ways, from adding your own logo, to changing the colour scheme. If you’re handy with CSS, you can tailor them even further, through the built-in CSS editor.

The problem is of course that your website will end up looking like a lot of other websites out there. For a personal blog, that’s probably not a big deal. If that doesn’t statisfy you though, you have a couple of ways of creating something a bit more personalised.

Several theme frameworks are available for WordPress. They are essentially skeleton themes, which come with instructions for customising to your own design. This tends to come with a steep learning curve. You’ll do well to avoid this until you’re reasonably fluent in HTML, CSS and PHP.

I recently came across a software package called Artisteer, which provides a WYSIWYG environment for designing themes for WordPress and many other CMSes. I have had a brief look at it, following a recommendation elsewhere. It too comes with a learning curve, though not as steep as beginning with a framework theme. Also, it is not free. But if you think you’d like to make your name designing cool WordPress sites, Artisteer (or something like it) would most likely speed up the design process.

Plug-ins

One of the great advantages of using a CMS, is that other people create generic plug-ins, which extend and enhance the functionality of the site. WordPress is no exception, with thousands of plug-ins available on its website. There are far too many plug-ins to list here, but here are a few that I would install straight away, on most WordPress sites I create:

  • Cookie Law Info: “A simple way to show how your website complies with the EU Cookie Law. Implied Consent. Style it to match your own website.”
  • Google XML Sitemaps: “[Generate an] XML-Sitemap compliant sitemap of your WordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.”
  • JetPack: an official WordPress plugin, which supercharges the commenting system, adds mobile-friendly themes, adds great stats and much more.
  • Ultimate Maintenance Mode: a handy plugin if you ever need to take your site offline

This is all you need to know, to get a massively featured website up and running in relatively no time, using pre-built tools. In the next and final article in this series, I’ll look at doing the whole thing more or less from scratch.

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Google search

From my sponsors

Privacy Policy
February 2013
S M T W T F S
« Jan   Mar »
 12
3456789
10111213141516
17181920212223
2425262728