mattmayo Goto Github PK

This serves as a playground so that I can code and learn about web technologies and frameworks. While it is simple now, I plan to continue to add more content.

• Gatsby
  • Web application framework that serves as a foundation for the site
• GitHub Actions
  • Continuous integration that includes linting, testing, and building the app
• GitHub Pages
  • Securely hosts the web application for free
• GraphQL
  • Allows retreiving different sizes for images to support responsive screens
• ESLint
  • Static code analyzer to find and automatically fix code
• Node.js
  • Web server and development environment for applications leveraging JavaScript or TypeScript languages
• Node Version Manager (nvm)
  • Installs and provides tooling to support multilple versions of Node.js
• PostCSS
  • Cascading style sheets (CSS) tooling
  • Helps with things like linting CSS and transpiling future CSS
• Prettier
  • Code formatter for JavaScript and TypeScript
• React
  • Library for building user interfaces via a simple component architecture
• Tailwind CSS
  • CSS framework that is designed to reduce lines of code and ease styling
• Typescript
  • Typed programming language that is a superset of JavaScript
• Webpack
  • Code transpiler and module bundler

1. Install Node.js, the long term support (LTS) version.
   1. I recommend using nvm, but this is not required as long as you have Node.js installed.
   2. You will also be using Node Package Manager (npm), but this comes with Node, so it doesn't need to be installed explicitly.
2. In your shell of choice execute the following command in the root directory

   npm install

3. To run the application execute

   npm run start

4. Navigate to http://localhost:8000 and voilà!

Currently, the repo is not setup to deploy automatically and this will need to be done from a local workstation.

1. If you haven't already, install packages.

   npm install

2. To deploy from master execute

   npm run deploy

3. Navigate to the repo settings page and update the Custom domain field to matt.mayo.com. This is required because deployment script resets this field to empty. TODO figure out why that happens.

• Add search engine optimization (SEO)
• Add tree shaking to reduce deployed artifcact sizes (JS bundles, CSS, etc)
• Automate deployment using GitHub Actions
• Add metrics for things like page visits
• Add monitoring for when the site goes down, etc.
• Add more content!

In progress work at Revamp Personal Website (2020) project space

Issues backlog via issues page