Transcripts
1. Course Introduction: Hi, everyone, and
welcome to the launch your website with
CloudFlare Pages Course. My name is Anor Pretoris and I'll be instructor
for this course. So just to give you a brief
rundown of what we'll do. So essentially, we are going to, as I mentioned in the course, launch our website
with CloudFlare Pages. But in terms of the
technologies and such, we are going to ensure that we ensure that we have
a project ready to go and that project will
then be uploaded to a Github repository and
synchronized via Github desktop. As you can see here, I have a very simple
application that has, as you can see a
style dot css file, script dot js file and
an index dot HML file, and all of these form together as part of my
sample application. Ideally, you should already
have a project that you want to apply and deploy. Now, essentially, once you
have this project set, you're then going to
synchronize it via GitHub desktop so that you can push it to your
GitHub repository. After which you're
then going to create a CloudFlare pages
account to which you're then going to go on
ahead and ensure that it gets built and then it's
then going to be deployed. After which you will be able to access it through an
auto generated domain name, which is free,
which you can then visit to access your website. As you can see here, I have a very sample website
here upfront. So that is essentially
what you're going to be learning
in this course, and CloudFlare pages is notorious for being
exceptionally fast. So it's going to be a very
easy process if you just want something to chest and get
up and running quickly. So that's it that's what we'll be focusing
on in this course, and I hope to see you in
this course. Goodbye.
2. Setup a GitHub account: Hi, everyone, and welcome to
the next hands on activity, which is going to be
focused on creating a Github account and ensuring that everything
is set up correctly. The first thing you
want to do is enter in Github in your search engine. Here I'm on Google and I'm
going to say Google search. Then you want to select this
link here that says Github. Okay. Now, once we're
on the GitHub webpage, we then want to go
ahead and click on Sign Up in the top
right hand corner. And then, as you can see, we
can create our free account, and we can do so
by signing up for Github by continuing
with a Google account, with an Apple account, or you can manually type in your email, your password, your
username, your region. And of course, you can check the following options down here before saying
create your account. So what I'd recommend you do now is go ahead and do just that. So decide how you want to sign up for your Github
account and sign up. You may need to go on
ahead then and complete a verification puzzle and then to verify your
email as well. So there are a few ways in which you may need
to go about it. But after you've done so,
you'll then at the end, be redirected to your
Github dashboard page, and that's where we'll
be going to reconnect. So for the meantime,
go ahead and set up your Github
account accordingly, as I'm showing on my screen now. Alright, so welcome back. So congratulations if you
got to this step here. So as you can see now,
we are now on the step where we are on our
Github dashboard. So if you see this
page right here, well done, you've gone ahead and set up your GITHub account. It has been created, and
it's fully ready to go. And let's go ahead and get
started in the next lesson.
3. Create a GitHub repository: All right. Let's continue now and create our first
Github repository. You're probably wondering
what is a repository. A Github repository
is essentially a centralized location to
store our project source code. That is exactly what
we're going to do now. We're going to create a
repository to do just that. We can say create repository. As you can see there, it's
going to show the owner, so this is going to be our username associated
with our Gu account, and we want to give
our repository name. I'm going to call
it sample repose. You can give it any
name you desire and any description
that you desire. So here, I'm going to
say website, launch. App. So you can give
it only description. Now, under the visibility, just to ensure that
the deployment goes smoothly the first time, we're going to set it to public. There are times where
you might need to integrate more permissions if you decide to set it to private, but we're not going to go into so much detail in this course. Then you can also add
in a read me file, so make sure that you set it on, and this is essentially
going to allow you to write a longer description
about S project here. Once you're happy
with everything, you can say create repository. And that's going to create our
repository just like that, and we can see the
entire structure here, so it will be on the
main branch here. We can see on the
top left corner our associated name with associated repository
that we've just created and the visibility
on public. All right. So that is how you can create
your Github repository.
4. Setup GitHub Desktop: Right. So the next thing
that we want to do is essentially set up
Github desktop, which is essentially
an interface that's going to allow
us to synchronize our source code from our local machine to our
Github repository online. So think of it as bridging
our source code from local to a more online based
environment. All right. So what you want to do in
your search engine is type in GitHub desktop download,
say Google Search. And here we'll see
an option that says download GitHub
Desktop, for clarity, you can investigate the URL here which says
desktop.github.com, forward slash
download fordslash. Now, I'm on a Windows device, so I'm going to say
download for Windows. However, if you are on
Mac, if you scroll down, it might show you here automatically or it's going
to show you down here, Mac to install it for Macaws. You can download for
Macaw just down here. So you have that
option in play here. All right. So what we can do
now is download for Windows, and that's going to download the setup installer,
you could say. So it's going to take
a few moments here. So let's just wait for that. And once it's been downloaded, we can go ahead and
install it accordingly. So let's just wait for that. And there it is. So here is
Github Desktop setup EXC so we can select that Okay. And then it's going
to go on a hedge and install it on our machine. So it does take a few moments, so we can see it's just
currently loading, and we just want to wait
for that to set up. Okay. And here it is. Here's the animation
screen here. And you can see down
here that it's currently installing and we can see
that Mini progress bar. So let's just wait for this to be installed on our machine, and then we can go from there
Alright, so welcome back. So now we can see that
it has been installed, and we'll see this, you could say interface here
to get started. So well done, you
have successfully installed Github desktop. Now, it does sometimes also add a shortcut onto
your desktop as well. So if you were to
minimize everything, you can then see we have
GitHub desktop here as well. So well then on
getting to this point.
5. Synchronise our source code: Alright, so the next
thing that we want to do is to synchronize our project with GitHub Desktop and also our GitHub repository. But the first thing you want
to do is we want to connect GitHub Desktop to GitHub itself. So let's do just that. So we can go to
file, then options. After which you want to
say sign into github.com, make sure you selected accounts. So you can select that option. Then you want to sign
in with your browser. Go ahead and say continue. And then it's going to
verify the session here. So we're currently signed in via our GitHub account,
as you can see here. So we want to continue
to verify that session. Then we want to authorize GitHub desktop to access
our repositories, data, workflow, et cetera, so you want to authorize that. Then you can say
open GitHub desktop, and there we can see
that it's now linked to our repository here
called sample repo. So make sure that you've gone
ahead and done just that. All right. Now the next
thing we want to do is we want to clone a repository
from the Internet. Currently, let's
just take a look at the workspace after
closing everything here. Currently, I have my project on my desktop in a file known as my project and this contains a simple
index on HML file, CSS, and JavaScript files. Essentially, what I want
to do is I want to go on ahead and ensure that they uploaded to this repository. Now this repository, we can
clone onto our desktop, and then the first time, we can just drag our files
into that folder here, and then from that point onward, we're going to be working
within that singular file, which ironically has the
same name as our repository. This is going to make sense
when I demonstrate it. So to do so, we want to go
ahead and open GitHub desktop. Then we want to say clone a
repository from the Internet. We want to select our
repository here and say Clone. Okay. So we've then gone ahead
and cloned our repository. So now if we were to minimize, we can see that we
have it here on our desktop now known
as sample dash repo. So what I want to
do is visualize that in Visual Studio code. So I'm going to click
on the top left icon, go to File, Open folder. Desktop, and I'm going
to select Sample repo. And as we can see, by default, it's going to have
a read me file, and this is the file that we went ahead and
created by default. So this is a confirmation here. Now, the next thing
that we want to do is just move all of our files. So ideally you should already have a project that
you want to work with. So you can open that project folder that you're working with. So here I'm opening my project. And here I have my files
index, script and style. I'm going to highlight that
and move it to sample repo. We just have to do this once. And now we're going
to permanently work with Sample Repo
now because it is connected and synchronized with GitHub desktop and Github. We just now need to actually
upload our source code. But now if we go
to GitHub Desktop, we can see all of
these files in place. Index HML Script JS and startup
CSS are now all in this particular as we can see folder and it's being picked up by GitHub desktop,
this interface. We can see if we open
Visual Studio code, there are those
files in place now. Perfect. Now what we want to do is we just want to do
the synchronization now. So we want to go ahead and push all of these
files here and upload it to our Github repository so that it is accessible
via Github. So here we need to give
it a name for a summary. So here I'm going to
say project, upload. And you can add a
description here, and you want to commit
your three files to the main branch. And of course, that
correlates with our repository's main
branch here as well. It's going to appear here. And then you want
to say push origin, so this is going to push all of our files onto our main branch, which is going to appear within our repository known
as sample repo. And if we were to refresh
our repository here, here we can see we have
everything in place here. We have all of our files, so we're now fully synchronized.
6. Setup a Cloudflare Pages account and launch your website: Now the next thing that we
want to do is to set up our CloudFlare account and to essentially
launch our website. First of all, you want
to go to Google and type in CloudFlare pages. Then you can say Google Search and here you want to
select CloudFlare pages. Okay. And the next thing you
want to do is say sign up. And then you can decide, again, how you want to
sign up for your account. If you want to go
Google, Apple, Github, or if you want to enter
in your email and password directly as is,
it's really up to you. So for clarity here, I'm going to tell you
what I am going to do so you can roughly see the
same sort of markup in the end after you verify your email and such as
I'm going to manually put in my email and I'm
going to put in my password and verify I'm human and I'm going to sign up because I want to show you how you can set up with Github. Instead of doing it
the easy way here, I do want to show you
the you could say default format as
to how to do it. So that's the
reasoning behind that. So I'm going to go the
email and pass for Drew. I recommend you do the same, perform the verification
and sign up. Then you would need to go to your email and also
verify your email, click a link there to verify and it's
going to take you to the page that I am going to show you after all of
that has been completed. So for your first time, I'd recommend just
doing it the manual way and then when you're
more comfortable, you can go directly
the Github route, but that is the reason
that I'm going to be doing it longer way. So let's go ahead
and get started. All right, welcome back. I trust after you
have clicked on the verification button
or link in your email, you'll be redirected eventually to a page that looks like this. Now, this is what I mean earlier
by doing the manual way. So here we can say
connect Github, and that's going to go on
ahead and prompt us to install an authorized CloudFlare and the workers and pages, and you can decide if you want
it for all repositories or only select repositories and to select it. So it's
really up to you. So here, I'm just going
to say select repository. Then I'm going to say
install and authorize. So that's just going
to take a moment. Here it's going to show
green now and then we can proceed to continue
with Github now. Then we can see that it has
selected our repository here, of course, can just click
on that and say next. Then we can just scroll down and see everything as
it's being said here. The project name,
the repository. Additionally, you can add in build commands and adjust here, but we're going to
leave everything on the default and say deploy. This is essentially to
launch our application, you just want to go ahead and might need to add something
here. Let's just check. Uh, yeah, that looks good. So you just want to go ahead and deploy your application here. So it might be prompting us to adjust project name if
it doesn't say deploy, so I'm just going
to say here app. Then scroll down.
Now, in the event, as we can see here, which
is a good lesson that the deploy option or button
here doesn't respond, what you can do is just
refresh your page here. Okay. You can just go ahead and see connect
with Github again. Just select your repository, go to the next stage, and you just want to
leave everything as it is and see deploy. Sometimes that bug does
sometimes occur and it's good that we're seeing
it for the first time here. That's just something that I want to mention that can occur. As you can see now,
it's just setting up our repository and it's just
going to take a few moments. Do keep that in
mind if it happens. But unfortunately, in my case, it happened to be that it
wasn't corresponding to me. Here we can see
everything's been initialized in the
build environment. Stalling and our application is on the verge of
being deployed. All we have to do is
just wait a few moments. I think it'll take
maybe 20 seconds. If it doesn't pause the
video and then we can go on a hedge and wait
for it to be completed, but it shouldn't take
we go 20 seconds. There we go the build
has been completed. It has been deployed
our application. Now what we can do is
go to domains here. You can right click and
open that in a new chat and essentially CloudFlare
is going to provide us with a default. You could say how can I say
a default domain name here? As you can see, it's
known as the Worker URL. It's public, and you
can actually visit it. So if I right click and open the Link in a New
Tab, here we have it. Here is my portfolio
up and running and accessible with a default domain name
that's been assigned to me. So that's it, so you can create a CloudFlare account
and how you can essentially deploy
your application from a Github repository. All right, guys, so that's
it for this lesson.
7. Managing source code updates: All right. Now, in
this next lesson, we're going to focus on managing
our source code update. So let's say that
there is a change that we want to make
to our application, and we want to
redeploy everything. So everything is going to be automatically integrated
now a Cloudflare. So you don't really
have to do anything. It's going to be
automated. Now, I'm just going to show
you a test here. So let's say I adjust this, just say hello, I'm
Ono as an example. So I'm going to go to
my source code here, and I'm just going to make
this very minimal change here, and I'm just going
to say hello, I am ono. Just like that. And we can see it's
been modified. So if we look in our
directory modified, if we go to GitHub Desktop,
it's going to pick this up. So the red here, of course, was the old code and the green
is the replacement code. So it's going to say
update index to HML. So sometimes the hitle here
will be dynamic and update. So let's commit this and
push this source code now. Okay. And if we go back
to our repository, just say dismiss this
and we can see it's going to push this
adjustment here, update index dot
HML to Cloud FIRE. So if we can see here, we can
click on Build in progress, and we can see
this is pertaining to Update index dot HTML, which is being
pushed now and it's going to be deployed
any moment now, and then we'll be
able to refresh our application and then to see this change
that's been updated. So if I just scroll up here, index at HML, that particular
build has been completed, let's refresh this page. And we can see it says
hollow I'm honor. That you can manage any code
updates to your application. As you can see,
it's very seamless throughout your application, as we can see here
with Get up Desktop, your repository, and CloudFller. So that's it for this lesson. And if you were to
refresh your repository, we can now see that that particular update
has been a success.
8. Creating your own project: Hi, everyone, and welcome
to the next lesson, which is going to be focused on creating your own project. Right, create your own project. Now that you have all of these new skills
that you've acquired, it is now time for you
to put all of that to use and create
your own project. What you can do now
is kind head over to the project and
resources section of this course for
further information on how you can go ahead and ensure that you follow
the project and then also how you can go ahead
and share it as well so that I can take a look
and leave my feedback. Right, guys. That's
it for this lesson.
9. Thank you!: Hi, everyone. And just
a final note by me, and that is just thank you for deciding to
take this course. I really hope that it helped you gain some insightful knowledge. So thank you again very much, and it is deeply
appreciated that you decided to enroll
with me on this journey. Another thing that I
wanted to mention is please consider leaving
a review for this class. It would be deeply appreciated. You don't have to if
you don't want to, but it's always useful
in my case to try to understand the
feedback that is being given to me and how to
better improve my classes. Thank you again and good
luck on your journey.
Arno Pretorius, IT Freelancer
