So erstellen Sie eine Portfolio-Website mit SvelteKit

In diesem Tutorial erfahren Sie, wie Sie mit SvelteKit eine Portfolio-Website erstellen. Stellen Sie die Sveltekit-Anwendung auf Netlify bereit. Warum der Wechsel von Sapper zu Sveltekit und wie man die REST-API in Sveltekit nutzt

Erfahren Sie in diesem Schritt-für-Schritt-Tutorial, wie Sie Ihre erste SvelteKit-Anwendung bereitstellen

Das Team von svelte hat Sveltekit vor einigen Monaten eingeführt. Es ist ein neueres Framework, das Sapper ersetzt. Es ist der schnellste Weg, schlanke Apps mit schönen Entwicklungserfahrungen und flexiblem dateisystembasiertem Routing zu erstellen. In diesem Artikel wird untersucht, wie Sveltekit funktioniert, indem eine Beispiel-Portfolio-Website mit allen erforderlichen Aktualisierungen im Framework erstellt wird. Sie lernen alle grundlegenden Konzepte zum Erstellen einer Web-App mit Sveltekit kennen, warum der Wechsel von Sapper zu Sveltekit und wie Sie die REST-API in Sveltekit verwenden, indem Sie einen Demo-Blog in Ihrer App erstellen. Außerdem erfahren Sie, wie Sie die Sveltekit-Anwendung auf Netlify bereitstellen.

Was ist Sveltekit

Für diejenigen, die neu in Svelte sind, laut der Svelte- Website :

Svelte is a radical new approach to building user interfaces. Whereas traditional         
frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that 
work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically 
updates the DOM when the state of your app changes.
Svelte is a component-based Javascript framework - much like React, Vue, or angular and is 
used for building web applications in Javascript.

Im Gegenteil, Sveltekit ist ein Framework zum Erstellen schlanker Apps aller Größen. Es ermöglicht Ihnen, aussagekräftigere Apps mit geringerem Platzbedarf zu erstellen. Es kommt mit einer schönen Entwicklungserfahrung, flexiblem dateisystembasiertem Routing, serverseitigem Rendering (SSR), clientseitiger Hydratation und einigen anderen einzigartigen Funktionen.

Gründe für den Wechsel von Sapper zu Sveltekit

Richard Harris, der Schöpfer von Svelte, nennt einige der Gründe, die den Wechsel von Sapper zu Sveltekit beeinflusst haben:

• Sapper schien etwas kompliziert zu sein; Die Unterscheidung zwischen sveltejs/template und sveltejs/sapper-templated erscheint etwas verwirrend, insbesondere für Svelte-Neulinge.
• Seit dem Start des Sapper-Projekts im Jahr 2017 ist die Codebasis im Laufe der Jahre etwas ungepflegt geworden. Und da sich das Web im Laufe der Jahre drastisch verändert hat, muss ein neuer Ansatz überdacht werden.
• Auch die Idee, eine einzige empfohlene Methode zum Erstellen von Apps mit Svelte zu haben, wird erhebliche Vorteile bringen. Es würde den Onboarding-Prozess vereinfachen, den Wartungs- und Supportaufwand reduzieren.

Erste Schritte mit Sveltekit

Sveltekit beseitigt alle Engpässe beim Erstellen moderner Web-Apps; es erledigt all die langweiligen Dinge für Sie, während Sie sich auf den kreativen Teil konzentrieren. Es wird von Snowpack unter der Haube angetrieben, einem blitzschnellen Frontend-Build-Tool, das für das moderne Web entwickelt wurde. Es verwendet Vite mit dem Svelte-Plugin , um eine blitzschnelle und funktionsreiche Entwicklungserfahrung mit Hot Module Replacement (HMR) zu bieten. Änderungen an Ihrem Code werden sofort im Browser wiedergegeben.

Um ein Projekt mit Sveltekit einzurichten, müssen Sie NodeJS auf Ihrem Computer eingerichtet haben. Bitte führen Sie den folgenden Befehl unten aus, um unser sveltekit-Demoprojekt zu rüsten, und gehen Sie dann in den Ordner, um alle erforderlichen Abhängigkeiten zu installieren.

