Create portfolio app with nginx in 5 minute

How to create and run bootstrap portfolio site in docker container using nginx in 5 minute


nginx is a docker image where you can run a local website. I have post regarding Docker blow the post, in case you need them. We can nginx it to create a static site on localhost with Docker container.

Static/Dynamic web page

As the name indicates the content of our web app remain the same. Grab a beautiful bootstrap for quick start, I have on from https://startbootstrap.com/previews/stylish-portfolio

  • Download the complete code
  • Place them in a local folder (portfolio)
  • Access Powers-hell/CLI/Terminal

Docker Volume

Docker volume is allow us to host data from local system. In our case we want to copy the content of our portfolio web app to /usr/share/nginx/html (nginx folder) in the docker container.

volume can added to container using the -v or –volume label in a docuker run command. Without the :ro the data will be updated when ever a change made the source folder.

Can I dive into nginx folder ?

Yes you can explore the Linux shell using the following command with container ID/name

 docker exec -it 9a99a1ad28e1  bash
 cd /usr/share/nginx/html 
 ls  // see all the files

Let’s create and run the container

Read only
docker run --name myapp -v e:/portfolio:/usr/share/nginx/html:ro  -d -p 8080:80 nginx:latest
Dynamic
docker run --name myapp -v e:/portfolio:/usr/share/nginx/html  -d -p 8080:80 nginx:latest

:ro stands for read only, you can remove it and the data will change as you edit the content in the source folder, in a limited sense it can be dynamic.

Go to the browser and try http:///localhost:8080

You can use the id/name to stop/start/remove the container.

docker stop 6ec62466d248  //stop container with id
docker start 6ec62466d248  //start container with id
docker rm    6ec62466d248  //remove the container with id

Other Docker posts you may interested in

Author: Manoj

Developer and a self-learner, love to work with Reactjs, Angular, Node, Python and C#.Net

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.