Eine statische Website ist eine Art von Website, die dem Benutzer genau so geliefert wird, wie sie gespeichert ist, ohne serverseitige Verarbeitung oder dynamische Inhaltsgenerierung. Statische Websites werden in der Regel mit HTML, CSS und JavaScript erstellt und eignen sich für kleinere Websites, die keine häufigen Aktualisierungen oder Benutzerinteraktionen erfordern. Unsere Website und Landing Page sind auf diese Weise aufgebaut und werden ebenfalls in einem Codesphere Workspace gehostet.

Es gibt verschiedene Möglichkeiten, eine statische Website zu hosten, und verschiedene Frameworks, je nachdem, welche Sprache Sie verwenden, wie Flask, Django, Node jS, Express JS, Ruby on Rails usw. Hier erfahren Sie, wie Sie eine statische Website mit Flask, Express js und Vue hosten können.

Verwendung von Python Flask

Es gibt eine bestimmte Codestruktur, die in Flask befolgt wird. Legen Sie also einen Ordner mit dem Namen templates an und fügen Sie alle Ihre HTML-Dateien darin ein.

Erstellen Sie nun einen weiteren Ordner mit dem Namen static und fügen Sie alle CSS-, Bild- und Javascript-Dateien darin ein.

Wenn Sie Bilder haben, vergewissern Sie sich, dass Sie den Link zu den Bildern in Ihren Dateien in diesem Format angeben:

src="{{ url_for('static', filename='images/xyz') }}"

Ersetzen Sie "xyz" durch den Namen Ihres Bildes

Da Flask nicht standardmäßig in Python enthalten ist, müssen Sie eine weitere Datei namens Pipfile erstellen. Sie können die gewünschten Abhängigkeiten in diese Datei schreiben.

In der einfachsten Form sehen sie wie folgt aus:

Flask = “==2.3.2”
Flask-Cors = ”==4.0.0”
Flask-RESTful = “==0.3.10

Erstellen Sie nun eine run.py-Datei, die die Pfade der verschiedenen Seiten definiert. So sollte sie aussehen:

from flask import Flask, render_template
app = Flask("Happy Travel", template_folder="templates",
            static_folder="static")

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/index')
def index():
    return render_template('index.html')

@app.route('/contact')
def contact():
    return render_template('contact.html')

@app.route('/gallery')
def gallery():
    return render_template('gallery.html')

@app.route('/blog')
def blog():
    return render_template('blog.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port='3000', debug=False)

Stellen Sie sicher, dass der Port auf 3000 eingestellt ist.

Jetzt können Sie gehen und diese Befehle zu Ihrer CI-Pipeline hinzufügen.

Schreiben Sie in der Vorbereitungsphase:

pipenv sync

In der Run-Phase schreiben:

pipenv run python run.py

Ihre Website sollte jetzt einsatzbereit sein.

Express js verwenden

In Express js wird ebenfalls eine Dateistruktur verwendet. Erstellen Sie einen Ordner mit dem Namen public und verschieben Sie alle html-, css- und Bilddateien dorthin. Erstellen Sie nun eine index.js-Datei und geben Sie den Namen des statischen Ordners an. Zum Run auf Codesphere setzen Sie den Port auf 3000. Hier ist ein Code-Schnipsel

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Nun können Sie eine Datei mit dem Namen ci.yml erstellen und diese Befehle darin einfügen.

prepare:
  steps:
    - name: Install Dependencies
      command: npm install
test:
  steps: []
run:
  steps:
    - name: Start Dev Server
      command: npm start

Vue verwenden

Um eine statische Website mit Vue js zu hosten, müssen Sie sicherstellen, dass Sie Node.js auf Ihrem System installiert haben. Als nächstes können Sie ein neues Vue.js-Projekt mit Vue CLI (Command Line Interface) erstellen. Wenn Sie Vue CLI noch nicht installiert haben, können Sie dies tun, indem Sie den folgenden Befehl ausführen:

npm install -g @vue/cli

Erstellen Sie dann ein Vue-Projekt:

vue create my-project

Ersetzen Sie my-project durch den Namen, den Sie Ihrem Projekt geben möchten.

Gehen Sie nun in Ihrem Vue-Projekt zu src/router/index.js und fügen Sie Ihre Routen zum routes-Objekt wie folgt hinzu:

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

Der nächste Schritt ist, zu den Ansichten innerhalb von src zu gehen und die HomeView und AboutView hinzuzufügen. Dies wird der HTML-Code innerhalb des Template-Tags sein. So würde es aussehen:

<template>
  <div>
    <h1>Welcome to the Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

Sobald Sie die Ansichten hinzugefügt haben, fügen Sie das CSS hinzu. Für CSS bearbeiten Sie das style-Tag in src/App.vue. Hier ist ein Codeschnipsel.

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style>
[CSS_GOES_HERE]
</style>

Erstellen Sie nun eine Datei ci.yml und fügen Sie die Schritte zum Erstellen und Ausführen hinzu.

prepare:
  steps:
  - name: "Install dependencies"
    command: "yarn install"
  - name: "Build"
    command: "yarn build"

test:
  # Put your commands here.
  steps: []

run:
  steps:
  - name: "Run"
    command: "yarn preview --host --port 3000"

Und schon ist Ihre Anwendung einsatzbereit.