标签：#EV

This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry. ...

Grafana Labs has announced general availability for two tools that let AI coding agents query live observability data during development: the gcx CLI and the Grafana MCP server. Both allow agents to pull metrics, logs, traces, SLOs, and Synthetic Monitoring results from Grafana Cloud or a self-hosted stack By Claudio Masolo

The warning landed on the only people who had done it properly I maintain a linter that reads agent config files — SKILL.md , AGENTS.md , CLAUDE.md — and fails CI when they bake in something that only works on the author's machine. One of its rules says: if you call an external CLI, declare it, or the next person won't have it. Declaring it means naming it in frontmatter: requires : codex Except that anyone with more than one dependency writes the list form, because that's what YAML is for: requires : - codex - gemini My implementation only read the first shape. So the block list — the normal way, the way you write it the moment you have two of anything — was invisible to the linter, and it warned you for an undeclared CLI that you had, in fact, declared. Read that back slowly. Authors who ignored the dependency question entirely were never flagged, because they never wrote a requires: key at all. Authors who sat down and wrote the contract properly got a warning telling them they hadn't. The rule was inverted with respect to the thing it was trying to encourage. I shipped that. It went out in a patch release, and I only found it because a commenter used the phrase "dependency contract" and I went to re-read my own implementation of it. Then it happened again. Twice, in one release Two comments on a post of mine turned into new rules. One of them, unverified-write , reports a file that changes external state — git push , npm publish , an INSERT — and never reads that state back anywhere. Before publishing, I ran it over 586 real skill files pulled from a public registry, found two false-positive shapes in the data, fixed both, and re-measured. Fire rate 0.7%, and every hit I could check by hand was genuine. I felt good about it. Then I handed the diff to a different model for a pre-publish read, and it produced this input in about a minute: Never run `git push --force` from this skill. That is a git push in a code span, in a file with no read-back anywhere. My rule

The Quest Begins (The “Why”) Honestly, I used to stare at my CI/CD yaml files like they were ancient runes. Every push felt like a gamble: “Will the build pass this time?” I’d spend Friday nights hunting down a missing node_modules cache in Jenkins, only to realize the agent had run out of disk space because I’d forgotten to add a cleanup step. The pain was real, and the feedback loop was slower than a dial‑up modem. I kept asking myself: Why does this feel like wrestling a dragon every time I want to ship a feature? The answer was simple—I hadn’t yet found a pipeline that just worked out of the box. I wanted something that gave me confidence, not anxiety. So I embarked on a quest to compare the three big contenders: GitHub Actions, GitLab CI, and good ol’ Jenkins. Spoiler: the treasure wasn’t in the tool itself, but in how you shape the pipeline around your team’s flow. The Revelation (The Insight) The big “aha!” moment came when I stopped treating CI/CD as a one‑size‑fits‑all script and started seeing it as a contract between my code and my environment. The contract says: Every commit gets a clean slate. Dependencies are restored, not guessed. Tests run in parallel, not sequentially. Artifacts are published only if the gate passes. When I wrote that contract down, the yaml stopped looking like magic incantations and started looking like a checklist. The tools differ in syntax, but the underlying principles are the same. Here’s the secret: cache wisely, fail fast, and keep the pipeline short enough to give you feedback before you’ve even finished your coffee. Wielding the Power (Code & Examples) Below are three pipelines—one for each platform—that embody the contract above. I’ll first show a “struggle” version (the common pitfalls) and then the victorious version. 1. GitHub Actions – The Struggle name : CI on : [ push , pull_request ] jobs : build : runs-on : ubuntu-latest steps : - uses : actions/checkout@v3 - name : Install deps run : npm install # <-- no cache,

