Initial Barebones Setup

The best day to start your website is 24 years ago. The second best day is today!

I've become interested with React, Gatsby, and Tailwind CSS. That's what I'm going to use for this site.

Gatsby Initialization

I'm not a chef, but I love recipes. I'm a fan of not having to figure something out more than once (or twice). I've got a recipe for creating a Gatsby Site and that's what I used to start off.

For this recipe, [project-name] is koamar.com

I figure if you like your prettier settings more than Gatsby's, you've got a file somewhere that you'll use instead of Gatsby's.

1gatsby new [project-name]
2cd [project-name]
3
4# This creates a barebone Gatsby project
5# It does have a layout component and SEO
6
7cp ~/[path-to-my-template-files]/.prettierrc.json .prettierrc
8npm run format
9
10git commit -m "Run prettier on initial Gatsby starter"
11
12# Copy license and create README.md (if this is not just goofing around)
13cp ~/[path-to-my-template-files]/LICENSE .
14npx common-readme -r [project-name] -l MIT > README.md

README and LICENSE files

I used common-readme to create a starter point for README.md. It is geared towards creating npm packages but I find it better than a blank page!

I also stole some licensing ideas from Dan Abramov's overreacted.io blog repo! I liked how he had specific LICENSE files for code snippets and for posts. I've added another for music I plan on adding to the site.

GitHub

On GitHub, created a new repo, connected to it, and pushed my first real commit!

1# Add LICENSE-code-snippets, LICENSE-posts, and LICENSE-music
2# Create initial README content
3git commit -m "Add LICENSE and README files"
4
5# Create new GitHub repo koamar.com
6git remote add origin git@github.com:kenfeliciano/koamar.com.git
7git branch -M main
8git push -u origin main

GitHub settings

This is my first real repo so I thought it best to explore GitHub more thoroughly than I have in the past. Under Security & analysis I enabled Dependabot alerts and Dependabot security updates.

I set up some Secrets so I could setup a Continuous Deployment (CD) to my hosted site location.

FTP_USERNAME
FTP_PASSWORD
FTP_SERVER

Some tidying

The default package.json needed updating. I wonder, "How many websites have the default Gatsby information still there?"

package.json (excerpt)

1{
2  "name": "koamar.com",
3  "private": true,
4  "description": "KoaMar website and blog",
5  "version": "0.1.0",
6  "author": "Ken Feliciano <kafeliciano@gmail.com>",
7
8  /// ...lots of other stuff
9
10  "repository": {
11    "type": "git",
12    "url": "https://github.com/kenfeliciano/koamar.com"
13  },
14  "bugs": {
15    "url": "https://github.com/kenfeliciano/koamar.com/issues"
16  }
17}

The gatsby-config.js file also had a bit of boilerplate to customize in siteMetadata.

gatsby-config.js (excerpt)

1module.exports = {
2  siteMetadata: {
3    title: `KoaMar`,
4    description: `KoaMar Site and Blog`,
5    author: `@koamar`,
6  },
7  /// ...rest of file

The starter included a few pages that I do not need so deleted them.

page-2.js
using-typescript.tsx (it's not in me to learn TypeScript...yet)
gatsby-astronaut.png (👋)

Since this was going to soon replace my current website, I added a bit of ugliness to match the current site. No styling, no React, no Gatsby beyond generating the site, and no real content.

CI/CD

I wanted Continuous Integration/Continuous Deployment (CI/CD) baked in from the start. I had previously figured out how to do this with GitHub actions. For those that are interested in getting something like this working to a generic web hosting company, feel free to look at the main.yml configuration.

I used the isthatcentered/dist-to-ftp GitHub action to send the end result to my site.

First times a charm fail

The first time I ran the CI action, it failed. The initial package.json contained a test script with a positive message to "Write tests!" but I wasn't ready for that. I removed it for now. So it wasn't a total failure, I grabbed the happy little badge.svg and embedded that into my README!

Retrospective

✅ Initial Setup

✅ Lighthouse - go Gatsby!

✅ CI/CD up and running

✅ Site migration - migrating nothing is so much easier than normal data migration projects! Old site linked to Google, new site linked to Google. 🎉

⬜ Needs a favicon - new issue

⬜ PWA - new issue

⬜ Refactor React imports - new issue

Attributions

Photo by Danielle MacInnes (@dsmacinnes) on Unsplash

Tailwind CSS install