How to create a blog in one day using Drupal 7
"Want to know how to create a blog with awesome responsive Web design, powerful features, and an attractive design in under a day, using the excellent Drupal 7 CMS (Content Management System)?"
Drupal 7 is a powerful framework for building a range of websites, but it is particularly well suited to creating high quality blog sites. Drupal 7 can also leverage the power of the Zen theme, which comes with built in responsive Web design support for mobile browsers (something that is of vital importance to new websites).
This article will give you a step by step account of how I created Guys-Night-Out from scratch, and published the first blog post all in one day.
Blog development & design requirements
In order to get started it is important that you are able to develop your new blog on a test server (your own PC).
Using a local test machine helps speed up development and design and avoids the problems associated with having a site under development on a live server.
Here's a list of what you'll need to start:
- A high quality Web host and domain (check out the best Web hosts for beginners)
- A good Internet connection (you'll be downloading a lot of stuff)
- A local Web server with PHP & MySQL (I recommend XAMPP)
- The latest version of Drupal 7
The XAMPP download page comes with plenty of download and installation instructions. If you have any trouble, look at the README files that come with the XAMPP download for support.
Tip: Make sure you stop any and all instant messenger programs or communication tools that might be hogging a port that XAMPP needs to install (Skype is the main culprit) before attempting to install XAMPP.
Once XAMPP is installed you can restart Skype, and any other programs with no ill effects.
Required & recommended Drupal 7 downloads
Here's a list of the add on modules (and theme) I used to build Guys-Night-Out. You may as well download them at the same time you are downloading Drupal itself:
- Views - for creating custom lists and displays of content
- Disqus - to provide dynamic commenting
- Chaos tools - required for other modules
- Pathauto - important for URLs and SEO
- Token - required for other modules
- Google analytics - track visitors and improve SEO
- Link - provides a URL field type
- Easy social - convenient way to embed social sharing links
- Zen - lightweight, mobile first, responsive Web design base theme
- Global Redirect - Important SEO features
- Search 404 - improves user experience & SEO for page not found errors
It's important to note that these module are a bare minimum that I needed to get the site operational. It is likely that I will have to install a few others as time goes by - for example, CAPTCHA to prevent spam, performance modules, etc.
Creating a Drupal 7 based blog
Here's a step by step guide to what I did in order to develop and design my new blog.
Drupal development (local)
- Install XAMPP
- Extract Drupal 7 to the htddocs folder in XAMPP
- Open up http://localhost/phpmyadmin and create a database and user for Drupal 7
- Browse to the Drupal homepage (i.e. http://localhost/guys-night-out
- Follow installation process and supply database name + username and password
- Extract modules to /sites/all/modules and install
- Extract Zen theme to /sites/all/themes
- Configure the file system and site information settings (Hint: use the admin menu along the top of your website when logged in as the primary user)
- Create dummy blog posts for testing
- Add image field type to blog post content type
- Disable Drupal comments for blog posts, but configure and enable Disqus comments
- Create a range of image styles to be used in views displays
- Use views to create attractive pages for blog (Hint: Guys-Night-Out homepage created using a two column grid view of latest posts with offset of 1, and single attachment of first blog post attached before the view)
- Use views to create similar landing pages for each primary menu item, based on taxonomy terms pulled from the URL
- Use views to create author bio block displaying social info, picture, homepage and social sharing links at the bottom of each blog
- Use views to create related blog post block displayed at the bottom of each blog post, using taxonomy terms
- Use views to create a latest post block to the right of each page, listing the latest five blog posts with image
- Add custom blocks such as footer info and connect with us
Ok, so I did write the book on Drupal 7, and Drupal 6, which is why this went very quickly for me.
Depending on your level of experience, it may take a little while to find your way around. In particular, Views will take some practice. There's nothing too difficult here - once you know how.
Drupal design (local)
This is what I did to get my blog design going (I'm not a designer, but I think it turned out ok for one day's work):
- Follow instruction in Zen folder for creating a sub-theme
- Styled various aspects of the blog, including body, header, and footer
- Used CSS3 to provide dark box-shadow border over white border on light grey background for the blocks
- Used CSS3 to provide background gradients for the body and navigation menu
- Used relative size designations (i.e. em or percent) to allow for responsive Web design - resize the blog in your browser to see how blog posts squeeze to fit
Not all the design bugs are worked out. I noted that there was a problem with the design when viewed from an iPad (although this did not show in ipadpeek.com).
Deploying the Drupal 7 blog
Once I was happy that the site was ready, I deployed it to the live server:
- Delete all un-necessary content
- Clear the cache
- Make a gzipped backup of the database
- Zip all the Drupal files (don't zip the parent folder, you want everything to be extracted directly into the Web root)
- Transfer the files to the host server
- Create a new database on the host, with username and password, and import the backup SQL file
- edit sites/default/settings.php to reflect the new database settings
- Browse to the new domain (i.e. http://guys-night-out.com), and ensure that everything is working correctly
You might find that there are certain file permissions problems. I recommend you check out your status report under Reports in the administration menu.
You'll also need to configure certain modules that only need work on the live server - such as Google analytics and disqus.
So there you are. A brand new, powerful, beautifully design, modern, sleek HTML5 responsive Web design blog in one day.
Tell me how your blog design went. Share your blog development and design tips, ideas and advice in the comments.
Ask us a question on anything and we'll give you a simple expert answer. FREE!