In this article, we will explore how to set up a Continuous Integration and Continuous Deployment (CI/CD) pipeline using GitHub Actions to build and deploy a Dockerized application to an Azure Web App. The pipeline will handle both front-end and back-end builds, Docker image creation, and deployment to Azure. Let’s dive into the details.

Prerequisites

Before getting started, ensure you have the following:

• An Azure account
• An Azure Container Registry (ACR)
• An Azure Web App for Containers
• A GitHub repository with your application code
• GitHub Secrets configured with your Azure credentials

Folder Structure

Your project should have the following structure:

├── .github
│   └── workflows
│       └── azure-cicd-dev.yml
│
├── front
│   ├── Dockerfile
│   └── # other front-end related files
│
├── back
│   ├── Dockerfile
│   └── # other back-end related files
│
├── docker-compose-azure-dev.yml
└── # other project files

• The front directory contains the Dockerfile and other files related to the front-end application.
• The back directory contains the Dockerfile and other files related to the back-end application.
• The docker-compose-azure-dev.yml file is at the root of the project and defines the services and their configurations for the Docker Compose setup.

Front-End Dockerfile (front/Dockerfile)

# Use the official node image as the base image
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy the rest of the application code
COPY . .

# Build the application
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Command to run the app
CMD ["npm", "start"]

Back-End Dockerfile (back/Dockerfile)

# Use the official node image as the base image
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 8080

# Command to run the app
CMD ["npm", "start"]

Docker Compose File (docker-compose-azure-dev.yml)

version: '3.8'

services:
  frontend:
    image: myacr.azurecr.io/frontend:latest
    ports:
      - "80:3000"
    environment:
      - NODE_ENV=dev

  backend:
    image: myacr.azurecr.io/backend:latest
    ports:
      - "8080:8080"
    environment:
      - NODE_ENV=dev

Setting Up the GitHub Actions Workflow

We’ll create a GitHub Actions workflow file named azure-cicd-dev.yml in the .github/workflows directory of your repository. This workflow will have two main jobs: npm-build and docker-build-and-deploy.

Workflow Dispatch Inputs

The workflow can be manually triggered with the following inputs:

• run_npm_builds: A boolean to decide whether to run npm builds.
• additional_string_for_docker_tag: An optional string to append to the Docker tag.

name: DEV compose build and deploy to Azure Web App

on:
  workflow_dispatch:
    inputs:
      run_npm_builds:
        description: 'Run npm builds'
        required: true
        type: choice
        default: 'false'
        options:
        - 'true'
        - 'false'
      additional_string_for_docker_tag:
        description: 'Additional string for Docker tag'
        required: false
        type: string

Job 1: NPM Build

The npm-build job runs only if run_npm_builds is set to true. It checks out the code and builds both the front-end and back-end using npm.

jobs:
  npm-build:
    runs-on: ubuntu-latest
    if: ${{ github.event.inputs.run_npm_builds == 'true' }}
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
      
    - name: Build frontend 
      run: |
       cd front
       npm ci
       npm run build
     
    - name: Build backend 
      run: |
       cd back
       npm ci
       npm run build

Job 2: Docker Build and Deploy

The docker-build-and-deploy job depends on the npm-build job and runs after it, or immediately if npm-build is not executed. This job involves several steps:

