Create a Killer Band Site with Drupal: A 6-part Tutorial Series

Thu, Jan 10, 2008

Tutorials, Web Development

This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

The Complete Lesson Index:

Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 4 - Theming in Drupal
Read Part 5 -Drupal Admin
Read Part 6 -Wrap Up and Additional Resources

Introduction

sitelayout.jpg

In this six-part Drupal tutorial series we’ll be reviewing how to create a Drupal website from scratch for the fictitious GoBand . Also, we’ll review an alternative development path for website design by using Adobe Illustrator. You will learn exactly how to build a fully functional dynamic band website from start to finish in this lesson. This first part will go over what Drupal is and why you should use it.

drupal1.jpg

If you are not familiar with Drupal, I’ll briefly outline some reasons to choose it as your platform of choice for website design:

* Drupal is a robust platform and Content Management System. Its used for bands, communities, ecommerce, and more. It is used on many sizes of sites from small companies, to non-profit groups, and all the way up to large corporate entities.
* Anything you want to do can be done with Drupal. It will fold your laundry if you program it to.
* Drupal is very modular. At the code level it is made to be tapped into with its system of hooks.
* Drupal is one of the fastest growing Open Source Projects there is.
* And for the purposes of this tutorial, Drupal is used by numerous Bands.

Sites that use Drupal:

Sony BMG Records has a multi-site install of Drupal that shares the same code base for many of its bands’ individual websites. So, this gives you a good idea of how large Drupal can scale. Here are a handful of their band websites that are built with Drupal:

http://www.ozzyosbourne.com
ozzy.jpg

http://www.daughtryofficial.com
daughtry.jpg

http://www.goodcharlotte.com
goodcharlotte.jpg

And of course, many more.

This is a great example of how powerful Drupal is. We’re going to get you started with making bands websites in Drupal. And believe me if you become an expert at this there is a huge market for talented Drupal Developers and Web Designers out there.

Here is a rundown of the tutorials to follow in this series:

Tutorial 1 - Follow along as we build a design for the fictitious band, “GoBand.” We’ll use freely available Go Media Arsenal elements to add some flair to the website design in Illustrator.

Tutorial 2 - Get out your virtual knives because we’ll be slicing and dicing our design and prepping the images for the web.

Tutorial 3 - Put on your coding hat, mine is a tucker style cap that says, “Coding the Distance”. We’ll be converting our design to standards based xhtml and Cascading Stylesheets.

Tutorial 4 - Don’t take that cap off yet. We’ll be converting our xhtml/css into a working drupal theme. Yes this means opening up some scary php template files.

Tutorial 5 - We’ll get familiar with the Drupal interface and set up our website.

Tutorial 6 - We’ll wrap up the series with some Final details and leave you with some excellent Drupal resources.

What skills do these tutorials assume you have?

To take advantage of this whole series you should have a familiarity with xhtml and cascading style sheets. Though to be a Drupal Ninja you need great php chops for the purposes of creating basic Drupal themes and this tutorial series you can get by fine without. We’ll cover the deceptive black art of the copy and paste of proven workable php code. It would help to have some familiarity with Illustrator or a similar program. Though a desire to learn and access to the program is all you really need.

Check out the Next Lesson:

Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 4 - Theming in Drupal
Read Part 5 -Drupal Admin
Read Part 6 -Wrap Up and Additional Resources

, ,

This post was written by:

Jeff Finley - who has written 142 posts on GoMediaZine.

I'm an artist and designer for Go Media Inc. I do a lot of art and design for the music and entertainment industries. Check out my personal portfolio.

Contact the author