One of the easiest security mistakes is assuming that a WordPress plugin is still trustworthy simply because it has been installed for a long time. The folder is familiar. The plugin name is familiar. WordPress still loads. But is the code on disk still the code you approved? That question became very real for me when MatrixSwarm reported an unexpected change inside a plugin directory on a production server. The alert did not claim that it had discovered malware. It said something more precise and defensible: This plugin no longer matches its trusted baseline. That integrity warning led to a manual investigation. Inside a forgotten WordPress test plugin, I found a PHP backdoor. The important part of this story is not that an automated agent magically understood the attacker’s intent. It did not. The important part is that it noticed a change that was easy for a person—and WordPress itself—to overlook. That incident shaped the design of MatrixSwarm’s WordPress Plugin Guard. The problem: familiarity is not integrity WordPress sites often accumulate history: plugins that are no longer actively maintained; test plugins that were never removed; emergency fixes applied directly on the server; auto-updates that legitimately replace files; abandoned folders that nobody remembers installing; writable PHP files inside a public web root. A traditional malware scanner looks for known suspicious patterns. That is valuable, but it answers a different question. Plugin Guard asks: Has anything inside this approved plugin changed since the operator trusted it? It does not need to recognize a specific web shell. It does not need a signature for a particular backdoor family. It detects the loss of integrity first, then gives the operator evidence and control. How the baseline works When an operator approves a plugin, Plugin Guard walks the plugin directory and computes a SHA-256 digest for every file. It stores those relative paths and hashes as the plugin’s trusted manifest. A simpli

Last month I moved my blog off a platform and onto a rented server, and instead of installing WordPress I finished something I had been building for it: Quire Ink , a blog engine that is one process and two SQLite files. No database server, no build pipeline, no cloud account anywhere in the path. bun src/index.ts That line is the whole deployment. Point nginx at the port and you have a blog. The part readers notice Opening a post costs about 114 KB , first visit, nothing cached. Of that, 67 KB is fonts I host myself and the JavaScript is 3.6 to 7.8 KB , written by hand. Third-party requests: zero . No CDN, no font host, no tracker. The numbers hold because the build enforces them. Every bundle has a size cap and the build fails if a feature crosses it, so nothing can quietly start costing every reader a little more forever. And the reading page is where most of the work went: Six palettes in light and dark, and four reading typefaces , all switchable by the reader, not just the owner. Fonts ship with Vietnamese and Central European accents included. Book mode : a fullscreen two-column reader on paper, with a drop cap and a page count. Not a filter over the page, a second typography. A five-ink highlighter . Write ==text== and it renders as an SVG stroke with chisel ends that breaks per line, pigments measured off a photograph of a real pen box. Readers can also keep their own highlights. 1.4 KB, and zero if unused. Math is MathML , drawn by the browser's own layout engine. No script, no stylesheet, no font file, so a post with a formula costs the reader nothing over one without. Code is highlighted on the server , 21 languages, so no highlighter ships to the browser. A fence that names no language gets a timid guess, so program output stays plain. Search answers as you type , a contents rail follows the post, and related posts, reading time and a progress bar are all there. The progress bar and the fade-in are pure CSS. The part I use every day The admin just went

I'm building EverQuill, an AI-powered tabletop RPG platform — a game where an AI acts as your dungeon master, narrating the story and reacting to what you do. Every turn of that story is a message to a language model, and every message costs money. That cost isn't a problem you get to solve later, once you're big. It's a set of choices you make before anyone shows up, because the defaults you pick decide whether a bad day costs you a few cents or a few hundred dollars. Here are three decisions I made before I opened the alpha, and why. 1. When the tier is unclear, I reach for the stronger model This is tier-based routing : which model serves a request depends on who's asking. Better models write better stories and cost more; cheaper ones are faster and rougher. So free players get Claude Haiku (cheaper, ~$0.80 per million input tokens) and paying players get Claude Sonnet (stronger, ~$3.00 per million) — plus, because the platform is designed to route across providers, the same decision could hand a turn to a local model running through Ollama instead of a hosted one. That part is straightforward. The interesting case is the ambiguous one. My routing hands over the cheaper model only when a request is clearly free-tier; everything else — paid, alpha testers, admin, anything the system can't cleanly place as free — gets the stronger model. The instinct most people have is the reverse: default to cheap, protect the margin, don't spend money you don't have to. The reasoning: a rough, disappointing experience for someone who should have gotten a good one is a real cost — it just doesn't show up on the bill. It shows up as someone deciding the product isn't worth paying for. Meanwhile the money risk is capped elsewhere (more on that below), so biasing toward quality can't run away from me. Given a bounded downside on money and an unbounded downside on reputation, I'd rather err toward quality than toward cheap. 2. I stopped paying full price for the part that never chang