1. Check out the code.
2. Login to Azure CLI.
3. Set environment variables for Docker tags and the agent’s IP address.
4. Whitelist the agent IP in the Azure Container Registry (ACR).
5. Build and push Docker images for both the front-end and back-end.
6. Update the Docker Compose file with the new image tags.
7. Deploy the Docker Compose file to Azure Web App.
8. Commit and push changes to the repository.
9. Logout from Azure CLI.

  docker-build-and-deploy:
    runs-on: ubuntu-latest
    needs: npm-build
    if: ${{ github.event.inputs.run_npm_builds == 'false' || success() }}
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      with:
        ref: ${{ github.ref }}
      
    - name: AZ CLI login
      uses: azure/login@v1
      with:
        creds: '{"clientId":"${{ secrets.CLIENT_ID }}","clientSecret":"${{ secrets.CLIENT_SECRET }}","subscriptionId":"${{ secrets.SUBSCRIPTION_ID }}","tenantId":"${{ secrets.TENANT_ID }}"}'
        
    - name: Set variables
      id: vars
      run: |
           echo "::set-output name=docker_tag::$(git rev-parse --short HEAD)-$(TZ='Europe/Paris' date +%Y-%m-%d-%H-%M)"
           echo "::set-output name=agent_ip::$(dig +short myip.opendns.com @resolver1.opendns.com)"
        
    - name: Whitelist agent ip
      run: |
          if [ -z "$(az acr network-rule list --name ${{ vars.ACR_REPO_SHORT }} --resource-group ${{ vars.ACR_REPO_RG }} | grep ${{ steps.vars.outputs.agent_ip }} )"]
          then 
            echo "Adding agent IP ${{ steps.vars.outputs.agent_ip }} to Azure Container Registry firewall whitelist"
            az acr network-rule add --name ${{ vars.ACR_REPO_SHORT }} --resource-group ${{ vars.ACR_REPO_RG }} --ip-address ${{ steps.vars.outputs.agent_ip }}
          else
            echo "Agent is already whitelisted; skipping."
          fi
      
    - uses: azure/docker-login@v1
      with:
        login-server: ${{ vars.ACR_REPO }}
        username: ${{ secrets.DOCKERIO_USERNAME }}
        password: ${{ secrets.DOCKERIO_PASSWORD }}
    - run: |
        docker build -t ${{ vars.ACR_REPO }}/frontend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }} -f front/Dockerfile .
        docker push ${{ vars.ACR_REPO }}/frontend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }}
        
        docker build -t ${{ vars.ACR_REPO }}/backend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }} -f back/Dockerfile .
        docker push ${{ vars.ACR_REPO }}/backend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }}

    - name: Remove whitelisted agent ip
      if: always()
      run: |       
          echo "Removing agent IP ${{ steps.vars.outputs.agent_ip }} from Azure Container Registry firewall whitelist"
          az acr network-rule remove --name ${{ vars.ACR_REPO_SHORT }} --resource-group ${{ vars.ACR_REPO_RG }} --ip-address ${{ steps.vars.outputs.agent_ip }} --only-show-errors --output none
        
    - name: Update the Dockercompose file
      env:
        FRONT_NEW_VERSION: '${{ vars.ACR_REPO }}\/frontend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }}'
        BACK_NEW_VERSION: '${{ vars.ACR_REPO }}\/backend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }}'
      run: |
       sed -i 's/^ *image: .*frontend:.*$/    image: '$FRONT_NEW_VERSION'/' docker-compose-azure-dev.yml
       sed -i 's/^ *image: .*backend:.*$/    image: '$BACK_NEW_VERSION'/' docker-compose-azure-dev.yml
       
       
    - name: Deploy to Azure Web App
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ vars.DEV_APP_NAME }}
        configuration-file: 'docker-compose-azure-dev.yml'
        
    - name: Commit files
      run: |
        git config --local user.email "action@github.com"
        git config --local user.name "GitHub Action"
        git commit -m "Bump versions in docker-compose-azure" docker-compose-azure-dev.yml
        
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.PAT }}
        
    - name: AZ CLI logout
      if: always()
      run: |
        az logout

Full Code

Here is the full code for the GitHub Actions workflow file azure-cicd-dev.yml:

name: DEV compose build and deploy to Azure Web App

on:
  workflow_dispatch:
    inputs:
      run_npm_builds:
        description: 'Run npm builds'
        required: true
        type: choice
        default: 'fasle'
        options:
        - 'true'
        - 'false'
      additional_string_for_docker_tag:
        description: 'Additional string for Docker tag'
        required: false
        type: string

