Like many beginners, I started researching hosting platforms, only to find out about the cost of domains and hosting. That's when I discovered Git and GitHub, realizing I could share my projects without spending a dime.

If you're in the same boat, unsure about Git and GitHub and how to share your projects, this article is for you. It's the guide I wish I had seven years ago.

To demonstrate the power of Git and GitHub, we'll be using a real-world project as an example. Let's take the "IP Address Tracker application" project from this freeCodeCamp tutorial. You can download the source code for the project here.

If you've followed the tutorial and built the project, or if you have a project you'd like to share, this article is for you. We'll walk you through the steps to host your project on GitHub, making it accessible to the world.

Table of Contents

1. Audience

2. Prerequisite Knowledge

3. Getting Started With Git and GitHub

   1. What is Git?

   2. What is GitHub?

4. How to Set Up Git and GitHub

   1. How to Install Git on Windows

   2. How to Install Git on macOS

   3. How to Install Git on Linux

   4. How to Create a GitHub Account

   5. How to Configure Git

5. How to Initialize a Git Repository

   1. Step 1: Download and Open Your Project

   2. Step 2: Open the Project in VS Code

   3. Step 3: Open the Terminal in VS Code

   4. Step 4: Initialize a Git Repository

6. How to Track Changes with Git

   1. Preparing Changes with git add

      1. Adding Individual Files

      2. Adding All Changes at Once

   2. Saving Changes with git commit

7. How to Push Your Project to GitHub

   1. Step 1: Create a New Repository on GitHub

   2. Step 2: Link Your Local Repository to GitHub

   3. Step 3: Push Your Local Changes to GitHub

   4. Step 4: Verify Your Repository on GitHub

8. How to Host Your Project on GitHub Pages

   1. What are GitHub Pages?

   2. How to Enable GitHub Pages

   3. How to Get Your GitHub Pages URL

   4. How to Update Your GitHub Pages Site

9. Conclusion

Audience

This guide is for beginner developers who have started learning HTML, CSS, and JavaScript and want to learn how to share their projects using Git and GitHub.

Prerequisite Knowledge

Before diving in, ensure you are familiar with:

• Basic command-line operations.

• HTML, CSS, and JavaScript fundamentals.

• A text editor like VS Code.

Getting Started With Git and GitHub

I am not going to try to bore you with the differences between Git and GitHub. I am sure there are tons of resources in the world wide web already covering that but from a beginner's point of view, here is what they are:

What is Git?

Git is a tool that helps you keep track of all the changes you make in your project's code. Imagine building a website about cats. If you change the website's title from "Cat Facts" to "All About Cats," Git will remember the change. If you later decide that you prefer "Cat Facts," Git lets you go back to that version easily.

It's like having a record of every edit, addition, and deletion you make to your project, so you can always revisit previous versions and make changes with confidence.

What is GitHub?

GitHub is like a cloud-based scrapbook for your code. It's an online record where you save every edit, addition, and deletion you make to your project, so you can access it from anywhere and share it with others.

Imagine having a digital filing cabinet where you can store and manage different versions of your website. You can invite friends to see and even help you with your project, making it easy to collaborate. GitHub tracks changes and keeps everything organized, so if something goes wrong, you can always go back to a previous version.

How to Set Up Git and GitHub

Now that we know what Git and GitHub are, let's get them set up on your computer. Follow these step-by-step instructions:

How to Install Git on Windows

You can download the Git installer here.

Run the installer and follow the setup instructions, keeping the default settings.

How to Install Git on macOS

Open the Terminal on your Mac. You can find it in Applications > Utilities or use Spotlight to search for it.

Install Git using Homebrew by copying and pasting the following commands:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install git

Output:

==> Downloading https://github.com/Homebrew/brew/tarballs/...
==> Installing git
==> Pouring git-2.43.0.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/git/2.30.1: 1,434 files, 43.8MB

How to Install Git on Linux

Open Terminal on your Linux machine. Then use your distribution's package manager to install Git.

For example, on Ubuntu, copy and paste the following commands:

sudo apt-get update
sudo apt-get install git

Output:

Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
git-man liberror-perl
Suggested packages:
git-daemon-run git-daemon-sysvinit git-doc git-el git-email git-gui gitk
gitweb git-mediawiki git-arch git-cvs git-svn git-hg
The following NEW packages will be installed:
git git-man liberror-perl
0 upgraded, 3 newly installed, 0 to remove and 0 not upgraded.
Need to get 7,841 kB of archives.
After this operation, 43.8 MB of additional disk space will be used.

