Set up a Static Website with Netlify – InApps Technology 2022

Are you a web developer looking for some next-generation tech to make your job more efficient and scalable? If that sounds like you, Netlify might be right up your alley. With Netlify uses a repository that is capable of pushing to both your GitHub repository and to hosted microservices, which then executes and distributes your content across a wide Content Delivery Network (CDN) to deliver your static websites to consumers, clients, and visitors.

During the distribution phase, Netlify will always select the best CDN and distribute your content there, which results in faster load times than traditional hosting platforms. When a visitor views your content, that person will always be viewing a pre-loaded version from the nearest geographical server.

So not only are you getting automated distribution, you’re getting faster page loads for your static sites.

I know what you’re thinking: “Static sites? Who uses static sites?”

The answer? Plenty.

People use static sites because:

• They are fast.
• They are simple to build and host.
• They are secure.
• They are developer-friendly.
• They are reliable.
• They are cheap.
• They scale very well.
• They can be automated.

And that’s just the shortlist.

And because Netlify has built-in DNS management and (free) SSL certificates, you’re dealing with even less complexity for the launch of your static sites.

I’m going to show you how to install Netlify and start using the command-line tool. I’ll be demonstrating on Ubuntu 20.04, but you can also install on macOS and Windows.

Installing Netlify

Before we actually get to the installation portion, you’ll want to head on over to the Netlify signup page and create a free account. You can sign up with GitHub, GitLab, Bitbucket, or email.

Once you’ve signed up for an account, log into your Ubuntu machine and first install Node.js with the command:

sudo apt-get install nodejs -y 

Once Node.js is installed, you’ll then want to install npm with the command:

sudo apt-get install npm -y

You could also opt to install them both with one command:

sudo apt-get install nodejs npm -y

With the dependencies out of the way, we’ll install Netlify using the Node.js package manager like so:

sudo npm install netlify-cli -g

Verify the Netlify install with the command:

netlify

You should see the list of commands available to you (Figure 1).

Figure 1

Connecting the CLI to Your Account

Now it’s time to connect the Netlify CLI to your Netlify account. To do that, issue the command:

netlify login

This should open your default browser to a page that requires you to authorize the application.

Click Authorize and you should get your command prompt returned to you. Congratulations, you now have Netlify installed and connected to your account.

Connect to Your GitHub Account

Next, you’ll need to connect Netlify to your GitHub account. Make sure you’re logged into your GitHub account via your default web browser. To do this, you’ll create an account-level access token for GitHub. Before you do, make sure to install git (if it’s not already) with the command:

sudo apt-get install git -y

Now, create a new directory with the command:

mkdir NETLIFY

Change into that new directory with the command:

cd NETLIFY

Next we’ll initialize the directory with the command:

netlify init

When prompted (Figure 3), use your keyboard arrow keys to select No (if it’s not already selected) and hit Enter on your keyboard.

Figure 3.

Now we need to initialize the directory for git with the command:

git init

Copy all of the files for your site(s) into the new directory and then commit all of those files with the command:

git add .

Next we’ll create our initial commit with the command:

git commit -m 'Initial Commit'

Open the GitHub URL https://github.com/new and create a new repository that will be linked to Netlify. You can name that repository whatever you like.

Once the repository is created, you will then need to copy the repo address (which will be in the form yourgithubname/your-repo-name.git, like so:

USERNAME/netlify.git

Where USERNAME is your GitHub username.

Link the remote repo with the local directory using the command:

git remote add origin [email protected]:USERNAME/netlify.git

Where USERNAME is your GitHub username.

Next, push all of the files from the local repository to the GitHub repo with the command:

git push -u origin master

Finally, initialize the Netlify site with the command:

netlify init

When prompted, make sure to select Create & configure a new site and then answer the remaining questions. After the site is created, you’ll be given the Admin URL, URL, and the Site ID.

If you find the Authorize with GitHub through app.netlify.com doesn’t work, re-run the init command and select to manually enter your GitHub credentials.

When this finishes, you can then push your git repository and trigger new site builds with the command:

git push

After you’ve pushed the repository, you can open the Netlify admin URL for your site with the command:

netlify open

And there you have it, you’ve installed Netlify, connected it to your GitHub account, and pushed out your first static site. At this point, you can start dreaming up ways to integrate Netlify into your web DevOps pipeline for automated delivery and more.