Blog Tutorial

May 8, 2013

My struggles with HTML led me to write this popular Blogging for Beginners guide cited by Ask Yahoo! and Instapundit. This was created over 10 years ago, and I have since moved my own blog from Movable Type to WordPress. I am keeping this content live should it be found and useful to anyone.

———————————————————————————–

April 3, 2003

PART I: INTRODUCTION

This tutorial reviews how to create a blog using Movable Type (MT) and is based on a workshop I taught in 2003. A kind of “blogging for dummies,” it is aimed at the beginner and assumes little knowledge of website design/building. However, programmers and other web gurus unfamiliar with blogging may find it useful.

This tutorial does NOT offer easy Movable Type installation instructions. If you are not comfortable installing and configuring a Perl script on a web server, I suggest you sign up for Movable Type’s TypePad. It includes most of MT’s features on a centrally hosted server that requires no installation or configuration.

ABOUT MOVABLE TYPE

The MT instructions herein, largely culled from the MT User Manual, provide only an overview of a few key features to simplify the process for the beginner.Movable Type is a “decentralized web-based personal publishing system designed to ease maintenance of regularly-updated content.” While there are other options such as Blogger and Livejournal, MT has many advantages such as its flexibility and powerful features. It has quickly become the de facto content management system for bloggers.

If you have further questions see the User Manual. I recommend that you print it out in its entirety to keep as a reference.

ABOUT BLOGS

A blog, short for weblog, is a website of frequently updated, date-based, chronologically ordered entries, often described as an online journal. When a new post is added, the existing posts are shifted down and older posts are archived.

The first (hand coded) blogs were literally link-driven logs of websites, with commentary and/or personal asides. They essentially filtered the web for readers, hence the term weblog. Created by web enthusiasts/programmers who linked to cool stuff they found on the web, bloggers began adding commentary, posting daily, and reading one another’s blogs. A community culture developed.

As content management systems like Movable Type were developed, it allowed “non-techies” to blog. The focus then moved from filter-style weblogs to journal-style blogs.

Blogs can include text, images, a compilations of links, or any combination thereof.

For more information about blogs see:

Rebecca Blood’s history of weblogs
Blogging101 – a short, sweet overview
Is Blogging a Fad? – this article concludes NOT
Blogging goes mainstream – a CNN article on blogging

BLOG COMPONENTS

The typical components of a blog include:

Blog title: The name of your blog.
Blog description or tagline: An optional subheading or description of your blog.
Entry date: The date the post was uploaded.
Entry title: The title for the post.
Entry body: The content of the post which can include text, images, links or any combination thereof.
Time stamp or permalink: The time the post was uploaded which often links to an individual post. This enables others to link to a specific post within your blog.
Author’s name: Important for multi-author blogs.
Comments: This allows readers to leave their own comments and reactions to a post.
Archives: Links to older entries.
Links: Often a list of other bloggers but can be anything.
Ads: Powered by MT, your host, etc.

blogclass_01

GETTING STARTED

Familiarize yourself with MovableType:

Locate the User Manual under Resources and print it out.

Determine what kind of blog you want:

There are various types of blogs such as journal-style, photoblogs, community style with multiple authors (e.g. a group of friends, a family, etc.), subject based blogs (e.g. books, politics, cooking, etc.), or link compilation blogs.

Reading other blogs is a great way to learn about blogging. Review some of these to help you determine what kind of blog is right for you:

TokyoShoes – my blog
dooce – as good as it gets
Huffington Post – a community style blog with multiple authors

Also see the Bloggie Awards for top ranked blogs in 30 categories.

Get up to speed on HTML Basics:

If you are not familiar with HTML and CSS (Cascading Style Sheets), I recommend learning some of the basics. Webmonkey offers great tutorials on web building basics, or search online for other tutorials.

PART II: THE 6 STEPS TO SETUP YOUR BLOG ON MOVABLE TYPE

1. FIND A HOST

The first thing you need ia an account on a webserver (host) that meets MT’s requirements.

TIP: Keep all your account info in a safe place (username, password, Name Server, IP address). You will need them again.

Make sure you confirm the hosting service supports MT’s requirements prior to signing up. (e.g. Tripod and Geocities do NOT).

MT suggests that you have at least 25 megabytes of disk space available on your server to accommodate future files and posts.

There are many hosting services. Search online, ask your friends, or see support forums. The best option with great packages is 1&1 Hosting and free domains are included.

Once signed up, your host will send you the Name Server and, in some cases, the IP address of your site. The Name Server is a series of letters separated with periods (e.g. ns1.abcdef.net). The IP address is a series of numbers separated with periods (e.g. 12.234.67.890), which is the address of the server where your site is stored. In general, you will not have a unique IP address (unless you pay for it).

I recommend you have a basic understanding of Domain Name Server (DNS). H2hosting offers this overview.

2. REGISTER A DOMAIN NAME

