Create, Host, and Deploy a Personal Website for $1/month

Example

Here’s what you’ll need:

A computer, internet access, and some familiarity with your device’s command line

A thirst for knowledge

A hankering for adventure

Here’s what is used:

Gatsby-CLI with the corresponding dependencies

Gatsby starter with HTML5up

Gatsby S3 plugin

Amazon Web Services: Route 53, S3

Choose a domain name from AWS Route 53 for $12/year.(Sign up for a FREE AWS account if you don’t have one) Pick a good one- you never know when someone with a better idea might want to buy you out 🤑

BOOM- you’re done! Just kidding- let’s install some free software to build and connect a site to our chosen domain.

2. Install Gatsby CLI + Dependencies

For this tutorial, I’ll be using Gatsby for a static site generator built on the React.js component library.

Don’t worry, I’m a dummy–I don’t really know what I just said either.

Think of it like this: Gatsby is a bootlegging Leonardo Dicaprio and my website is made up of his inventory– plenty of alcohol in nice neat cases called components. Leo, the kind man he is, will help model my distribution network and get all my cases ready to ship so all I have to do is press “Send”.

Let’s install Gatsby and some related packages including node.js, npm, git, and a text editor known as VScode.

Here is the full download tutorial for Mac, Windows, and Linux users.

If you get an error pointing to a package-lock.json file when running “gatsby develop” try the following before running it again:

rm package-lock.json
rm -rf node_modules/
rm -rf .cache/
gatsby clean
npm install

If you’re able to see your “hello-world” site at “localhost:8000” congratulations the rest is pretty easy!

TIP: You don’t need to know much about code to download and use Gatsby effectively. They do an excellent job of dumbing down the material and everything they offer is free.

(If I lose you after this point I apologize. The following showcases the relative ease and power of Gatsby-CLI feel free to read on even if you haven’t installed Gatsby.)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

3. Start a new project

Here I’ll use a sweet starter from HTML5up and run the following:

gatsby new project https://github.com/codebushi/gatsby-starter-dimension

Followed by:

cd project 
gatsby develop

I should get the following at my local server (localhost:8000):

WOW! That was quick, right? Fortunately, Gatsby has a TON of starters that you can use as customizable templates for your site. There’s no need to create your site from scratch (unless you want to) and, in fact, many of these starter templates are free for personal and commercial use.

I’m going to open up my text editor and navigate to the folder titled “project”. Here, I’m using VScode next to my site hosted on my local server to see changes in real-time. Every time I save my project, changes are reflected immediately in my local browser.

I want a different icon instead of that diamond and I want my name front and center along with matching subheadings and corresponding info for the tabs displayed.

Luckily, there are components for ALL of that contained in the “src” or source folder. You can also replace images in the “images” folder keeping the same naming conventions to update the background images.

Just search for the phrase you want to change,

head to the corresponding JS component and edit the text in place. Make sure to keep all changes in between the <p> paragraph </p>, <h1> heading</h1>, or other <> HTML tags.

If you see something that’s tricky to find you can always inspect the element by right-clicking on it in your browser and locating it in your text editor that way:

I’m going to change that diamond to an eagle by importing my own SVG image of an eagle from Iconify:

a) right-click the“images” folder and create a new file called “eagle.svg”

b)in the file paste the SVG code Iconify generates under the “SVG” tab.

c) import the icon into the header component with an “import” statement, call it as an image, <img/> , size (e.g 40px), and style it.

Once you’ve customized your site to your liking its time to deploy it to the web!

4. Deploying your site

For deployment, we can use Amazon’s Simple Storage Service (S3) by creating and deploying our site to an S3 bucket. Be sure to grab your Access Key ID and Secret ID from your AWS security credentials:

Here, we’ll use one of Gatsby’s plugins called gatsby-s3-plugin- their tutorial is as follows:

In your command line make sure you’re in your “project” directory

cd project if not (“cd” stands for “change directory”)

and run the following:

npm i gatsby-plugin-s3

Add it to your gatsby-config.js & configure the bucket name (required)

plugins: [
  {
      resolve: `gatsby-plugin-s3`,
      options: {
          bucketName: 'my-website-bucket'
      },
  },
]

Add a deployment script to your package.json

"scripts": {
    ...
    "deploy": "gatsby-plugin-s3 deploy"
}

Optionally you can skip the confirmation prompt automatically by adding --yes like so:

"deploy": "gatsby-plugin-s3 deploy --yes"

Run the configuration protocol below for AWS and input your access ID and secret ID. Hit “Enter” to accept the default settings AWS gives for output format and region.

aws configure

Once configured run

npm run build && npm run deploy

to deploy your site to an S3 bucket.

5. Linking your domain

In your AWS Management Console, under S3, you should have a new bucket configured:

Once you purchase a domain name from AWS Route 53 you can use this bucket for static site hosting and as an alias target for your domain.

Head to Services>Route 53>Hosted Zones and open the domain you’d like to use.

Hit “Create Record Set” and, under “Alias Target” select your newly created bucket from the dropdown menu. Leave the “name” field blank and hit “save record set.”

6. Test

Check out your site at your domain name and make sure everything’s working. To publish changes you can adjust your code and run

npm run build && npm run deploy

to redeploy to the same S3 bucket and your changes should be pushed live.

With that, you now have a fully functioning website hooked to a custom domain for $12/year or a whopping $1/MONTH!

Wow, look at you go!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

If you want SSL encryption so that “Not-Secure” message goes away you can request one from the AWS certificate manager, and watch the following tutorial remembering to head back into your Route 53 Hosted Zone and finally point that “Alias” target at your CloudFront domain name instead of your previous S3 bucket.

SSL Tutorial

For a very detailed course on getting started with Gatsby check out:

The Great Gatsby Bootcamp

Happy developing!