jobs:
  npm-build:
    runs-on: ubuntu-latest
    if: ${{ github.event.inputs.run_npm_builds == 'true' }}
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
      
    - name: Build frontend 
      run: |
       cd front
       npm ci
       npm run build
     
    - name: Build backend 
      run: |
       cd back
       npm ci
       npm run build
  
  docker-build-and-deploy:
    runs-on: ubuntu-latest
    needs: npm-build
    if: ${{ github.event.inputs.run_npm_builds == 'false' || success() }}
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      with:
        ref: ${{ github.ref }}
      
    - name: AZ CLI login
      uses: azure/login@v1
      with:
        creds: '{"clientId":"${{ secrets.CLIENT_ID }}","clientSecret":"${{ secrets.CLIENT_SECRET }}","subscriptionId":"${{ secrets.SUBSCRIPTION_ID }}","tenantId":"${{ secrets.TENANT_ID }}"}'
        
    - name: Set variables
      id: vars
      run: |
           echo "::set-output name=docker_tag::$(git rev-parse --short HEAD)-$(TZ='Europe/Paris' date +%Y-%m-%d-%H-%M)"
           echo "::set-output name=agent_ip::$(dig +short myip.opendns.com @resolver1.opendns.com)"
        
    - name: Whitelist agent ip
      run: |
          if [ -z "$(az acr network-rule list --name ${{ vars.ACR_REPO_SHORT }} --resource-group ${{ vars.ACR_REPO_RG }} | grep ${{ steps.vars.outputs.agent_ip }} )"]
          then 
            echo "Adding agent IP ${{ steps.vars.outputs.agent_ip }} to Azure Container Registry firewall whitelist"
            az acr network-rule add --name ${{ vars.ACR_REPO_SHORT }} --resource-group ${{ vars.ACR_REPO_RG }} --ip-address ${{ steps.vars.outputs.agent_ip }}
          else
            echo "Agent is already whitelisted; skipping."
          fi
      
    - uses: azure/docker-login@v1
      with:
        login-server: ${{ vars.ACR_REPO }}
        username: ${{ secrets.DOCKERIO_USERNAME }}
        password: ${{ secrets.DOCKERIO_PASSWORD }}
    - run: |
        docker build -t ${{ vars.ACR_REPO }}/frontend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }} -f front/Dockerfile .
        docker push ${{ vars.ACR_REPO }}/frontend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }}
            
        docker build -t ${{ vars.ACR_REPO }}/backend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }} -f back/Dockerfile .
        docker push ${{ vars.ACR_REPO }}/backend:${{ steps.vars.outputs.docker_tag }}${{ github.event.inputs.additional_string_for_docker_tag }}

    - name: Remove whitelisted agent ip
      if: always()
      run: |       
          echo "Removing agent IP ${{ steps.vars.outputs.agent_ip }} from Azure Container Registry firewall whitelist"
          az acr network-rule remove --name ${{ vars.ACR_REPO_SHORT }} --resource-group ${{ vars.ACR_REPO_RG }} --ip-address ${{ steps.vars.outputs.agent_ip }} --only-show-errors --output none
        
    - name: Update the Dockercompose file
      env:
        FRONT_NEW_VERSION: '${{ vars.ACR_REPO }}\/frontend:${{ steps.vars.outputs.docker_tag }}${{ inputs.additional_string_for_docker_tag }}'
        BACK_NEW_VERSION: '${{ vars.ACR_REPO }}\/backend:${{ steps.vars.outputs.docker_tag }}${{ inputs.additional_string_for_docker_tag }}'
      run: |
       sed -i 's/^ *image: .*frontend:.*$/    image: '$FRONT_NEW_VERSION'/' docker-compose-azure-dev.yml
       sed -i 's/^ *image: .*backend:.*$/    image: '$BACK_NEW_VERSION'/' docker-compose-azure-dev.yml

       
    - name: Deploy to Azure Web App
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ vars.DEV_APP_NAME }}
        configuration-file: 'docker-compose-azure-dev.yml'
        
    - name: Commit files
      run: |
        git config --local user.email "action@github.com"
        git config --local user.name "GitHub Action"
        git commit -m "Bump versions in docker-compose-azure" docker-compose-azure-dev.yml
        
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.PAT }}
        
    - name: AZ CLI logout
      if: always()
      run: |
        az logout