npm init svelte@next my_portfolio_website 
cd my_portfolio_website
npm install 
npm run dev

Der erste Befehl erstellt ein Gerüst für ein neues Projekt im Verzeichnis „my_portfolio_website“ und fragt Sie, ob Sie einige grundlegende Tools wie TypeScript einrichten möchten. Bitte wählen Sie „Nein“, da wir in diesem Projekt kein Typescript verwenden werden. Die nachfolgenden Befehle installieren dann seine Abhängigkeiten und starten einen Server auf localhost:3000 .

Nachfolgend finden Sie eine Beispieldemo dessen, was wir bauen.

Um diesem Artikel zu folgen, können Sie sich das GitHub-Repo ansehen .

Seiten- und Komponentenaufbau

Eines der fantastischen Features von Sveltekit ist sein dateisystembasierter Router . Das bedeutet, dass die Struktur Ihrer Codebasis die Struktur Ihrer Anwendung definiert. Wir haben zwei Arten von Routen: Seiten und Endpunkte. Seiten generieren im Allgemeinen HTML, CSS und JavaScript, die erforderlich sind, damit die Seite dem Benutzer angezeigt wird, während Endpoints nur auf dem Server ausgeführt werden (oder wenn Sie Ihre Website erstellen, wenn sie vorab gerendert wird ).

