How To Create Website Using Blogger - Create Static Home Page Website with Blog using Blogger?

Blogger is a blogging platform from Google and is meant for blogging. Quite obvious, right? So it has the typical front page that displays list of posts published which are sorted from newest to oldest blog post. If you are asking how to create website using Blogger, read on.

Basically, and I mean very basically, websites were usually created in HTML with some CSS and JavaScript thrown in here and there. Nowadays, people prefer to use Content Management Systems (CMS) such as WordPress, Drupal, Joomla etc. Such scripts make  it easy to get a website up and running fast. And to run websites,  the website files are uploaded to a web server to make it accessible online. Basically, we need a domain name and a host to host the website files to run the website, for which we need to regularly pay for hosting and domain name. 

If we don't like the idea of paying for hosting and domain, and if you are planning to create a basic website to display basic, static contents with a blog to show periodic updates, Blogger can be used to create a website easily. This will help in saving cost and do away with the hosting fee. Since Blogger is hosted by Google and website files such as photos are hosted on Google Photos/Picasa Web, there is not need to pay for hosting. The only thing that is required and pay for is a domain name if we want to use a custom domain. Otherwise, we can continue to use the default URL provided by Blogger which as the "blogspot.com" at the end of the website URL. We'll see how to setup custom domain name for Blogger at the end of this post.

To make Blogger blog look like a website, we need to do away with the default Blogger frontpage which displays a list of recent blog posts and display a static page instead. There are different approaches (if we search Google), but custom redirect is the safest and easiest way to achieve this and there are no code changes required.

So, let's get started.

Steps to create a website using Blogger 

As described above, to make Blogger blog site look like a website, we need to do away with the default front page which has a list of latest blog posts and display a static front page instead.

1. Create a static page

Go to Blogger > Pages > New Page.

Name it "Home"

Add any other pages you like, such as About, Contact etc. 

In each page you create, disable comments from the "Page Settings" on the right if you so desire so that visitors do not directly comment  on pages. Otherwise, if you want, you may keep it as is.

Create Pages in Blogger

After creating the pages required, the next step is to create a navigation menu so that users can access your pages.

2.Create main navigation menu

Go to Blogger > Layout > Add Gadget > Pages

Uncheck the default "Home" page already listed and instead check the home page you just created. 

If you created other pages besides "Home" in Step 1, check the other pages you'd like to display on the navigation menu, The pages you created in Step 1 should be visible for selection in the "Pages to Show" list

Drag the Menu Items to reorder.(List Order)

Click Save to Save it.

3. Place the navigation menu in the right area

Now that we have created the navigation menu, now we need to display the navigation menu in the right area on the website.

Go to Blogger > Layout

Find the "Pages" gadget we added and move the pages gadget to a region where you want to display it. 

Preferably, move it on top below the home page banner and site description. Or on sidebar.

4. Settings to display the home page created when accessing the blog address

Next, we need Blogger to show the home page we created instead of the default Blogger feeds page when the blog address is accessed in a browser.

To set the home page, do the following.

First, open your blog

Click on the "Home Page" from the navigation menu we created

Copy the link/url of the home page you created from the browser's address bar.

Go to Blogger > settings >search preference >custom redirect

Paste the home page address in the "From" field of the "Custom Redirect"

Note: Due to Blogger country domains, you might see your country specific domain instead of ".com" in the address. If so, replace the country specific domain with ".com". 

Example: if the blog URL has "yourblogname.blogspot.in/.....", replace as "yourblogname.blogspot.com/......".

Save it.

Blogger Custom Redirect 

This configuration allows Blogger to use the page as the front page instead of the default Blogger front page. So the new home page we created is displayed as the front page when the blog url is entered in a browser or when Home is clicked from the navigation menu.

5. Display the blog posts

Till now, we have a few static pages and we have setup the navigation menu as well. But where are the blog posts? If you want to post periodic updates and display the blog posts, do the following:

Go to Blogger > Layout

Click EDIT on the "Pages Gadget"

Click "Add External Link"

Name it "Blog"

Enter Web Address (URL) as http://yourblog.blogspot.com/index.html 

Save Link

Reorder if required

Save

There should be a menu item in the navigation menu called Blog, which shows the blog posts. 

So we have created a website with static pages and a blog using Blogger. If you want to add a contact us form in the Blogger website.