How to Make a Free Website on Google Sites

hey everyone this is tony teaches tech i’m tony and in this video i’m going to show you how to create a website on google sites for free that’s right 100 completely free no hosting fees the only thing that you need is a google account and if you already have a gmail address then you are good to go so i’m going to walk you through the process of doing some basic design this will be a multiple page website with a contact form and at the very end of this tutorial i will show you how to associate your website with a custom domain name that is something you will have to purchase if you want a custom.

domain name but if you’re okay with having a domain name at you know something like sites.google.com your name or something like that then you don’t have to worry about that it will like i said be 100 completely free so let’s go ahead and get on into the tutorial here um first thing you want to do is to go to sites.google.com and if it asks you to sign in go ahead and sign in otherwise we can get started right away we’re going to make a you have these templates right you have a template gallery portfolios events help center project team all the stuff you can look through but i think it’s good just to show you.

Your Individual We’ll Call Them Elements Again That

in this video about how to start from a blank slate so let’s do that and they do kind of give you some basic elements here as far as like a header and your page title and then on the right hand side you have all the individual elements that you can insert into your page so you’ve got some basic layouts here at the top and then all your individual we’ll call them elements again that you can put in here so buttons dividers youtube video google sheets google slides all this stuff so we’ll work with some of this and of course your your basic text box images up top here let’s go ahead and just dive right.

in let’s start customizing a page i’m going to make a page for my my website tony teaches tech and this is uh fairly easy to use i mean you can highlight the text make it bold uh change the way that it looks as far as the the thickness of the thickness of the title so we want it to be nice and big so we’ll make a big title here and let’s change this background image to something else than this black image so we can either upload our own image or select one from their library here and i’ll do something um you know fairly simple let’s just see what a couple of these look like so.

like this blue one that actually doesn’t look too bad for my my theme colors and all that stuff so i’ll stick with that for now let’s add a logo too i do have a logo on my local machine so i can upload that logo from my desktop in this assets folder here’s my tony teaches tech logo so we’ll upload that that looks good it’s always good practice to put in some alt text here so i’ll say tony teaches tech logo and it’s really cool use logo color for your theme so we can actually apply the uh it detects the colors of your logo and you can apply that to the rest of your site so.

We’ll Use the Same Thing For

we’ll use the same thing for our fav icon which is the little this guy up here that’s a fave icon so we’ll use the same logo for a favicon and that looks good so um next to that we can again type in our site name tony teaches tech and as far as the header is concerned that looks like good a good place to start so let’s go ahead and add some content down here we can either do this you know again from a blank slate or we can choose one of these pre-defined layouts i’m going to pick this layout right here and just drag that onto the white canvas here so we can have an.

image on the left and some text on the right or if you don’t like that you can simply just drag the the image to the right and have the text on the left so it’s really easy as far as that’s concerned i’m going to do something up here for the header who is tony and uh again i’ll make this bold just a little bit bigger and then i do have some text over here that i worked with before so just a quick little blurb about who tony is and i think it’ll be a good idea to put a picture of me here so i’ll upload from that assets folder a picture of myself in here.

so that’s coming together pretty good so far let’s add a new section down here this time i will let’s put a youtube video in here so i’m going to take this and i’m going to find a video on youtube one of my videos which is what is tony teaches tech or you can upload a video or find a video by url this is the video that i want to add so i’ll click on that and select that and this adds right below the first section and again a really cool feature of google sites is the fact that you can drag this around you see that these two blue horizontal lines on the other side means.

There and We’ll Say Something Like We’ll Just

that we’re in the center or if you want to have this really big take up the whole space you can click on it and drag it to the exact size that you want and i think that looks good so i’ll make it full full screen width here and just to have some break between this section and that section i’m going to add a text box right above there and we’ll say something like we’ll just say tony teaches tech on youtube you know something like that and we’ll make uh make this a title again make it bold so so it matches with this uh the same font and size up here so we got two sections.

so far let’s add another section down here we’ll uh make sure we’re selecting this section and we’ll add a text box below it and we’ll do something like tony’s expert tease tony’s expertise i think that’s how you spell it uh again same thing make this title make it a bold and under there we’ll add we’ll add a layout we’ll do something like this this can be a good visual uh depiction of my expertise so again we’ll go back into that image or that assets folder upload some images and we’ll do uh we’ll do gmail we’ll do another one we’ll do ubuntu servers which is like an operating system we’ll do python and we’ll do [Music].

what’s the last one wordpress so we’ll just give each one of these a name so email servers python programming and wordpress okay you know you get we’ll put a capital p you get the idea so you highly customizable you got these pre-configured layouts and you can just keep going with this going and going we’ll add a footer just to close out this page and i’ll do something like this tony teaches tech it’s fine for this to be small but i do want this to be centered so i can change the alignment here that being right in the middle of the page um i like the way this looks let’s go ahead and add a second.

Here and We’ll Call This Contact and The

page so right now this is just a one page website we can add a second page by doing coming up here to the pages section and you see we have our homepage let’s add a second page here and we’ll call this contact and the cool thing again that i like about in if you don’t want the page to be called contact you can specify um a custom path here but by default it’s going to take the name of your page that you give it and place that for the url so we’ll keep that here and what i was saying i like the fact that they add your navigation bar up here at the top so.