Summary

This GitHub Actions workflow enables a seamless CI/CD process for deploying a Dockerized application to an Azure Web App. By setting up the necessary jobs and steps, you can automate the build, push, and deployment processes, ensuring that your application is always up-to-date and running smoothly in the cloud.

Feel free to customize this workflow further to fit your specific needs, and happy deploying! 🚢

…

🙌🏻 Thank you for reading! Your time and attention are greatly appreciated.

🚀 I’m grateful you stayed with me until the end. If you have questions or feedback about this blog, I’d love to hear from you!

💼 Connect with me on LinkedIn: Dömötör Lugosi

See you in the next post!

Web scraping has become an essential skill for data enthusiasts and professionals who need to extract information from websites efficiently. However, as websites become more sophisticated in detecting and blocking scraping attempts, it’s crucial to employ advanced techniques to avoid being blocked. One such technique is using proxies with Selenium. In this blog post, we’ll walk through how to use free proxies with Selenium for web scraping and share some code to get you started.

Why Use Proxies?

Websites often implement measures to block multiple requests from the same IP address to prevent scraping. Proxies help you mask your IP address by routing your requests through different IPs, making it harder for websites to detect and block your scraping activities.

Setting Up Your Environment

First, ensure you have Python installed on your machine. You’ll also need the following Python packages:

• selenium
• requests
• beautifulsoup4

You can install these packages using pip:

pip install selenium requests beautifulsoup4

The Code

Below is a step-by-step explanation of the code to scrape a website using Selenium with free proxies.

Step 1: Import Required Libraries

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options
from bs4 import BeautifulSoup
import time
import requests

Step 2: Define the Proxy Filtering Function

This function fetches a list of proxies from sslproxies.org and returns them in a list.

def filter_proxies():   
    response = requests.get('https://www.sslproxies.org/')
    soup = BeautifulSoup(response.text, "html.parser")
    proxies = []
    for item in soup.select("table.table tbody tr"):
        if not item.select_one("td"):
            break
        ip = item.select_one("td").text
        port = item.select_one("td:nth-of-type(2)").text
        proxies.append(f"{ip}:{port}")
    return proxies

Step 3: Create a Proxy-Enabled WebDriver

This function configures Selenium to use a specified proxy.

def create_proxy_driver(PROXY):
    options = Options()
    options.add_argument(f'--proxy-server={PROXY}')
    driver = webdriver.Chrome(options=options)
    return driver

Step 4: Scrape the Target Website

