Blogging

September 8, 2024

Introduction

For fun and to develop my skills, I want to get my website back online. It was running on Gatsby, a framework for React. It worked great, but a new version hasn't been released in over a year. So, I decided to start fresh and create a new website using Next.js, allowing me to learn a new technology. Here’s how I did it.

download a basic nextjs template

Quick tutorial of nextjs

https://nextjs.org/learn-pages-router/basics/create-nextjs-app

Source of the template

https://github.com/vercel/next-learn/tree/main/basics/demo

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true,
  },
  output: 'export',
}
export default nextConfig

Create this file in the root folder

what is this file doing

.gitlab-ci.yml

What is YAML?

YAML (YAML Ain't Markup Language) is a human-readable data serialization format, commonly used for configuration files. A data serialization format is a way to structure and store data so that it can be easily shared between different systems or applications. YAML organizes data in a clean and simple way, making it easy to read and write.

What is this file?

The .gitlab-ci.yml file is a configuration file that tells GitLab how to deploy your website. It contains instructions for GitLab’s CI/CD (Continuous Integration/Continuous Deployment) pipeline, guiding it through the process of building, testing, and deploying your application.

Creating a Connection with a Domain Name

  1. Click on New Pages Domain.
  2. Set the Domain field to your domain name, for example, “www.quentinparrot.com”.
  3. If you don’t already have an SSL certificate, leave Automatic certificate management using Let’s Encrypt checked.
  4. Click on Create New Domain.

OVH - DNS configuration

Create DNS record

For subdomain

  1. In your OVH dashboard, select the DNS zones tab, and click on Add an entry
  2. Select CNAME
  3. Set the same subdomain as defined in the Gitlab pages configurations
  4. Set the target as indicated by the Gitlab page myGitlabUsername.gitlab.io.. Do not forget the period at the end
  5. Click on next and valipublishedAt

Verify ownership

  1. Select TXT field type
  2. In subdomain, enter _gitlab-pages-verification-code.www
  3. Set value to gitlab-pages-verification-code=xxxxxxxxxxxxxxxxxxxxxxxxx
  4. In your Gitlab page configuration,
  5. Wait (a few minutes later, or hours)
  6. Click on the arrow next to “Unverified” (retry verification), the status should switch to “verified”

German version

Einführung

Aus Spaß und um meine Fähigkeiten weiterzuentwickeln, möchte ich meine Website wieder online bringen. Sie lief auf Gatsby, einem Framework für React. Es funktionierte großartig, aber es wurde seit über einem Jahr keine neue Version veröffentlicht. Daher habe ich mich entschieden, von vorne anzufangen und eine neue Website mit Next.js zu erstellen, um eine neue Technologie zu erlernen. So habe ich es gemacht.

Herunterladen einer einfachen Next.js-Vorlage

Kurzanleitung zu Next.js

https://nextjs.org/learn-pages-router/basics/create-nextjs-app

Quelle der Vorlage

https://github.com/vercel/next-learn/tree/main/basics/demo

next.config.mjs

js

Copy code

/** @type {import('next').NextConfig} */ const nextConfig = { images: { unoptimized: true, }, output: 'export', } export default nextConfig

Erstelle diese Datei im Stammordner.

Was macht diese Datei?

.gitlab-ci.yml

Was ist YAML?

YAML (YAML Ain't Markup Language) ist ein menschenlesbares Datenserialisierungsformat, das häufig für KonfigurationspublishedAtien verwendet wird. Ein Datenserialisierungsformat strukturiert und speichert Daten so, dass sie einfach zwischen verschiedenen Systemen oder Anwendungen geteilt werden können. YAML organisiert Daten auf eine einfache und übersichtliche Weise, was das Lesen und Schreiben erleichtert.

Was ist diese Datei?

Die .gitlab-ci.yml-Datei ist eine KonfigurationspublishedAti, die GitLab mitteilt, wie Ihre Website bereitgestellt werden soll. Sie enthält Anweisungen für die CI/CD-Pipeline (Continuous Integration/Continuous Deployment) von GitLab und führt durch den Prozess des Buildens, Testens und Bereitstellens der Anwendung.

Eine Verbindung mit einem Domain-Namen herstellen

  1. Klicken Sie auf Neue Pages-Domain.
  2. Setzen Sie das Feld Domain auf Ihren Domain-Namen, z. B. "www.quentinparrot.com".
  3. Wenn Sie noch kein SSL-Zertifikat haben, lassen Sie Automatische Zertifikatsverwaltung mit Let's Encrypt aktiviert.
  4. Klicken Sie auf Neue Domain erstellen.

OVH - DNS-Konfiguration

DNS-Eintrag erstellen

Für eine Subdomain:

  1. Wählen Sie in Ihrem OVH-Dashboard den Reiter DNS-Zonen und klicken Sie auf Einen Eintrag hinzufügen.
  2. Wählen Sie CNAME.
  3. Setzen Sie die gleiche Subdomain, die Sie in den GitLab Pages-Konfigurationen definiert haben.
  4. Setzen Sie das Ziel auf die von GitLab Pages angegebene Adresse, z. B. myGitlabUsername.gitlab.io. (Vergessen Sie das Punktzeichen am Ende nicht).
  5. Klicken Sie auf Weiter und bestätigen Sie.

Eigentümerschaft verifizieren

  1. Wählen Sie den Feldtyp TXT.
  2. Geben Sie im Feld Subdomain folgendes ein: _gitlab-pages-verification-code.www.
  3. Setzen Sie den Wert auf gitlab-pages-verification-code=xxxxxxxxxxxxxxxxxxxxxxxxx.
  4. Fügen Sie diesen Wert in Ihre GitLab Pages-Konfiguration ein.
  5. Warten Sie (einige Minuten oder Stunden).
  6. Klicken Sie auf den Pfeil neben "Nicht verifiziert" (erneut versuchen), und der Status sollte auf "Verifiziert" wechseln.

Ressourcen

Resources

https://www.nicosauvage.fr/posts/ovh-gitlab-pages/ connect with a domain