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

Disable Comments in Blogger Pages

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, you can also do so by adding the confirm form gadget. See the tutorial below.

Add a contact page/contact form in Blogger:
Blogger Tips: How to add a contact us page in Blogger?


Setup  custom domain for Blogger:
So far we have created a website using Blogger that is using the default Blogger provided URL with "....blogspot.com". If you want to setup a custom domain, you need to buy a domain from a domain registrant and integrate it with Blogger to use the custom domain.

See here how to setup and redirect Blogger to Custom Domain Name - How To Setup and Direct Blogger To Custom Domain Name?

Note: After setting up a custom domain with Blogger, we will need to revisit the steps 1 to 5 above and change the domain with the custom domain for each page link. Even if we do not change, it is going to redirect to the new custom domain though.

How to post / host other files in Blogger for the website besides photos?
Blogger cannot host other files except pictures used in the blog posts. To host other files such as documents, audio, video etc. you need to explore other storage. You can use other Google services for documents, audio, video etc.

1. Document: 
If you want to share document on the Blogger website, upload the documents to Google Drive, share it and get the sharing link. Use the document link from Google Drive in Blogger post to let users view or download the documents.

2. Videos: 
If you want to display videos on the Blogger website, there is no better source than YouTube. Upload videos to YouTube and embed the YouTube videos in Blogger posts.

To embed YouTube videos to Blogger blog post, do the following:

• Open the YouTube Video
• Click Share
• Click on Embed
• Select Video Size and copy the embed code
• Paste the YouTube video embed code and paste it in Blogger blog post in HTML tab

Similary, you can also embed YouTube playlist in the same way. For this to work, create a playlist in your YouTube account/ channel and add videos to the playlist. You can then embed the YouTube video playlist in a blog post or page and visitor can check out multiple videos in the playlist without leaving the page.

3. Audio/Music Files:
You can host audio files in Google Drive as well or you can host it on free services such as SoundCloud and share the link in blog post and pages in the same way. Some online cloud music services would also allow embedding, which will also display an audio player to play the audio/music.

Similarly, any other files can also be shared in the same manner using Google Drive alone.

Hope you found this post helpful in setting up a website using Blogger.
Let me know in the comments.