Building My Website: Journey and Tools

Creating this blog was a labor of love, filled with blood, sweat, tears, and quite a bit of cursing. It started out as a simple create react app, then a gatsby application, and then blossomed into this nextjs website that you see now. 

Technology Stack Breakdown

Frontend: I used Next.js for the frontend. It offers a seamless developer experience with server-side rendering and static site generation, making it an excellent choice for a modern web application.

Backend: Strapi powers the backend. It’s a robust headless CMS that simplifies content management and integrates well with other tools.

Database: I chose PostgreSQL for its reliability and powerful features.

Storage: For block storage, I went with Vercel's S3 service.

Design Philosophy

Back to the languages most of my project is coded in Nodejs. While I'm not the biggest fan of Node.js for backend development, I believe in not reinventing the wheel. Using Strapi as a content management system saved me from building one from scratch. Additionally, I developed a plugin for Strapi called strapi-supergpt, and this project allowed me to showcase it to potential clients.

My blog is a static site generator I'm a huge proponent static generators. The reason why I do this is because it makes your websites load faster. It does this by rending the page server side as a static website and then serving it as html. It's perfect for things like blogs that don't change much and generally stay the same for long periods of time.

Monorepos and Configuration

I'm a big fan of monorepos because they allow me to run multiple projects together. This setup makes it easier to share configuration data via environment variables and facilitates communication between different parts of the application through various routes. Unfortunately, Heroku's lack of support for monorepos made this project more challenging.

How I share and run these projects is the truly fun part I use docker as the middleman and a simple makefile to run all simple commands. If you use .env file you can have a list of values that can be shared between applications making it easier for projects to communicate with each and sharing secrets.  

Here's an example:
 

proxy:
   container_name: ${PROXY_NAME}
   restart: always
   image: nginx:alpine
   env_file:
     - .env
   # command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
   networks:
     - app-tier
   volumes:
     - /var/run/docker.sock:/var/run/docker.sock
     - ./nginx/sites-availble:/etc/nginx/templates
     - ./nginx/nginx.conf:/etc/nginx/nginx.conf
     - ./nginx/proxy.conf:/etc/nginx/proxy.conf
     - ./nginx/security.conf:/etc/nginx/security.conf
     - ./.certs:/etc/ssl/certs
   ports:
     - ${HTTP_PORT}:80
     - ${SSL_PORT}:443
 sql:
   container_name: ${DATABASE_CLIENT}
   image: postgres:alpine
   networks:
     - app-tier
   environment:
     # Beware of special characters in password that can be interpreted by shell
     POSTGRES_DB: ${STRAPI_DATABASE_NAME}
     POSTGRES_USER: ${DATABASE_USERNAME}
     POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
   restart: unless-stopped
   
 app:
     container_name: ${APP_NAME}
     env_file:
         - .env
     build:
     context: ./some/location
   networks:
       app-tier
   command: some command lol
   volumes:
       - ./I/think/you:Understand/How/This/Works

A few key take aways I'd like you to get from this example is

Your project and anything will be at localhost which makes doing requests easier

MAKE SURE YOU MANUALLY MAP ENVIORMENT VARIABLES when you do a rebuild sometimes the data get's erased when you change something in you .env file

if you manually map them there is a good chance you postgres data won't rebuild unless the values assigned have been changed

I don't have a third reason but 3 looks better than 2 :)

Security

So I do a few things for security first everything uses ssl that's the first thing. The second important thing was implemented back in August 31, 2024 where I have updated the Nextjs website where not only does it proxy my requests to Strapi. It also hides my API key, the location of my server, it also doesn't allow you to make requests to it from any other client but a web browser.

I also have cors enabled for both my website and apis but I'm always working to get better at security since it's not my strong point when it comes to development.

Conclusion

That's it for my first blog post! Stay tuned for more updates and insights as I continue to develop and refine my projects. My main goal with this blog is to use this as jumping off point to start maybe a youtube channel.