Hard-coding credentials, API keys, or access tokens in automated test suites is one of the most common security risks in software engineering. Ensuring that sensitive variables remain isolated across local developer environments and CI/CD pipelines is critical for keeping your code repositories secure. Here is a practical guide and best-practices workflow for managing secrets cleanly in test automation frameworks. Core Recommendations for Secure Test Suites Zero Source Control Leakage: Always add .env and .env.local files to your .gitignore. Never commit raw tokens or passcodes to git. Use Managed CI Secret Stores : In build pipelines, leverage platform native secret managers such as GitHub Secrets, Harness Secrets, Azure Key Vault, AWS Secrets Manager, or HashiCorp Vault. Dynamic Injection via Environment Variables: Read sensitive data dynamically inside tests using standard environment variables (e.g., process.env.API_KEY or process.env.API_BASE_URL). Enforce Least Privilege: Scope test credentials strictly to non-production environments and configure them to expire periodically. Implementation Examples Local Development Usage: Create a non-committed local environment file (.env.local): API_BASE_URL = https://staging.example.com/api API_TOKEN = your_secret_token_here Execute your test suite while passing or overriding variables inline: # Setting environment variables directly before execution $env :API_BASE_URL = 'https://staging.example.com/api' npm run test :api CI Pipeline Integration (e.g., GitHub Actions): Store API_TOKEN under your repository's Settings > Secrets and variables > Actions, then pass it into your execution job step: - name : Run API Tests run : npm run test:api env : API_TOKEN : ${{ secrets.API_TOKEN }} API_BASE_URL : ${{ secrets.API_BASE_URL }}

A browser preview can look correct while the downloaded image is wrong. The usual failure is timing: CSS eventually applies the custom font to the preview, but Canvas draws once. If the font is not ready at that exact moment, fillText() can silently use a fallback face. The user sees one design and downloads another. I ran into this while building GraffForge, a browser-based graffiti text tool. The free editor compares the same user-entered word across multiple bundled styles, then exports the selected result as a transparent 2048 × 2048 PNG. That gave the export path a clear contract: preserve the exact text; use the selected font; keep spacing, outline, shadow, and skew; fit inside a safe area; preserve real transparency; never upload the user's text or image. Here is the approach that made the output deterministic. 1. Treat export as a separate rendering target Do not enlarge the preview DOM and take a screenshot. Create a fresh Canvas with explicit bitmap dimensions: const EXPORT_SIZE = 2048 ; const canvas = document . createElement ( ' canvas ' ); canvas . width = EXPORT_SIZE ; canvas . height = EXPORT_SIZE ; const context = canvas . getContext ( ' 2d ' ); if ( ! context ) { throw new Error ( ' Canvas rendering is unavailable. ' ); } The width and height attributes define the actual PNG pixel dimensions. CSS sizing and devicePixelRatio are useful for an on-screen preview, but neither should determine the export contract. A fixed bitmap size also makes automated verification straightforward. 2. Load the font before measuring anything Canvas does not redraw automatically when a font finishes loading. Load the exact family, weight, size, and text before calling measureText() : await document . fonts . load ( `400 160px " ${ fontFamily } "` , text ); Passing the actual text is useful because the browser can confirm that the required glyphs are available. After this point, set the Canvas font explicitly: context . font = `400 ${ fontSize } px " ${ fontFamily } "` ;

Having a clear runbook speeds up onboarding for new team members and provides a standardized execution reference for CI/CD environments. Here is a quick-start automation runbook covering prerequisites, environment variables, execution commands, and output artifacts for a Playwright test suite. Prerequisites Node.js: 24.x (configured via package.json engines) Package Manager: npm Optional: Docker (for containerized pipeline runs) Quick Setup # 1. Install project dependencies cd <repo-root> npm ci # 2. Install Playwright browsers and dependencies npx playwright install --with-deps Execution Commands Full Test Suite: npm test (executes run-all-tests.js) API Suite Only: npm run test:api (executes run-api-tests.js) UI Suite Only: npm run test:ui (executes run-ui-tests.js) Generate Reports: npm run generate:reports Core Environment Variables Configure these keys inside your local .env file or CI secrets: API_BASE_URL — Base endpoint URL for API testing BASE_URL — Target website base URL for UI testing RETRY_COUNT — Maximum retry limit for flaky scenario reruns CUCUMBER_PARALLEL — Number of parallel workers for Cucumber execution Test Artifacts & Outputs Allure Execution Results: reports/allure-results Cucumber JSON Reports: reports/cucumber_report.json Failure Media (Videos/Screenshots): test-results/ (configured via config.js)

