{"id":14957099,"url":"https://github.com/matfin/cinematt-nextjs","last_synced_at":"2025-10-01T16:31:52.324Z","repository":{"id":41962523,"uuid":"273891441","full_name":"matfin/cinematt-nextjs","owner":"matfin","description":"My personal photography website rebuilt using NextJS and TypeScript.","archived":false,"fork":false,"pushed_at":"2023-04-04T22:46:47.000Z","size":1966,"stargazers_count":19,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-16T02:21:56.661Z","etag":null,"topics":["circleci","cloudinary","docker","next-js","nginx","react-js","responsive-images","styled-components","webpack-5"],"latest_commit_sha":null,"homepage":"https://cinematt.photography","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matfin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-21T11:34:19.000Z","updated_at":"2024-12-30T18:29:58.000Z","dependencies_parsed_at":"2024-12-03T19:10:45.396Z","dependency_job_id":"cbcaa7d3-cc2b-4223-a0ef-efa19b08bca4","html_url":"https://github.com/matfin/cinematt-nextjs","commit_stats":{"total_commits":75,"total_committers":3,"mean_commits":25.0,"dds":0.36,"last_synced_commit":"40f35b6845e118d7f592b3754f85d109d3727ef8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfin%2Fcinematt-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfin%2Fcinematt-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfin%2Fcinematt-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfin%2Fcinematt-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matfin","download_url":"https://codeload.github.com/matfin/cinematt-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234883315,"owners_count":18901365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["circleci","cloudinary","docker","next-js","nginx","react-js","responsive-images","styled-components","webpack-5"],"created_at":"2024-09-24T13:14:04.838Z","updated_at":"2025-10-01T16:31:51.812Z","avatar_url":"https://github.com/matfin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Cinematt - personal photography website\nThis is the latest rebuild of my personal photography website using the [NextJS](https://nextjs.org/) - a React based framework suitable for static sites.\n\nI wanted to build this project to explore the basics of NextJS and build a static site. This was the perfect use case to generate a static site.\n\nWhen I built my [personal website](https://github.com/matfin/personal-website), I thouched on a lot of topics such as server side rendering (SSR), route management and content serving.\n\nNextJS has a lot of this functionality already baked-in, and could be very useful for putting together websites just like this one.\n\nPreviously, I used the [Hugo](https://gohugo.io/) static site generator, but this quickly became cumbersome given the amount of infrastructure needed on a machine to get it up and running.\n\n### Set up\nYou will need:\n- the latest stable version of [NodeJS](https://nodejs.org/en/)\n- a command line with Git installed. Linux and MacOS users should already have this. Windows users should check out [https://docs.microsoft.com/en-us/windows/wsl/about] which is what is needed to run most of the tools for this project.\n- (optional) [Docker] if you want to run production-like builds locally.\n- (optional) A local SSL certificate so you can run https locally. Follow this [excellent guide](https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/).\n\n1) Check this project out to your local machine with `$ git clone https://github.com/matfin/cinematt-nextjs.git`.\n2) Install dependencies with `$ yarn`.\n3) To run in local development mode - `$ yarn dev`.\n4) To build the project - `$ yarn build`.\n5) To export the project statically `$ yarn export` which will dump everything into a directory called `out/`. You could use a webserver like [Nginx](https://www.nginx.com/) to serve this content.\n6) To run the local Docker build, make sure Docker is installed and running and then run:\n  - `$ docker-compose build`.\n\t- `$ docker-compose up` if you want to see logs on the console.\n\t- `$ docker-compose up -d` if you want silent output.\n\n### How is this deployed\nTo deploy this to the production server, a combination of Docker Compose and [CircleCI](https://circleci.com/) is used as follows:\n- There are two containers tied together in the [Docker Compose file](docker-compose.yml)\n  - The NodeJS container is responsible for using NextJS to build the static content for the site. This stops when the build is complete.\n\t- The Nginx container is responsible for serving this static content over https.\n- Both the above containers share the same volume, so the Nginx container can consume the output generatd by the NodeJS container.\n- When code is pushed to a branch other than 'main', all the checks are run (with CircleCI) for things such as unit tests and code quality checks.\n- When a pull request is merged to the 'main' branch, the deployment process kicks off as follows:\n  - The project is checked out and then built with Docker Compose.\n\t- The built images (cinematt-build, cinematt-serve) are then pushed to a public Docker Hub repository.\n\t- The deployment process kicks off, whereupon the docker compose and docker files are copied to the remote server.\n\t- An SSH connection is then made to the remote server (running Docker) and the latest images are pulled down.\n\t- The existing running containers (based on the images) are stopped and removed.\n\t- The new containers are started up.\n\n### Roadmap\nI have a [tech roadmap](ROADMAP.md) of things I need to do with this project too.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatfin%2Fcinematt-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatfin%2Fcinematt-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatfin%2Fcinematt-nextjs/lists"}