33 Comments For This Post

  1. Pat Says:

    This looks great! I am currently building a band website using wordpress as my CMS. It’s been quite the experience! I will keep track and make little comments here and there (if you don’t mind) about what you can do in wordpress.

    Pat

  2. Sean Hodge Says:

    @ Pat

    I think that’s great. I’ve gotten really into blogging and I’m interested in knowing Wordpress as well as I know Drupal. I think the Open Source CMS community as a whole can learn a lot by sharing with each other. Each system has its strengths and weaknesses.

    And thanks to GoMedia for sponsoring this series and this discussion.

  3. Proj Says:

    I too am currently building a musician’s website in wordpress. Though, I am nearly completed. I am intrigued by what cn be accomplished with drupal.

  4. Pat Says:

    If you send me an email (patdryburgh@gmail.com) I am more than cool with sharing what I’m doing as I’m doing it.

  5. Áskhari Says:

    hehe, right at the time, I might be starting to build a bands website next week :D

    First I wanted to build it on wordpress, but this preview is getting me really curious!

  6. Cloud9 Design Says:

    sounds very interesting….looking forward to hearing more!

  7. Aaron Says:

    Not to be a downer, but I build band sites everyday and I am not at all impressed with the Sony sites. The functionality presented is not typical of what most bands desire. I have also used Drupal a lot, and find it very limited when it comes too the details, and the details can make it or break it in my opinion.

    A not entirely unique, but nearly universal, trait that a band desires for their site to posses is to be as individualistic as the band (perhaps, even more so). Drupal, in it’s complex and broad scope, inevitably “looks” like a drupal site, unless you really know what you are doing. The Sony sites, all look how I expected them to, like a template, and convoluted.

    I will be tuning in, however, and hope that I will stand corrected.

    Keep up the good work.

  8. MattLikeALion Says:

    Can you get excited about the tutorials, to the extent that you complete them quicker than weekly? Pretty please?

    I’m in the midst of learning about CMS’s and deciding which one to dedicate to learning. This is going to kill me having to wait for the continuing GoMedia tutorials.

    I am so glad you guys are adding this to the already super-informative catalog of tutorials.

    Thanks to the whole GoMedia teem for all the selfless time put into helping us newer designers grow.

    #ILAL~*

  9. BoB Says:

    this is the business!

  10. Jeff Eaton Says:

    Great topic for a series of articles! I’m looking forward to seeing how it unfolds. After working on the artist sites you mentioned above, it’s gratifying to see them being used as proof that Drupal can rock for… rock. ;)

    For those who are interested, quite a few of the custom modules that were designed for the Ozzy, Daughtry, Good Charlotte, and other Sony BMG artist sites are now available for the entire Drupal community to use. Three cheers for Open Source!

  11. Firewalker Says:

    Just got my hand on Drupal. How is it compare to Wordpress?

    Looking forward with the tutorials.

  12. branden hughes Says:

    where can i go to find out more on wordpress and or drupal and how to become more equipt in writing the code to design websites? i have a very strong background in illustrator and photoshop but my coding skills are very very generic.

  13. Avangelist Says:

    You know I have tried to do two things with drupal in the past:

    Install it - failed miserably, total pain.

    Get it to fold my washing - ended up with massive creases in my trousers, scrunched up cuffs on my tops and very stiff cardboard like underpants.

  14. Jeff Says:

    @Aaron - You’re not a downer, it’s cool. I’d like to see what your methods are for building a band site though. If you have some good ideas and methods I might be interested in hiring you to contribute a tutorial of your own.

  15. Jan Says:

    I’m using wordpress right now. Happy to see if you will convert me to drupal in which I’m interested for some time now but never had to time to take a closer look.

  16. MattLikeALion Says:

    Jeff,

    What CMS do you guys use for the GoMediaZine?

    Also, I just noticed that you might want to up your © notice at the bottom of the zine to 2008.

  17. Jeff Says:

    MattLikeALion - we use Wordpress here

  18. Nicole Says:

    @branden - the best place to start with Wordpress is Wordpress Codex. It has all the link to very basic programming in WP to how to create your own plugin.

    I do a lot of Wordpress work but have also worked in other custom CMS sites. I haven’t worked too much with Drupal but I’m excited to see what it’s all about. In the end, if you spend the time to learn the tech and have decent logic thinking - you can make any system fit your needs.

  19. Jan Says:

    @ Nicole - I absolutely agree. But some CMS have let’s say a tendency to a certain kind of final website. In wordpress its of course the Blog but there are so many plugins that you can make any other type of website out of it. I see Joomla as an opposite of this. It comes up with many included functions and settings and you don’t have to ‘paste’ them together like in wordpress. On the other hand there are many functions not every website uses and the result is higher performance needs and complications.
    The interesting thing about Drupal is that it’s more focused on allround websites not only blogs.

  20. Andy P Says:

    Yo Jeff!

    I have decided to re-work my site and I am going to follow your tutorial whilst doing so.

    I will email you with an idea!

  21. Swoopy B Says:

    Which day will the fist tutorial actually start on?

  22. GLAx. Says:

    I’m also wondering.. :)
    It looks already very nice :D
    And I have no experience with Drupal.. so this is my first time.. :)

  23. MattLikeALion Says:

    In preparation for this series I tried to go ahead and set up drupal on a database for one of my sites, but could never get it to install correctly. I’m hosted with 1and1 - great pricing and packages but poor tech support service.

    Nevertheless, I’m excited about friday’s (?) installment.

  24. Sean Hodge Says:

    Hey All,

    I went on Vacation with my family last week. Aruba is beautiful. I’m back now though. So, I have some comments to catch up on. I’ll answer any questions that have come up last week. And thanks for all the support and excitement.

  25. Sean Hodge Says:

    @Aaron
    I think its great that someone with a lot of experience with building band sites can add some feedback to this series. With Drupal resources are spread out over multiple places on the net. There is more than enough information online though.

    As we go along I’ll point out resources for you to bookmark if your interested in learning Drupal. The series will also wrap up with a list of great Drupal resources. There are also a handful of great Drupal books out now with more on the horizon for 2008. So, finding resources is as simple as buying a book.

    As far as a Drupal look. I’ve worked with Joomla in the Past and I found the templating system to be almost identical to work with. My experience with Joomla meant very little learning curve with jumping over to Drupal for theming. If you can do it with xhtml/css it can be done in Drupal. And the process is usually straightforward.

    Let me know if you have any questions as we go along.

    @MattLikeALion
    That’s great that you are excited about the series. With my schedule the way it is right now weekly releases is the quickest I can get them out the door though. Let me know if any questions come up as we go along though.

    @Jeff Eaton
    I’m a long-time Lullabot podcast listener. You guys have taught me a lot about Drupal. I’ll say your team’s enthusiasm for the system really won me over to using Drupal. Thanks.

  26. Sean Hodge Says:

    @Firewalker
    I have little experience with Wordpress at the moment. But from what I’ve read its a great system as well. I can’t directly compare them without more experience. I will be working on blog redesign in Wordpress for a friend during the time these tutorials are being written though. So, I might have more direct comparisons as we move forward.

    @branden hughes
    Before learning any content management system I would work on having solid html and cascading style sheet understanding. http://www.w3schools.com served as a resource for me when I was learning that years ago. If any readers have some good resources for Branden then feel free to comment about that.

    @Avangelist
    I found there was a learning curve for me with installing Drupal for me as well. Lullabot has some great videos that helped out there. We will be using Drupal 5 for this tutorial series, so, this is a good link, http://www.lullabot.com/videocast/installing_drupal_5

    For me, getting Drupal do what I want took some time. A lot of my learning came from looking at other themes and how they did things. I would copy the code, make a note of what it does, and save it for when I need it. You’ll find that 80% - 90% of what you need to do is easy. The last percentage usually requires some php code.

    I’ll be showing you how to iron out those creases in your trousers by using free code available to copy and then paste into your theme. If you are good with php then I envy you.

    @Jan
    Glad your following along. I’m not really trying to convert anyone. I’m just presenting knowledge that I’ve gained over the last year of working with Drupal. Maybe you’ll see some advantages that Drupal could be used for in some projects in the future.

    @Nicole
    “If you spend the time to learn the tech and have decent logic thinking - you can make any system fit your needs.”
    This is a good point you made Nicole. I think some CMS’s are a better fit for certain projects as they may have tools already in place that you can leverage. As with any project it depends on your experience and the time it will take you to use the tools at hand. A CMS is a huge tool.

    @Jan
    You make points that I agree with. I liked investing my time in Drupal because it can output any type of site well and there are tons of tools available for it. Its made to hook into. Though I’ve gotten really into blogging and Wordpress is used by so many potential clients that I would like to invest the time in learning that system in the future. I decided to stop working with Joomla as I found to much table based code used in its core and in many contributed modules. Though newer versions of Joomla will likely fix that.

    @MattLikeALion
    Try the video I recommended about and see if that helps. There are a few other videos on Lullabot as well that I found very helpful. http://www.lullabot.com/videocast

    Its possible that there is an issue with your host. Though I would check to make sure its not something more basic occurring. Try setting up a local test environment on your cpu. That’s a good way to see that you know how to set it up correctly. Then try setting it up on your host’s server. That’s how I learned. Lullabot has a video on setting up a local test environment as well.

  27. Sean Hodge Says:

    Let me know if I missed any questions. Thanks.

  28. George Says:

    Jeff, you say the SOnyBMG artist mods are available?! And where would be find those mods?

    thanks
    G.

  29. Jeff Eaton Says:

    George, some of the key pieces that were built for the Sony Multisites are the Fivestar rating module, the Custom Breadcrumbs and Custom Pagers module, and a number of other bits.

  30. George Says:

    thanks, i think the whole tourdates,attendees and reviews module is fantastic. I hope part 5 and 6 will shed some light on those features. Great tutorial.

  31. Gimper Says:

    this is one hell of a tutorial! i can’t imagine how much effort and time was put into this!

    i run a community site running on drupal and this is just what i was looking for!

    thanks!

  32. web dizainas Says:

    amazing tutorial series

    thanks!

  33. Drupal Museum Says:

    Glad to see Drupal is getting some love. It’s a great platform and theming a beautiful site really isn’t that hard with little practice. Thanks for the series!

