7 Steps to a Free Website Using React and Netlify

[edit: improved the template to save a step]

Hello 👋

You’re here because you want a basic, ready-made, mobile-friendly, accessible, secure, and fast website for free and you’re not afraid to roll-up your sleeves. In the interest of not wasting your time, please start by visiting this link: Lawrencecastillo.com. By the end of this article, you will have a site like this but with a little more… you.

We will be modifying and deploying this site from a template. For new developers looking to test the waters, this may be for you. For non-developers just looking for a quick way to publish a site for free, this may be for you. For everyone else, this is probably not for you.

Motivation: Site builders with in-browser editing tools are pricey and sometimes clunky to use. On the other end of the spectrum are React, Gatsby, and similar templates which can be difficult to untangle. I built this template to be easy to manage, easy to scale up, easy to re-style, mobile friendly, and secure.

If you’re still interested, let’s begin.

Prerequisites:
GitHub account
Git (optional)
npm (optional)
◊ Any code or text editor (optional)
Netlify account

Step 1: Fork the repo. Sign in to GitHub then fork the template repository: https://github.com/LawrenceCastillo/ada-theme-react-template

Screenshot showing GitHub repository for React-based template. Theme: Ada.
Screenshot showing GitHub repository for React-based template. Theme: Ada.
Click “Fork”

Steps 2–4 are optional. If you’re not comfortable working from command line, skip to Step 5.

Step 2: Clone the repo. From your new GitHub repository, click “Clone or Download.” Copy the HTTPS link. Next, open your Terminal and navigate to the directory where you will place your repository (basic Bash commands noted at the bottom of the article). Type: git clone link (replacing link with the clone link you copied). Press Enter.

Screenshot showing repository cloning link on GitHub.
Screenshot showing repository cloning link on GitHub.
Click “Clone or Download.” Copy the HTTPS link
Type “git clone” then paste the copied link

Step 3. Install Dependencies. Navigate into the new directory, then type: npm install. Press Enter.

Type “npm install” to install app dependencies

Step 4. Run the App. Let’s verify that everything works so far. In the terminal, type: npm start. Press Enter. Once compiled, the app should automatically open in a browser window at localhost:3000.

Type “npm start” to run the app
The app compiled successfully
Web browser showing running default application.
Web browser showing running default application.
Default app running on localhost:3000

Step 5: Edit info.js file. All the site’s content lives in this file. Navigate to the src/ directory and open info.js in an editor.

If you skipped to this step, you will open info.js from GitHub by clicking the “src” folder, then clicking info.js and tapping the pencil icon to edit the file.

For this step, it is very important to pay attention to quote marks and commas. For non-developers, try to notice patterns of repetition. Any object (that is, text between { } brackets) within a section may be deleted. Alternatively, you may also add an object if, say, you have more experience. Field names are not optional, all must be included. See below for clarification:

Screenshot from GitHub with editing rules annotated on it.
Screenshot from GitHub with editing rules annotated on it.
Rules for modifying info.js

Commit the file. For people using the command line, see below for additional information if you are unfamiliar with git commands.

Step 6: Edit App.js file. We will change the style and order of sections here. Navigate to the src/ directory and open App.js in an editor. Locate the “Collection” lines (near the bottom of the file). The order of these lines determines the order they will display on the website. Rearrange the lines and/or delete a line if you want to remove a whole section.

The look of an individual section is determined by its “design.” There are 3 basic designs:

◊ wall2: Information displays as a card within a grid 2 columns wide
◊ wall3: Information displays as a card within a grid 3columns wide
◊ list: Information displays in a list format

Screenshot of “App.js” file on GitHub. Users can change the style and reorganize their site from here.
Screenshot of “App.js” file on GitHub. Users can change the style and reorganize their site from here.
Change order of collections and design style. Three choices for design style: wall2, wall3, list.

Commit the file. For people using the command line, see below for additional information if you are unfamiliar with git commands.

Step 7: Deploy to Netlify. Final step. Login to Netlify.com and click “add a new site from Git.” Select GitHub, then authenticate your account. Locate your repository and click Deploy. Once your site deploy is complete, click “domain settings” to give your site a personalized name.

Screenshot showing completed site deployment.
Screenshot showing completed site deployment.
Click “Domain settings”
Screenshot showing how to change site name on Netlify.
Screenshot showing how to change site name on Netlify.
Click “Edit site name” then choose a new site name

And that’s it!

You now have a published website for free! If you want to continue modifying it, return to steps 5–7. Once you commit a new change, Netlify will automatically re-deploy your site. For developers, alter the CSS to add more section designs.

If you had any trouble deploying the site, feel free to reach out to me at: Lawrence.g.castillo@gmail.com.

Addendum 1: Lighthouse performance report

Screenshot of Lighthouse performance report.
Screenshot of Lighthouse performance report.

Addendum 2: SecurityHeaders.com report

Screenshot of SecurityHeaders.com report.
Screenshot of SecurityHeaders.com report.

For more information, review the “netlify.toml” file included with the app.

Addendum 3: A few basic Bash commands
◊ Change directories: cd dir_name
◊ Change to parent directory: cd ..
◊ Change directory to home: cd ~
◊ List files in a directory: ls
◊ List files in a directory (including hidden files): ls -a
◊ Make a new directory: mkdir dir_name

Addendum 4: Pushing a change via Git to the master branch
1. git add .
2. git commit -m “message describing the change”
3. git push origin master

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store