1. Retomando: da aplicação funcionando ao container pronto para produção Esta série cobriu, até aqui, o suficiente para desenvolver com Docker no dia a dia: conceitos fundamentais, comandos essenciais, Dockerfiles eficientes, rede, volumes e Compose para orquestrar múltiplos serviços. Este último artigo fecha a lacuna entre "funciona no meu Compose local" e "pronto para rodar em produção": imagens menores via multi-stage builds, segurança básica e não negociável, e como tudo isso se integra a um pipeline de CI/CD. 2. O problema que multi-stage builds resolve Compilar ou empacotar uma aplicação frequentemente exige ferramentas que a aplicação não precisa em tempo de execução : compiladores, headers de desenvolvimento, o próprio código-fonte antes de ser transpilado/buildado. Um Dockerfile ingênuo carrega tudo isso para a imagem final: # Ruim: ferramentas de build viajam junto para produção FROM node:20 WORKDIR /app COPY . . RUN npm install && npm run build CMD ["node", "dist/server.js"] Essa imagem inclui o npm , todo o node_modules (incluindo dependências de desenvolvimento), o código-fonte original e as ferramentas de build — frequentemente centenas de MBs de peso morto que nunca são usados depois que npm run build termina, e que ainda aumentam a superfície de ataque da imagem (mais binários, mais coisa que pode ter vulnerabilidade). Multi-stage builds resolvem isso permitindo múltiplos blocos FROM no mesmo Dockerfile, onde estágios posteriores copiam seletivamente apenas o que precisam dos anteriores — o restante do estágio de build simplesmente não existe na imagem final: # Estágio 1: build, com todas as ferramentas necessárias FROM node:20 AS build WORKDIR /app COPY package*.json . RUN npm ci COPY . . RUN npm run build # Estágio 2: produção, só com o resultado do build FROM node:20-slim WORKDIR /app COPY --from=build /app/dist ./dist COPY --from=build /app/node_modules ./node_modules COPY package*.json . CMD ["node", "dist/server.js"] A imagem final não contém o

Jendrik Jördening shares practical engineering strategies for integrating LLMs into production pipelines. He discusses overcoming non-determinism, restricting schemas, separating semantic text extraction from deterministic code, and validating choices using discriminator models. Learn how to structure LLMs with an MVC approach to ensure database integrity, observability, and system reliability. By Jendrik Jördening

It's just a hook, sewn into a bag, but I really, really like it. Peak Design is so proud of its clever integration that the San Francisco-based maker of camera gear gave it a name: BagLev, for its ability to keep its new City Line of bags levitated above the dirty ground. How many of […]

