TimBryan.dev Portfolio(WIP) + Blog

Production:

Preview:

TimBryan.Dev

The good stuff

• 🔥 Remix.js full-stack React-based framework
• 🎈 Syntax Highlighting with Prism.js
• ⬇️ Markdown Blog posts and page content
• 🃏 Vitest-powered tests (WIP - currently unit tests only)
• 🎉 TypeScript
• 🛠 Prettier, Stylelint and ESLint for code formatting and linting
• 🦊 SEO metadata, dynamically generated sitemap and RSS feeds (both XML and JSON)
• 🛠 Husky and lint-staged for pre-commit and pre-push linting, testing and build validation
• 💚 GitHub Actions for enforcing linting, testing and build validation in CI

Requirements

• Node.js (18+)
• PNPM (or NPM)

Getting started

Run the following command on your local environment:

pnpm install

Then, you can run locally in development mode with live reload:

pnpm dev

When the server is ready, it should print a log containing the URL you can go to in your web browser to see the project.

There are also the following commands to help with local development:

pnpm fix          # Writes the suggestions from the formatter, linter, stylelint and runs typecheck
pnpm format       # Formats the code with Prettier
pnpm lint         # Lints the code with ESLint
pnpm style:fix    # Fixes the stylelint issues
pnpm style:lint   # Lints the CSS with stylelint
pnpm test         # Runs the tests
pnpm test:watch   # Runs the tests in watch mode
pnpm typecheck    # Runs the TypeScript typecheck

Basic file structure

.
├── _posts              # Blog posts
├── public              # Static files
│   ├── assets
│   │   └── images
│   │       └── posts   # Images used your blog posts
└── app                 # Typical meat and bones of the Remix.js project

Deploy to production

Docker

First we need to build the Docker image:

docker build -t timbryan-dev .

Then we can run the image with

docker run -p 1337:1337 timbryan-dev

which by default will serve the project at http://localhost:1337.

Docker compose

With Docker Compose, you can run the project in as little as

docker-compose up -d

which by default will serve the project at http://localhost:1337.

Bare metal

To deploy the project to production, run the following commands:

pnpm build
pnpm start

The generated HTML and CSS files are minified (built-in feature from Remix js).

Now, the project is ready to be deployed. All generated files are located in the build folder after running the build command, and the start command will serve the project from the build folder.

The bonus of the Docker/Docker compose approaches is that these steps are done for you.

Contributions

Suggestions are welcome! Feel free to open an issue if you have question or found a bug.

License

TBD, but i would like to keep it as open source as possible to give back to a community that has already given me so much!

---