Netlify

Let's get on the internet!

Today I'll show you the steps to put your own website on the internet.

Note that if any of the screenshots in the steps below are too small, you can click on the image, opening it in a new tab, thus making it easier to zoom in on.

Step 1: Make a website

Write an html page, or several.

Step 2: Put it on Github

Create a new repository.

Choose a name for your repo, and then click "Create repository".

Give your repo a name, and don't worry about any of that other stuff. Leave it as-is. Click the "Create repository" button.

After you create your repository, you'll see a screen like this. Click the link in the text that says, "uploading an existing file".

This is going to take us to a screen where we can just drag-and-drop our website files.

Now you can just "drag and drop" all your website files and folders into Github.

You don't want to drag the folder that **contains** your website, just the website files and folders themselves. If you do this by mistake, don't worry. There's a few different ways to make this work.

When your files are uploaded, enter a "commit message". You'll want to make a note here every time you change to any of your files, but for the first upload, something like "first upload" is fine.

I actually made a mistake here - the text is supposed to go in the field where it says, "Add files via upload". The field that I wrote in is only for longer messages. But, whatever, "Add files via upload" works in this case.

Step 3: Connect it to Netlify

Logging in by using your Github account will make the next steps much easier.

You'll be asked to approve Netlify connecting the two accounts.

To get your site going, start a new site.

Choose Github as your source

Choose the repo you created

Remember what it was called? Mine was "three-pages".

Deploy!

Take a moment to click on your site's ugly new URL and enjoy the power of putting stuff on the internet. When you're ready, come back and let's play with the settings.

You can click on the URL to see your new site! Once you're done, click "Domain settings"

Renaming your site

Let's generate a more appealing URL. Click on "Domain settings", and under the "Custom Domains" heading, click the "options" button. Now choose the option "Edit site name".

Choosing a name

Pick a memorable name. You might have to try a couple until you find one that's available. Then click "Save".

Optimize!

In the left-hand menu, under Build & Deploy, click on "Post processing".

Optimize...soon

Alright, on the "Post processing" page, under the "Asset optimization" heading, click the "Edit settings" button.

Optimize...now!

Ok, now **uncheck** the box that says, "Disable asset optimization". Netlify is going to minify, bundle and compress things for you!

Where's our optimization?

If you go back and check your website, your assets won't be optimized yet. Why is that? Does it take a long time for Netlify to deploy your site?

Nope, Netlify usually deploys within a minute (depending on how complicated your site is). But Netlify will only update your website when you make changes to your code.

So let's make some changes!

Let's change it up.

Looks like I forgot to add my alternative text the first time around. Let's rectify that.

Make a change to your code in your text editor.

Now, go back to your repository in Github, and drag your changed files/folders onto your existing files. You don't have to drag any files that you didn't change (in this case, I didn't make any changes to the "assets" folder).

Don't worry about making mistakes - Github will save a copy of every change you make. That's its job!

Make sure you add a message about what you changed, and then click "Commit changes".

Okay, I added the message in the right place this time.

Now I can see which files I changed, when I changed them, and why I changed them.

Now if I go back to my website, I can see that my assets are being optimized. Netlify will put a new version of your website onto the internet every time you make a change in your code on Github.