Create a Free Website with Google Sites (With Custom Domain Name)

today you'll learn how to create a website using google sites so google will actually host websites completely for free just like the one we've built here they're very very easy to build and you can even use your own custom domain name i'll show you exactly how i did all this in just a few minutes i'm alex from ideaspot let's get started [Music] okay so first step we just head to sites.google.com and we'll get this screen here to start our first site so you can start a new site by hitting the blank plus button there or you can look at the template gallery i think the easiest way to get started is by using one of these pre-built templates you'll see that they have a pretty good range of designs here that we can use don't worry if it's not exactly what you're looking for because it's pretty easy to customize and change these to suit what you like so that's what we're going to do here so for this demo i'm going to go with this one called project so let's just click on that one so we can start by filling in some basic details of our website so we'll start with the project name i'm going to call this one idea spot tech and let's put the same thing into this heading image here so i'll delete out that and put idea spot tech in there and in our header image here we can put a one line description of our project so i'm going to call that just uh web design tips and tutorials so that looks pretty good next thing i might do is let's change this logo so if we hover on that logo we can see edit logo there let's click that one and we can delete the logo that we've got by default and we can actually upload our own logo so i've got a couple logos i've designed here i'm going to go with this one this nice simple dot in a navy blue background one clever thing that they've got here is it's detected the main color of the logo and we can use that logo color for our theme so if we click that one that'll change our theme to that color so that is pretty interesting let's try that one out and then we can go ahead and close that off also we can customize the logo in that browser tab there that is called a favicon so similarly we go back to the logo click edit logo and if we scroll down here we'll see favicon so we can upload the same image use that one as our favicon as well so after we go ahead and publish our site we'll get our favicon in our browser tab if you're interested in making your own free logo check out canva.com i think this is a great way of doing a lot of free graphic design very simple to use also logomaker.commakr.com is good for making very simple little logos so check those ones out if you haven't made your own logo but let's continue on with our website let's actually publish this and see what we've got so far so if we click publish you can see by default the web address is going to be the sites.google.com view and then our title ideaspot.txt so that's going to be what we use by default they also have an option of making a custom domain so that can be any domain name that you've got you can replace that name with your own so i'll show you how to do that in just a sec but let's go ahead and publish what we've got here and then we can go ahead and click view down here so this is what we've got so far you can see our address here at sites.google.com if we want to get a bit more professional let's go ahead and use a custom domain to replace this so let's head back to our site builder here and here we're going to go to the gear icon there our settings and we can go to custom domains there you'll see we've got a button there to start setup let's click that one so from here there's two options we can buy a domain from google right now or we can use a domain from a third party so there's lots of places that actually sell domains and they're pretty cheap to buy usually namecheap.com is a great one to get specials on dot coms and nets godaddy is a good one in my case i'm in australia they sell good deals on comau co uk for those of you in the uk uh co-nz for new zealanders this is a good one in this case i'm going to use godaddy but you can use anything you like really or just get one through google there i'm going to use that one from a third party then we just go ahead and click next here we go ahead and plug in the domain name that we're using so i'm using new idea.site and it's going to say the domain is not verified please verify your ownership so i'm going to go ahead and click that verify link there so this is probably the most technical part of the whole tutorial google have made this pretty easy by supplying instructions for all the major domain providers so name cheap godaddy everything is listed here basically wherever you could have bought a domain so in my case i'm using godaddy.com so i'll put that there and it's got instructions that you can follow so basically we just have to take this text record copy it and move this over to wherever we own our domain in this case godaddy in your case wherever it's hosted and in my case in godaddy go to my domains and you'll find your dns manager here once we click that we'll end up on this screen and we can add that text record on so here we add a text record that is txt we paste in that text value that google gave us that is the code from here we just copied that and pasted it into that box there the host i'm just going to put the at sign there and we go ahead and click save so here we see we've got our google site verification code in our dns now so this will be different depending on where your name is hosted but this is how it looks in godaddy so just wait a couple minutes make sure that's all saved properly head back to our google verification and let's click verify here there we go we've got that green tick so our website is all verified so now back to our site builder we can probably get our custom domain working now so custom domains we can start set up third party and we are going to go next and again we're going to go put our domain in here so that's new idea.site and this time we should get a tick because we've gone through the verification process and we can click next here so we've just got a little bit more technical detail to go through before we finish this up so it's going to say go back to our dns settings and create that cname entry for www and we want it to be ghs.googlehosted.com so i'm going to copy that out we're going to go back to our dns in godaddy and put this in okay so let's head back to our dns manager here and we want that cname www at the moment it's just set to at if you've already got one on there we're going to edit that one if you don't have one on there already we can just go ahead and add a cname with www and point it to there and save that in otherwise we can edit this one here it's pointing to app we're going to point it to ghs google hosted.com save that in so in your dns manager you should now have a cname that is www and it points to ghs google hosted.com that is all we need to do with that step and let's head back to our site builder and here with any luck we can click done now so it's assigning our domain and there we go connect it to new idea.site so this does take a few minutes to start working maybe 30 minutes to 2 hours they do say it can take up to 72 hours but i've never had it take that long you'll notice also that it uses www.newidea.site in this case if you want to use the plain one as well as www i'll show you how to do that in just a second basically we'll set up some forwarding so everything goes to the www by default so we go down here to forwarding and godaddy i'm going to click add and we're going to select https here i'm going to forward everything to www new idea.site permanent 301 and save that on so now we should be able to see we've got forwarding to www new idea.site that's how it works in godaddy on namecheap it's pretty similar you go to advanced dns you do a url redirect record and add in that forwarding in there so now if we open up a new incognito window and go to new idea.site we should get our site there and it should work either way with www or without www so either way it should take us to our website just fine we've got secure ssl on there as well so that is all done you might actually need to clear your cookies before it'll work on your browser so go ahead to your settings or whichever browser you're using you can usually clear your browsing data clear your cookies this is using google chrome but whatever you're using you can clear your cookies now we can plug in that site name and should be should be working just fine so looks all good i'll share some links to detailed instructions in the description for forwarding domains on namecheap on godaddy on google domains and cloudflare is the other one i like so just check the description you've got instructions for doing that on all of those providers so let's get back to customizing this page one thing i want to change is this menu on the side there are some options for changing this so let's look at that back in our page builder we can go to this gear at the top there navigation settings so we can look at our mode at the moment we're on side menu and we can change that to a top menu so now we've got a more conventional sort of top menu there we can preview that with that little icon there that'll show us our new menu so we've got our menu up in the top there if we look at it on a tablet it looks like that and on a mobile this one here we've got a hamburger menu that pops out of the side there so i think this is a good way there's not a lot of choices but i think this is a decent option between those two next up you'll notice we've got our themes tab open here so at the moment we're on simple and we've got this color this dark blue that was selected based on our logo before so you can flip between these and you can make choices based on the style the color and you've got some font options there as well so you can try different styles out there i quite like this one level i think it's got a nice navy underline there a navy underline there and the font choices are between slab and narrow and uh where was i science sans is quite nice next thing we can do is look at editing the header so we've got choices for our header type there if we hover on the header we can change we've got a large banner at the moment but you can choose a whole cover a banner or just the title so i like what we had actually large banner was pretty cool and then if we flip that back we can change the image so we can upload images from our pc or we can select images and they've got a gallery of background images here so we can choose something that would be suitable for our project maybe that notepad there and we can change our background there's a little magic star thing there which allows us to improve readability it makes it a little bit darker i still don't think the readability is that great so i might actually change that make that bold maybe boost the size of that up a bit so and same with this here let's make that bigger than 13 let's go with 24 so i think this is a little better if we look at this in the preview what does that look like so this isn't bad but i do think the text isn't as readable as i'd like it because it's white text on this background we might just choose a darker image and see what that looks like so i'm going to close out here and what we can do is i might upload one that i've got from my pc so go with this one here so it's a darker image and we can see the white text is more readable the other thing you could do is just use your favorite image editing software and just reduce the brightness of your image and then upload it so you get that effect next up let's have a look at inserting content onto the page this is quite self-explanatory you can add text box images you can embed html and you can add files from your google drive they have some pre-built layouts here and other items that we can add here including google documents google slides and sheets google maps and calendars youtube videos so let's go and try some of these things out all we have to do is select an area and it will add in a new block directly below the one you're working on there so i just entered a text box and here we can just put some text in i'll just place some filler text in and it's just a normal text editor same as google docs for basically so i might make this one a heading and i'll leave that one let me make it bold but you get the idea we could go ahead and add an image below that one so i might upload something for my drive maybe this guy working on the pc there and there's our image you can change the size of it by dragging this handle there and move the image around the page by doing that as well so that looks all good i might go ahead and publish this and see how we're going so far so that's what it was on the last save this is what it's going to be after we publish so let's go ahead and do that we can try out these pre-built layouts i might try one of those out now so let's go with that two-column layout here and here we add images and we edit text so i'll put in an image here let's upload something from our drive let's go with this guy walking around here and let's go with uh this girl that's a laptop we can see that's actually me walking around back in uh back in my hometown a few years ago by the look of it then it's just a matter of filling these things out i might pop some text in there i'll call that one projects and services for example and just put some some filler text in below there so pretty decent looking layout let's do that there cool i think looking at this one it's got an extra line below there so if i delete that we've got three lines on each side that looks pretty good and you'll notice we're working at the bottom of the page here we can actually change the layout of any of these blocks the order by grabbing that handle there and you can drag that up so if i want this at the top i can just drop that you can see that little blue line that's where it's going to drop in so i'll just drop it in there so there we go we've got this section is near the top let's try adding a button to the page so let's say i want a button below this element here let's go button and let's go meet our team and we can link it to any page on the site and we can paste in an external link to link to any other website we like but i'm going to link it to our team button because it's meet our team and we're going to insert that button there and by default it's gone to the left we can drag it wherever we want in the page here so if i wanted it to be in the center i can just drop it down there and looks pretty good while i'm here i might fill in that project mission statement so just paste in some filler there i want it to be center alignment so that looks pretty good so all of this stuff is pretty self-explanatory so i'm not going to go through all of it one thing that is quite interesting is this embed code so let's say we wanted to embed some interactive content onto this website you can embed any html code you like onto the page so let's go ahead let's embed some code and we can paste embed code from the web in here so things like forms quizzes polls you could go to places like typeform.com and get uh quizzes and things like surveys jotform is another good one that can do registrations and order forms in this case i've got one called yazio that has a you can embed some calculators so i might embed this weight loss calculator onto the page so i'll just copy that code like i said you can find this sort of thing on lots of different services and i'll go ahead and pop that code in there and click next and actually it will allow us to insert some code onto the page so that is the calculator that we got for free and we can go ahead and we can drag it make it fit wherever we like on the page and then we can preview this and see what that's looking like so click the preview button there i'm going to go back to the desktop layout now we can see there we've got our calculator it doesn't have enough length to fit so the calculator is longer than the box that we've assigned it so we can actually change the box width and length by clicking here and then just dragging it and getting it to the right size so i might make it longer we can see where's the bottom of our of our box let's keep going there we go so we can see if we preview again hopefully that's a bit better there we go so the scroll bar's gone so that looks pretty cool this is not a weight loss website this is a tech blog so i don't actually need that calculator it's just for demonstrating how we can embed code onto our site but lots of things you can do by embedding code onto your website now for the last step let's have a look at the pages so by default we've got four pages here we've got a home history team and faq page we can go to that page tab here and you can you can actually remove things or we can we actually rename them and look at them so i might look at the history one to start with so this is our page that we've got for history if we wanted to add a page we can click that plus button down there let's call it a contact make a contact page hit done so this is a completely blank page we can start building from scratch here and say we could add a header we've got that header we've got the title there we can change that background image same as we did before like choose one from the gallery or upload one so i might go ahead and do that go ahead and just insert more content in there like we did before so quite self-explanatory the other really nice way of working with pages is just to duplicate a page so let's say we're really happy with that look that we had on the home page let's just duplicate the home page let's call this one the about page so i'm going to change that to about and then hit done and now i've got an about page so we don't want the same content what we just want is say about on there and call let's yeah info about us and then go ahead and just remove the content that we had from the home page with those garbage can icons there we go so you get the idea we can clean that page up and add and remove content based on what we like you'll notice that every time we add a page it adds that page to our menu up there and you probably don't want more than five or six or seven items at the top of the page you can add sub menus by navigating around here and dragging things so rather than having all these things in the menu we might make the faq below the about menu so we can drag onto about and we've got sitting under the fact same with the history let's put it under the about section there so now we've got home about contact and team we might put the team on there too so there we go so now when we hover on about we've got our sub menu there so we can look at the faq the history and the team in that way so this is a pretty good way of building up pages and menu systems finally let's look at the footer we've got our footer down here we can click edit the footer now this appears on the footer of the whole website so every page will get that footer we can click edit there the suggested putting email address and phone number you can put any information you'd like in your footer i'm going to go ahead and put some info in there for the demonstration but that looks pretty cool the other thing we can do is change the background of the footer so we can have a choice of here we can have like some pre-formatted ideas i like this idea with the black or navy background and white text that matches our theme color i think that's pretty cool the other choice we can do is we can add a image background as well so we can add a nice dark image and use that as our background so lots of things you can look at for our footer i like the emphasis background that looks pretty good so just previewing what we've done so far it's all looking pretty good one thing i did notice was that you may want to use these empty sections of text to add a bit of padding to the page but by default the background the standard background is the text background so you can change it to emphasis one that'll give it the site background so it blends into the site you can also change it to emphasis too to give it a bit of contrast as well so you can add some design elements just with empty space in that way i might actually delete this and just have a tighter layout and the other option you could use is a divider you could put a divider in between blocks and add a little bit of styling in that way as well so feel feel free to play around with your layout and get that design that you're looking for so that wraps up building a website using google sites quite simple i'm pretty happy with what we could do in quite a short amount of time the next thing you might want is a custom email address using your domain name i've got a free method of doing that using zoho i'll put that right there the other way you can build websites which i really like is using wordpress much more functional much more flexible i've put my favorite word host cloudways i'll put a tutorial right there check that one out there's a free trial as well i'll put the link in the description so you can check that out if you want to use wordpress but otherwise thanks for watching i'll see you next time

Channel: IdeaSpot

Views: 9,611

Rating: 4.9529409 out of 5

Keywords: google sites, new google sites, google sites tutorial, google sites setup, build a free website on google, how to build a free website on, how to build a free website on google, google sites custom url not working, google sites custom templates, google sites custom theme, google sites menu, free hosting

Id: qEv22a9XfGM

Length: 19min 50sec (1190 seconds)

Published: Wed May 19 2021