This is a submission for Weekend Challenge: Dog Days Edition Dog Whisperer is an app that looks at a photo of your dog, figures out what it's probably feeling, and then actually says it out loud in a voice that matches the mood. Grumpy dog gets a grumpy voice. Dramatically offended dog gets... a dramatically offended voice. You get the idea. It also doubles as a pet log — meals, weight, and walks tracked over time in Snowflake, with trend charts so you can actually see if your dog's been eating more than usual or losing weight. Add your pets and start logging. Use your unique username to keep track of your pets! Here is App in action: https://dogwhisperer-whi6rye8zklcdtnedyxmww.streamlit.app/ Demo Code Kaku-g / dog_whisperer How I Built It I used Google's Gemini (model: gemini-3.5-flash-lite ) to infer the mood of the dog (or cat, lizard, ferret — whoever's in the photo) from a single image, then passed that straight into Gemini's native TTS (model: gemini-3.1-flash-tts-preview ) to give it a voice that actually matches the mood — a sleepy dog sounds sleepy, a dramatic one sounds dramatic. For logging and trends, I used Snowflake — compute, databases, and tables — to store meals, weight, and walks for every pet and power the trend charts in the app. So it's really two things working hand in hand: a generative AI pipeline paired with a data warehouse. The AI part is what makes the app fun — inferring your pet's mood and giving it a voice. The Snowflake part is what gives it a real use case , since it's something you could keep using for long. Prize Categories I used Google AI and Snowflake, so I'm submitting under both: 🏆 Best Use of Google AI 🏆 Best Use of Snowflake

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built Warm Hearth — a landing page for a comfort food restaurant built around one idea: everything on the menu comes from the same wood-fired hearth in the back. Instead of treating "comfort food restaurant" as a generic brief, I anchored the whole page to that single hearth: An interactive hearth centerpiece. Right after the hero, there's a hand-drawn CSS/SVG fire pit you can click to "stoke." The flame flares, embers burst upward, and a small honest counter tracks how many times you've stoked it this visit — no fake global numbers, just a real, session-based response to your click. Four dishes, each with real cultural identity. Ramen, warm pies, a cheesy pasta bake, and gulab jamun — each with its own hand-drawn SVG illustration and a border motif pulled from its own cuisine (a jade-and-gold double line for the ramen, a scalloped pastry edge for the pies, an Italian tricolor accent for the pasta, gold paisley tones for the gulab jamun) rather than one generic card style stretched across all four. Living detail, not static photos. Steam rises off the ramen, pies, and pasta bake using the same wisp animation as the hero's hearth, so the whole page reads as one consistent "warmth" language. The gulab jamun gets a syrup shimmer and drip instead, since steam isn't the right detail for a syrup-soaked sweet. Price tags that hang like real kitchen tickets — pinned by a string, swaying gently, and giving a small "flicked" swing on hover instead of sitting flat on the card. Mira, an illustrated host in the corner who offers a rotating table tip when you click her — a small personal touch instead of a static "contact us" widget. Built for actual use, not just to look good in a screenshot: keyboard-focusable tab filters, a skip-to-content link, aria-live regions on the interactive parts, and full prefers-reduced-motion support that disables every animation without breaking the page. Dem

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry . The symptom: good numbers, no users I publish small automation tools on a marketplace. By August I had 23 of them live. Store search looked fine — measured repeatedly, from a real browser, against the real production endpoint: Search term My rank (store UI, Aug 2) sitemap checker #3 google play audit #1 Real numbers after 89 days: 1 active user across all 23 tools. $0 revenue. A #1 ranking and one user is not a rounding error. It is a contradiction, and I spent a week and a half resolving it in the wrong direction. Eleven days of correct answers to the wrong question If ranking is fine and users are zero, the fault must be downstream — that was the reasoning. So I went looking for it, carefully: Demand analysis. Pulled 3,655 listings, then went deeper to 12,834 to check for sampling bias in the first pass. (There was one. I found it and corrected it.) Naming analysis. Split the corpus by whether the title contained a well-known platform name. Median users: 5 vs 2. Age-cohort analysis. Measured the base rate for new listings: only 11% (n=9) get their first user within 0–3 days of publishing, against 74% at 14–30 days. Mine were young. The zeros were, statistically, unremarkable. Acted on all of it. Renamed 5 tools. Added output schemas across the board — the platform's own quality score went from 74 to 78–79. Every one of those produced a defensible number. Not one of them changed anything. That pattern is the actual signal, and I missed it for too long: when every hypothesis confirms and nothing moves, stop testing hypotheses and start testing the instrument. "It reproduced" is not "it's correct" I had re-measured the ranking several times over those days. Same answer each time. I read that as confirmation. It isn't. Re-running a measurement under identical conditions reproduces the same bias just as faithfully as it reproduces the same truth . Repetition rules out transient noise and

This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry . Project Overview I run a set of local policy guards around an AI coding agent. They are ordinary PreToolUse hooks: before the agent is allowed to perform an action, the proposed tool call is handed to a small Python script as JSON on stdin . The contract is two exit codes. exit 0 → allow exit 2 → block, and send the reason back to the agent as feedback There are several. One refuses access to credential paths. One intercepts destructive shell commands. One enforces a directory boundary. And one — malformed-read-guard.py — blocks the agent from reading files that contain corrupted tool-call syntax, because reading that syntax makes the model start emitting it too, and the session locks up. They had been working for weeks. One of them had also, for some of that time, been doing nothing at all. Bug Fix or Performance Improvement The symptom Same file. Same bytes. Two locations. Placed at an ASCII path → guard fires, exit 2 , read blocked. Placed under a directory whose name contains Japanese characters → exit 0 , read allowed. No exception. No stack trace. No log line. Nothing anywhere said a decision had been skipped. The hook ran, the hook returned "allow", and the agent read a file it was supposed to be protected from. The mechanism Three steps, and the ugly part is that each one is individually defensible. 1. The payload is UTF-8. The reader is not. Hook input is always UTF-8. But on Windows, Python opens sys.stdin using the locale encoding — on this machine, cp932 . So this line data = json . load ( sys . stdin ) decodes UTF-8 bytes as cp932. 2. Mojibake does not raise. That is the whole problem. cp932 is permissive enough that UTF-8 bytes map onto some sequence of characters. You do not get a UnicodeDecodeError you can catch and log. You get a string that is merely wrong, and it flows onward as valid data: 'C:\\...\\self-catering\\_\udc85部\\再開メモ.md' ← what the guard actually rec

