How to create a Website in Google Sites for Free in 2020
the blog where we make educational
technology easy for you in today's blog
I'm going to answer that question.
Can you create a website for free????
and the answer is yes 😍😍😍😍😍😍
easy to create and that I can share out
to the world yes it's possible and in
today's blog we're going to do adjust
that so let's dive in.
I'm going to walk you through
Google Sites and we're going to look at
the entire process of creating a website.
I'm going to look at the headers the
pages and all the little details that
you need to understand in order for us
to create a website together.
Now I highly encourage that you to open a new window and
together we're going to start creating our websites now
before you even get started there's a
couple of things you need to consider,
First of all who is going to be your audience
why are you creating this?
website you need to think of their age
the demographics and also how they are
going to be accessing this website now
Google Sites is amazing and being
mobile-friendly but when you're
designing your website that's still very
important to keep that target audience
in mind in addition to this you're going
to have to decide what you're using the
website for is it going to be for
resources class materials or is it more
in a blog styled eportfolio format all
those things are possible with Google
Sites but it is going to require you to
commit some time now once you've
committed time into creating a website
it'll be very important to update the
website and since recently you are now
going to be able to even notify all the
viewers of your website when the website
was last updated this is going to give
them that sense that the website is
alive and new content is added regularly
now where do I begin there's a couple of
places where you can start you can type
in sites.google.com and that will allow
you to then create a new Google Sites
now Google Sites are files and these
files live in your Google Drive now that
means you can also use the app launcher
go to your Google Drive and create a
Google Sites file that way you can right
click and add a new Google Sites or
simply click on new Google Sites now the
first thing with any document is title
your document
let's give our website the name demo
website now we can do this at the top
now let's say that you'd like to do it
in your Google Drive same as with other
files simply right-click on the file and
then rename your file now this file name
will also appear on your title header
and we can change this later but for now
let's leave it at demo websites now this
file name will also become your website
name now these are not the same you we
have your file name at the top and our
website name is down below now let's go
ahead and give our website a name let's
call this my website you will now notice
your file name is still demo website but
your website has the name my website
Google Sites is as with any other Google
app very good for collaboration and
that's what we're going to do now
because you'll probably want to
collaborate with some of your colleagues
to create this amazing website now you
can find that in the top corner and
you'll see that same plus icon the plus
people so what we're going to do is
we're going to add some collaborators
now go ahead and click on that and then
we're going to add someone that is going
to get some editing privileges for our
website mind you this is not how you
share your website with the world this
is only for website editors so let's say
that you're creating a website for your
school you can add all your colleagues
to that and then they can add content
onto your websites this saves you time
and again it helps to keep the website
alive now as with any other file in
Google you can choose rather you want
someone to be an editor or a viewer now
this is where you set that up once
you've added your collaborators it's
time to start giving our website a
little bit of design now the biggest
design choices you will make are right
here and this is in your sidebar where
you're going to choose a theme now the
theme is going to decide which type of
foam so you're going to use and also
which overarching color you're going to
be using now you can add a custom color
but for now let's just stick to the
basics and let's choose our first theme
now they are limited in choice and the
fonts are limited in choice as well hope
this will be included in future updates
with Google Sites but for now we are
limited to these themes and these fonts
now we can add our own color and we can
use a hex code for that you will now see
your website has a different look and
overall feel and what we're going to do
now is hover over that title and we're
going to change this title into welcome
because this is our first page and it is
a welcome page so go ahead and type
welcome at the top and then we're going
to look at these different banner styles
now hovering over the actual banner will
give you an option to change the style
now we have four different styles we
have a very large banner we have a
header a smaller one or text only now
these can be different on different
pages now we can also add our own images
to these banners this is great when
you've got some really well-designed
images of yourself with a plain
background or you'd like to add your own
little background to this website it is
worth noting that you can also use
animated gif or gif files and this will
allow you to create a sense of animation
at the top I would highly recommend
exploring some cinemagraphs they will
make your website look alive and it adds
a personal touch to that website now if
you want to use your own image or gif
gif file then you simply hover over your
banner you find the change image and
then select upload this allows you to
upload your own image and it is now part
of Google Sites that's the top of our
website now let's scroll all the way
down and this is where we find the
footer
now the footer of Google Sites this is
the same across all pages this could be
used for a copyright notice or a simple
link to your social but you can change
the footer by simply clicking on that
plus add footer and then pasting in your
text or typing it manually you can add
images to the footer and links now you
will notice that this footer creates a
new horizontal block this is different
from the banner which is also a
horizontal block now as we add more
content to our Google Sites more
horizontal blocks are created these can
all be formatted in their own way
to do that you hover over one search
block and then at the left hand side you
can see that you can change the style we
have two different emphasis styles that
these depend on the theme you've chosen
and we can also upload an image here
again this can be a Jif or gif animated
file think carefully about which
emphasis styles to use and also where
you place them on your website because
as you scroll down these horizontal
blocks will become visible as your
visitors are on the website and we do
not want to distract from the actual
content on our websites let's add a logo
and favicon now our logo can be added at
the top left corner now in the top left
corner you'll see that there is an
option when you hover there that says as
logo but the logo will appear on every
page in the top corner of your website
this is where you can upload a file this
can be your own logo it can be a school
logo anything you'd like it to be I
would highly recommend that you create
your own logo you can use Google
drawings for that I'll leave some cards
that link to Google drawings tutorials
but if you've already got a logo go
ahead and upload that now we can also
add our own fav icon this is a little
icon that appears in your browser tab or
whenever you save your website in your
bookmarks and we can add that by
clicking on the three dots in the top
right corner once you've done that
you'll see that there's an option that
says add favicon simply click on that
upload a square-shaped
image and you're ready to go now you
will not see that favicon just yet
because it will only appear once your
website is published to the Internet at
the moment we're still editing so we can
only upload our favicon ready to go
but it will not be visible in our
preview but the last thing to do is to
decide where we want our menu do we want
to keep it at the top horizontal or do
we want to move it to the side and have
it as a vertical aligned menu this is
completely up to you and depends on the
sort of website you're trying to create
now let's move on to adding content and
pages to our website now before adding
pages I'd like you to really think about
how many pages you're adding because too
many pages will be distracting better to
limit the amount of pages and really
think about the content you're trying to
share
now once you know which pages to add
simply go to the sidebar where you have
a pages browser and that's where we're
going to click on that plus icon to add
pages as you're adding pages you will
also title these pages a new page will
be created in your workspace and you can
again set this up change the banner type
and start adding some titles now it is
worth noting that you can add sub pages
that is two ways of doing this now you
can either click on the plus icon create
a page and then drag and drop it on top
of another page you can also go to a
page that you would like to keep as a
parent page and then click on the three
dots next to it and click on add a sub
page this will create a page within that
page this will be reflected in your
navigation bar now let's say that you
want to create a page you want to link
to that page but you don't want the page
in your menu bar simple you can click on
the three dots and you can hide this
from your navigation you can still link
to it from outside sources or from on
another page but it will not appear in
your menu this is great for resource
pages or even private pages that you'd
like to share with some people but not
everyone now let's say that you've added
about four or five pages and you really
want to change the order they appear
well the same way that we can
drag-and-drop sub pages we can also drag
and drop our pages to appear in a
different order this is very handy when
you're trying to rearrange the pages
afterwards or when you've created all
your pages and now you're going to start
putting them into subcategories very
useful and very intuitive to simply
click drag and drop now let's say that
you have a youtube channel or a Twitter
and you want to put that into your menu
well you can also add external links now
again we're going to click on that plus
but this time we're not going to click
on a new page we're clicking on new link
this is an external link it could be any
link can be your YouTube channel and
then that link will be added to your
menu so for example you can have a menu
structure where you have your home and
then the second one is resources in
one of those sub resources is an
external link let's say that you no
longer need a page what can you do what
you can delete that page you can simply
click on the three dots and delete the
page mind you you can still restore this
but once you've moved on there is no way
of getting back to that page so I would
highly recommend that maybe you have a
page hidden from your navigation for a
couple of days maybe even weeks and if
you still don't need that page back then
you can go ahead and delete it now in
terms of setting up the actual content
on our page Google Sites makes it super
easy for us in our side menu there is an
insert menu and at the top of that menu
you'll see there's a number of layouts
now these layouts are templates we can
use for our websites so let's go ahead
and select the layouts and now we can
add content to this layouts you will see
there's a number of image placeholders
and we can simply click on those to
upload new images let's say that you
want to design the website from scratch
and you want to do everything yourself
no problem simply scroll down and you
will see all the different insert
options so let's go ahead and insert a
text box now and let's say that you want
to resize any of these elements this
could be a text button or image can we
do this yes we can we can simply click
on it and then any of these corner
points we can drag and drop it to
enlarge or minimize our elements you can
do this with images and you can do this
with texts mind you if you do it with
images there will be an automatic crop
but you can always reset that by simply
clicking on the undo crop button now why
do we want to resize well because it
makes it so much easier to move elements
around our page let's say that you've
added two images and a whole bunch of
text what can you do well you could
simply drag and drop any of those
elements and you can leave them either
above under or next to another elements
this is minimum effort and you can
always change it later now you will see
there's many other options here you've
got image carousels now that you can
insert you've got a divider that you can
use to break up the website but you can
also use these horizontal sections to
give your website a
design or a different feel you can even
leave an empty section with some empty
text and then give it an emphasis layout
to again add a personal touch to your
Google Sites now let's say that you have
an incredible amount of data or lots of
resources and you want to share all
these with people now you do not want to
create twenty pages and have them all in
the menu so what you can do is you can
create these twenty pages have them all
hidden from your menu and then we're
going to insert a table of contents now
where do we do that same menu insert
menu and then we find table of contents
this allows you to have all this
information on a websites whilst
remaining that clean look of the minimal
pages with still access to the resources
there are some limitations to Google
Sites and these are very obvious when
you're trying to change the font sizes
or font types or when you're trying to
add even more specified content like
specifically animated buttons or other
effects now in order to still do all
those things you can use embed HTML code
now I will write an entire blog on that
that you can watch or read in future, if you're happy with
standard buttons you can find those
buttons in the insert menu and again
that button will use that theme that
you've selected in order to have a color
or an effect now I really like using the
built in buttons to either a link to a
page or link out to another website you
can also link to anchors now what is an
anchor now an anchor is where you have a
long page with lots of different
subtitles and you want to link to one of
those subtitles but there is a
limitation here though if you are using
links to these anchors they will open up
in a separate tab
now if you want to link to an individual
anchor from your menu
you can do this as well now in order to
find these anchors you will have to go
into your preview window now once you've
created a website and you have your text
boxes and your titles all ready to go
simply open it up in the preview window
now as you scroll down and your hover
above one of those subtitles you will
see there is now a new icon that appears
this is a link icon and when you click
on that the anchor link will be copied
now when you paste this as a hyperlink
or within your menu structure or even
within a button this will link to the
subheading and it will automatically
scroll down the page to find that part
of the page that is relevant this is
great when you've got long pages with
lots of information and you want to link
to a specific part of that page now who
doesn't like video I love video If you got
YouTube videos and you can put YouTube
videos on to your Google Sites now how can
I do this well again there's two ways
that you can do this now the first way
you can do this is by going into your
insert side menu finding YouTube and
this will open up the insert menu now
there's only two options here you can
find a video by searching for it or you
can use one of your uploaded videos now
let's say that you have multiple accounts and video is
uploaded with one and your website with
another well then you will have to go
and get that URL from YouTube once
you've got that URL you're not going to
use the insert menu you're going to
double click on your website that's
where you're going to paste that URL and
Google Sites will automatically
recognize it as a YouTube video and
embed that video now this is great when
you're embedding videos of other people
they will still get two views and they
remain the author of that video they get
proper credits and you can use their
content on your websites I'm thinking of
websites that are shared with students
and parents where you've got lots of
little videos two resources maybe even
songs and tutorials that are helpful to
them now what else can we embed well we
can insert a calendar we can insert a
Google Maps all these things are very
easy to do you can simply click on that
side menu and far
what you're trying to insert now let's
say that you've got a document and this
is a brainstorming document and you want
to just give access to that document on
your website in a centralized area
well that too is possible simply go to
insert from Drive and then find the
document or file that you would like to
have on your website you can then resize
this so that is very clear for people
and that they can read the contents
whenever that file is updated it will
automatically show the most up-to-date
version on your Google Sites now the way
Google Sites allows you to embed
external content is there's two ways you
can either use the URL of that content
or you can use an HTML code now if
you're not really too sure about HTML
code simply try using the URL and Google
Sites will try to read it it's only when
things get a little bit more complex
there we're going to use the HTML code
now we're talking about social profiles
like your Twitter stream or even some
Facebook streams they will actually
provide you with an embed HTML code that
you can paste into that box we still
have to publish our website though
because at the moment only collaborators
and us can see this website now in order
to publish your website you're going to
have to go to the top and first of all
you're going to want to preview your
website so go ahead and click on the I
icon and now we can preview our website
we can see what it looks like on large
displays tablet displays and even
smartphone displays now make sure that
you check every single page so that you
can get a feel of what your website will
look like at any tweaks necessary for it
to work on all three formats and then
you can exit this preview by clicking on
the X once everything looks the way you
want it to look and you're ready to go
live click on that big publish button
now you can go ahead and click on
publish and then you are able to publish
either to the entire world or a few
select people now let's say that you've
already published your website and
you've added some changes well what's
important that you keep pressing publish
after every change you've made it
automatically saved the changes into
your file
these do not go live until you click
publish that means that you see changes
collaborate to see changes but the rest
of the world only sees these changes
once you've hit that publish button
let's say that you want to take it
offline altogether whether you can
always unpublish your website as well
and then all we want is a custom domain
now in order for you to get a custom
domain there's a number of domain
providers I would highly recommend
looking at domains dot Google because
that is a very easy to use domain
provider they not only give you a domain
but they also automatically add domain
privacy to it now if you go to another
domain provider I highly recommend that
you also purchase the domain privacy
because that will keep all your contact
information and address hidden from the
rest of the world now in order to
connect your domain to your website
there are two big groups that will have
to use a different way of doing it now
if you're part of G suite for education
or G suite account then on how you connect it to AG suite
accounts however if you have a private
Google account and you've created your
Google Sites with a private Google
account you too can connect your domain
to your Google Sites the only thing is
you'll have to use a slightly different
technique to do that first thing click
on the three dots next to the publish
button and click on custom URL this is
where you can now type your custom URL
now don't think it you're ready yet
because you're not finished you still
have to do some work in the backend now
go ahead and tap anywhere outside of the
screen once it says custom URL assigned
the next step now is to point your
domain to that website now where do I do
this with your domain provider let's say
that you've used domains don't Google
com go there and then find the DNS
settings if you've used a different
provider same thing if you've used
GoDaddy login to GoDaddy and then find
your dns settings you're now going to
look for a custom resource and you're
going to add a custom resource again
this will look different depending on
which provider you've used but they all
use the same terminology that
custom resource you're going to add is a
www resource you're going to choose the
type C name so we have WWC name and then
this is going to point to GHS dr. Google
hosted comm so we have a www cname
pointing to GHS dot Google hosted comm
now once you've saved all these settings
it can take between let's say half an
hour maybe even up to 24 hours for
everything to begin working and that's
it you now have a custom domain you have
your own website and you're ready to
share it with the world I hope you found
this blog helpful dive in to that
comment section below and let me know do
you enjoy these long-form blog you
want to see more in depth trainings like
this and what app would you like me to
look at next
also what are you using Google Sites for
are you using it for resources students
portfolios maybe even your online resume
let me know I would love to start a
conversation down below but that was all
for this blog and
I will see you in the next one thank you for reading
Great post!
ReplyDeletethanks a lot 😊
Delete