How to Make a Free Website in Less Than 10 Minutes

-By Dan dos Santos

I thought I'd pick up on Serge's post last week about promoting yourself on the internet. Obviously, the most essential aspect of self-promotion on the web is having a personal website. If you're reading this blog, I would assume that you're at least serious enough to already have a website... but you never know.

I hear all sorts of excuses for why aspiring artists don't have a website yet. Unfortunately, they are just that... excuses. There are so many options available to artists now, that there is no reason at all you shouldn't have a portfolio online.

The simplest option of course, is to create a gallery on a website like DeviantArt or CGhub. The biggest benefit is that these galleries are totally free. The downside is that a potential client is just a single click away from a thousand other artists... meaning your work has a lot more to compete with.

Another free option is to create a blog.

I've seen a growing trend in artists who use blogs as their sole website. This works well for enticing clients to come back for repeat visits, as there is always new content. But it's annoying when a client wants to view an entire body of work quickly, and needs to scroll through months of posts in order to do so. Ultimately, a blog is a nice supplement to a website, but rarely takes the place of one. This is simply due to a clunky interface. But there is a way around this, and I'm going to show you how.

In less than 10 minutes, you can turn an ordinary blog into a sleek, simple, and FREE website.

You can take a peek at a sample I made for you HERE.

Aside from a little bit of prep-work, all it takes is some coding experience. Lucky for you, I've already done all that for you!

So here is what you do...

1. Create a Blogger account.

2. Start a blog. The name of the blog should be your own name if available (I highly recommend doing this even if you don't want a blog. If you change your mind in the future, at least you've reserved your name).

3. When choosing a template, choose either the 'Dynamic View: Flipcard', or the 'Dynamic View: Sidebar' options. Both are great layouts for a gallery, and allow the viewer to skim an entire portfolio very quickly.

4. Create a new post. In it, paste a single full-sized image. The title of the post should be the title of the painting. Go to 'post options', turn the comments option 'off', then hit 'publish'.

5. Follow Step 4 for every single piece of art you'd like to show in your gallery.

6. Create a new page. Call it 'Contact', and simply type all of your contact info there.

7. In the design section of your blog, add a new gadget. Choose the 'Pages' gadget. This will add a link to your contact page right in the header. Don't give it a title, and change the name of 'Home' to 'Gallery'.

At this point, your website is essentially functional. However, it's really not that great. A lot of extraneous things you don't need are still there, mucking things up. Dates, authorship and label info all appear next to each image. Additionally, the viewer can change the Dynamic View at will, totally destroying the way the gallery looks. This is the single biggest problem with Blogger Dynamic Views... limiting what the viewer sees. Further more, altering the HTML to the Dynamic Views template is extremely limited. There is a way around this though! By adding CSS code, you can bypass a lot of the HTML code that makes the Dynamic View so awful.

8. Go to Template Designer. Click on 'Advanced', and scroll down until you see 'Add CSS'. Simply paste the following info into the 'add css' box.

/* Hide search */
.header-bar #search{ display: none !important; }

/* Hide the google chrome feedback button */ { display: none !important; }

/* Hide the dynamic views options on the main page */
#views { display: none !important; }

/*Hide the vertical bar before the first page link */
#pages::before { border-left-width: 0 !important;}

/* Hide date ribbon */
.ribbon{ display: none !important; }

/* Hide footer */
#footer{ display: none !important; }

/* Hide google share */
.share-plusone{ display: none !important; }

/* Hide recent, date, label, author */
.flipcard #controls{ display: none !important; }

/* Hide date and author info*/
.publish-info { display: none !important; }

/* Hide flipcard info */
.card .back .overlay .date { display: none !important; }

9. Be sure to hit 'enter' after the last bracket, or it won't acknowledge the input. Hit 'Apply to blog', and Viola! You're done!

When you go back to view your blog, you should now see that it is extremely streamlined, and the viewer can no longer change it's appearance. All of the dates and author info are also gone. I personally chose to leave the Facebook and Twitter options available, though you don't have to.

See? Wasn't that easy?!
The next time we do a crit-submit, I really hope to see more of you taking advantage of this.

It's a fast, user-friendly site that costs NOTHING to maintain. Furthermore, unlike a lot of Flash-based 'lightbox' galleries, each image/post still retains a unique URL. Meaning that you can send a link to just a single image if you need.

One of the few downsides to this type of website is that the site's URL is going to have '' at the end of it. Though, if you choose to, you can change this as well. If you purchase your own domain name, Blogger allows you to use that as your URL. This a very small, yet very worthwhile investment.

Play around with the layout. There is a ton of cool stuff you can do! For instance, on mine, instead of just omitting the date ribbon on the back of the flipcard, I decided to replace it with my logo. If you're having trouble, just Google exactly what it is you're trying to do... you'd be surprised at how much info is out there.

Please Note: I've personally tested this in Safari, Firefox, and Chrome, and can attest to it working fine.  However, 'Dynamic Views' is a relatively new option on Blogger, and as such, has minimal mobile support. This means the site may look weird on mobile devices like iPhones and iPads. I expect this will be remedied in the upcoming months. As for IE, well... nothing seems to work on that piece of junk, including this very blog. Someone needs to put that horse down.

EDIT: 12.29.12: Blogger seems to have changed a few things. Pasting this text into the CSS box no longer seems to work. Instead, you need to paste it into the HTML, and it will then show up in the CSS box. Go to 'Template', click 'Edit HTML'. Click 'Expand Widgets'. Search the text for /* END CUT */. Place the above code immediately following the words /* END CUT */.

Labels: , ,