The website by design presentations

.
│
├─ .github/                      # GitHub-related files  
│   └─workflows/                 # GitHub Actions workflow configurations
│       ├─ dev.yml               # YAML configuration for dev workflow
│       └─ main.yml              # YAML configuration for main workflow
│
├─ infra/                        # Infrastructure-related files and scripts
│   ├─ nginx/                    # Nginx configuration files
│   │   ├─ default.conf          # Default Nginx configuration
│   │   └─ local.conf            # Local Nginx configuration
│   ├─ docker-compose.yaml       # Docker Compose configuration
│   └─ init-letsencrypt.sh       # Shell script for initializing Let's Encrypt
│
├─ venv/                         # Virtual environment for the project
│
├─ website/                      # Website project folder
│  ├── core/                     # Core application files
│  ├── static/                   # Static files (e.g., CSS, JavaScript)
│  ├── templates/                # HTML templates
│  └─ website/                   # Website-specific files
│       ├─ .env                  # Environment variables configuration
│       ├─ .gitignore            # Git ignore rules
│       ├─ db.sqlite3            # SQLite database file
│       ├─ Dockerfile            # Docker configuration file
│       ├─ manage.py             # Django management script
│       └─ requirements.txt      # Python dependencies
│
├─ LICENSE                       # Project license file
│
├─ README.md                     # Project README file
│
└─ setup.cfg                     # Project setup configuration

Description

This is a website for a designer that specializes in creating presentations. The website showcases the designer's portfolio, skills, and services. Visitors can view the designer's previous work and can contact them for potential collaborations.

Features

Portfolio showcasing previous work About the designer section Advantages Contact form for potential collaborations

Technologies Used

• Django
• Docker
• Nginx
• Yandex.Cloud
• Bootstrap framework
• HTML
• CSS

Installation

To install and run the project locally, follow these steps:

1. Clone the repository using:

git clone https://github.com/evgvol/website-by-designer.git

2. Create a .env file in the root directory of the project.

3. Add the following environment variables to the .env file:

SECRET_KEY='django-insecure-+%_0#njq$hkob)bx)les6ta6vh!@9=d5%mz3j#rvfcj%2)k4-u'
DEBUG=False
ALLOWED_HOSTS=127.0.0.1, localhost
EMAIL_HOST_USER='your-email@yandex.ru'
EMAIL_HOST_PASSWORD='your-password'
EMAIL_ADMIN='your-email@yandex.ru'
TELEGRAM_TOKEN='your-telegram-token'
TELEGRAM_CHAT_ID='your-telegram-id'

4. Navigate to the project directory using:

cd website-by-designer/website

5. Install the dependencies using the following command:

pip install -r requirements.txt

6. Start the Django development server using the following command:

python manage.py runserver

7. Open your web browser and navigate to http://localhost:8000 to view the application.

We will perform all actions in Docker, docker-compose both on the local machine and on VM server. We will pre-install the necessary components for work on the VM in the cloud:

*0. Add the following environment variables to Github Actions:

SECRET_KEY='django-insecure-+%_0#njq$hkob)bx)les6ta6vh!@9=d5%mz3j#rvfcj%2)k4-u'
DEBUG=False
ALLOWED_HOSTS=127.0.0.1, localhost
EMAIL_HOST_USER='your-email@yandex.ru'
EMAIL_HOST_PASSWORD='your-password'
EMAIL_ADMIN='your-email@yandex.ru'
HOST=011.222.333.444
USER='your-username'
PASSWORD='your-password'
SSH_KEY='your-keys'
DOCKER_USERNAME='login-by-dockerhub'
DOCKER_PASSWORD='password-by-dockerhub'
TELEGRAM_TOKEN='your-telegram-token'
TELEGRAM_CHAT_ID='your-telegram-id'

1. Connect to your server

ssh admin@011.222.333.444
# admin: the name of the user under which the connection to the server will be made
# 011.222.333.444: Server IP address

2. First update the existing package list:

sudo apt update

3. Now update the packages installed in the system and install security updates: the system was installed on your server from the internal repository of Yandex.Cloud, and it is unknown when it was updated. Trust, but update:

sudo apt upgrade -y

3. Install Docker on your server:

sudo apt install docker.io

4. The following command downloads version 1.26.0 and saves the executable file in the /usr/local/bin/docker-compose directory, as a result of which this software will be globally available under the name docker-compose:

sudo curl -L "https://github.com/docker/compose/releases/download/1.26.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

5. Then you need to set the correct permissions to make the docker-compose command executable:

sudo chmod +x /usr/local/bin/docker-compose

6. To check the success of the installation, run the following command:

docker-compose --version
# The output will look like this:
#docker-compose version 1.26.0, build 8a1c60f6

6. Copy the docker-compose files.yaml and nginx/default.conf from your project to the server in home/<your_isegame>/docker-compose.yaml and home/<your_isegame>/nginx/default.conf, respectively.:

#These files need to be copied from the infra directory of the local
scp docker-compose machine.yml nginx.conf admin@011.222.333.444:/home/admin/

Launch

The git push command is the project workflow trigger. When executing the git push command, a set of jobs command blocks will be launched (see the file Workflow). The following blocks will be executed sequentially:

build_and_push_to_docker_hub - upon successful completion of the tests, an image is collected for the docker container and sent to DockerHub

deploy - after sending the image to DockerHub, the deployment of the project on the server begins.

After completing the above procedures, you need to establish a connection to the server:

ssh admin@011.222.333.444

Execute the commands one by one:

sudo docker-compose exec web python manage.py migrate
sudo docker-compose exec web python manage.py createsuperuser
sudo docker-compose exec web python manage.py collectstatic --no-input

The project is now available at http://011.222.333.444/.

The Chicken or the Egg?

Download the script to your working directory as init-letsencrypt.sh:

cd infra/
curl -L https://raw.githubusercontent.com/wmnnd/nginx-certbot/master/init-letsencrypt.sh > init-letsencrypt.sh

Edit the script to add in your domain(s) and your email address. If you’ve changed the directories of the shared Docker volumes, make sure you also adjust the data_path variable as well.

Then run:

chmod +x init-letsencrypt.sh

and

sudo ./init-letsencrypt.sh

Everything is in place now. The initial certificates have been obtained and our containers are ready to launch. Simply run docker-compose up and enjoy your HTTPS-secured website or app.

The project is now available at https://011.222.333.444/.

Credits

This project was created by Evgeniy Volochek. The Bootstrap framework was used to assist with the layout and styling of the website.

License

This project is licensed under the MIT License. See the LICENSE.md file for details.