Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Aging Developer

Netlify Status

This is the personal site of Richard Klein. It is a static site built using gatsby and material-ui. It is deployed via netlify. You can find a live version of it at The site is built based on the Sky Lite theme and expanded upon from there. See the github issues to track development progress.

What's in This Document


Content vs Source Code

Both the source code for the site and the content that is hosted on the site are stored in this repository. With the exception of some top level files the majority of the source code is located in the src folder. The content hosted on the site is located in the content folder.

Start local development

Most javascript developers will likely already have the tools installed, but here is a quick rundown of setting things up just in case you do not. I'm using brew here since I develop on a Mac. Windows developers will have to use other package managers.

  1. Install node and npm
brew install node
  1. Install dependencies
cd agingdeveloper/
make install

This will install local npm dependencies.

  1. Start the development server
make develop
  1. Open the source code and start editing

Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000.

You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data.

Try editing the JavaScript pages in src/pages. Saved changes will live reload in the browser.

Create a build.

make build

Gatsby will perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.

Serve the build locally.

make serve

Gatsby starts a local HTML server for testing your built site. Remember to build your site using gatsby build before using this command.

Create a CI build

make build-ci

This will make sure source code is formatted, run tests, then create a build.

VSCode Settings

VSCode is the main editor that is used on this site. ESLint is used for linting and formatting. These settings are included in the .vscode folder in the root of the project. They should be used for a good workflow where lint issues are automatically corrected on save.

    "editor.tabCompletion": "on",
    "editor.rulers": [80, 100, 120],
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,