you have your home button tab up here and then you have your contact tab so we can switch back and forth between the two and your users will be able to do the same thing so that’s really cool so i’ll say up here contact me and this is where we can leverage the power of google forms and embed a form from google forms right here on this page and if you’re not familiar with google forms it’s really easy to set up but i’ll show you what i’m going to do here on under the insert tab here on the right hand side if you click on forms it’s going to find all the forms that you.

That and We’ll Insert That and There We

have created and if you like i said if you don’t know anything about forms you can go to forms.google.com and in here they have all these different pre-configured types of forms kind of like the same thing that you’re seeing with the templates in google sites but um and this this can be anything like really this doesn’t have to be a contact page this could be a t-shirt sign up page or a survey or an event registration anything like that but like i said i already have a pre-configured contact page here so i’ll just select this one and add that into our website whoops click on that and we’ll insert that and there we go that’s.

now on our website and same thing as before we can center that or make it as big as we want i think that looks good just to be um you know kind of some padding on either side so it says contact me feel free to use the contact form below to get in touch with me name email let’s talk and they can hit the submit button down here and when they do that i’ll get an email and it’ll be automatically saved to my google drive account so back here i think a good thing to have is something like a a call to action on this page and a good way to do that is with.

Here and We’ll Say Get in Touch With

a with a button so i’m just going to pick a button down here and we’ll say get in touch with tony and we’ll link this button so when somebody clicks on this button we’ll link it to the contact page and we’ll make this bigger so you can see the whole text and put that right here in the middle right at the bottom just so that when people come here they’re scrolling down the page and then they come to the bottom oops we didn’t save that sizing when they get to the bottom if there’s nothing else for them to do then they’ll want to click on to the next page get in touch with tony and.

then they’ll be linked to the contact page so um that looks good as far as the design is concerned you know we got our multiple pages here basic layout on the home page and our contact page here with a contact form so let’s publish this so we can click on publish up here and the url that you want to publish too i’m just going to say i don’t like the dashes let’s see if i can do tony teaches tech so my url will be sites.google.com view tony teaches tech we’re going to do that we’re going to do this now we’re going to publish it under this url but i’ll show you how to do the.

People Are Going to See You Know Live

custom url if you’re interested in doing that if not don’t worry about it so this looks good let’s publish it and that’ll take a second or two and now we are now published let’s click up here and click on view publish site and again at sites.google.com view slash tony teaches tech you don’t technically need that home but it’ll take you to the home page here’s our published website this is what people are going to see you know live across the internet you got um little blurb about me up here a youtube video which is directly embedded and playable here and then my expertise and a button that links to our contact page and you can.

fill out this contact page and submit it and i’ll get an email about uh whatever you filled in here so that looks good as far as setting up your google sites that’s all you need to know the next part of this tutorial is going to be about linking this with a custom domain name so instead of going to sites.google.com view slash tony teaches tech we’ll go to a specific domain name in my case it’s going to be tonyflorida.me so let me show you how you do that let’s get out of here and up here in your settings you can actually come down to custom urls excuse me and this is where you need to have.

Tony and We’ll Assign That to Our Website

already purchased a domain name prior to this and this is going the steps of doing this is going to be different depending on where you purchase your domain name from in this case i purchased my domain name from dreamhost but again the same concept will apply no matter where you pick your domain or buy your domain so let’s go ahead and type in www.tony and we’ll assign that to our website and because i already went through this process before i already detect that i own this domain name so there’s no other prompt for me but if you see something about needing to verify ownership of the domain name just go ahead and follow those instructions.

and you’ll be good to go you’ll be able to associate your domain name with your website so there’s actually one other step here that we have to take and that is to change our dns a record or i’m sorry our dns cname record for this wherever we bought our domain name so that simply involves going to the place where you bought your domain name again i bought mine from dreamhost so i’m on dreamhost here and i’m going to find the domain name that i want to associate this with and click on the dns settings for that and what we want to do in here is add a single dns record under a the type of.

Me So We’ll Add That a Record And

the record is going to be cname and the the value of this record is going to be ghs.googlehostit.com and this is this is standard across all of google sites there’s documentation um which will guide you through this on google sites if you clicked on that learn more link but this is what we want to do and we want to have this to be www.tonyflorida.me so we’ll add that a record and this usually takes um it varies it takes you know anywhere from a minute up to like a half a day but we’ll take our chances here and see if we can navigate to this this url to see if that works so uh let’s let’s.

let’s try it out right away so um just verify again that we have our custom url tonyflorida.me let’s open up a new tab and go to www.tonyflorida.me and if it’s not ready yet so let me pause the video here uh come back in five minutes and then i’ll show you that that and that if we go to tonyflure.me that will be able to go to our google site so i’ll be right back with you in just a second all right guys i’m back about 30 minutes later and the dns propagation has finished let me show you here if you’ll put up a new tab and go to www.tony we will see that our google sites.

Website with Google Sites So Um

loads and it looks uh it looks pretty good and as far as anybody else is concerned they have no idea that this is a website with google sites so um that’s about it for this tutorial if you have any questions about the custom domain name or about designing your website with google sites in general let me know in the comments below i’ll do my best to help you out a couple other videos over here about free website hosting options so check those out as well thank you guys for watching i’ll see you in the next one [Music] you.