To verify the installation, open Terminal (if it's not already open) and type the following command to verify the installation:

git --version

Output:

git version 2.43.0

You should see the installed Git version displayed.

How to Create a GitHub Account

• Go to GitHub and click on "Sign up."

• Follow the instructions to create your account, choose a username and password, and verify your email.

• Once your account is set up, customize your profile with a bio, profile picture, and links to your personal website or social media.

How to Configure Git

Open Terminal and configure Git with the same username and email as your GitHub account:

git config --global user.name "Your GitHub Username"
git config --global user.email "your.email@example.com"

No output will be displayed, but Git will store your credentials for future use.

How to Initialize a Git Repository

Now that you have Git and GitHub set up, let's start by initializing Git in a project. You can use any project of your choice or follow along with our example using the "IP Address Tracker" project.

Step 1: Download and Open Your Project

Download the source code for your chosen project or use the "IP Address Tracker" project from this link. Extract the downloaded ZIP file to a location on your computer. This will provide a concrete example to demonstrate Git concepts.

Step 2: Open the Project in VS Code

Open Visual Studio Code and click on "File" > "Open Folder" to select the folder where you extracted the project.

Step 3: Open the Terminal in VS Code

Click on "Terminal" > "New Terminal" to open the terminal in VS Code, where we'll interact with Git using commands.

Step 4: Initialize a Git Repository

Initialize a Git repository by running the following command:

git init

Output:

Initialized empty Git repository in /Users/spruceemmanuel/Documents/IP Address Tracker/.git/

This command creates a new hidden folder called .git in your project folder, which tracks changes to our project files. When you run git init, Git sets up the necessary files and directories to start versioning our project. This includes:

• A .git folder that stores all the metadata for your repository

• A main branch, which is the default branch for your repository

• A HEAD pointer, which points to the current branch (in this case, main).

By initializing a Git repository, you're telling Git to start tracking changes to your project files. This allows you to version your code, collaborate with others, and maintain a record of changes.

How to Track Changes with Git

Now that we’ve set up Git, it’s ready to keep track of changes in our project.

VSCode source control

Git notices change in our files, but before we can save these changes, we need to tell Git to do so.

Preparing Changes with git add

To get our changes ready to save, we use the git add command. Here’s how it works:

Adding Individual Files

If you want to add specific files, like index.html, script.js, or styles.css, you can use git add followed by the file name. For example:

git add index.html

Adding All Changes at Once

If you want to add all modified files in the project to the staging area, use:

git add .

Saving Changes with git commit

Once we’ve used git add, we use git commit to save our changes. Here’s how to do it:

git commit -m "Describe your changes here"

Replace "Describe your changes here" with a brief description of what you’ve changed. For example:

git commit -m "Update index.html with new content"

Output:

[master (root-commit) be9b1cd] Update index.html with new content
3 files changed, 386 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 styles.css

By using git add and git commit, you’re instructing Git to track and save specific versions of your project. This helps you manage changes, collaborate with others, and maintain a record of your progress.

How to Push Your Project to GitHub

Now that we have our changes tracked and committed locally, it’s time to upload our project to GitHub so we can share it with the world.

Step 1: Create a New Repository on GitHub

• Go to GitHub and log in to your account.

• Click the "+" icon in the upper-right corner and select "New repository."

• Fill out the repository name (for example: "ip-address-tracker"), and add a description if you like.

• Choose whether you want the repository to be public or private.

• Do not initialize the repository with a README, gitignore, or license (since we already have a local repository set up).

• Click "Create repository."

Step 2: Link Your Local Repository to GitHub

To connect your local repository with the new GitHub repository, you need to add a remote origin. Follow these steps:

• Copy the URL of your new GitHub repository. It should look something like this: https://github.com/yourusername/ip-address-tracker.git

• Open Terminal in Visual Studio Code and run the following command:

git branch -M main
git remote add origin https://github.com/yourusername/ip-address-tracker.git

Step 3: Push Your Local Changes to GitHub

Now, push your local commits to the GitHub repository with:

git push -u origin main

Output:

Enumerating objects: 8, done.
Counting objects: 100% (8/8), done.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (6/6), 645 bytes | 645.00 KiB/s, done.
Total 6 (delta 2), reused 0 (delta 0)
To https://github.com/yourusername/ip-address-tracker.git
* [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Step 4: Verify Your Repository on GitHub

Go back to your GitHub repository page. You should see all your files and commit history available online.

A Hosted Repository on GitHub

How to Host Your Project on GitHub Pages

Now that your project has been initialized with Git and pushed to GitHub, let’s host it on GitHub Pages. GitHub Pages is a free service that allows you to publish web projects directly from a GitHub repository.

What are GitHub Pages?

GitHub Pages turns your GitHub repository into a website. It's an easy way to showcase your projects without needing a separate hosting service. You can create static websites directly from your repositories.

How to Enable GitHub Pages

• Go to your GitHub repository in a web browser.

• Click on the "Settings" tab.

• Scroll down to the "Pages" section in the left-hand menu.

• Under "Source," select the branch you want to publish from (typically main or master), and choose the root folder.

Selecting the branch and root folder for GitHub Pages.

• Click "Save."

How to Get Your GitHub Pages URL

After enabling GitHub Pages, GitHub will provide you with a URL where your site is published. It usually follows this format:

https://<username>.github.io/<repository-name>

The URL where your GitHub Pages site is published.

Open your browser and paste the URL to see your live website.

Viewing the live website on GitHub Pages.

How to Update Your GitHub Pages Site

Every time you push changes to the selected branch in your repository, GitHub Pages will automatically update your live site. Here’s a quick reminder on how to push changes:

• Make changes to your project files.

• Add and commit your changes:

git add .
git commit -m "Your commit message"

• Push the changes to GitHub:

git push origin main

With these steps, you’ve successfully hosted your project on GitHub Pages. Congratulations! Your project is now live and accessible to the world.

Conclusion

Just a few years ago, I was in your shoes—excited about building my first website but unsure how to share it with the world. Today, you’ve not only learned what Git and GitHub are but also how to use them to host your very own project.

Imagine your excitement when your project goes live, and you can share it with friends, family, and the global community. You've now set up Git, created a GitHub account, initialized a Git repository, and hosted your project on GitHub Pages. Each step has brought you closer to becoming a more confident and capable developer.

This is just the beginning. Git and GitHub have many more features for you to explore. As you continue building and sharing projects, you’ll discover new ways to collaborate and improve your workflow.

Keep experimenting, keep learning, and most importantly, keep coding. The world is waiting to see what you create next!

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

Modern-day computing services also provide a wide range of features which make web apps easier to use and more efficient. So it's important for developers to have a basic understanding of how the cloud works.

This article is a beginner's guide to deploying backend applications to the cloud. We'll use the Azure platform as our cloud infrastructure and Node.js/Express for the backend web application. Before we go on, here are a few requirements:

• Basic understanding of cloud computing (you can check out this article to learn more about that).
• Knowledge of JavaScript.
• VS Code.

With that, let's get started.

Introduction to Azure

Azure is a cloud computing platform developed by Microsoft that acts as a server for deploying and hosting web applications, databases, file storage, and so on.

Compared to other cloud computing services, it is quite beginner-friendly and has an actively growing user base. Let’s explore the Azure portal.

How to Set Up Azure Account

Signing up on the Azure platform is the first step to hosting your application. First, navigate to the website and complete the signup process.

Azure sign in page

After signing up, you'll have access to the management console of the Azure application where all our activities can be carried out.

Before we go on, here are some of the services we'll be getting familiar with on this platform.

• Azure Resource groups
• Azure app services
• Storage accounts
• SQL databases
• Virtual networks

Azure services

Congratulations on successfully creating your Azure account.

Deployment Options on Azure

As a cloud computing platform, Azure boasts of its wide versatility. Depending on your skill level or preference, you can deploy web applications to Azure via the following options:

• Azure CLI
• Azure Virtual machines
• Azure Functions
• Azure Kubernetes Service
• Azure Storage.
• Azure DevOps
• Azure portal service

We'll utilize the Azure portal service for this tutorial and use its VS Code integration to deploy a simple Node.js application to the Azure cloud.

How to Set Up the Backend Application

We'll create our web application using Node.js via the command line and Visual Studio Code.

Firstly, navigate to the folder where your app will be created and initialize a Node project by executing npm init

Next, initialize the app by installing the Express framework. This can be done via npm i express.

Go on and paste the sample code for this tutorial:

const express = require("express");
const app = express();

app.use(express.json());

app.get("/", (req, res) => {
    res.send("Hello, World");
});

app.listen(process.env.PORT || 5000, () => {
    console.log("Server is running on port " + (process.env.PORT || 5000));
});

The code above outputs Hello World whenever it is executed.

Application Deployment

The backend code we wrote in the preceding paragraph will be deployed to Azure via the use of Azure’s VS Code extension.

VS Code homepage

Navigate to the Extensions tab, search for Azure App Services and install the extension. On successful installation, an Azure widget will appear on your taskbar where you can sign in to the Azure cloud.

Extensions marketplace

Subsequently, we'll be creating a cloud-based web application in which our Node.js code will later be deployed.

On the Azure resources tab, clicking the plus icon will display a drop-down menu where various development options can be seen. We'll be clicking on the Azure app services option.

Azure drop down menu

After clicking that, a prompt will pop up asking for a unique name for the cloud application. In my case, I went with newApp777.

creating a web application

However, you can use any other name you so wish. Subsequently, you will need to select the backend language of your choice. Any version of Node.js will be compatible with our application.

web stacks available

Also, the F1 service option will be used for this tutorial. However, you can pick anyone you so desire.

Various Azure tiers

On successful completion, your application will be created on the Azure portal.

Now to the crux of the matter. Let's install our Node.js code on this web application.

We'll click on the code folder which provides us with options to automatically deploy our code to an Azure web app service.

Deployment dropdown menu

As soon as this is done, the list of the cloud servers on your Azure account will be shown. You can then select the new app we just created.

app deployment

Your backend code should then be deployed on the NewApp cloud server we created. On successful completion, you'll receive a success message with a link to your cloud application.

command prompt interface

Congratulations, you have successfully hosted your first web application. Navigate here to see the hosted application.

The application webpage

Additional Information

So far, we have covered the basics of deploying an application via the use of VS code extensions on Azure portal services. As you progress in the field of cloud computing, other interesting fields can also be explored such as:

• App monitoring with Azure Monitor.
• Azure app networking essentials.
• Azure MySQL database integration.
• Node JS serverless functions deployment.

You can also interact with me on my blog and check out my other articles here. Till next time, keep on coding!

If you're a developer early in your career and you need to build a compelling CV, résumé, or portfolio, Render provides a free tier that offers 1GB of storage capacity.

In this guide, we'll explore how to deploy a Django app on the Render platform. The project we create will help you showcase your coding skills and projects effectively while learning about deployment.

Prerequisites

To follow along with this guide, you'll need to have a few things set up:

• An account on the Render platform
• A Git account
• PostgreSQL installed
• A GitHub account

Now let's learn how to deploy a Django web server for free. 🚀

How to Set Up a PostgreSQL Database

First, head over to your Render dashboard and create a PostgreSQL database. Click the New + button, hover over PostgreSQL, and click it.

Render Dashboard – creating a PostgreSQL database

Next, define your database settings by giving your database instance a name. You can choose to either let Render to define a name for a database and a user or define it yourself.

This guide is for beginners, we'll only define the instance name.

Creating a new PostgreSQL database

Select the free tier and click on Create Database.

Note: Every free database created on Render expires 90 days after creation. So just take note of this and upgrade if it's an important project. You can see the pricing here.

Creating a new PostgreSQL database

Once the status on your database shows Available, it means the database has been successfully created and is ready to use.

Checking the status of a newly created PostgreSQL DB

Scroll down this page to see your database settings. You'll use these settings to set up your Django app.

Database information

Next, access control lets you choose an IP address to access your database.

Once your database is created, it comes with a pre-defined access control route that allows you to access it from anywhere in the world using a single (1) IP address. Although, you can't set another route since you are using a free plan on Render.

PostgreSQL access control information

You can choose to change this or leave it as the default.

Now that we've created a database, let's set it up on a Django project.

How to Connect Your Database

Once the database is set up, you need to connect it to your Django project in the settings.py file.

Head over to your codebase and connect it.

First, Install dj-database-url

pip install dj-database-url

There are different ways to connect your database to your app's project. This guide uses the external connection URL.

Head over to your database settings on Render and copy the External Database URL.

Getting External DB URL

Next, import dj-database-url in your settings.py and define the database URL (from Render) as your database.

Note: It is always wise to add sensitive information to an .env file for security reasons.

import dj-database-url
import os

DATABASES = {
    "default": dj_database_url.parse(os.environ.get("DATABASE_URL"))
}

Next, migrate your tables to your new database to ensure the connection was successful.

If you haven't made any migrations to any db.sqlite locally, ensure you make migrations first or you won't create tables when you run python manage.py migrate.

# To make migrations if this is your first time connecting to a database 
python manage.py makemigrations

#To migrate tables set on your migrations folders
python manage.py migrate

If the connection was successful and you migrate all your tables, your terminal output should look like this:

Successful migration

You are now one step away from deploying your Django project! 🎉

Don't forget to push your codebase to a Git repo with meaningful commits.

How to Create A Web Service

This is the last step to getting your project live.

Head over to your Render dashboard. Click New + and Select Web Service.

Creating a new web service

Connect your GitHub if you haven't already. It should look like this once it's connected:

Connecting your Git to render platform

Search for the repo you want to deploy and click the Connect button. It should work seamlessly.

Then, define your repo's settings. Give your app a name and ensure you are connecting to the right branch.

Setting Django web server

Install gunicorn and change your requirements.txt in your Django project. By performing pip freeze > requirements.txt, you can update installed packages in your requirements.txt. This automatically changes your project's list of required files.

Gunicorn is a lightweight Python web server that acts as a gateway between a web application and the internet. It is designed for deployment since it manages incoming web requests effectively.

Then, push your changes to Git. Remember, you connected Git to your web service, so Render monitors the repo and auto deploys when it detects any changes.

pip install gunicorn

pip freeze > requirements.txt # To update your requirements.txt file

Ensure you add your Render web service to ALLOWED_HOSTS in your settings.py.

Next, ensure that you set the right requirements.txt as you can see in the image below. Also, make sure you use the right Python runtime and define your project's gunicorn settings on Render platform.

Once done, scroll down and select Create Web Service.

Creating a web service

Go back to the Render Dashboard and click on the Deployed Web Service to view your live link.

Deployed web service and database

That's it! You've deployed your first Django app on a free platform. Enjoy your web server for the next 90 days. 😎

Conclusion

To sum up, deploying a Django app/server or any server on Render is easy and efficient.

By leveraging Render's features like continuous integration and built-in monitoring, developers can focus more on building the app and its features rather than stressing over the app's infrastructure and management.

If you're hosting a static website in an S3 bucket and it's your first time buying a domain name, this simple guide is for you.

Summary - What You Need

Amazon S3

• Have an S3 bucket with the same name as your domain name
• Upload your website's code
• Allow public access
• Add a policy to enable S3 GetObject
• Enable static website hosting

Domain Name provider

• In your domain name's DNS Zone settings, delete all A records
• In DNS Zone settings, add www to subdomain and the S3 endpoint in hostname for CNAME records

Let's go through these steps one by one.

Step 1: Create an S3 bucket

Create an S3 bucket to host your files for your website

First you need to create a bucket for your website. The name for your bucket must be the same as your domain name. Let's say we bought the domain name www.clarkngo.net. Then my S3 bucket's name should be www.clarkngo.net as well.

After configuration, my endpoint should look similar to this:

http://www.clarkngo.net.s3-website-us-west-2.amazonaws.com

Go to your AWS console and login. Choose S3.

1. Click Buckets
2. Click Create bucket

3. Add your domain name in the bucket name

4. You may choose any Region

Creating the S3 bucket and general configuration

Follow the checkboxes below and click Create Bucket.

Only tick the following:

• Block public access to bucket and objects granted through new access control lists (ACLs)
• Block public access to bucket and objects granted through any access control lists (ACLs)

Uploading files to the S3 Bucket

1. Click Overview and Upload.

2. Upload your website files in Select Files

3. For Set permissions, hit Next.

4. For Set properties, hit Next. (The default is Standard S3.)

5. For Review, hit Upload.

Editing the Bucket Policy

1. Click Permissions, then Bucket Policy.

2. Add the policy. (Note: For your website you'll change arn:aws::s3:::www.clarkngo.net/*)

{
    "Version": "2012-10-17",
    "Id": "Policy1548223592786",
    "Statement": [
        {
            "Sid": "Stmt1548223591553",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.clarkngo.net/*"
        }
    ]
}

3. Hit Save.

Static website hosting

1. Click Properties, then Static website hosting.

2. Choose Use this bucket to host a website.

3. For Index document, type index.html.

4. For Error document, type index.html.

5. Hit Save.

Step 2: Add the S3 Endpoint to your Domain

Editing your DNS Zone

1. Login to your domain provider.
2. In this example, choose Name Servers/DNS, then Modify DNS Zone (or the equivalent).

3. Remove all A records in your domain. Usually it will have a default IP address for a 404 Not Found page.

4. Add a CNAME to point to the S3 Bucket:

5. add www for the Subdomain.

6. add www.clarkngo.net.s3-website-us-west-2.amazonaws.com (the S3 Endpoint) to the Hostname.

And you're done! Note that it might take a while for your new settings take effect.

Connect with me in LinkedIn here.

And no - fast.io didn't pay me or freeCodeCamp to create this article. We don't have any relationship with them. I'm just writing about this because I found their tool to be really exciting and useful for quickly hosting static websites for free.

Note: The information in this tutorial is now outdated, but this article stays here for posterity. Here are some helpful articles you may like on a similar topic.

What is Fast.io?

Fast.io is a solution created by Mediafire to simplify how the web works. In a few words, their goal is to make your life easier by making the web more accessible and manageable.

It was launched at the end of 2019, so I'm sharing it with you now.

How it works

When you use Fast.io, you will be able to connect to your cloud (Google Drive, DropBox, etc.), choose a website name, and deploy your content all in a few clicks.

If your content is ready, only 3 minutes are required to put your content online and make it accessible to everyone.

Once your website is online, you can configure it, add a custom domain name, and connect Google Analytics so you know how many people you are reaching.

I haven't mentioned this yet, but the service automatically updates your website once you modify the source files. For example, if you are using Google Drive to share your content, once you change something in your HTML page, it will be updated.

Fast.io - How it works

Available storage providers

Here's a list of available storage providers if I were to publish my website today:

• GitHub
• Dropbox
• Google Drive
• Box
• Mediafire
• OneDrive

As you can imagine, this list is going to grow as new services are added. But even now, you have many possibilities to host your static website.

Competitors

There are already a number of different companies who allow you to quickly get a static website online. The most famous solutions are GitHub Pages, Heroku, and Netlify.

I'm not necessarily saying that Fast.io is the best one, but I like how simple it is to deploy a basic website.

Quick note: if you want to deploy something more complex – like a Python Flask website – you can't do it with Fast.io. In this case, I highly recommend using Heroku.

As I told you, I'm going to be transparent with you. Fast.io an excellent service for certain tasks.

What is a static website?

Before showing you how to deploy your website, I think it's essential to define what a static website is and what the differences are from a dynamic site.

A static website contains web pages with fixed content. The content of your page is in HTML, and all users see the same thing.

For example, you can use this type of site when you want to do a landing page for your website (a basic page with information about your product).

The main difference between that and a dynamic website is, of course… the dynamic part!

A dynamic website uses a server technology to build the page when a user requests the website.

For example, you can use this type of site for your blog. Every time you add a new article to your database, the website will display it.

It’s time to deploy your website

Are you ready to share your page with everyone? Let’s do it!

In this part, I will show you how to put your website online in a few clicks. I’m going to use a basic HTML page, but once you understand how Fast.io works you are free to modify everything.

1) Create a index.html file

You need to create an index.html file with your HTML code inside. I recommend that you to start with something simple because you can always update it later.

Save the file on your computer.

<!DOCTYPE html>
<html>
  <head>
    <title>My Static Website</title>
  </head>
  <body>
    <h1>My Static Website</h1>
    <p>
      Hello, I'm online, and everyone can see me!
    </p>
  </body>
</html>

2) Open the Fast.io homepage

Fast.io homepage

All you need to do to start with Fast.io is open the website. Once you've done that, click on "Sign up now - it's free!".

3) Configure Google Drive

Fast.io - Storage provider

This page appears after step 2 and allows you to select a storage provider. Select "Google Drive".

If you want to create a website with another provider, you can do that later by adding it through your account page.

Fast.io - Connect Google Drive

Fast.io needs access to your Google Drive account to work. They will create a "Fast.io" folder to contains your website(s). Click on "Connect Google Drive Now".

Fast.io - Select your Google account

You need to select your Google account to link it with Fast.io.

Fast.io - Allow Fast.io to access Google Drive

You need to allow Fast.io to access your Google account to link it correctly.

Fast.io - Create your account

Your account is now ready, so just choose a password and then click on "Create Account".

Fast.io - Welcome page

When your account is ready, a "Welcome to Fast!" page will appear. Click on "Let's begin!".

4) Create your website

Fast.io - Dashboard

You are ready to create your website and share it with everyone! Click on "Add New Site".

Fast.io - Choose a website name

Choose your website name and type it in the input box. When you've finished, click on "Next".

Fast.io - Choose a website type

Fast.io allows you to create three website types: a File Sharing website, a Web Page, or a Files Browser website.

In our case, we will select "Web Pages" because we want to host an HTML web page.

If later you want to create a website to share some documents, you have to go back to your dashboard, create a new one, and select File Downloads.

Fast.io - Choose a storage provider for your website

Once you clicked on "Web Pages", you need to select your storage provider. Click on "Google Drive".

Fast.io - Choose your website URL

Choose your website URL and type it in the input box. When you've finished, click on "Create Site".

Fast.io - Successfully created website

You did it! Your website is online and available at the URL you chose. In my case, you can find my site on mygoogledrivewebsite.imfast.io

5) Upload your index.html

If you open your website, you may notice an error because you didn't upload your index.html file on your Google Drive.

Here are two ways to do that:

• Open your Google Drive and search for the Fast.io folder, then the folder of your website (in my case, "mygoogledrivewebsite.imfast.io").
• On the step 4 success page, click on "See your Google Drive".

Fast.io - Google Drive before upload

Once you've done that, right-click with your mouse and select "Upload files". A new window will open, find your "index.html" file - select it.

Fast.io - Google Drive after upload

Wait for a little bit before the change appears on your website.

6) Celebrate!

Fast.io - Website demo

Spread the word to all your friends! Your website is live and everyone can see it!

? Share it on Twitter by clicking here! ?

7) Bonus

If you are curious and want to configure everything, you can go back to your dashboard and click on your website.

You will be able to link your website to Google Analytics (visitors statistics), change your domain name (for example, mywebsite.com), and a lot more!

Conclusion

What do you think of this new service? Did you find it fast and easy?

Feel free to share this article if you liked it.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

###

At that point, I had only viewed my portfolio on localhost by viewing the files on my local computer. I didn’t know anything about how to host a website online.

Learning how to host my first website wasn’t easy but it was a great learning experience. If you're an aspiring web developer or just interested in launching your own static website, then I hope you will find this guide useful.

Who is this guide for?

This guide is aimed at complete beginners who want to host a static website (a site with fixed content). I will provide a how-to-guide for the following:

1. How to buy a domain.

2. How to configure your domain for an external hosting provider.

3. How to host your website with Amazon Web Services (AWS).

4. How to make your website secure (SSL certification) using Amazon Certification Manager.

There might be some terminology that’s new to you. Please go ahead and look up terms that are not familiar. I’ve put in useful links and explanations where I thought appropriate.

What is a domain name and DNS (Domain Name System)?

A domain name is your website address. For example thecodinghamster.com. But for a computer, a domain name is actually a series of numbers (an IP address). An IP address looks like this: 123.321.0.1

It’s not easy for us to remember a long string of numbers. So your computer refers to a DNS to translate a text based website address into an IP address which it can then understand. A DNS is like a directory.

I watched this great video which explains domain name, DNS and how this works in under five minutes. Please watch the first five minutes of the video if you're interested:

Where can you buy your domain name?

You can buy a domain name from a domain name registrar. Prices start from a few dollars. Your domain name is unique. Each domain name registrar offers different levels of services/support. But you can register your domain with any registrar.

What is a hosting provider?

“An Internet hosting service is a service that runs Internet servers, allowing organizations and individuals to serve content to the Internet. There are various levels of service and various kinds of services offered.”

When I was looking for a hosting provider for my website, I explored different options. The prices ranged from £2.00 — £5.00 per month with various storage options from 0.5GB to 10GB. The prices seemed reasonable but all I wanted to do was host a static website. It had a few images, HTML, CSS and JavaScript files. No dynamic content.

Why AWS?

After some further research, I found AWS. AWS offers a free tier option. Essentially, you get lots of free products. Some of them expire after 12 months and others are free in perpetuity. The only cost that you will incur for hosting a static website is the cost of setting up a hosted zone. This cost $0.50 per month. So I went with AWS and set up my account.

The great thing about AWS is the price and it’s a reliable hosting provider. But one thing to bear in mind is that you’re reliant on their documentation. As I started reading about what services AWS offered, it quickly became confusing! I used the official AWS guide provided for setting up static websites. But I found myself getting lost with clicking on a link to another link and so forth. I started researching other guides to make up for knowledge gaps.

I found this this excellent guide by Victoria Drake.

I followed Victoria Drake’s guide alongside the AWS one and managed to muddle through. But there were still a few things that were not explained which I hope to flesh out.

Before we proceed, here is your to do list:

• Do some research on domain registrars and buy your domain name.

• Sign up for a free account with AWS.

• Have both the documentation from AWS and Victoria Drake’s guide open. Use my guide to guide you through the documentation (hope that makes sense!).

Here we go!

AWS: Create a Hosted Zone on Route 53.

Route 53 is where all your DNS requests are handled.

The first thing you must set up is your hosted zone with Route 53. This is really easy if you bought your domain through AWS. A hosted zone is created automatically once you’ve purchase it. If you’ve done this then just skip to the next section (Set up your S3 Buckets).

However, if you were like me and bought your domain name via another registrar then please do the following.

This next part is how to create a Hosted Zone on Route 53 if you haven’t bought your domain name from AWS:

1. Go to Route 53 in your console and click on “Create Hosted Zone”. Fill in your domain address, comment is optional and choose a “Public Hosted Zone”. Click on “Create”.

2. Once your hosted zone is created, you need your NS (Name Servers) records:

3. Go to your domain name registrar and login. Depending on your registrar, you should find a section in your settings called "Nameservers" which you can edit. You need to copy across the AWS NS records and change the existing NS records in your domain settings.

Please note, don't copy the full stop/period at the end of the NS record. For example, is should be “ns-63.awsdns-07.com”, not “ns-63.awsdns-07.com.”

It will take up to 24 hours to propagate.

Set up your S3 Buckets

In the meantime you can set up your S3 Buckets. The S3 Bucket is the storage for your files such as your index.html.

You must configure two buckets for your website: 1) yourdomainname.com and 2) www.yourdomainname.com.

The first bucket is your main bucket where you will upload all your documents, such as your index.html. The second bucket redirects to the first bucket. To set up your S3 Buckets, please follow the AWS documentation on how to set up your S3 bucket ( 2: Create and Configure Buckets and Upload Data).

In addition to the documentation, there are a few things to note:

• In section 2.1 (part 2): click on the link How Do I Create an S3 Bucket? This is a step by step guide and explain all the settings you need to choose.

• In section 2.1 (part 3): you don’t have to upload your website files yet. You can add a test index.html in the meantime.

Take note of your endpoint. You can find this in your S3 bucket > “Properties” tab > “Static Web Hosting” box. It should look something like this: http://yourdomainname.com.s3-website.eu-west-2.amazonaws.com

Add the Alias/“A” records in Route 53

Finally go back to Route 53 and open your hosted zone to set up your Alias records. You can follow the documentation on “Step 3: Add Alias Records for example.com and www.example.com”. It is quite straightforward.

Once the NS settings have propagated, your site is live! You’ll be able to visit your site at the domain address e.g. yourdomainname.com

However, please note that it won’t be secure and you’ll see a http:// prefix in the address bar. I’ll get to that in the next section.

How to make your website secure and what is a SSL certificate?

It’s very important to make your website secure and to do this you’ll need to get an SSL certificate. SSL stands for Secure Sockets Layer and it uses encryption to securely transfer data between a user and site. Google will also give a rankings boost for websites with HTTPS.

If you secure the website with an SSL certificate, you’ll see https:// and a padlock symbol in your address bar.

There are different types of SSL certificates: Extended Validation Certificate and a Domain validated certificate. For a personal website or blog, only a domain validated certificate is required. You also won’t see the name of your company on the left of the bar like the example above. You only get this if you have an Extended Validation Certificate which is more for large companies/enterprises.

How much does it cost for an SSL certificate?

I’ve seen a range of ways of getting an SSL certificate. You can pay a premium for a service that will do this on your behalf or you can do it for free with Let’s Encrypt. Let’s Encrypt is an official Certificate Authority (CA). But you have to renew your certificate every three months and the process is quite complicated.

I didn’t want to pay a premium or want the hassle of renewing every three months. Conveniently, AWS can issue SSL certificates for a very small fee. You pay $0.75 for each certificate issued and it lasts for one year.

If you choose not to go with AWS, make sure you do your research and choose a trusted CA!

How do you get an SSL certificate with AWS?

Log into your AWS console and navigate to the AWS Certificate Manager (ACM).

Make sure you change the region from the default (Ohio) to N. Virginia. This is not explicit in the guides and only the N. Virginia region can issue certificates. I learned the hard way and wasted a lot of time!

Then click on “Get Started” under “Provision Certificates”.

Follow the documentation with AWS (“Requesting a public certificate using the console”) and use Victoria Drake’s guide (under “SSL certificate”).

In addition to the guides there are few things that weren’t fully explained:

• You’ll need to validate your domain ownership by email or directly with DNS. I would suggest to always verify ownership by DNS validation.

• Once you’ve requested your certificate you’ll get something like this (except the status will be pending). Click on the “Export DNS Configuration file”:

It’s an Excel spreadsheet which will contain something like this:

• You’ll need to add these records to your DNS settings with your registrar. Log in and go to DNS settings. The interface varies with different registrars but you’re looking for your Host records under your DNS settings.

• Click on “Add Record” > record type is CNAME:

You need to add two records: 1) Hostname should be “@” and Target Name should be the Record value from the DNS configuration file.

2. Hostname should be * (asterisk) and Target Name should be the Record value from the DNS configuration file.

If you want more information about the CNAME and record types, I found this helpful article.

It's quite long, but I've pulled out the useful part:

“Note: Hostname refers to the prefix before the domain name. To create a Blank record, use an @ in the Hostname field. This represents an empty prefix (so the name exactly matches the domain name; for example divapirate.com). The @ hostname is also referred to as the the root of the domain. An * (asterisk) in the Hostname is a wildcard, and represents any prefix. For example, creating a record for *.divapirate.com will point .divapirate.com at the IP address provided.”

You just need to wait for the verification. For me, this took about an hour.

How do you add your SSL certificate?

With AWS you can add SSL certificate to your website through setting up CloudFront. CloudFront is great for speeding up your website. I used the AWS documentation and Victoria Drake’s guide (look out for her useful tips).

Please note, when you create your CloudFront distribution, there’s a drop down menu to add your SSL certificate. If you have been issued with an SSL certificate already, it will be pre-populated in the drop down menu.

Your state in your CloudFront dashboard should changed to “Enabled”. This isn’t instant and takes a little time.

Almost there…

Finally, you need to get your Domain Name from the CloudFront distribution. It should be something like this dsfdser83543.cloudfront.net.

Go back to Route 53 > hosted zone > change both Alias records (Alias Target) to the CloudFront Domain Name.

Voila! You have hosted your first secure static website with AWS.

Hope you found this useful. If you have any questions or just want to say hello, find me on Twitter @PhoebeVF

A big thank you to Victoria Drake for her guide. For a more advanced tutorial on this topic, please check out Victoria's article: "Hosting your static site with AWS S3, Route 53, and CloudFront".

Illustrations courtesy of https://undraw.co

Let’s say you have your portfolio, like [www.glynlewington.com](http://www.glynlewington.com), hosted on Netlify and want to add your projects onto the same domain. They are all separate git repositories and Netlify is made for hosting from a single repository…but don’t fear! We can host them on subdomains like project.glynlewington.com with just a little work.

Netlify makes it super easy to host your static sites with them for free. I recently moved my portfolio from a VPS over to them, and it’s great that they automatically update your site every time you push to your git repository.

In the past, I had all my personal projects also hosted on subdirectories, e.g. www.glynlewington.com/project. This is either difficult or impossible with Netlify. Netlify is mostly set up for you to host everything in one site from one git repository.

The compromise I came to is hosting them on subdomains instead, like project.glynlewington.com. This also isn’t documented very well but it is possible.

• Go to www.netlify.com and login or signup.
• Select “New site from git”.
• Choose your provider (e.g. GitHub) — You may need to authenticate here.
• Select the git repository you want to create a site from.
• Select the branch you want to deploy from.
• Choose any commands that need to be run. — If it’s a React app you will need to run a build command.
• Choose the directory that you will publish from. It will contain files such as index.html. — If it’s a React app this will probably be the build folder.
• Select “Build Site”.

At this point, you should have a functioning app hosted on a Netlify free domain such as https://hungry-bose-fb0e6d.netlfiy.com. If this isn’t working, check that there are no errors with the build process and fix these if there are.

Now to set up a custom domain.

• Go into your app overview on Netlify.
• It will say your site is deployed successfully and you can set up a custom domain.
• Click on set up a custom domain, type in the domain you want, including the subdomain, and click verify. E.g. project.glynlewington.com.

Next, login to your domain hosting provider. I use Cloudflare but it will be the same or similar using others.

• Go to DNS settings.
• Select a new CNAME record.
• Input a “Name” — this is the subdomain, it should be the same one you selected previously on Netlify. E.g. project
• Under “IPv4 Address” input the free domain for your Netlify site. E.g. hungry-bose-fb0e6d.netlify.com.
• If you are also using Cloudflare, turn off the traffic routing through Cloudflare. This messes with Netlify.
• Add record.

Done! Once you’ve done this you can access your site on the subdomain.

Netlify will also automatically add https security to your site, no need to worry about this.

Hiya folks!

In this tutorial I’ll show you how to host a static website with HTTPS on AWS with a custom domain. All this is possible using AWS free tier.

However, the services we are going to use do incur some small charges. Generally speaking these shouldn’t exceed $1/month.

We’ll be using a combination of the following AWS services:
—S3
— Route53
— Certificate manager
— CloudFront

Let’s get into it!

Setup your S3 buckets

First, you’ll need two S3 buckets, both should match your custom domain name with the second including the www subdomain.

Bucket 1: mywebsite.com
Bucket 2: www.mywebsite.com

The first bucket (mywebsite.com) is the main bucket for your site. This contains all your files and assets for your static website.

Next we setup this bucket for static site hosting. You can find this under the Properties tab of the bucket, and we’re going to keep the defaults provided here with the index of the site set to index.html.

We also need to make this bucket publicly accessible as a user’s browser will need to access the bucket’s files in order to render the website. We can do this by setting a Bucket Policy under the Permissions tab.

{       "Version": "2012-10-17",       "Statement": [        {            "Sid": "PublicReadGetObject",            "Effect": "Allow",            "Principal": "*",            "Action": "s3:GetObject",            "Resource": "MY_BUCKET_ARN"        }    ]}

This is a simple policy that will only allow public read access of objects in the bucket. Now, if you head to the endpoint defined in the static hosting config of the bucket, you should see your website.

Progress! But we can do better than that.

The second bucket (www.mywebsite.com) we will leave empty but configure to redirect to our first bucket using HTTP as the protocol (we’ll make it HTTPS later).

Redirect requests back to the main bucket using HTTP protocol

Your buckets are now ready to go!

Configure Domains with Route53

So your website is up and running but only accessible via the bucket endpoint and not your custom domain. Let’s change that.

Head to Route53. If you’ve registered your domain with the Amazon Registrar you should see that a hosted zone has been setup for you with two record sets. One for Name Server (NS) and one for SOA.

All we need to do is to create two more record sets to point to the S3 bucket endpoints.

For each record set:
— Type: A — IPv4 address
— Alias: Yes
— Alias Target: the S3 website endpoint that matches what you set for Name.

Creating a record set for www subdomain

Now we can head to the custom url…and voilà!
We’re almost there, but there’s one last thing we’re missing…

Note: If your domain is registered with another domain registrar (not Amazon) you’ll need to follow some different steps to set this up. Usually you’ll need to add a CNAME record with a value of the main S3 buckets endpoint.

Troubleshooting:
If you deleted the hosted zone Amazon created when you first registered the domain (I’ve done this because hosted zones do incur some charges), you’ll need to create a new hosted zone from scratch.

1. Select “Create Hosted Zone” and set the domain name, for example “mywebsite.com”
2. This will generate some new record sets for types NS and SOA.
3. Go into your registered domain and update the Name Servers values to those generated in the new NS record set.

Requesting a Certificate

Awesome, the site is now hosted using the custom url! However we can only access it via HTTP protocol.
We should always ensure our sites are secured using HTTPS protocol. This protects our site and users from malicious injection attacks and guarantees authenticity.

Head to Certificate Manager in AWS Console and request a new public certificate (this is free). You’ll be prompted to enter the domain names you wish to secure.

Before the certificate can be issued, Amazon needs to be able to verify that you own the specified domains.

You can choose from two verification methods: Email or DNS.

Email is generally simpler, but you’ll need to ensure you can access the email used to register the domain. Alternatively, if you used Amazon Registrar and Route53, you can select the DNS method. This requires you to add some specific record sets to the hosted zone, but this is mostly automated for you so it’s quite simple.

It can take a few minutes for the certificate to be issued after validation.
When its all done we can continue to the final step!

Configuring CloudFront

For the final step we are going to use CloudFront which allows us to use the new SSL certificate to serve the website with HTTPS. CloudFront also speeds up the distribution of web content by storing it at multiple edge locations and delivering from the closest edge location to a user.

We need two new web distributions, one for each S3 bucket. Head to CloudFront in the AWS Console and create the first web distribution.
There are lots of settings available to create a web distribution, but for the basics we only need to change five:

1. Origin Domain Name: Set this to the S3 website endpoint for one of the buckets. Important: This field will give you some auto-complete options with your S3 bucket names. However, using these can cause issues with redirecting to the bucket endpoint. So instead use the bucket endpoint directly.
2. Origin Id: This populated for you when you enter Origin Domain Name.
3. Viewer Protocol Policy: Set to “Redirect HTTP to HTTPS”.
4. Alternate Domain Names: This should match the name of the S3 bucket you’re pointing to. For example “mywebsite.com”.
5. SSL Certificate: Select “Custom SSL Certificate” and select your new certificate from the dropdown.

Do this again for the second S3 bucket.

The distributions can take a while to spin up, so while we wait, let’s do the finishing steps.

Back in S3, go to your secondary bucket (www.mywebsite.com), in the Properties tab and under Static Website Hosting set the redirect protocol to HTTPS.

Finally, head back to Route53. We need to update the custom A records we created to now target the CloudFront distributions rather than the S3 buckets. For each record, change the Alias Target and select the CloudFront distribution available in the dropdown.

Note: Again, if you are using another DNS service you’ll need to go update the CNAME record from there to point to the CloudFront domain name.

Huzzah!

And there you have it! Your beautiful website is now available at the custom domain and served with HTTPS!

_[From Giphy](https://giphy.com" rel="noopener" target="blank" title=")

Thanks for reading! I hope this guide was useful and enjoyable, I’d love to know if you found it helpful.

If you are thinking of building a static site with React and want it to perform as fast as a cheetah, you should consider using GatsbyJS.

I decided to try it out and was amazed with how easy it was to setup, deploy, and how fast the site loads now. Gatsby uses the best parts of other front end tools to make the development experience feel like you’re on vacation.

After rebuilding my website with Gatsby and React ?

Performance Issues With Original Website

I had been meaning to optimize the images on my portfolio website, which was one of my first freeCodeCamp Frontend Development projects.

Before the help of Gatsby --_

Ouch! A 33/100 Google optimization score was painful to see. Yup I needed some help from the optimization gods. My website contained at least 17 project screenshots. I didn’t want to have to compress each image, generate multiple sizes and resolutions of each image, and lazy-load them.

When I first created this website, the Bootstrap 3 img-responsive class took care of scaling the images to fit different screen sizes, but I didn’t think about the fact that it was still loading some of my screenshots that were around 1400 x 860 pixels on mobile devices!

My score was also low because I had not minified my CSS or setup browser caching for it, and was not async loading external CSS resources.

Gatsby To The Rescue

I really wanted to rebuild this project using React. I could have used create-react-app which provides an out-of-the box build script and development server, but this still didn’t take care of the long task of having to crop different image sizes for all of my images.

Fortunately I was listening to Syntax’s, “Why Static Site Generators are Awesome” episode, and they talked about a few static site generators on the StaticGen.com list. If you haven’t heard what static site generators do, they transform your site into a directory with a single HTML file and static assets. No database or server code needed.

Gatsby won me over due to the similarities it has with create-react-app, which includes hot reloading, easy dev environment setup, and a build script. Gatsby takes it further by offering server-side rendering, smart image loading, and dedication to performance.

Since Gatsby is built on the React, GraphQL, and Webpack stack, we can write our content as React components! Winning! Gatsby takes care of rendering at build time to the DOM as static HTML, CSS, and JavaScript.

Gatsby-image Component is BAE

So now to what I’ve really been wanting to share with you. Gatsby-image! Gatsby-image, is a React component that was designed to work with Gatsby’s GraphQL queries to completely optimize image loading for sites.

The approach is to use GraphQL queries to get images of the optimal size and then display them with the gatsby-image component.

How did I use this component to automatically create 3 thumbnails for each of my 17 project images? Magic! Not really, but it feels like it!

In my src/pages/index.js file, I queried all of the project images and gave it an alias of ProjectImgs. Since the queried data is now accessible through the data object as a prop, I was able to pass the projectImgData data (which is a node list of my project images) to my <Projects /> component:

//imports
const HomePage = ({ data }) => {
  const siteTitle = data.site.siteMetadata.title;
  console.log(data.ProjectImgs); 
  const { edges: projectImgData } = data.ProjectImgs;
  const { edges: iconImgData } = data.iconImgs;
  return (
    <div>
     <Helmet
      title={siteTitle}
      link={[{ rel: "icon", type: "image/png", href: `${favicon}`}]}
     />
     <Cover coverImg={data.coverImg} />
     <div className="container-fluid main">
      <Navigation />
      <AboutMe profileImg={data.profileImg} iconImgs={iconImgData} 
      />                
     <Projects projectImgs={projectImgData} />
     <Contacts />
     <Footer />
     </div>
    </div>
  );
};
export const query = graphql`
  query allImgsQuery {
    //additional queries
    ...
    ProjectImgs: allFile(
      sort: { order: ASC, fields: [absolutePath] }
      filter: { relativePath: { regex: "/projects/.*.png/" } }
    ) {
      edges {
        node {
          relativePath
          name
          childImageSharp {
            sizes(maxWidth: 320) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
//additional queries
...
  }
`;

Note: I had some trouble getting my graphQL queries to work and had to do a little digging around to figure out how to query for multiple images within a folder. What helped me was looking at other portfolio sites made with Gatsby.

Using the console, we can see what data.ProjectImgs returns to give you a better idea of what I am receiving from the query and what I am passing to my Projects component:

Console.log(data.ProjectImgs) returns an array of edges:

{edges: Array(17)}
edges
:
(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
__proto__
:
Object{edges: Array(17)}

Extending one of the edges shows a node object that contains a childImageSharp property. This contains a sizes object which holds the image’s thumbnail sources. This sizes object is what we ultimately want to pass to our gatsby-image’s <Img /> component.

Extending an edge to show the information in a node:

{edges: Array(17)}
 edges: Array(17)
 0:
  node:
   childImageSharp: {sizes: {…}}
   name: "CamperLeaderboard"
   relativePath:"projects/CamperLeaderboard.png"
   __proto__:Object
   __proto__:Object
 1:{node: {…}}
//more nodes
...

In my <Projects /> component, I receive the node list of project images as a prop and for each project, I extract the childImageSharp.sizes object (which is renamed to imageSizes), and pass it into the gatsby-image’s <Img /> component:

import React, { Component } from "react";
import Img from "gatsby-image";
//more imports
...
class Projects extends Component {
  constructor(props) {
    super(props);
  this.state = {
      selectedType: "front-end"
   };
  this.onSelectChange = this.onSelectChange.bind(this);
  }

  onSelectChange(e) {
    this.setState({ selectedType: e.target.value });
 }
render() {
    const projectImgs = this.props.projectImgs;
    const { selectedType } = this.state;
    return (
      <section id="projects" className="section projects">
        <h2 className="text-center">PROJECTS</h2>
        <div className="section-content">
          <div className="subheader">
            <FormGroup controlId="formControlsSelect">
             ...
            </FormGroup>
          </div>
          <div className="project-list">
            {projectList.map(project => {
              const isSelectedType = selectedType === project.type;
              const singleCardClass = classNames("single-card", {
                hide: !isSelectedType
               });
              const image = projectImgs.find(n => {
                return n.node.relativePath === 
                       `projects/${project.img}`;       
              });
              const imageSizes = image.node.childImageSharp.sizes;
              return (
                <a
                  href={project.url}
                  key={project.url}
                  className={singleCardClass}
                  target="_blank"
                >
                  <div className="card-img">
                    <Img
                      title={project.name}
                      alt="Screenshot of Project"
                      sizes={imageSizes}
                      className="card-img_src center-block"
                    />
                  </div>
                  <div className="blue-divider" />
                  <div className="card-info">
                    <h4 className="card-name">{project.name}</h4>
                    <p>{project.description}</p>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    );
  }
}
export default Projects;

And this is the end result:

Example of lazy loading and blur effect using gatsby-image in a slow 3G network

That’s it! The <Img /> component takes care of using the correct image size, creating the blur up effects, and lazy loading my project images, since they are located further down the screen. The above querying was a bit more complex than querying a single image.

If you’re new to GraphQL, below are a few resources that better explain how to use GraphQL queries and the gatsby-image component:

• Working with Images in Gatsby
• gatsby-image
• Image Optimization Made Easy with Gatsby.js

Hosting To Netlify Was a Breeze

Since Gatsby generates static files, you can pretty much use any hosting provider. I decided to change my hosting provider from Github Pages to Netlify. I had been hearing about how easy it is to deploy a website to Netlify and they were not lying. Their free tier provides awesome features that makes the deployment process and making a website secure a breeze. It provides one click HTTPS, global CDN, continuous deployment, and the list goes on.

The setup process was so simple. I logged into Netlify, clicked the “New site from Git” button on my dashboard, and chose the Git repository for this project. I configured the site to deploy from master and clicked “Deploy Site”. That was it! Netlify takes care of the build process and publishes it to the web.

As I mentioned, Netlify offers continuous deployment, so now whenever I push changes to my master branch on GitHub, this automatically triggers a new build on Netlify. Once the build is complete, my changes will be live on the web.

Deployment setting is set to auto publishing

The Future Looks Bright

By rebuilding my website with Gatsby, not only did I learn about the different image optimization techniques for future projects, I also learned a bit about GraphQL, practiced my React skills, and took the opportunity to try out a new hosting provider.

I am really excited for the future of Gatsby and similar front end tools that remove the complexities of configuring environments and build tools. Instead, we can focus our energy and time on our code to build awesome stuff for our users.

If you liked this article, click the? below so other people will see it here on Medium.

Let’s be friends on Twitter. Happy Coding :)

Interested in learning JavaScript? Get my ebook at jshandbook.com

Firebase is a mobile and web application development platform that was developed by Firebase, Inc. in 2011. It was acquired by Google in 2014 and rolled up into the Google Cloud service. Now, it’s a flagship product of the Google Cloud offering.

Firebase is a complex and articulated product, mainly targeted at mobile applications.

One of its lesser known features that we’ll discuss in this article is the Firebase advanced web hosting service.

Firebase Hosting Features

Firebase Hosting provides hosting for static web sites, such as

• sites you can generate using static site generators
• sites built with server-side CMS platforms, from which you generate a static copy of the website

You can host anything as long as it’s not dynamic. A WordPress blog, for example, is almost always a good candidate to be a static site if you use Disqus or Facebook comments.

Firebase Hosting delivers files through the Fastly CDN, using HTTPS and provides an automatic SSL certificate, with custom domain support.

Its free tier is generous, with cheap plans available if you outgrow it. It’s very developer-friendly, provides a CLI interface tool, an easy deployment process, and one-click rollbacks.

Why should you use Firebase Hosting?

Firebase can be a good choice to deploy static websites, and Single Page Apps.

I like to use Firebase Hosting mainly because I tested many different providers and Firebase offers an awesome speed across multiple geographic locations without the need for a separate CDN on top, since the CDN is built-in for free.

While having your own VPS is a very good option, the overhead of managing your own server for a simple website is just not worth it. I’d prefer to focus on the content rather than on the operations, just like I’d deploy an app on Heroku.

Firebase is even easier to setup than Heroku.

Install the Firebase CLI tool

Install the Firebase CLI with

npm install -g firebase-tools

or

yarn global add firebase-tools

Authenticate with the Google account (I’m assuming you already have a Google account) by running

firebase login

Create a project in Firebase

Go to https://console.firebase.google.com/ and create a new project.

Now within the console, run the following from the root folder of the site you’re working on:

firebase init

firebase init

Press Space to select the “Hosting” option, then Enter to confirm your choice.

Now you need to choose the project you want to deploy the site to.

Choose “create a new project”.

Now you choose which folder contains the static version of your site. For example, public.

You’ll be asked two questions about the app configuration. Reply “No” to both of them:

• Configure as a single-page app (rewrite all urls to /index.html)?
• File public/index.html already exists. Overwrite?

This will prevent Firebase from adding its own default index.html file.

Now, you’re good to go:

Configure the site

The Firebase CLI app created the firebase.json file in the root site folder.

In this article, I tell how to configure a simple feature in Firebase Hosting, by adding a small bit of configuration in the firebase.json file.

I want to set the Cache-Control header directive on all the site assets - images, CSS and JS files.

A clean firebase.json file contains the following:

{   "hosting": {    "public": "public",     "ignore": [       "firebase.json", "**/.*",       "**/node_modules/**"     ]   } }

It tells Firebase where is the site content, and which files it should ignore. Feel free to add all the folders you have, except public.

We’re going to add a new property in there, called headers:

{   "hosting": {     "public": "public",     "ignore": [       "firebase.json",      "**/.*",       "**/node_modules/**"    ],     "headers": [       {         "source" : "**/*.@(jpg|jpeg|gif|png|css|js)",         "headers" : [ {           "key" : "Cache-Control",           "value" : "max-age=1000000" //1 week+         } ]       }     ]   } }

As you can see, we tell that for all files ending with jpg|jpeg|gif|png|css|js Firebase should apply the Cache-Control:max-age=1000000 directive, which means that all assets are cached for more than 1 week.

Publish the site

When you are ready to publish the site, you just run the following command and Firebase will take care of everything.

firebase deploy

You can now open https://yourproject.firebaseapp.com and you should see the website running.

Custom Domain

The next logical step is to make your site use a custom domain.

Go to https://console.firebase.google.com/project/_/hosting/main and click the “Connect Domain” button:

The wizard will ask you for the domain name, then it will provide a TXT record you need to add to your hosting DNS panel to verify the domain.

If the domain is brand new, it might take some time before you can pass this step.

Once this is done, the interface will give you two A records to add as well to your hosting DNS panel.

If you set up yourdomain.com, don’t forget to also set up www.yourdomain.com by making it a redirect.

Now you just have to wait for your hosting to update the DNS records and for DNS caches to flush.

Also, keep in mind that your SSL certificate is automatically provisioned but requires a bit of time to be valid.

Interested in learning JavaScript? Get my ebook at jshandbook.com