Cinematt - personal photography website
This is the latest rebuild of my personal photography website using the NextJS - a React based framework suitable for static sites.
I 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.
When I built my personal website, I thouched on a lot of topics such as server side rendering (SSR), route management and content serving.
NextJS has a lot of this functionality already baked-in, and could be very useful for putting together websites just like this one.
Previously, I used the Hugo static site generator, but this quickly became cumbersome given the amount of infrastructure needed on a machine to get it up and running.
Set up
You will need:
- the latest stable version of NodeJS
- 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.
- (optional) [Docker] if you want to run production-like builds locally.
- (optional) A local SSL certificate so you can run https locally. Follow this excellent guide.
- Check this project out to your local machine with
$ git clone https://github.com/matfin/cinematt-nextjs.git
.
- Install dependencies with
$ yarn
.
- To run in local development mode -
$ yarn dev
.
- To build the project -
$ yarn build
.
- To export the project statically
$ yarn export
which will dump everything into a directory called out/
. You could use a webserver like Nginx to serve this content.
- To run the local Docker build, make sure Docker is installed and running and then run:
-
$ docker-compose build
.
-
$ docker-compose up
if you want to see logs on the console.
-
$ docker-compose up -d
if you want silent output.
### How is this deployed
To deploy this to the production server, a combination of Docker Compose and CircleCI is used as follows:
- There are two containers tied together in the Docker Compose file
- The NodeJS container is responsible for using NextJS to build the static content for the site. This stops when the build is complete.
- The Nginx container is responsible for serving this static content over https.
- Both the above containers share the same volume, so the Nginx container can consume the output generatd by the NodeJS container.
- 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.
- When a pull request is merged to the 'main' branch, the deployment process kicks off as follows:
- The project is checked out and then built with Docker Compose.
- The built images (cinematt-build, cinematt-serve) are then pushed to a public Docker Hub repository.
- The deployment process kicks off, whereupon the docker compose and docker files are copied to the remote server.
- An SSH connection is then made to the remote server (running Docker) and the latest images are pulled down.
- The existing running containers (based on the images) are stopped and removed.
- The new containers are started up.
Roadmap
I have a tech roadmap of things I need to do with this project too.