Today, I'm setting up the basic website for the AI playground website.
Here are the tasks that I completed. Much of this is repeat from my initial blog series on web development so it was a good test for my comfort level for starting fresh with a new site. I could tell as I went though it having my environment already setup made things faster.
Step 1: Creating a Gatsby project
To kick things off, I started a brand new Gatsby project called artificial_expo using the Gatsby CLI command gatsby new artificial_expo.
Step 2: Crafting a Simple Site Layout
My plan for the web aspect of this project is simplicity. So, I set up the layout that looks like a 5th-grader did it. It features a no-frills left sidebar with links to "My Blog," "Sign In," and individual AI tools. Clicking on any AI tool link dynamically loads content into the main body of the page. Using React it was really easy to create a Layout component and a Sidebar component that could be reused on each page. To begin with the site only had the Index page and the first AI playground tool page.
Step 3: Version Control and Collaboration
Next, I created a remote Git repository on GitHub with the same name as our project, "artificial_expo." This repo is private so the link won't show you much.
Step 4: Automated Deployment with Netlify
I connected my GitHub repository to my existing Netlify account and was up and running to deploy to a production environment. Now, whenever I push changes to GitHub, Netlify takes care of deploying the updated site.
Step 5: Subdomain Configuration
To make our subdomain, "ai.wchadjohnson.me," accessible to the world, I configured the necessary DNS records with my DNS provider. After that I updated Netlify configuration to use it. Easy.
Overall, I was ready to start doing AI specific stuff within an hour with the exception of waiting for DNS propogation to occur so that Netlify could use my subdomain address.