14 Trackbacks For This Post

  1. The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer band site in Drupal - Part 1 - Design Says:

    [...] Read the introduction - What’s Drupal and why? [...]

  2. links for 2008-01-20 « Mandarine Says:

    [...] Create a Killer Band Site with Drupal (tags: cms webdesign tutorial) [...]

  3. The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 2 - Slicing in Illustrator Says:

    [...] Read the introduction - What’s Drupal and why? Read Part 1 - Design it Illustrator [...]

  4. Create a Killer Band Site Says:

    [...] more about it. So that’s why he’s writing this tutorial for us. You can learn along with me! Read the introduction - What’s Drupal and why? Read Part 1 - Design it Illustrator Introduction We started this Series in Adobe Illustrator. Its [...]

  5. News » Burning News - Aruba Edition Says:

    [...] I’ve got a series of guest posts that will be running over at GoMediaZine. The introduction to the series can be found at Create a Killer Band Site With Drupal. [...]

  6. The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 3 - XHTML Says:

    [...] Read the introduction - What’s Drupal and why? Read Part 1 - Design it Illustrator Read Part 2 - Slicing it Illustrator [...]

  7. Creando un sitio web en drupal: partes 1, 2 y 3 | Tutoblog: weblog de tutoriales Says:

    [...] Create a Killer Band Site with Drupal - Introduction [...]

  8. The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 4 - Theming Drupal Says:

    [...] Read the introduction - What’s Drupal and why? Read Part 1 - Design it Illustrator Read Part 2 - Slicing it Illustrator Read Part 3 - XHTML [...]

  9. The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 5 - Drupal Admin Says:

    [...] Read the introduction - What’s Drupal and why? Read Part 1 - Design it Illustrator Read Part 2 - Slicing it Illustrator Read Part 3 - XHTML Read Part 4 - Theming Drupal [...]

  10. The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 6 - Additional Functionality and Resources Says:

    [...] Read the introduction - What’s Drupal and why? Read Part 1 - Design it Illustrator Read Part 2 - Slicing it Illustrator Read Part 3 - XHTML Read Part 4 - Theming Drupal Read Part 5 - Drupal Admin [...]

  11. A list of useful Drupal tutorials Says:

    [...] GoMediaMagazine Sean Hodge has published a great 6-parts guide that shows how to build a Drupal website from scatch. Here’s the list of the [...]

  12. Alcuni tutorial dedicati a Drupal Says:

    [...] GoMediaMagazine Sean Hodge ha pubblicato una splendida guida in 6 parti che illustra la progettazione del sito di una band musicale basato su [...]

  13. macchinette video poker Says:

    winners casino online…

    Give bwin poker casino online bonus poker virtuel gratuites gioco a poker bonus europa casino…

  14. The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 2 - Slicing in Illustrator Says:

    [...] Read the introduction - What’s Drupal and why? Read Part 1 - Design it Illustrator Read Part 3 - XHTML Read Part 4 - Theming in Drupal Read Part 5 -Drupal Admin [...]

Leave a Reply

Clicky Web Analytics