Create a site with Github/Gitlab

Table of Contents

Create your site

After choosing a template above, you’ll be greeted with the welcome screen below.

Click the big Connect To Github button on the welcome screen (or alternatively click the link underneath to connect with Gitlab):

Netlify welcome screen
Netlify welcome screen

Login with your Github account (or create a new Github account):

Login with your Github account (or create a new Github account)
Login with your Github account (or create a new Github account)

Click Save & Deploy to create a repository for your site in Github:

Confirm creation of a repository for your site in Github
Confirm creation of a repository for your site in Github

Netlify will now generate your new site. Generally this takes around 1 to 5 minutes, but can take longer during busy periods. You’ll see the green “Published” notice appear under Production Deploys once it has completed.

Netlify will now generate your shiny new site
Netlify will now generate your shiny new site
In the very unlikely case the build fails with a red “Failed” notice, click on the notice, and review the log. During exceptionally busy periods the error may read Error scheduling build in which case, wait a minute and then click Retry Deploy > Deploy Site to retry.

You’ll notice that Netlify assign a free, random URL to the site. Let’s customize the URL to something more relevant:

View your domain (URL)
View your domain (URL)

Click Edit site name

Click _edit site name_
Click edit site name

Enter your site’s name, such as your name or organisation name, separating words with a hyphen (-) rather than a space.

Some creativity may be required to find a subdomain that is freely available. Don’t worry about finding the perfect subdomain as later, we’ll register our own custom domain name and connect it with our site.

Click _edit site name_
Click edit site name

Lastly, click Save to update our Netlify subdomain.

Awesome! We can now visit the site at the URL you chose!

Depending on the template we chose, we’ll see something similar to the Academic Starter Demo, but without the demo content.

Now, let’s personalize our shiny new site based on our requirements ⭐ ⭐ ⭐

Edit your title and URL

Login to GitHub and view the starter-... repository which you created in the steps above:

View your site's Markdown files on Github
View your site’s Markdown files on Github

There are 3 main folders for Hugo sites:

  • content/ for your Markdown-formatted content files (homepage, etc.)
  • assets/media/ for your media files
  • config/_default/ for your site configuration files

Let’s click through to the config/_default/ folder:

Following this guide, we can click a file within the config/_default/ folder, click the pencil icon in the top right to edit the settings, and scroll to the bottom of the page to click the green Commit changes button to save the file. Optionally, when saving the file, we can add a message for our records, to describe the change.

First, let’s choose to edit config.yaml:

to update our site with a title (such as your name or organisation) and the URL assigned to us by Netlify:

Click the green Commit changes button to save the config.yaml file:

Choose a color theme and font

Next, let’s edit params.yaml to choose a theme and decide which features we’d like to use on our site. The Getting Started guide walks us through the main options to personalize our site.

Click the green Commit changes button to save the params.yaml file:

A few minutes after saving (i.e. committing a file), your site will automatically update.

Next, let’s setup the admin panel and use it to edit our author profile and begin adding content to our site!

This free, open source software needs your support!

Next steps

Add content in the CMS

Next