Build an Easy Web Site using a blog

"Wide Mouth" by Michael Orwick
Oils on canvas 30x40"
SOLD

Here for those of you who have asked, I found a straight forward article on
How to Build an Easy Web Site

(As seen in the January-February '07 SCBWI Bulletin)


by Elizabeth O. Dulemba





I recently helped fellow illustrator Liz Conrad set up an online portfolio using a serious short-cut. I walked her through creating a blog, then setting her domain to forward to it. Because blogs are free, this ended up being the easiest and cheapest way I know for anyone, artists in particular, to establish an online presence. This is how we did it. If you feel like Liz did, like a “technological pinhead,” have no fear - blogs have a friendly interface and breaking down the steps makes the process less intimidating. There are several online blogging companies such as LiveJournal.com, TypePad.com, and WordPress.com; however, I sent Liz to my favorite, Blogger.com. After Liz followed the easy directions, we modified her blog and turned it into a website with an online portfolio.


Note: When you set up your own blog, use the "New Blogger (beta)” version for some great features which makes the process even easier. Before posting images to a blog, you need to downsize them for the web. If images are too large, they will load too slowly or won’t fit on a computer screen ­ you’ll lose visitors. Images need to be RGB, 72dpi, jpg files, less than 100k and no larger than the average computer screen (600 x 800 pixels). Images for my blog are usually no wider than 450 pixels.


Liz had her work scanned, downsized, and burned to a CD at a local Kinkos, but if you have a scanner, you may be able to do this yourself. Look around in your programs for “jpg optimization” or “save for web” features. Pixel-based programs such as Photoshop Elements work well for this.


Choose eight to ten of your favorite pieces using the above parameters and save them to a folder on your desktop.


Get used to your blog’s interface. Post a message to your new blog, then experiment with uploading an image. Click the image icon at the top of the posting window and follow Blogger’s instructions. Ignore the resizing feature (you’ve already done this) and the “right” and “left” buttons which make text wrap. Do hit your return button before adding text. This will help clarify an image vs. text. In a blog post, images look like this: Note: html Tags are like silverware around a dinner plate. For every command there must be something on the left opening it, and something on the right closing it. The command is the fork on the left and is closed by the spoon command on the right. The plate is the image or content between the two. Once you feel comfortable with posting, it’s time to create a post named “PORTFOLIO” and upload your images.


By default, Blogger adds images to the top of the text message every time, which can get confusing if you post more than one. To work around this, upload an image, hit return, type the image’s corresponding text, then copy and paste this entire block to an external text document and delete it from the post window (don’t worry, Blogger still has the image information in cyberspoace). Do the next image the same way, and arrange these blocks in your text document. When you have them all done, copy all the text from your text document and paste it back into the post window. Click “publish.” Note: If Beta Blogger gives you any problems uploading images, upload them to a free online image sharing site like photobucket.com. It will give you the image’s html “Tag” you need to include in your blog entry. Easy! Now you’re going to create a permanent link to this post. Open your blog and click your “PORTFOLIO” post title. This will open your post in it’s own window, or it’s static link. Copy the URL. Hit “Customize” on the blogger bar at the top of your screen. This will take you to “Page Elements” under “Template.” (This is where Beta Blogger is much easier to use and edit.) Click “Add a Page Element” in the sidebar and choose “Link List” from the options. This will open the “Configure Link List” window. Make a permanent link to the post you just created by pasting the URL (the static link) in the “New Site URL” field. Type “PORTFOLIO” in the “New Site Name” field and save your changes.


Voila! You’ve just created a link to your online portfolio. Go have a look - groovy, eh? If you want to add anything in the future, like a BOOKS or BIOGRAPHY section, follow these same instructions. Now to buy your domain. I like to use directNIC.com. They have great support and are super cheap at $15/year for a domain. Under “find your domain names today” type yourname.com (trust me and don’t get fancy here), then click “search.” If a green cross appears under .com, it’s available. Click and buy. Once you’ve registered (it may take a few days to become active), go into “domain manager.” Click on the house icon to the right of your new domain. Click where it says “change hosting type” to set up your forwarding. It will give you a bulleted list of options. Choose “redirect with no frame.” In the next window type your blog URL (Liz’s URL was http://lizconrad.blogspot.com) then click “redirect.” Go check out your new website! With your own URL you can also set up free email forwarding. Follow the directions to create your email address, you@yourname.com, and it’s yours forever, even if you move. This may sound overwhelming on first read, but sit down at your computer and give it a try. Taking one step at a time, you’ll be surprised how easy it can be to build your own website. Check out Liz’s website at http://www.lizconrad.com/. Elizabeth O. Dulemba is a children’s book illustrator with a serious bent towards geekdom. Visit her web site at http://dulemba.com/ and her blog at http://dulemba.com/blogger.html. Sidebar: For more information on choosing domains, webhosting, and more, check out the SCBWI Publication, “An Introduction to Webhosting and Design,” in the “For Our Members” section of the website at http://www.scbwi.org/.