GitHub

How to build a static website with Netlify

Netlify is part of a new generation of site and app hosts that are designed to give developers a place for storing files, deploying and developing apps or running a website all in one, similar to other well-known solutions such as Amazon S3 and GitHub. Though these services might seem complex to use at first, once you're set-up you can let Publii take care of everything.

So how do you set it up? By following this simple step-by-step guide! We'll take you through everything needed to create a space and link Publii to it.

Creating a website on Netlify

Follow these steps to create an area for your website.

  1. Go to the main Netlify page and log-in to your account, or click the Sign-Up button to register if you haven't already. To get started you'll only need to provide a username, password and email address; no payment information will be required.
  2. After logging-in you'll see the Your Sites screen, which should be empty since we haven't created a site yet!

    Netlify Dashboard

  3. To create a new site we need to drag and drop a zipped folder containing an empty index.html file onto the box in the Your Sites section, and Netlify will set it up for us. You can get a ready-prepared file from this Google Drive link; just download and drag the zipped folder to the box (don't unzip it!).
  4. Once the file has been uploaded you'll see he Deploy in progress screen; Netlify automatically creates a site name for you, which you can see at the top of the screen. Click on this name to go to the website settings.

    Netlify Deployment

  5. On the Website Settings screen, make a note of the Netlify URL for your site which you can see in the boxout with the format https://siteName.netlify.com; we'll need this for the Publii settings.

    Netlify Website Settings

  6. Now scroll further down the page to the Site Info section; make a note of the API ID, which will be a string of characters and numbers as in the below example, as we'll also need it when configuring Publii.

    Netlify Site ID

  7. Now we're going to generate an access token which Publii can use to gain access to our Netlify site; it's a little security precaution. Click on the Account option at the top-right of the screen.

    Netlify account settings

  8. In the Account section, click on the OAuth Applications tab, then click the New access token button; this will take you to the Token generation screen.

    Netlify New Token

  9. In the token description field, add a name of your choice; it's just to help you remember what you generated the token for! Next, click the Generate token button.

    Generate a personal acces token

  10. The token will be created, and you'll see a New token created message. Below that will be your new token; Make sure to copy this token and store it in a safe place as you will not be able to retrieve it later!

    Netlify Personal Token

We now have everything we need from Netlify, so we can move on to configuring Publii to update our site.

Configuring Publii for Netlify

To configure your Netlify site in Publii, follow these steps:

  1. Open the Publii app and click on the Server option in the left-sidebar to open the Server Settings screen.
  2. Set the Domain to your Netlify URL we saw in the previous section (yourSitename.netlify.com); don't forget to choose https:// from the drop-down list.
  3. In the Protocol drop-down list, select Netlify.
  4. Enter the string of characters from the API ID of your Netlify site into the Site ID field.
  5. Finally, enter the Netlify token we created at the end of the last section in the Netlify token field, and click the Save settings button to save changes.

Publii Netlify Settings

Publii is now configured; if you want you can click the Test connection button to make sure that all the options were configured properly. If they are, you are ready to sync your website!

Subscribe

Get the latest Publii news, updates and more delivered directly to your email inbox

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at contact@tidycustoms.net. By clicking below, you agree that we may process your information in accordance with our Privacy Policy.