Wie jedes andere komponentenbasierte Framework sind Seiten Svelte-Komponenten, die in .svelteDateien geschrieben sind (oder Dateien mit einer in config.extension aufgeführten Erweiterung . Wenn Benutzer die Anwendung zum ersten Mal besuchen, wird ihnen standardmäßig eine vom Server gerenderte Version der betreffenden Seite bereitgestellt Von dort aus wird die Navigation zu anderen Seiten vollständig vom Client übernommen.

Der Dateiname bestimmt die Routen. Beispielsweise ist src/routes/index.svelte das Stammverzeichnis unserer Demo-Site.

Öffnen Sie den Projektordner mit dem Code-Editor Ihrer Wahl und navigieren Sie zu src/routes/index.svelte . Fügen Sie den folgenden Code unten ein:

<!-- src/routes/index.svelte -->
<svelte:head>
 <title>David Adeneye</title>
</svelte:head>

<div class="container">
 <div class="info">
   <div class="animate-background">
     <div class="container info-container">
     <div class="info-text">
       <h1,
       <p class="animate-text-1">School-taught Computer Scientist,</p>
       <p class="text-2">Self-taught Software Engineer</p>
       </h1>
     </div>
     <h2 class="subtitle">
       On a mission to help SMEs across the globe do businesses 
       seamlessly and digitally.
     </h2>
     <div style="color:black" class="scroll-button animate-scroll" tabindex="0">
       <a href="/about">Click Here</a><div class="arrow">→</div>
     </div>
     </div>
   </div>
 </div>
</div>

<div class="background-div"></div>

Mit dem <svelte:head>Tag-Element in der zweiten Zeile<head> können Sie Elemente in Ihr Dokument einfügen . Der Rest des Codes ist unsere HTML-Seitenstruktur für die Indexseite. Im nächsten Abschnitt wird untersucht, wie das Styling in Sveltekit funktioniert.

Styling unserer App in SvelteKit

Die Art und Weise, wie das Styling in Sveltekit funktioniert, ist so ziemlich der gleiche Prozess wie bei unseren regulären HTML- und CSS-Projekten. Sie können auf externe CSS-Dateien oder Stammstile verweisen, die auf alle Seiten im Head-Tag Ihrer app.html angewendet werden , und die Stile anwenden, indem Sie Selektoren an Dokument-Tags anhängen.

Um unsere index.svelte- Dateien oben zu gestalten, fügen Sie den folgenden Stil unter dem letzten Code hinzu.

<style>
   .info {
       text-align: center;
       position: relative;
   }       

   .info-container {
       height: 100%;
       display:flex;
       flex-direction: column;
       justify-content: center;
       text-align: left;
       align-items: start;
   }

   .container {
   max-width: 1400px;
       margin: 190px 0 0 2.5rem;
   }

   .info h1 {
       font-size: 4rem;
       margin: 0;
   }

   .info h1 p {
       position: relative;
       font: inherit;
       margin: 0;
   text-align: left;
       line-height: 130%;
       width: fit-content;
       font-weight: 800;
       letter-spacing: -0.03em;
   }

   .info h2 {
       max-width: 65ch;
       font-weight: 200;
       margin-top: 0.50rem;
   }

 .background-div {
   background-color: var(--background);
     width: 100%;
   height: 56vh;
   margin: -155px auto;
 }
  
 
   .info .info-text {
       position: relative;
   }

 .scroll-button {
   display: flex;
   border: none;
   outline: none;
   cursor: pointer;
 }

   .scroll-button .arrow {
     margin-left: 0.50rem;
 }
</style>

Damit unser globaler Stil auch auf anderen Seiten funktioniert, öffnen Sie die app.html und fügen Sie den folgenden Stil unter dem schließenden html-Tag ein.

<style>
   body {
   background-position: left top;
   font-family: "Inter", sans-serif;
   margin: 0;
   background-repeat: no-repeat;
   }

   * {
   box-sizing: border-box;
  
   }

   a {
   text-decoration: none;
   color: black;
   }

   :root{
       --background: #ecebe8;
   }


   nav {
       position: sticky;
       top: 0;
       left: 0;
       right: 0;
       margin: 0 80px 0 80px;
       padding-top: 2rem;
       padding-bottom: 2rem;
   }

   nav .nav-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .nav-links {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       margin: -1em 0;
       flex: 1 0 auto;
   }

   .nav-links .link {
       position: relative;
       margin: 1em;
       font-size: 0.85rem;
       letter-spacing: 1px;
       color: black;
   }

   .nav-logo {
       position: relative;
       line-height: 1;
       font-size: 1.1rem;
       color: black;
   }
</style>

Beachten Sie außerdem, dass jedes Komponenten-Styling beim Importieren von Komponenten in Svelte intern festgelegt wird. Dies bedeutet, dass sich das auf eine importierte Komponente angewendete Styling nur auf die Komponente selbst auswirkt.

Layout und Navigation in Sveltekit

Wie bereits erläutert, werden Seiten als vollständig eigenständige Komponenten behandelt. Bei der Navigation wird also die vorhandene Komponente zerstört und eine neue übernimmt. In vielen Anwendungen müssen jedoch Elemente oder Komponenten auf jeder Seite sichtbar sein, beispielsweise ein Navigationsmenü oder eine Fußzeile. Anstatt sie also auf jeder Seite zu wiederholen, können wir eine Layoutkomponente verwenden.

Um eine Layoutkomponente zu erstellen, die für jede Seite unserer Website gilt, erstellen Sie eine Datei mit dem Namen src/routes/__layout.svelte und fügen Sie den folgenden Code unten darin ein.

<!-- src/routes/__layout.svelte -->
<nav>
   <div class="nav-container">
       <a href="/" class="nav-logo" title="Back to Homepage">David Adeneye</a>
       <div class="nav-links">
           <a href="/about" class="link">About</a>
           <a href="/blog" class="link">Blog</a>
           <a href="/projects" class="link">Projects</a>
           <a href="/contact" class="link">Contact</a>
       </div>
   </div>
</nav>

<div class="container">
 <!-- Pages will be injected below -->
    <slot></slot>
</div>

<style>
    .container {
       max-width: 1400px;
       margin: 50px auto;
   }
</style>

Dieser obige Code ist unsere Navigationsmenüleiste, die für alle Seiten unserer Portfolio-Website gilt. Die Standard-Layout-Komponente, die Sveltekit verwendet, sieht wie folgt aus, wenn Sie Ihre nicht einschließen:

<slot></slot>

Darüber hinaus können wir jedes Markup, jeden Stil und jedes Verhalten unserer Wahl verwenden; Die einzige Voraussetzung ist, dass die Komponente ein <slot>für den Seiteninhalt enthalten muss, wie wir es oben in der Datei __layout.svelte getan haben .

Routing in Sveltekit

Wie jede andere beliebte SSR-Lösung verfügt Sveltekit über ein großartiges dateibasiertes Routing-System. Seiten in Ihrer App werden standardmäßig im Ordner src/routes gespeichert; Das bedeutet, dass die Struktur Ihrer Anwendung durch die Struktur Ihrer Codebasis definiert wird, insbesondere durch den Inhalt von src/routes .

Unsere Portfolio-Website umfasst etwa sechs Seiten:

• Startseite - index.svelte(oben bereits erstellt)
• Über - about.svelte(das würden wir in diesem Abschnitt erstellen)
• Blog - blog.svelte(das würden wir im nächsten Abschnitt erstellen)
• Projekte - projects.svelte(kopieren Sie die Codedatei im Github-Repo)
• Kontakt - contact.svelte(Kopie der Codedatei im Github-Repo)
• [id].svelte - Dynamische Routen (kopieren Sie die Codedatei im Github-Repo)

Da wir unsere Navigationskopfstruktur für diese Seiten oben in der src/routes/__layout.svelte erstellt haben . Öffnen Sie die Datei about.svelte und fügen Sie den folgenden Code ein:

<!-- src/routes/about.svelte -->
<svelte:head>
   <title>About</title>
</svelte:head>

<div class="main_container">
   <section>
       <div class="inner-container">
         <h2 class="about-title">I'm David Adeneye👋</h2>
         <div class="about-subtitle">
             <p>
               Software Engineer and a Technical Writer with a solid     
               background in Computer Science, I'm passionate about making 
               the web accessible for everyone. I design and develop visually compell                ing applications with user-friendly interaction that drive business g                owth and improve user experience. When I'm not solving problems,
               I love to create technical content for engineers and tech 
               startups across the globe.
             </p>
             <p>
               Creating magic daily on the internet. You can send me
                an email at <span class="info-text">adeneyeabiodun@gmail.com</span>
             </p>
         </div>
       </div>
     </section>
</div>

<style>
   .main_container {
       margin: 0 80px 0 65px;
   }

   .about-title {
       font-size: 4.2rem;
       font-weight: bold;
       margin-top: 11rem;
   }

   .about-subtitle {
       margin-top: -2rem;
   }

   .about-subtitle >p {
       width: 60%;
       font-weight: normal;
       font-size: 1rem;
       line-height: 2rem;
   }

   .info-text {
       font-style: italic;
       font-weight: bold;
   }
</style>

Die Navigationskomponente ist immer sichtbar und das Klicken zwischen den Seiten ersetzt immer den Seiteninhalt. Gehen Sie jetzt hinüber, um unsere Portfolio-Website in Aktion zu sehen. Ihre About-Seite sollte wie folgt aussehen.

Open-Source-Sitzungswiedergabe

OpenReplay ist eine Open-Source-Suite für die Sitzungswiedergabe, mit der Sie sehen können, was Benutzer in Ihrer Webanwendung tun, und die Ihnen hilft, Probleme schneller zu beheben. OpenReplay wird selbst gehostet, um die volle Kontrolle über Ihre Daten zu erhalten.

Fangen Sie an , Ihr Debugging-Erlebnis zu genießen – nutzen Sie OpenReplay kostenlos .

Nutzung der REST-API in Sveltekit

Um zu erfahren, wie Daten von einer REST-API abgerufen werden, und das Konzept des Ladens in Sveltekit, erstellen wir einen Demo-Blogbeitrag auf unserer Website. Wir werden mit einer kostenlosen gefälschten REST-API namens JSONPlaceholder interagieren , einer kostenlosen Online-REST-API zum Testen und Prototyping.

Öffnen Sie zunächst src/routes/blog.svelte und fügen Sie den folgenden Code ein oder lesen Sie den begleitenden Quellcode mit.

<!-- src/routes/blog.svelte -->
<svelte:head>
   <title>Blog</title>
</svelte:head>

<script context="module">
   export const load = async ({ fetch }) => {
       const res = await fetch("https://jsonplaceholder.typicode.com/posts");
       const blogposts = await res.json();
       return {
           props: {
               blogposts,
           }
       }
   }
</script>

<script>
   export let blogposts;
</script>

<div class="container">
   <h1>My Articles</h1>
   <div class="blogposts">
       {#each blogposts as post}
       <div class="post">
           <h2>{post.title.substring(0, 20)}</h2>
           <p>{post.body.substring(0, 80)}</p>
           <p class="readmore">
            <a style=" color: rgb(10, 10, 139);" href={`/blog/${post.id}`}>
              Read More
            </a>
          </p>
       </div>
       {/each}
   </div>
</div>

Analysieren wir den obigen Code. Beachten Sie das <script context="module">in Zeile 6 - es ist notwendig, da es ausgeführt wird, loadbevor die Komponente gerendert wird. Der Instanzcode pro Komponente sollte sich in einem zweiten <script>Tag befinden. Wir verwenden dann die loadFunktion, um unsere Demo-Blogposts von der gefälschten jsonplaceholder-API abzurufen, um sie auf unserer Website anzuzeigen.

Die loadFunktion in sveltekit ähnelt getStaticPropsoder getServerSidePropsin Next.js, außer dass sie sowohl auf dem Client als auch auf dem Server ausgeführt wird.

Vergessen Sie außerdem nicht, den begleitenden CSS-Code innerhalb des Codeblocks zu kopieren, wenn Sie zusammen mit diesem Tutorial für das Styling Ihrer Seite erstellen.

Ihre blog.svelte sollte wie folgt aussehen:

Dynamische Routen in Sveltekit verwenden

Um einen Blog wie diesen aufzubauen, bräuchten wir dynamisch generierte Routen. Sveltekit ermöglicht es uns, dies einfach durch dynamische Routen zu implementieren.

Um dies zu implementieren, erstellen Sie einen neuen Ordner mit dem Namen blog . Dynamische Parameter in Sveltekit werden mit kodiert [bracket]. Erstellen Sie beispielsweise eine Datei mit dem Namen [id].svelte in Ihrem Blogordner. Öffnen Sie die Datei und fügen Sie den folgenden Code ein oder folgen Sie dem Quellcode.

<script context="module">
   export const load = async ({ page, fetch }) => {
       const id = page.params.id;

       const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

       const post = await res.json();

       return {
           props: {
               post,
           }
       }
   }
</script>

Aus dem Code haben wir auf den Parameter innerhalb der Ladefunktion zugegriffen und ihn mit der Variablen gespeichert id; Der Parameter wurde dann verwendet, um den genauen Blog-Beitrag dieser ID abzurufen. Angenommen, Sie gehen zurück zu blog.sveltehref , dann sehen Sie in Zeile 33 unten , wie wir auf die dynamisch generierten Seiten zugegriffen haben :

<p class="readmore">
  <a style="color: rgb(10, 10, 139);" href={`/blog/${post.id}`}> 
      Read More
  </a>
</p>

Sie können sehen, wie wir auf den genauen Blogbeitrag mit dem zugreifen post.id. Wenn Sie also auf Read More klicken , wird eine neue Seite geladen, um den gesamten Blog zu lesen.

Bereitstellung Sveltekit-Anwendung

Bevor Sie Ihre App in Sveltekit bereitstellen können, müssen Sie sie an Ihr Entwicklungsziel anpassen. Es hilft, Ihren Bereitstellungsprozess zu vereinfachen, indem es mehrere Plugins bereitstellt, die als Adapter bezeichnet werden. Adapter sind kleine Plugins, die die erstellte App als Eingabe verwenden und Ausgaben für die Bereitstellung generieren.

Sveltekit bietet einige offiziell unterstützte Adapter:

Adapter Static : Dies ist ein Adapter für die Sveltekit-App, der Ihre Website als Sammlung statischer Dateien vorab rendert, die mit Hostingdiensten wie Github-Seiten und dergleichen kompatibel sind.

Adapter Vercel : Ein Adapter für Svelte-Apps, die eine Vercel-App erstellen und dabei eine Funktion für dynamisches Server-Rendering verwenden. Es wird für die Bereitstellung Ihrer App auf der Vercel-Hosting-Plattform verwendet.

Adapter Netlify : Adapter für Svelte-Apps, die eine Netlify-App erstellen und Dienstfunktionen zum dynamischen Generieren von Seiten verwenden. Es wird für die Bereitstellung Ihrer App auf der Netlify-Plattform verwendet.

Werfen wir einen Blick darauf, wie Sie unsere Demo-Anwendung auf Netlify bereitstellen.

Bereitstellung von Sveltekit auf Netlify

Damit Sie Sveltekit auf Netlify bereitstellen können, müssen Sie den netlify-sveltekit-Adapter verwenden .

Lassen Sie uns den Adapter mit dem folgenden Befehl in unser Projekt installieren:

npm install -D @sveltejs/adapter-netlify@next

Fügen Sie nach Abschluss der Installation den Adapter zur Datei svelte.config.js Ihres Projekts hinzu . Fügen Sie den folgenden Code unten in die Datei ein.

import adapter from '@sveltejs/adapter-netlify';

export default {
  kit: {
    adapter: adapter(),
    target: '#svelte'
  }
};

Erstellen Sie dann eine netlify.toml -Datei im Basisverzeichnis Ihres Projekts und geben Sie einen Build-Befehl und ein Veröffentlichungsverzeichnis an. Fügen Sie den folgenden Code unten in die Datei ein.

[build]
  command = "npm run build"
  publish = "build"

Stellen Sie nach all diesen Einstellungen Ihr Projekt auf Netlify mit Git oder der Netlify-CLI bereit.

Dies ist der Link ( jolly-franklin-11e50c.netlify.app ) zur endgültig bereitgestellten Website auf Netlify

Fazit

Ich hoffe, es hat Ihnen Spaß gemacht, dieses Tutorial durchzuarbeiten. Wir haben das grundlegende Konzept von Sveltekit untersucht, indem wir eine Beispiel-Portfolio-Website erstellt haben, und vor allem, wie man die REST-API mit unserem Demo-Blog in der App nutzt und wie man die Sveltekit-Anwendung auf Netlify bereitstellt. Sie können versuchen, das Gelernte in die Praxis umzusetzen, indem Sie andere Seiten erstellen, oder diese Demo nach Ihrem Geschmack aktualisieren, wenn Sie eine Portfolio-Website für sich selbst erstellen möchten.

Das unterstützende Repository für diesen Artikel ist auf Github verfügbar .

Quelle des Originalartikels unter https://blog.openreplay.com

#sveltekit #svelte #webdev #javascript 

What is GEEK

Buddha Community

Responsive Personal Portfolio Website HTML CSS and JavaScript

Demo: https://cutt.ly/TvxhH2T

#portfolio website html css #personal portfolio website tutorial #portfolio website #responsive personal portfolio website #portfolio website html css javascript #responsive portfolio website html css javascript

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

Create a Personal Portfolio Website Using HTML CSS and JavaScript

Demo Click Here: https://cutt.ly/2vFKuxe

#portfolio website html css #personal website html css #personal portfolio website #how to create a complete peronal portfolio website #responsive portfolio website html css #responsive personal portfolio website html css

Create Portfolio website Using HTML, CSS & Bootstrap

Demo and Download Code

#personal portfolio website tutorial #portfolio website html css javascript #responsive portfolio website html css javascript #portfolio website #responsive web design #portfolio website mobile first

RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT

https://youtu.be/J8g9gyzhEoM

#responsive website using html5 and css3 #portfolio website #one page personal website html css #portfolio website design in html css #css responsive website design #responsive website html css