How to use Google Sites to Make Website with Domain

In this step-by-step tutorial, learn how you can create your own web site with a domain name, including .com, .net, .org, and many others.

I walk through how to use Google Domains to buy a domain and Google Sites to build the web site.

At the end, we publish the web site. By the end of this video, you’ll know exactly how to build your own website.

how you can create
00:06
your very own website and also get a
00:09
domain name so you can get a
00:11
com.net.org whatever top level domain
00:13
name you want
00:14
you can get at the kevin cookie company
00:17
we
00:17
surprisingly don’t have a website yet so
00:20
today i’m going to use this tutorial to
00:21
build a website for us
00:23
and then i’ll show you step by step how
00:24
i do it it’s extremely easy to do
00:27
you don’t have to know any coding it’s
00:28
all drag and drop it’s super simple and
00:30
it’s only going to cost
00:31
12 that’s the cost of the domain the
00:34
hosting the website creation
00:36
all of that is free all right let’s jump
00:38
on the pc and let’s get started
00:40
this tutorial is broken up into two
00:43
separate parts
00:44
first i want to show you how you can buy
00:46
a domain name and then second we’ll
00:48
build a website for the domain that we
00:50
purchase
00:51
using google sites if you don’t want to
00:53
buy a domain name don’t feel like you
00:55
have to
00:56
you can also just skip to the second
00:57
portion of this video where we build the
00:59
website
01:00
to buy a domain name there’s a search
01:02
field right here in the center of the
01:04
page where you can type in
01:06
your domain name today i want to buy the
01:08
domain kevincookiecompany.com
01:11
it’ll probably take you more time to
01:13
brainstorm a good domain name than to
01:15
actually buy it
01:16
now let’s see if this domain name is
01:18
available by clicking on get it
01:20
phew it looks like my domain name is
01:22
available this green
01:24
check mark indicates that this domain is
01:26
available
01:27
down below i can see a bunch of other
01:29
top level domains that i could purchase
01:31
like
01:32
net.org dot info but i really think dot
01:35
com is probably the best one to get
01:37
once i’m ready to purchase let’s add it
01:39
to the cart i can now see that i have
01:41
one domain in my cart let’s go up to my
01:43
cart
01:44
and i’ll go ahead and check out here on
01:47
the checkout page i can see that privacy
01:49
protection is turned on i want that
01:51
turned on by default
01:52
that basically means when someone looks
01:54
up your domain they won’t be able to see
01:56
your name
01:57
or your address i like having that on by
01:59
default there’s also the setting to turn
02:01
on
02:01
auto renew i want to make sure i don’t
02:03
let my domain name lapse so i’ll leave
02:05
auto renew turned on
02:07
down below google also gives you the
02:09
option for google workspace
02:11
this was also previously known as g
02:13
suite if you want to be able to send
02:15
email from your new domain you have to
02:18
get google workspace to be able to do
02:19
that
02:20
i don’t need to do that for now so i’m
02:22
not going to check that and i’ll simply
02:23
purchase the domain
02:24
let’s click on check out right here on
02:27
the landing page once i purchase my
02:28
domain
02:29
there’s a callout here for create a
02:31
website let’s click on build website
02:33
when i click on build website i have two
02:36
different options
02:37
i can build a new website and in a
02:39
moment we’ll go through this process to
02:41
see how this works
02:42
over on the right hand side i can also
02:44
forward to an existing web page
02:47
this is something that i recently did
02:48
with a domain name kevinstratfor.com
02:51
here for example if i type in
02:53
kevinstratfor.com and hit
02:54
enter i’ve set this up to forward to my
02:57
youtube account
02:58
today we want to build a new website so
03:00
let’s click on the text that says build
03:02
website
03:02
next this drops me on another site where
03:04
i can choose how i want to build my
03:06
website
03:07
and there are a few different options
03:10
you can use a service called wix and
03:11
they have very professional looking
03:13
websites
03:14
however you’ll have to pay wix to be
03:15
able to use this service
03:17
there are also other services like
03:18
shopify if you want to set up a shopping
03:20
cart and maybe you have a business
03:22
you can also set up wordpress and this
03:24
is hosted by bluehost so that carries a
03:25
cost
03:26
then you have two free options in the
03:28
bottom left-hand corner
03:30
you can set up a blog for your new
03:32
domain that’s powered by google’s
03:33
blogger service
03:34
or you could set up a simple site
03:37
powered by google sites and today we are
03:39
going to set up a simple site
03:41
now it says simple site here but you can
03:43
create some
03:44
pretty good looking websites and we’ll
03:46
walk through how to do that
03:47
this opens up some of the benefits of
03:49
using google sites and i’m convinced
03:52
this looks like a pretty good option to
03:54
try out
03:54
next let’s click on start new site we
03:56
now have a blank canvas and we’re going
03:58
to create an amazing
04:00
website today i see the file name up
04:02
here is kevincookiecompany.com
04:05
you can change this to whatever you want
04:07
this is more to help you navigate back
04:09
to your site
04:10
project down here is the header of our
04:13
page and let’s start filling this
04:14
out up here it asks me to enter a site
04:17
name so i’ll type in the kevin cookie
04:19
company
04:20
as i hover over i see that there’s text
04:22
here that says
04:23
add logo let me add the kevin cookie
04:25
company logo by clicking on this
04:27
this opens up the settings dialog and
04:30
right here i see that i can upload a
04:32
logo let’s click on this
04:33
this opens up the windows file picker
04:35
and i have the kevin cookie company
04:37
small logo here
04:38
i’ll select this and then click on open
04:40
check that out that’s a pretty nice
04:42
looking logo
04:43
now down below there’s something called
04:45
alt text alt text is if someone uses a
04:48
screen reader and maybe they’re unable
04:50
to see this logo
04:51
it’ll use the alt text in place of it
04:53
also if you hover over it that’ll also
04:55
show the alt text
04:56
now one of the cool things is down below
04:58
my logo google looks at the logo and it
05:01
picks out the primary colors used in the
05:03
logo and i could choose one of these
05:05
colors as my theme
05:06
i’ll go with this blue color and that’ll
05:08
apply it to the theme that i use when i
05:10
build out my website
05:12
down at the very bottom there’s also
05:14
something called a fav
05:15
icon a fav icon is this icon that
05:19
appears alongside a tab
05:20
in your browser and here too we can also
05:23
upload an image for this i’ll click on
05:25
upload again
05:26
this opens up the file picker and i’m
05:28
going to use the same small
05:29
logo as the fav icon and then click on
05:32
open
05:32
here now you see the icon that’ll be
05:34
displayed in a browser tab
05:36
before we leave the settings dialog i
05:38
want to click over on
05:40
announcement banner at the kevin cookie
05:42
company the holidays are coming up and
05:44
this is one of the most
05:45
important times of the year for our
05:47
business with a banner we can show
05:49
some type of text across the top of our
05:52
website
05:53
i’m going to toggle on show banner and
05:55
here i can choose a banner color
05:58
i could go with one of these predefined
05:59
colors or i could even customize the
06:02
color
06:02
now i’ve always found that when a
06:04
website has a red banner that
06:06
really grabs my attention so i’ll click
06:07
on this red color
06:09
next i can type in a message and this is
06:12
going to be a message promoting
06:13
our holiday deal order your cookies
06:15
today for the holidays
06:16
and use promo code hungry for a one
06:19
dollar discount
06:20
one thing you’d be amazed about is how
06:22
much more people order when you give a
06:24
one dollar discount
06:25
i can also add a button and this is
06:28
basically a call to action or something
06:30
a visitor can click on and i could
06:32
define
06:32
a link for that let me type something in
06:34
i typed in order now and i’ve also
06:37
included the website kevinstratford.com
06:39
later on i can replace this with an
06:42
order page
06:43
i could define whether it opens in a new
06:44
tab or not i’ll set it to open up in a
06:46
new tab so people stay on the kevin
06:48
cookie company homepage
06:50
here for the visibility i could set it
06:52
to all pages or the home page only
06:54
i’ll just set it to the home page i’m
06:56
now all done in settings so let’s click
06:58
on x
06:59
here now you can see my banner on the
07:01
top of the page and that red
07:03
really does grab your attention i think
07:05
this is going to drive
07:06
a lot of sales my web page is starting
07:09
to come together i have the top header
07:11
all in place
07:12
next i have this big header section and
07:15
google makes it
07:16
extremely easy to edit what this looks
07:18
like when i hover over i see here that i
07:20
can modify the header type
07:22
when i click on this i can make it
07:24
smaller i can insert a banner which i
07:26
had before
07:27
a large banner or i could even insert a
07:29
color so once again
07:31
all you have to do is click drag and
07:32
drop and you can customize what your
07:34
website looks like
07:36
i’m okay with the banner so i’ll leave
07:38
that as is instead of showing text here
07:40
i’d prefer to show an image here
07:42
i’ll click on this text and here i’ll
07:44
click on remove
07:46
that removes the text and it leaves the
07:48
background image
07:49
next over on the right hand side i can
07:52
click on the insert tab
07:53
and i see all sorts of different types
07:55
of things that i can insert and in a
07:56
moment we’ll start going through what
07:58
some of these things are
07:59
but before we do that i want to insert
08:01
my logo into this header space
08:04
let’s insert an image so i’ll click on
08:06
images
08:07
next i’ll click on upload this once
08:09
again opens up the windows file picker
08:11
and for this one i’ll select the kevin
08:13
cookie company logo and click on open
08:15
i’ve now inserted my logo but it’s not
08:17
in my header
08:18
luckily all i need to do is click on it
08:20
and i see this drag
08:22
icon appear i can take my logo and i can
08:25
drag and drop it
08:26
wherever i want to put it on my page
08:28
i’ll drag it up into the top header
08:30
and center it and then release and here
08:32
you see my logo
08:33
the logo right now is a little small
08:36
compared to the size of the header
08:37
i can click on the logo and i see these
08:40
circles appear
08:41
in the corners i can adjust the size of
08:44
my logo so let me adjust it so it’s a
08:46
lot bigger and it fills up the header
08:48
i’ll try to keep the same aspect ratio
08:50
and here now you see the logo
08:51
is a lot larger once again i’ll position
08:55
it so my logo appears right in the
08:57
center of the top
08:58
whenever i click on different objects
09:00
that i’ve inserted on the page i see
09:02
these different controls that appear
09:04
i can crop the image uncrop i could even
09:06
insert a link and i have a few
09:08
additional options the last tweak i want
09:11
to make in the header is i want to
09:12
change this image
09:14
over here i can hover over the header
09:16
and then i see an option to change the
09:18
image
09:18
when i click on this i can upload like i
09:20
did with the logo or i could select an
09:23
image let me click on select image this
09:25
opens up a select
09:26
images prompt and i could select images
09:29
that google provides right here i could
09:31
also pull in images from a url i could
09:33
search on google or i could even use my
09:35
own images that i have stored in google
09:37
drive
09:38
you can get images from many different
09:40
places now i’m looking through the
09:41
gallery here and i kind of like this
09:43
brown background i’ll select that and
09:45
then click on the select button
09:47
this now inserted my background image
09:49
and one of the neat things is because i
09:51
have an
09:51
image or if i had text on top of this
09:54
you’ll see down in the bottom right hand
09:55
corner
09:56
google automatically adjusts it for
09:58
readability so here i have light colored
10:00
text on top of this background
10:02
so it automatically dim to the
10:04
background for me so google sites is
10:06
really smart
10:07
and helps me make my website look good
10:09
my header is now looking pretty good but
10:12
i need to start adding some content to
10:14
the website itself
10:15
over on the right hand side once again
10:18
within the insert tab
10:19
you’ll see all the different types of
10:21
content that i can insert on the page i
10:23
could insert text
10:24
images items from drive i could even
10:26
embed items
10:28
down below and what makes my life a
10:30
little bit easier
10:31
google has some of these pre-created
10:33
layouts
10:34
that combine multiple items so here this
10:36
first layout will pull in an image and
10:38
also text and a header
10:40
let me click on this first layout and
10:42
i’ll insert this onto my page
10:44
this now inserts another section into my
10:46
page and when i hover
10:47
over this section over on the left hand
10:49
side i have a few different controls
10:52
i can change the section background and
10:53
in a moment we’ll do this
10:55
i can also duplicate a section or delete
10:57
a section if i didn’t want it
10:59
now over here i see a placeholder let me
11:02
click
11:02
on the placeholder and we’ll see all the
11:04
different types of content that i can
11:06
insert here
11:07
this is the official kevin cookie
11:09
company homepage let me insert our
11:11
commercial from youtube by clicking on
11:13
youtube
11:14
this opens up a prompt where i can
11:16
search on youtube
11:17
i’ll look for the kevin cookie company
11:19
commercial here i see the kevin cookie
11:21
company official commercial i’ll select
11:23
that and then click the select button
11:24
this now inserts my youtube video on my
11:27
home page how slick is that
11:29
over on the right hand side i can
11:31
customize the text to go alongside my
11:33
commercial let me type in our slogan
11:35
i’ve typed in our slogan and when i have
11:37
the item selected here too you see that
11:40
i can adjust the size of this text box
11:42
i can also click up here if i want to
11:44
change the style here i could change it
11:46
to a heading or i could change it back
11:48
to
11:48
a title i could also go through bold
11:50
italicize and you have
11:52
all of your typical editing tools
11:54
underneath my title i want to insert
11:56
some text and i’m going to just type up
11:58
some text about the level of quality
12:00
that goes into each cookie at the kevin
12:02
cookie company
12:03
i’ve now finished the first section of
12:05
the website and i want to add another
12:08
section
12:08
here too i’m going to click on this
12:10
layout i like using the layouts because
12:12
it combines a number of elements
12:14
together
12:14
i don’t want another image i want a
12:16
little bit of variation so i want to
12:18
show
12:18
how you can move things around i want
12:21
this placeholder to appear on the right
12:23
hand side and i want all of the text on
12:25
the left hand side
12:26
i can simply click on this item and i
12:28
can drag it to wherever i want it
12:30
so i’ve now placed this on the right and
12:32
i have my text over on the left
12:34
i also want to have a little bit of kind
12:36
of a zebra effect or alternating colors
12:39
going
12:39
this is white here so i want this to
12:41
have a nice grayish color
12:43
here i’ll click on this section
12:44
background over on the left hand side
12:46
and i’ll apply a little bit of emphasis
12:49
to this section here
12:51
now i think it’d be a nice touch on the
12:52
homepage to include an image carousel
12:54
that shows some of the
12:56
fine details of our delicious cookies
12:58
let’s insert an
12:59
image carousel this opens up a prompt to
13:02
insert my images i’ll click on the
13:04
plus icon i have the option to upload or
13:06
select i’ll select some images i’m sure
13:08
i could find some amazing pictures
13:10
online and pass them off as kevin cookie
13:12
company cookies
13:13
within select images i’m going to use
13:15
the google image search and i’ll simply
13:17
type in cookies and let’s see what comes
13:19
back one of the really nice things is by
13:21
default it only shows images that can be
13:24
used commercially so i could use these
13:26
freely on my website
13:28
these look really good and i’ll go
13:29
through and select a few cookies that i
13:31
think look delicious
13:32
i’ve now gone through and selected all
13:34
of my images next i’ll click on insert
13:36
this looks good let’s click on insert
13:38
again and this will create my image
13:40
carousel
13:41
here too right now the dimensions are
13:43
pretty large for an image carousel so
13:45
just like with all of the other items on
13:47
this page
13:48
i can adjust the dimensions using these
13:50
blue circles and i’ll pull this in and
13:52
tighten it up a little bit
13:53
for my image carousel down below i don’t
13:56
want it just sitting by itself so i’ll
13:58
insert some text right here to insert a
14:01
text box
14:02
i’m going to type in cookie gallery with
14:04
photos let me highlight this and i could
14:06
set a style
14:07
i’ll also set this to a title style and
14:10
here i can center align my text
14:12
now just like with all of the different
14:14
items on this page i can click
14:16
and drag it above my gallery so now i
14:18
have a nice header for this image
14:20
gallery
14:21
my page is really starting to come
14:22
together and the home page of the kevin
14:25
cookie company
14:26
really looks fantastic i want to add
14:28
some additional pages though i can’t
14:30
just have
14:30
a one-page website over on the
14:33
right-hand pane again there’s a tab for
14:35
pages let’s click on this
14:37
down below i can add new pages or i
14:40
could even link to a page
14:41
let’s click on new page for the new page
14:44
i want to call this
14:45
recipes and then i’ll click on done this
14:48
now adds a new page and i see a page for
14:51
recipes and this shows me the recipes
14:53
page
14:54
if i click back on home up above this
14:56
will bring me back to the home page
14:58
and here you’ll see that i have this
14:59
navigation link on the top of the page
15:02
over on the left hand side when i hover
15:04
over this new navigation structure
15:06
there’s a settings gear let’s click on
15:09
this
15:10
this opens up settings again and i have
15:12
different options for how
15:13
i show the different navigation links
15:16
right now it’s set to show on the top
15:18
let’s see what it looks like if i select
15:19
the side when i click the side it
15:22
disappears from over here and now i get
15:23
a hamburger menu and when i click on
15:25
this
15:26
this shows my in-page navigation i
15:28
personally prefer to leave it on top
15:30
i think it’s a little bit more
15:31
discoverable let me click on the
15:33
settings gear again and i’ll add it to
15:35
top i also have a few different color
15:37
options i can make it white
15:39
i can make it black or i could simply
15:41
make it transparent
15:42
i think transparent looks the best so
15:44
i’ll stick with that
15:46
next let’s go in and build out the
15:47
recipe page i’ve now built out the
15:50
recipe page and i built this the same
15:52
way we did
15:52
on the home page where i added a section
15:54
i added an image
15:56
and some text for the first recipe we’re
15:58
going to show the recipe for chocolate
16:00
chip cookies now you might be wondering
16:02
why am i giving away the recipe for this
16:04
isn’t that a trade secret it’s true but
16:06
we recently started selling chocolate
16:08
chips and this recipe uses
16:10
a lot of them so i think we could really
16:12
drive some sales of that
16:14
now i want yet another page where we can
16:16
list out the chocolate chip cookie
16:18
recipe
16:18
so once again i’ll go to the bottom
16:20
right hand corner and i’ll add one more
16:22
page
16:23
i’m going to call this page chocolate
16:25
chip and then click on done
16:26
this now adds another page in the
16:29
navigation
16:30
on my page one of the things you’ll see
16:32
is across the top navigation it added
16:35
another tab for chocolate chip i don’t
16:37
want this to be a top level item in the
16:40
navigation i want this to be a
16:41
sub page of recipes can i make it a sub
16:44
page yes so
16:45
over on the right hand pane let’s click
16:48
on chocolate chip and i can click
16:50
and drag it into recipes this turns it
16:53
into
16:53
a sub page so now you see that chocolate
16:56
chip is no longer on the top level
16:58
navigation
16:59
when i hover over recipes you see
17:01
chocolate chip now
17:02
is one of the options i can go there and
17:04
this drops me on the chocolate chip page
17:07
over on the right hand side if i want to
17:09
navigate throughout my
17:10
expanding website i can simply click on
17:12
the item and that will bring me to the
17:14
associated page
17:16
on the recipe page i want to link
17:18
chocolate chip
17:19
to the chocolate chip cookie recipe how
17:21
do we do that well up on the top tabs
17:24
let’s click on insert and let’s scroll
17:26
down the list of all the different items
17:27
that we can insert
17:29
here i want to insert a button let’s
17:31
click on button
17:32
here i could type in a name for the
17:33
button and i’ll simply say
17:35
c recipe down below i can select where i
17:39
want to link this button
17:40
when i click on link it shows me all of
17:42
the different pages in my site
17:44
i want to link it to the chocolate chip
17:46
page so i’ll click
17:47
on this next let’s click on insert this
17:50
now places
17:51
a button in a new section i want it to
17:53
appear in this section
17:54
and just like before we can simply click
17:56
on this button and we can drag it
17:58
into this section up above so here now i
18:01
see the chocolate chip cookie with the
18:02
button included
18:03
and as i go through i can include other
18:06
recipes in here
18:07
as well now that i’ve inserted a button
18:09
there’s nothing currently on the
18:10
chocolate chip sub page
18:11
let’s click over on the right hand side
18:13
on pages and now click on chocolate chip
18:15
this drops us in the chocolate chip page
18:17
and i can now include the recipe
18:19
let’s go up to insert and here i want to
18:22
insert one of these
18:23
two column structures let’s click on
18:25
this i’ve now created my chocolate chip
18:28
recipe page and here you can see all of
18:30
the ingredients and the baking
18:31
instructions
18:32
i think this layout works really well
18:35
now that i’m all done with this let me
18:37
click
18:38
over on the right hand side and let’s
18:39
see what we can do with themes
18:41
when i click on themes i can very
18:43
quickly experiment with different themes
18:45
and see
18:46
how it impacts my page here i could jump
18:48
between
18:49
all these different theme types and here
18:51
immediately you see how it’s changing
18:53
i’m gonna go back to simple and here too
18:55
you could choose what color you want
18:57
now previously google selected this
18:59
color from my logo so i’m going to stick
19:01
with this for now
19:02
i could also choose what type of font
19:04
weight i want to use throughout my
19:06
experience
19:06
so once again it’s super easy to
19:08
customize what your
19:10
page looks like before we publish our
19:12
page i want to show a few
19:13
other things that you can do with google
19:15
sites up on the top bar you have this
19:18
ellipses when you click on this we can
19:20
look at version history for the page
19:22
so let’s say that maybe in a month or
19:24
two i’ll go back and make more changes
19:26
but maybe i didn’t like them i can
19:27
always go back to a previous version
19:30
another neat feature is over here once
19:32
again on the top bar i can preview what
19:34
my site looks like
19:36
here i could click on home and i could
19:38
see what the home page looks like this
19:40
is all looking pretty good
19:42
down below right now i’m previewing it
19:44
on a large screen display
19:46
i could also click into tablet to see
19:48
what my site looks like on a tablet
19:50
and i could even adjust it down to a
19:52
phone to see how it looks
19:54
so it looks great regardless of what
19:56
type of device you’re on
19:58
lastly you don’t have to work on a site
20:00
in isolation i have lots of recipes i
20:03
need to add a lot more content to this
20:04
website and it’s going to be a lot of
20:06
work for me to do
20:08
up on the top bar i can click on this
20:10
share with others link
20:11
and i can invite other people to work on
20:14
this site with me
20:15
i’ve now finished building out my site
20:17
and i’m just about ready to publish it
20:19
let’s click on one more thing before we
20:21
publish it up on the top bar let’s click
20:23
on settings
20:24
and then go over to custom urls here i
20:27
see that my custom url
20:30
kevincookiecompany.com is associated
20:32
with this google site that’s exactly
20:34
what i want so i’ll leave that as
20:36
is if let’s say you build a google site
20:39
and later on you want to associate it
20:41
with a domain
20:42
you can come through here to tie your
20:44
google site to your domain
20:46
let’s click on x and i’m ready to get
20:48
this out to the world let’s drive in
20:50
some sales and really spread the word
20:51
about the kevin cookie company
20:53
let’s now click on publish this now
20:55
allows me to publish to the web and here
20:58
it lets me type in a web address and
21:00
this is a web address under
21:02
sites.google.com now this site doesn’t
21:04
really matter that much because i’m
21:06
going to be using
21:07
a custom url now it does say that i have
21:10
to wait up to 48 hours for the site to
21:12
be viewable here
21:13
but i’m okay waiting by the time this
21:15
video comes out this website will be
21:17
live
21:18
now let’s click on publish now that i’ve
21:20
published the site i could go through i
21:22
can make additional edits and once i’m
21:24
satisfied with all of those edits i
21:26
could publish the site again
21:27
and then whatever changes i make will go
21:29
live to the world
21:31
i’ve now navigated to the
21:33
kevincookiecompany.com and this site is
21:36
live look at this it is a beautiful
21:39
website
21:39
i can navigate through here i’m going to
21:41
click into recipes and i could jump into
21:43
my chocolate chip cookie recipes so i
21:45
have multiple pages on this website
21:47
but that’s really how easy it is to pull
21:50
together your own domain
21:52
and your own website it’s extremely easy
21:54
you don’t have to know any coding at
21:56
all all right that was a quick look at
21:58
how you can build your very own website

LEAVE A REPLY

Please enter your comment!
Please enter your name here