If you do not already have a domain name (url), you will need to choose and register one. There are many domain registers. Search online, ask your friends, or see support forums. I use GoDaddy.com.

Once you have a host and domain name you will then need to point your Domain Name to your host Name Server. This means that when someone enters your url (www.yoursite.com) they will be directed to your site on your host’s server.

To do this login to your domain register and look for the My Account/Account Manager link then domain manager or manage domain link. Your will need to have the Name Server from your host.

Some companies offer hosting and domain registration in one package (but, make sure their hosting meets MT’s requirements).

Then be patient, the propagation period can take 3 to 4 days. This means that once you point your Domain Name to your host NameServer it may take some time to propagate through the world’s ISPs.

3. GET FTP

MT requires you have an FTP (file transfer process) program to upload the necessary files to your webserver (host). If you do not already have it, you will need to download and install one. There are a number options. I use CuteFTP (for Windows), others use Fetch (for Mac).

Instructions for using CuteFTP

After downloading the program, install and run it. Then, add your site:

1. Open CuteFTP
2. Select “File”
3. Select “Site Manager”
4. Select “New”
5. Choose a label for the site
6. Enter Host Address (your IP or http://www.yoursite.com)
7. Enter your host UserName and Password
8. Click Connect

(I told you you would need your hosts info again!)

For more information see CuteFTP’s installation instructions or see the instructions for the FTP program you are using.

Once connected, select the “www” folder on the right side panel to view the files on your site. The interface is similar to Windows Explorer with folders with files within them. Webpages are files with an .html or .htm extension. Images are files with .jpg or .gif extensions.

After MT is installed you should see the following:

blog (folder)
cgi-bin (folder)
mt-static (folder)
index.html

Your blog templates will be stored in the blog folder:

archives (folder)
archives.html
index.html
styles-site.css (this is the CSS style template for your site)

Make sure you have an index.html page in each folder. When someone enters your url, the web server will look for the “index.html” or “index.htm” file as the default file.

To upload files from your hard drive onto your server, simply click and drag files from your hard drive (from the left) to your server (to the right). Likewise you can download files from your server to your hard drive by clicking and dragging from right to left.

You may redirect the homepage index (www.yoursite.com) to the blog index (www.yoursite.com/blog) if you would like visitors to be automatically directed to your blog from the main address of your site. Usually this can be done from the control panel of your hosting provider under “Manage Redirects”.

4. INSTALL MOVABLE TYPE

To install MT, follow MT’s installation instructions.

Unless you are comfortable installing and configuring a Perl script on a web server, I recommend you try Movable Type’s TypePad.

Once installed, login to MT and in the Main Menu select CREATE NEW BLOG.

Configure the required settings in the blog creation screen:

name your blog
set up paths
set up URLs (usually http://www.yoursite.com/blog/)
select a timezone

Make your selections and click SAVE.

You have now created a blog on MT which will be listed in the Main Menu.

Remember with MT it is possible to have more than one blog on the platform.

5. CONFIGURE YOUR BLOG

Movable Type supports many options for configuring the way your blog looks and works. When you create a new blog, these values will be set to reasonable defaults.

To modify these defaults, select your blog from the Main Menu. You will then be in the Editing Menu.

There are four sections to the configuration section:

Core Setup
This you just completed in the CREATE NEW BLOG section.

Preferences
Allows you to set a variety of optional settings concerning your blog, your archives, your comments, and your publicity & notification settings. Some key Preferences in the Comment Configuration section include:

Allow anonymous comments
Should visitors to your site be able to post comments anonymously–that is, without submitting an author name and email address?

Email new comments
Would you liked to be notified via email when someone posts comments to your site?

Allow comments by default
Specifies whether “Allow comments” is checked or unchecked by default when creating a new entry. You may opt to allow comments or not on each entry.

Archiving
Select the frequencies/types of archiving that you would like on your site. These are individual, daily, weekly, monthly, or category. I recommend individual and monthly for beginners. (Click the CATEGORIES button to define your categories).

IP Banning
Here you can list IP addresses which you want to ban from commenting on your blog. Be warned, it is not foolproof.

Make your selections and click SAVE.

6. CUSTOMIZE TEMPLATES

By default your blog will be created with a complete set of working templates. Generally these templates will be made up of HTML interspersed with MT template tags and variables.

After making any changes to templates you must rebuild your site by selecting the REBUILD button.

TIP: Templates can be linked to an external file to edit using an external application (e.g. Dreamweaver).

I recommend you have a good knowledge of HTML and CSS (Cascading Style Sheets) before attempting to change the templates. See Webmonkey for tutorials or search the web for others.

If you make a mistake on your templates, you can copy the MT default template and paste it into the box of the Template body. Click SAVE and REBUILD and you are back at the beginning.

Index Templates
Index templates are your main entry listings. By default, an index template displays the last N days worth of entries (N = number of days you chose in the configuration). This behavior is customizable.

Archive Templates
Archive templates define your blog archives. Movable Type ships with three archive templates: one for the date-based archives (Monthly, Weekly, and Daily), one for your Category archives, and one for your Individual entry archives.

Comment Listing Template
This template defines the layout of your comments pages if you choose to use popup windows for your comments.

Templates Stylesheet
The Stylesheet largely defines the look of your site. You may use MT’s default style, select one of their other styles, modify one of their styles, obtain a style from another site, or create your own.

Once you have selected the style you wish to use, copy the contents of the text box, and paste those contents into the box of the Templates / Stylesheet / Template body. Click SAVE and REBUILD.

You may also purchase an MT style template at blogstyles for $10.

Modifying Stylesheet Templates
Making changes to the Stylesheet template is fairly easily.

To change colors you will need to know the hex value of a color. Hex values are 6 digits long and can be made up of numbers and/or letters. Some colors are abbreviated to 3 digits. For example, white is #FFF or #FFFFFF.

Some of the template tags are self explanatory and some are trial and error. Try changing one at a time, saving, rebuilding and viewing the results. For example, “.blogbody” defines the background color and font size, color and style for the main blog entry body.

Once you are more comfortable with HTML and CSS you may become more creative with the look of your blog.

PART III: USING MT

Posting Entries
From the Main Menu select the blog you would like to add an entry to, then select:

Add the entry Title and Main Entry Text.

Optional:

Select the Primary Category if you are using categories.
Add additional text in the Additional Entry Text box. This will be linked to from the main body with a “more…” link.
Specify whether you would like users to be able to post comments on this entry.

You may PREVIEW your entry prior to posting.

From the post status drop down box select Draft to save a draft, or Publish to post the entry to your site and click SAVE.

To bold, italicize or underline text use the buttons in the upper right.

To make a link, select the text for the link and click URL. A box will popup to enter the link. Make sure to include “http://” with the url.

Editing Entries
You can edit your existing entries by selecting then select an entry from the list. From this menu you can:

edit any part of the existing entry
view all comments associated with the entry
delete or modify comments

Entries that Include Images

There are a number of options for adding images (photos/graphics) to your entries. To begin select:

To upload the image file to your server, click the Browse button to locate the file on your hard drive. Choosing a destination is optional.

Select “Create a new entry using this uploaded file”. Click UPLOAD.

~ or ~

“Show me the HTML” to add the image to an entry you are already editing (this will display the HTML code that you can copy and paste into the entry you are editing.)

You then have 3 main choices:

EMBEDDED IMAGE – a full size embedded (i.e. non clickable) image in an entry:

1. De-select Create a thumbnail for this image.

2. Click EMBEDDED IMAGE.

3. Copy the HTML into existing entry or save new entry.

An example of an embedded image:

cupie_big

POPUP FROM TEXT – an entry with text that clicks to a full size popup image:

1. De-select Create a thumbnail for this image.

2. Click POPUP IMAGE.

3. The default link text is “View image”. Change this text if you would like.

4. Copy the HTML into existing entry or save new entry.

An example of popup from text image:

Click here to see a popup of the kewpie dolls.

POPUP FROM THUMBNAIL – a thumbnail in an entry that clicks to a full size popup image:

1. Select Create a thumbnail for this image

2. Adjust the Width and Height boxes to scale the image to the size or percentage that you want. You can scale either by pixel or percentage (see pull-down menu). 90 to 150 pixels wide is a good thumbnail size.

3. Click POPUP IMAGE.

4. Copy the HTML into existing entry or save new entry.

An example of popup from thumbnail image:

OTHER TIPS

To track the number of visitors to your blog add a site tracker. Sitemeter and Extreme Tracking are two services that track hits and referrals to your site.

Starting a Blog with Movable Type offers tips on syndication, categories and more. Here are some tips on how to write a better weblog and keep in mind blogging ethics.

One of the best ways to get comments on your blog is to comment on other bloggers sites.

RESOURCES

Online

TypePad – MT’s blogging service
Movable Type – MT’s homepage
MT’s Support Forum – an excellent resource for assistance on using MT
Webmonkey – offers tutorials on web building basics
ScriptyGoddess – a blog on web development and blogging
TheGirlieMatters – another blog with blogging tips
GoDaddy – one name registration option
1&1 Hosting – one hosting option
CuteFTP – one FTP option for Windows
Fetch – one FTP option for Mac OS
Blogrolling – easily update lists of links on your blog
Sitemeter and Extreme Tracking – track hits and referrals to your site

The Bloggie Awards – see top ranked blogs in 30 categories
Starting a Blog with Movable Type – tips on syndication, categories and more
30 days to a more accessible weblog – blogging tips
Write a better weblog – blog writing tips

History of weblogs – by Rebecca Blood
Blogging101 – a short, sweet overview
Is Blogging a Fad? – this article concludes NOT
Blogging goes mainstream – a CNN article on blogging

Books

Blogging For Dummies
We’ve Got Blog: How Weblogs Are Changing Our Culture
We Blog: Publishing Online with Weblogs