I run a small site that converts bank CSV exports into the file format QuickBooks Desktop accepts. The whole thing runs client-side, and the privacy claim it makes is unusually literal: every page ships a Content Security Policy with connect-src 'none' , so the browser refuses to let the page make any network request at all. Open the Network tab while you convert a file and it stays empty. That's the feature, not a nice-to-have on top of it. When I added Excel support last week, the obvious choice was SheetJS. I decided against it, and the reason wasn't bundle size. The claim I want to be able to make is "your file never leaves the browser, and here is the policy that enforces it." Pulling in a large third-party parser turns that into "…and also trust this dependency," which is a materially weaker claim for a tool that handles people's bank statements. So I wanted to find out how much of the format I actually needed. Less than I expected. An .xlsx file is a ZIP archive containing XML: xl/workbook.xml lists the sheets, xl/worksheets/sheet1.xml holds the cells, xl/sharedStrings.xml is a deduplicated string pool that cells reference by index, and xl/styles.xml carries the number formats. Reading that needs three capabilities, and the browser already provides two of them. Unzipping means walking the ZIP central directory, which is about forty lines. Decompression is DecompressionStream('deflate-raw') , which is native. For the XML I hand-rolled a tag scanner rather than reaching for DOMParser , because my tests run in Node where DOMParser doesn't exist, and I would rather have one code path than two. Dates The part that took the most care was dates, because Excel doesn't store them as dates. A cell holding 5 January 2024 contains the number 45296 , and whether that number should be displayed as a date depends on the cell's number format — which lives in a different file inside the archive. So the parser has to read styles.xml , work out which style indexes correspond to

This is a submission for Weekend Challenge: Dog Days Edition What I Built PawID & Care is an enterprise-grade, multi-role emergency response and biometric identification platform built for community animal welfare and stray management. Operating as a "112-for-dogs" system, the platform bridges cutting-edge artificial intelligence, distributed ledgers, enterprise analytics, and autonomous voice agents into a single unified workflow. The core goal is to solve the fragmentation in animal rescue: pet owners lose dogs, street animal injuries go unreported, and cities lack real-time community health tracking. PawID & Care provides instant biometric triage, role-based portals for Owners, Rescuers, and Vets, and real-time emergency voice dispatching. Demo 📹 Watch the Demo Video: https://youtu.be/_B-2dL2fDX4 Code GitHub Repository: [ https://github.com/GamersStop/paw-id-care ] bash # Clone the repository git clone [https://github.com/GamersStop/paw-id-care](https://github.com/GamersStop/paw-id-care) # Install dependencies npm install # Start the server npm start

How to Host a Website Using GitLab Pages If you have a website made with HTML and CSS, you can host it for free using GitLab Pages . GitLab Pages takes the files from your GitLab repository and publishes them as a website. For this, you need to create a .gitlab-ci.yml file. This file tells GitLab how to deploy your website. After pushing the file to your repository, GitLab creates a pipeline. When the pipeline finishes successfully, GitLab Pages gives you a URL which you can open in a browser to see your live website. Understanding the Pipeline A pipeline is the process GitLab uses to run the instructions written in .gitlab-ci.yml . If the pipeline fails, the website will not be deployed correctly. Sometimes the pipeline can fail because of an invalid YAML file, incorrect indentation, or a problem in the deployment commands. Another common problem is trying to create a public folder when the folder already exists. For a simple HTML and CSS website, the important thing is that the public folder contains your website files and index.html should be directly inside it. For example, the structure should look like this: public/ ├── index.html ├── style.css └── images/ The index.html file is important because it is the main page GitLab Pages looks for when someone opens the website. Hosting More Than One Website You can host multiple websites using GitLab Pages, but if the websites are completely different projects, it is better to create a separate GitLab project for each website . For example, you can have one project called youtube-clone and another project called portfolio . Each project can have its own HTML, CSS, .gitlab-ci.yml , pipeline and Pages deployment. This makes the projects easier to manage and prevents one website from affecting another website. So, GitLab is not only a place to store your code. With GitLab Pages and CI/CD pipelines, you can also use it to turn your HTML and CSS project into a live website that can be accessed through the internet.