This function attempts to scrape the target website (https://index.hu) using the available proxies. If a proxy fails, it switches to another one.

def get_content(ALL_PROXIES, driver):
    link = "https://index.hu"
    while True:
        try:
            driver.get(link)
            print("Successfully accessed the link")
            
            # Add your Selenium scraping code here

            break  # Exit loop if scraping is successful

        except Exception as e:
            print(f"Error: {e}")
            driver.quit()
            if not ALL_PROXIES:
                print("Proxies used up")
                ALL_PROXIES = filter_proxies()
            new_proxy = ALL_PROXIES.pop()
            driver = create_proxy_driver(new_proxy)
            print(f"New proxy being used: {new_proxy}")
            time.sleep(1)

Step 5: Main Function

This section initializes the proxy list and starts the scraping process.

if __name__ == '__main__':
    ALL_PROXIES = filter_proxies()
    new_proxy = ALL_PROXIES.pop()
    driver = create_proxy_driver(new_proxy)
    get_content(ALL_PROXIES, driver)

Full Code

Here is the complete code for reference:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options
from bs4 import BeautifulSoup
import time
import requests

link="https://index.hu"

def filter_proxies():   
    response = requests.get('https://www.sslproxies.org/')
    soup = BeautifulSoup(response.text, "html.parser")
    proxies = []
    for item in soup.select("table.table tbody tr"):
        if not item.select_one("td"):
            break
        ip = item.select_one("td").text
        port = item.select_one("td:nth-of-type(2)").text
        proxies.append(f"{ip}:{port}")
    return proxies

def create_proxy_driver(PROXY):
    options = Options()
    options.add_argument(f'--proxy-server={PROXY}')
    driver = webdriver.Chrome(options=options)
    return driver

def get_content(ALL_PROXIES, driver):
    while True:
        try:
            driver.get(link)
            print("Successfully accessed the link")

            # Add your Selenium scraping code here
            
        except Exception as e:
            print(f"Error: {e}")
            driver.quit()
            if not ALL_PROXIES:
                print("Proxies used up")
                ALL_PROXIES = filter_proxies()
            new_proxy = ALL_PROXIES.pop()
            driver = create_proxy_driver(new_proxy)
            print(f"New proxy being used: {new_proxy}")
            time.sleep(1)

if __name__ == '__main__':
    ALL_PROXIES = filter_proxies()
    new_proxy = ALL_PROXIES.pop()
    driver = create_proxy_driver(new_proxy)
    get_content(ALL_PROXIES, driver)

Conclusion

Using proxies with Selenium can significantly enhance your web scraping capabilities by preventing IP blocking and enabling access to sites that would otherwise restrict your scraping efforts. By following the steps outlined in this guide, you can build a robust web scraper that navigates these challenges effectively.

Happy scraping!

…

🙌🏻 Thank you for reading! Your time and attention are greatly appreciated.

🚀 I’m grateful you stayed with me until the end. If you have questions or feedback about this blog, I’d love to hear from you!

💼 Connect with me on LinkedIn: Dömötör Lugosi

See you in the next post!

In the fast-paced digital age, where the reliability and efficiency of websites are crucial, having a dependable and cost-effective solution to ensure your website is functioning correctly is essential. This article introduces an automated approach to monitor your website’s health using Selenium, a powerful tool for automating web browsers, and GitHub Actions, an excellent resource for continuous integration and deployment.

# TLDR Version
## Features

- **Automated Testing:** Regularly checks for console errors and measures page load times.
- **Screenshot Capturing:** Takes screenshots of the website for visual inspection.
- **Flexible Execution:** Set to run automatically on an hourly basis or can be triggered manually for specific URLs.
- **Automatic Notifications:** Sends email notifications via GitHub if any issues are detected during a run. Can be configured to send notifications through Microsoft Teams or Slack.
- **CI/CD Integration:** Can be integrated into continuous integration and deployment pipelines.

## Setup and Usage

1. **Fork the Repository:** 
   Fork the https://github.com/lugosidomotor/smoke-test repository to your GitHub account

2. **Configure the Script:**
   Update the URL in two places in the script to point to your website. Lines 10 and 24 in .github/workflows/SMOKE_TEST.yml.

3. **GitHub Actions:**
   Once set up, use the Actions tab on GitHub to view the script's performance. It displays loading speed, logs, and screenshots.

The Power of Selenium and GitHub Actions

Selenium is a versatile tool that allows you to automate web browser actions, making it perfect for testing web applications. By combining Selenium with GitHub Actions, a feature on GitHub that automates your workflow, you have a powerful toolkit at your fingertips. This combination allows you to automate tests and monitor your website’s performance regularly.

Getting Started with the Provided Script

I’ve developed a Python script that uses Selenium for automated website testing. This script can check for console errors, measure page load times, and take screenshots of your website. To use it, simply fork the repository at https://github.com/lugosidomotor. After forking, you’ll need to update the URL in two places in the script to point to your website.

Monitoring Performance on GitHub

Once you’ve set up the script and pushed it to your GitHub repository, you can utilize the Actions tab on GitHub to view the performance. It displays the loading speed, logs, and screenshots generated by the script, giving you a comprehensive view of your website’s performance.

Automated and Manual Execution

The true beauty of this script lies in its flexibility. It’s set up to automatically run on an hourly basis, ensuring consistent monitoring of your website. However, if you wish to check a different URL or perform an immediate test, the script can also be triggered manually, giving you control when you need it.

Automatic Notifications for Errors

When the script identifies an issue during its run, GitHub automatically sends an email notification. This feature ensures that you’re always in the loop should any problems arise. Additionally, the script can be easily modified to send notifications via Microsoft Teams or Slack, allowing for seamless integration into your existing communication channels.

Integration into CI/CD Pipelines

This approach isn’t just limited to monitoring; it can be integrated into your continuous integration and continuous deployment (CI/CD) pipelines. By incorporating this script into your workflow, you ensure that every update or change made to your website doesn’t compromise its performance and functionality.

Real-World Application — My E-commerce Store

In my own e-commerce store, this script has been a game-changer. It not only performs the standard checks but also goes through a test purchase with each run. Crucially, this test order is automatically cancelled afterwards, ensuring no disruptions to our inventory or sales records. This step was added after facing multiple instances where unnoticed issues prevented customers from completing purchases, a problem we no longer face thanks to this automated system.

Conclusion

Automating your website monitoring doesn’t just save time; it provides peace of mind. With this simple, yet effective setup, you can continuously keep an eye on your website’s health, ensuring that your visitors always have the best experience possible. This proactive approach to web management is a game-changer, especially in today’s digital-first marketplace.

…

🙌🏻 Thank you for reading! Your time and attention are greatly appreciated.

🚀 I’m grateful you stayed with me until the end. If you have questions or feedback about this blog, I’d love to hear from you!

💼 Connect with me on LinkedIn: Dömötör Lugosi

See you in the next post!

Introduction

Docker has revolutionized the way developers work with environments, including WordPress. This small script, “Run Existing WordPress Site Locally With Docker”, harnesses this technology, making local WordPress development seamless and efficient.

Why a Local Docker Environment is Crucial

Local environments are indispensable for safe experimentation. They allow you to test updates, plugins, and customizations without risking your live site. This approach is especially important for staging environments, where you can comprehensively test and review changes prior to implementing them in the live environment. It’s a safety net for your website’s integrity.

🌟 Overview

The tool sets up a local WordPress environment using Docker. It mirrors your live site, providing an accurate testing ground.

🛠️ Requirements

You’ll need Docker and Docker Compose.

🧠 How It Works

• WordPress Container: Manages your site’s files, themes, plugins, and uploads.
• Database Container: Handles MySQL files and database snapshots.

🔧 The Setup Process

1. Clone/Download: Get the project files:
   https://github.com/lugosidomotor/DockerLocalWordPress
2. Database Prep: Create a mysqldump from your site’s DB and save as mysqldumps/backup.sql.gz
3. Content Prep: Copy wp-content from your site to site/wp-content
4. Configuration: Set variables in .env
5. Run: In the project root, execute:

docker-compose up -d && docker exec -ti wordpress '/prep.sh'

6. Open in Browser: http://localhost

Conclusion

The beauty of this tool lies in its staging capabilities. Test updates, new features, or any site changes in a risk-free environment. It’s ideal for developers and site administrators who prioritize stability and reliability.

…

🙌🏻 Thank you for reading! Your time and attention are greatly appreciated.

🚀 I’m grateful you stayed with me until the end. If you have questions or feedback about this blog, I’d love to hear from you!

💼 Connect with me on LinkedIn: Dömötör Lugosi

See you in the next post!

Having a personal online presence is more accessible than ever before, and for those seeking simplicity and ease of use, Google Sites emerges as a top choice. While I am a great enthusiast of WordPress for its flexibility and extensive features, it requires continuous attention and maintenance.
On the other hand, most managed services come with a subscription fee. Therefore, if your goal is to establish a straightforward, swift, and hassle-free online presence, Google Sites stands out. Coupled with Cloudflare, which offers free services to manage your domain and security, you can create a website and a professional email address without any associated costs. This makes it an excellent solution for those who prefer a zero-maintenance and free solution.

Step 1: Purchase a Domain
The first step is to purchase a domain from a registrar. You can choose from a variety of service providers such as Namecheap, or if you require a country-specific domain (e.g., .hu or .ca), you would go to a local registrar in your country.

Step 2: Adding Your Domain to Cloudflare
After securing your domain name, the next step is to create a free account with Cloudflare. Once you’ve registered, you can add your domain to your Cloudflare account. This process involves updating the nameserver (NS) records at your domain registrar’s platform with the NS records provided by Cloudflare. By doing this, you transfer the management of your domain’s DNS settings to Cloudflare. Your domain will then appear as active on your Cloudflare dashboard, indicating that it’s ready for the next steps in configuration.

Step 3: Clean Up DNS Records
Navigate to the DNS section in your Cloudflare account and remove all existing records (using the Edit -> Delete function). This is done to prevent any conflicts with previous configurations, as you will be adding fresh records that correspond to your new setup.

Step 4: Setting Up Your Custom Email
To have a personalized email address such as hello@yourdomain.com, go to the Email -> Destination addresses section in Cloudflare and input an existing email address you wish to use, like your Gmail address. After this, establish a ‘Catch-All’ routing rule on the Routing rules page which will redirect all emails sent to @yourdomain.com to the email address you have verified. This step will also automatically create the necessary MX records for email routing.

Be mindful that with this setup, you will receive all emails sent to your address, but if you wish to reply from your custom address, additional SMTP settings are required, such as those provided by services like Sendgrid or Brevo. These services also offer free options.

Step 5: Create a Google Sites Webpage
With your domain ready, proceed to create your webpage using Google Sites. This platform is user-friendly and requires no previous web development experience.

Step 6: Publish your website
Go to the icon with a little person and a plus sign and select “General access” -> “Published site” -> Public.

Step 7: Publishing with Custom Domain on Google Sites
In Google Sites, go to the publish settings and select the option to use a custom domain. Here, you will need to create a TXT record for domain verification purposes and then a CNAME record (the Proxy Status should be set to DNS-only) to direct your domain to Google’s servers, following the instructions provided by Google Sites. These steps will integrate your domain with your Google Sites webpage, making it accessible to the public under your own domain name.

Step 8: Redirect to ‘www’ Using Cloudflare Page Rules
Since Google Sites primarily operates with the ‘www’ prefix, it’s essential to ensure that your site is reachable whether visitors type ‘www’ before your domain or not. To achieve this, you’ll need to configure Page Rules in Cloudflare to redirect all traffic consistently to the ‘www’ version of your domain.

Before setting up the Page Rules, you must first create an A record (the Proxy Status should be set to Proxied) in Cloudflare for your domain without the ‘www’. This A record will point to an IP address, which can be any IP, such as 8.8.8.8, which is commonly used for this purpose. Once the A record is in place, you can proceed to define your Page Rules as follows:

The Page Rules for redirecting to ‘www’ should be configured as follows:

1. *yourdomain.yourdomainending/* Forwarding URL (Status Code: 301 - Permanent Redirect, Url: https://www.yourdomain.yourdomainending) Enabled
2. https://yourdomain.yourdomainending/* Forwarding URL (Status Code: 301 - Permanent Redirect, Url: http://www.yourdomain.yourdomainending) Enabled
3. http://yourdomain.yourdomainending/* Forwarding URL (Status Code: 301 - Permanent Redirect, Url: https://www.yourdomain.yourdomainending) Enabled

By following these steps, you can set up a website and email domain that enhances your digital identity, all at no cost. Remember to allow some time for DNS changes to propagate across the internet. Once complete, your website and custom email will be up and running.

…

🙌🏻 Thank you for reading! Your time and attention are greatly appreciated.

🚀 I’m grateful you stayed with me until the end. If you have questions or feedback about this blog, I’d love to hear from you!

💼 Connect with me on LinkedIn: Dömötör Lugosi

See you in the next post!

Check out the project repository at WooCommerce Analytics on GitHub and streamline your WooCommerce analytics today.

In the bustling e-commerce space, WooCommerce stands out as a versatile platform, powering millions of online stores. It’s flexible, open-source, and, most importantly, can be tailored to the unique needs of every store owner. However, with flexibility often comes complexity, especially when it comes to analytics. The typical solution? Plugins. But for those of us who prefer a leaner, more efficient setup, this approach doesn’t cut it. That’s why I embarked on creating a WooCommerce analytics dashboard that operates independently of the WooCommerce site — free from the weight of additional plugins.

Why Opt for a Plugin-Free Solution?

Every plugin you add to your WooCommerce site is a gamble. It can potentially slow down your site, open up security vulnerabilities, or just add to the visual clutter of your admin area. As someone who appreciates speed and simplicity, I found that the existing solutions were simply too cumbersome for my taste. I wanted something that could run outside of the WooCommerce environment, be lightning fast, and give me the insights I needed at a glance without any extra fluff. Thus, the WooCommerce Sales Dashboard was born.

Introducing the WooCommerce Sales Dashboard

The WooCommerce Sales Dashboard is a standalone application that feeds off a database dump from your WooCommerce store. Using the power of MySQL and the interactivity of Streamlit, it offers a rich, dynamic visualization of sales data. This includes:

• Monthly and yearly sales trends.
• The ratio of returning customers.
• Geographical distribution of sales.
• Top-performing products and categories.
• Average order value over time.

And the best part? It’s all accessible through a clear and concise dashboard, minus the drag on your main WooCommerce site.

How It Works

The core of this solution is a set of Docker containers that handle the database and visualization components separately from your live WooCommerce site. Here’s a quick rundown:

1. Data Dump: Export your WooCommerce database into a dump.sql file. This will be the foundation of your analytics.
2. Database Container: Using Docker, spin up a MySQL container that houses your data securely and independently.
3. Visualization with Streamlit: A Python-based Streamlit application reads from your database and presents the data through interactive charts and graphs.

All of this operates on your local machine or a separate server, ensuring that your live site remains untouched and unencumbered by analytics processing.

Setting It Up

Getting started with the WooCommerce Sales Dashboard is straightforward:

1. Clone the repository from GitHub.
2. Place your dump.sql file into the project directory.
3. Run the start.sh script to kick everything off.

The provided start.sh script automates the process, setting up the containers, importing your data, and firing up the Streamlit application, which you can then access via your browser at http://localhost:8501.

Lighter, Faster, Smarter

The WooCommerce Sales Dashboard project embodies the principle of “less is more.” By decoupling analytics from the main site, you get a faster, more responsive, and focused experience. Your WooCommerce site remains snappy, and you get the added peace of mind from keeping your analytics processing isolated.

…

🙌🏻 Thank you for reading! Your time and attention are greatly appreciated.

🚀 I’m grateful you stayed with me until the end. If you have questions or feedback about this blog, I’d love to hear from you!

💼 Connect with me on LinkedIn: Dömötör Lugosi

See you in the next post!