A Comprehensive Guide to Building Your First Website with Blogger 🌐🏗️

I have already written an article expressing my strong interest in migrating my website to Hugo, a high-speed open-source framework for creating statically generated web applications. However, I am currently contemplating whether it would be worth the effort to make the switch from Blogger, the platform I am currently using.

While Blogger may not be considered a cutting-edge tool, as a backend developer, my focus lies in studying technologies that can be customized for specific clients rather than investing significant time in building a website with various front-end frameworks. I have realized that simplicity and customization are crucial factors, which is why many businesses opt for platforms like Shopify, Wix, and WordPress for their websites.

My dad who also has extensive experience in the industry urged me to follow the KISS approach (Keep It Simple Stupid), I am wary of getting too caught up in using cutting-edge tools without considering their actual necessity.

At the moment, I can't think of many reasons to migrate to another framework, except perhaps to mention it to potential employers or impress other tech enthusiasts. However, I acknowledge that most employers are not overly concerned about the specific frameworks used on personal portfolio websites.

To demonstrate my experience, I find it more meaningful to blog about the problems I've encountered in my work rather than showcasing a website that may not stand out from thousands of others created by recent college graduates trying to enter the tech industry.

This is why I have chosen Blogger—it offers simplicity and ease of customization. By working with Blogger, I can effectively showcase my skills in HTML, CSS, and JavaScript, as it requires a deeper understanding beyond merely using frameworks like Bootstrap.

Navigating through Blogger has provided me with a better appreciation for common front-end frameworks used by many businesses.

Blogger also offers useful tools for analyzing analytics and provides convenient ways to monetize your platform via AdSense. Signing in and making changes is hassle-free since it's connected to your Gmail account, and I can even invite others to post articles on my website.

In this article, I'll give you a short but comprehensive guide about how to get started building your first website (portfolio or other) using Blogger. If you need more help, I host Nucamp sponsored workshops every month which walks you through the process (Follow me on Eventbrite to stay up to date on upcoming).

1. Create a Blogger Website:

So, you should be guided to creating a new website when you sign into blogger, if you already have a site and want to create a new one, you can click on the drop down to view your blogs and click on "New Blog". You'll then be prompted to create a title for your blog and an address to your blog. 

2. Create a Post 

Although you don't have to do this for the tutorial, it gives you more material to work with. When you initially create a blog, there won't be any posts—so try adding something so that you can start making changes to your main page.

To get started, press the "New Post" tab on the left-hand side and make up a mock blog post using ChatGPT. As an example, I made a simulated article about baking science; its prompt was "I need a 1000-word article about the science of baking".

If you'd like to gain more knowledge about how to construct prompts, check out the Master ChatGPT and Prompt Engineering Book here.

Once I had completed my post, titled "The Science of Baking: Understanding the Chemistry behind Your Favorite Treats", I added an image above the content of my page. Once posted, it should look something similar to this:

I prefer to use pictures that are entirely my own, so I often employ AI-generated images. One resource I like to turn to is NightCafe. Prompt: hyper-real, baking, cake, vibrant colors Professional photography, bokeh, natural lighting, canon lens, shot on dslr 64 megapixels sharp focus. 

3. Choose a Workable Template: 

Now that we have something to work with, you can just modify the HTML as it is, but why reinvent the wheel? I like to choose one of the free templates provided by blogger before I make my personal customizations. So, what you can do now is navigate to the main blogger dashboard, and click on the "Theme" tab. You can then scroll down and select a theme. I like to use the Soho theme to make my modifications. 

All you have to do is click on the theme you want to modify and then click "Apply". 

4. Customize the HTML 

Your page should now have a huge hero image with your first blog article displayed as so: 

Looks a lot better, right? If I want to change the text, alter how my title is displayed, modify the navbar, or add some additional components to my web page, all I need to do is head back to the Theme page on Blogger and click on "Customize" followed by "Edit HTML". Essentially, whatever unique features you see on someone's personal portfolio website can be implemented with Blogger given enough time and effort. 

It might look a little daunting to those unfamiliar with HTML and CSS, but now we can see the entire layout of the page in HTML, CSS, and JavaScript! All you have to do is find the elements you want to modify by their class or id attributes and make whatever changes you want. 

For example, I can make simple modifications by changing the page_body configuration like so: 

I made some temporary changes in the console by inspecting the css but if I wanted to make permanent modifications, I needed to head over to the HTML editor. After typing Ctrl+F and entering "page_body", I needed to press Enter a few times until I found the CSS block I wanted to modify ".page_body " is what I was looking for and I located it at line 1336. All I had to do then was add "background-color:green" into the block. Note: It's important to remember that any attributes before this setting must end with a semicolon.

.page_body{

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

display:flex;

-webkit-box-orient:vertical;

-webkit-box-direction:normal;

-webkit-flex-direction:column;

-ms-flex-direction:column;

flex-direction:column;

min-height:100vh;

position:relative;

z-index:20;

background-color: green;

}

Now, you can see your changes by clicking on the eye icon at the top right of the HTML editor. 

My suggestion to you is to think outside the box when it comes to design. Perhaps you are looking for a static navigation bar or want to add animation or effects to your title. Consider taking a look at other portfolio sites for ideas!

4. Make Your Page Interactive with JavaScript 

If you want to insert a script tag using the HTML editor, you'll need to go to the Layout page, select "Add Gadget" and then click on "HTML/JavaScript".

Adding a title is optional and I don't advise doing so because the title will be displayed on the page --you can hide it with "display: none," if you prefer.

To include JavaScript, you'll have to add the <script> tag and add any JavaScript code you wish. In my case, I like to set the navbar class position to "fixed" and by utilizing JavaScript, I can see that the navbar changes color. 

.centered-top-container,.centered-top-placeholder{

background:green;

position: fixed;

width: 100vw;

}

Note: I also set the ". centered-top-container.sticky" display to "none" so that I no longer see it drop down each time I scroll up the page. 

That's the gist of how to customize your Blogger website. Now that you have the essential know-how to make custom modifications to your Blogger website and take it to the next level. By leveraging HTML and JavaScript gadgets, you can add containers and further enhance the user experience. So, dive into the world of coding with enthusiasm and creativity, and let your imagination shape your website into a unique and captivating online presence. Happy coding and may your Blogger journey be filled with endless possibilities!