Ihre erste Website mithilfe von WebMatrix

Diese Anleitung führt Sie in WebMatrix ein, das neue One-Stop-Tool von Microsoft zur Website-Erstellung, mit dem Sie Websites mit Leichtigkeit erstellen, bearbeiten und veröffentlichen können.

Diese Erste-Schritte-Anleitung hilft Ihnen:

  • WebMatrix zu installieren.
  • Eine Open-Source-Anwendung zusammen mit ihren notwendigen Voraussetzungen herunterzuladen und zu installieren.
  • Die anfängliche Einrichtung durchzuführen, einschließlich der Festlegung von Anmeldeinformationen für Datenbank- und Website-Administrator.
  • Einige Dateien innerhalb der Website mithilfe des integrierten Code-Editors zu bearbeiten.
  • Die Datenbank der Website mithilfe des integrierten Datenbank-Managers zu bearbeiten.
  • Eine Website-Analyse durchzuführen, um potenzielle Optimierungsmöglichkeiten ausfindig zu machen.
  • Ihre Website auf die Veröffentlichung über einen Webhosting-Anbieter vorzubereiten.

Überblick

WebMatrix, das neue One-Stop-Webentwicklungstool von Microsoft, hilft Ihnen Websites mit beispielloser Leichtigkeit zu erstellen, bearbeiten und veröffentlichen. Es gibt im Wesentlichen drei Wege, Ihre Websites mithilfe von WebMatrix zu erstellen:

  • Sie können eine Website mithilfe einer der Website-Vorlagen erstellen, die in WebMatrix enthalten sind.
  • Sie können eine Website von Grund auf neu erstellen mithilfe der WebMatrix-Bearbeitungstools für ASP.NET-Webseiten mit „Razor“-Syntax.
  • Sie können mit einer gängigen Open-Source-Webanwendung aus der Microsoft Web Application Gallery beginnen.

Die Web Gallery beinhaltet eine umfassende Sammlung kostenfreier Open-Source-Anwendungen, die Sie direkt aus WebMatrix installieren können. In diesem Tutorial installieren Sie WebMatrix und erstellen eine Website mit Blog basierend auf der weit verbreiteten Open-Source-Anwendung WordPress.

1. Installieren Sie WebMatrix

Um WebMatrix zu installieren, gehen Sie auf die WebMatrix-Downloadseite und klicken Sie auf Jetzt herunterladen. Klicken Sie bei den Sicherheitswarnungen zunächst auf Zulassen und dann auf der Webplattform-Installer-Seite auf Installieren.

WebMatrixFirstWebsite_1

Auf der Webplattforminstallations-Seite, zeigt WebMatrix eine Liste zusätzlich notwendiger Komponenten an. Klicken Sie auf Ich stimme zu. Dann beginnt die Installation.

WebMatrixFirstWebsite_2

2. WebMatrix starten

Klicken Sie nach der Installation auf den Start-Button > Alle Programme > Microsoft WebMatrix > Microsoft WebMatrix.

WebMatrixFirstWebsite_3

3. Öffnen Sie die Web Gallery

Die WebMatrix Schnellstart-Seite bietet Ihnen eine Vielzahl an Möglichkeiten, eine Website zu erstellen. In diesem Tutorial werden Sie die Option verwenden, eine Website basierend auf einer bestehenden Open-Source-Anwendung zu erstellen.

Klicken Sie auf der Schnellstart-Seite auf Website aus Web Gallery.

WebMatrixFirstWebsite_4

4. Wählen Sie eine Webanwendung

Wählen Sie WordPress aus. Geben Sie in das Feld Websitename „MyNewBlog“ ein und klicken Sie dann auf Weiter.

WebMatrixFirstWebsite_5

5. Wählen Sie den Datenbanktyp

Für die meisten Webanwendungen aus der Web Gallery ist ein Datenbankmodul erforderlich (und zwar MySQL Server oder SQL Server Express). WordPress ist nur mit MySQL kompatibel. Wenn Sie MySQL nicht bereits installiert haben, so hilft Ihnen WebMatrix bei der Installation. Wenn dieser Schritt für Sie erforderlich ist, dann klicken Sie auf Ja, auf dem lokalen Computer installieren und dann auf Weiter.

WebMatrixFirstWebsite_6

Wenn Sie WordPress installieren, müssen Sie möglicherweise drei Arten von Anmeldeinformationen einrichten:

  • Datenbank-Administrator-Anmeldeinformationen für das MySQL-Datenbankmodul, das WordPress einrichtet (auch bekannt als „root“ oder „sa“-Anmeldeinformationen im Fall von SQL Server).
  • Datenbank-Benutzer-Anmeldeinformationen für die tatsächliche MySQL-Datenbank, die WordPress für Ihre Website erstellt.
  • Ein Satz an Administrator-Anmeldeinformationen für die WordPress-Website selbst.

Diese Anmeldeinformationen werden in den folgenden Schritten behandelt.

Sollte MySQL bereits installiert sein, so können Sie direkt zum Schritt Eine Datenbank mit der Anwendung verbinden weitergehen.

6. Wählen Sie ein Administrator-Passwort für das Datenbankmodul

Wenn Sie ein Datenbankmodul erstmals installieren, müssen Sie ein Passwort für das Datenbank-Administratorkonto eingeben. Der Standard-Administratorname ist „root“ für MySQL-Datenbanken und „sa“ für SQL Server. Stellen Sie sicher, dass Sie sich sowohl den Benutzernamen als auch das Passwort, den Sie erstellen, merken, denn Sie benötigen beide später.

WebMatrixFirstWebsite_7

Klicken Sie auf Weiter.

7. Beginnen Sie die Installation

Der nächste Bildschirm zeigt Ihnen die zu installierende(n) Anwendung(en). Dies beinhaltet auch jegliche andere Software, die von der Anwendung erfordert wird (zum Beispiel PHP, das Skripmodul, das für WordPress erforderlich ist). Der folgende Screenshot zeigt Ihnen, dass sowohl WordPress als PHP installiert werden. (Es wird der Link angezeigt, von dem die Software installiert wird; Sie brauchen jedoch nicht selbst auf diese Websites zu gehen und die Software zu installieren – das macht WebMatrix für Sie!)

WebMatrixFirstWebsite_8

Nachdem Sie den Lizenzbedingungen zugestimmt haben, beginnt die Installation.

Die für die Installation notwendige Zeit hängt von der Geschwindigkeit Ihrer Internetverbindung ab sowie von den Servern, von denen Sie die Software herunterladen.

8. Verbinden Sie eine Datenbank mit der Anwendung

Als Nächstes müssen Sie möglicherweise einige zusätzliche Datenbankinformationen für die Anwendung eingeben. Web Gallery-Anwendungen erwarten üblicherweise von Ihnen, sie auf Ihr lokales Datenbankmodul zu verweisen (das Sie eventuell gerade erst installiert haben). Für SQL Express ist das typischerweise .\SQLExpress. Für MySQL ist es localhost.

Da WordPress MySQL verwendet, ist „localhost“ bereits für Sie eingetragen, wie Sie im folgenden Screenshot sehen können.

Geben Sie als Nächstes MyNewBlogDB in das Feld Datenbankname ein. Dies ist die Datenbank, die Ihre Blog-Inhalte beherbergen wird.

In das Feld Datenbankbenutzername geben Sie bitte MyNewBlogDBUser ein. Und tragen Sie in das Feld Datenbankkennwort ein Passwort ein.

WebMatrixFirstWebsite_9

Als Nächstes erfordert WordPress die Administrator-Anmeldeinformationen für MySQL, damit es Datenbankänderungen vornehmen kann. Wenn notwendig, scrollen Sie runter, bis das Feld Kennwort für Datenbankadministrator sichtbar ist. Geben Sie in dieses Feld das Passwort ein, das Sie zuvor festgelegt haben – das Passwort, das Sie für den „root“-Benutzer erstellt haben.

Hinweis: Ändern Sie im Feld Datenbankadministrator nicht den Administrator-Benutzernamen von „root“.

Wenn Sie fertig sind, klicken Sie auf Weiter.

Sobald der Prozess abgeschlossen ist, wird Ihnen der folgende Screenshot angezeigt. Die angezeigten Details können leicht variieren, je nachdem, was installiert wurde.

WebMatrixFirstWebsite_10

Standardmäßig befinden sich Ihre Website-Dateien, einschließlich der Dateien, die WordPress für Sie installiert, im Ordner C:\Benutzer\<IhrBenutzerName>\Eigene Dokumente\My Web Sites\MyNewBlog. Zu diesem Zeitpunkt haben Sie Ihre Website noch nicht ins Internet veröffentlicht und Sie arbeiten noch lokal auf Ihrem eigenen Computer.

Klicken Sie auf OK.

9. Führen Sie die Website zum ersten Mal aus

Wenn die Installation abgeschlossen ist, erscheint Ihre neue Website im Arbeitsbereich Site von WebMatrix.

Klicken Sie im WebMatrix-Menüband auf den Button Ausführen, um die Website in Ihrem Browser zu starten. Das ist notwendig, da die meisten Anwendungen in der Web Gallery ihre letzten Schritte für die Einrichtung im Browser durchführen.

WebMatrixFirstWebsite_11

10. Geben Sie die Informationen zum Website-Administrator ein

Wenn Anwendungen aus der Web Gallery erstmals ausgeführt werden, wird dadurch normalerweise die letzte Installationsphase angestoßen. In diesem Fall fragt WordPress nach dem Titel der Website und den Anmeldeinformationen des Website-Administrators.

Der Website-Titel muss nicht mit dem Namen der Website in WebMatrix übereinstimmen. Geben Sie „My New Blog" (mit Leerzeichen) als Site Title und „MyNewBlogAdmin" als Username des Website-Administrators ein.

Geben Sie als Nächstes ein Passwort sowie eine E-Mail-Adresse für den Website-Administrator ein. Sollten Sie kein Passwort eingeben, so wird WordPress eines für Sie generieren.

WebMatrixFirstWebsite_12

Um schließlich sicherzustellen, dass Ihr Blog von Suchmaschinen wie Bing und Google gefunden werden kann, wählen Sie Allow my site to appear in search engines aus und klicken Sie dann auf Install WordPress (Sie werden sehen, dass es sich anders als angegeben, nicht wirklich um eine Installation handelt).

11. Sehen Sie sich die Homepage an

Sollten Sie im vorangehenden Schritt keine Anmeldeinformationen angegeben haben, wird Ihnen eine Seite Ihren Administrator-Benutzernamen sowie Ihre Anmeldeinformationen anzeigen. Klicken Sie auf Log In, nachdem Sie diese Informationen aufgeschrieben haben. Es wird Ihnen die folgende Anmelde-Seite angezeigt.

Diese Anmeldeseite führt Sie zum Dashboard Ihres Website-Administrators. Viele Anwendungen der Web Gallery haben ganz ähnliche Dashboards. Da Sie sich über WebMatrix informieren wollen, können Sie diesen Schritt fürs Erste überspringen.

Klicken Sie auf der Seite unten auf den Link „Back to My New Blog“.

WebMatrixFirstWebsite_13

Es wird die Standardseite für die Website My New Blog angezeigt.

WebMatrixFirstWebsite_14

Herzlichen Glückwunsch! Die Grundeinrichtung Ihrer Website ist abgeschlossen.

Schließen Sie Ihren Browser und kehren Sie zu WebMatrix zurück.

12. Öffnen Sie den Arbeitsbereich „Dateien“

Jetzt können Sie sich darauf konzentrieren, Ihre Website anzupassen. Sagen wir, Sie möchten WebMatrix nutzen, um die Hintergrundfarbe aller Überschriften auf der Website zu ändern, damit sie stärker hervorstechen.

Um zu beginnen, klicken Sie auf die Arbeitsbereichsauswahl Dateien. Dadurch öffnet sich der Arbeitsbereich Dateien.

WebMatrixFirstWebsite_15

13. Öffnen Sie eine Datei

Der Arbeitsbereich Dateien ist der Bereich in WebMatrix, in dem Sie Dateien öffnen und bearbeiten können.

WebMatrixFirstWebsite_16

Gehen Sie im Navigationsfenster links auf wp-content > themes > und den Ordner twentyten und suchen Sie dort die Datei style.css. Klicken Sie darauf, um sie zu öffnen. Wenn Sie möchten, können Sie im Menüband auf Zeilenumbruch klicken, damit die Dateiinhalte besser zu lesen sind. Zeilennummern sind standardmäßig aktiviert und ihre Positionen werden beim Zeilenumbruch entsprechend angepasst.

14. Bearbeiten Sie eine Datei

Klicken Sie im Menüband auf Gehe zu Zeile…, geben Sie „34“ ein und klicken Sie auf Gehe zu. Dadurch gelangen Sie zur CSS-Deklaration für alle Überschriften in der Website.

WebMatrixFirstWebsite_17

Nach der Zeile:

font-weight: normal;

geben Sie die folgende Zeile ein:

background-color: yellow;

Wenn Sie CSS-Regeln bearbeiten und am Ende einer vorhandenen Zeile auf die Eingabe-Taste drücken, zeigt die IntelliSense-Funktion von WebMatrix einige häufig verwendete Optionen an, um Ihnen etwas Eingabeaufwand zu ersparen:

WebMatrixFirstWebsite_18

Wenn Sie fertig sind, klicken Sie auf das Symbol Speichern in der Schnellzugriffsleiste.

WebMatrixFirstWebsite_19

15. Führen Sie die Website aus

Führen Sie die Website erneut aus, um die Auswirkungen Ihrer Änderung zu sehen. Wählen Sie im Navigationsfenster den obersten Eintrag im Baum aus, der Ihre gesamte Website darstellt, und klicken Sie im Menüband dann auf Ausführen. (Wenn Sie vergessen, den Knoten MyNewBlog auszuwählen, und stattdessen auf Ausführen klicken, wenn im Navigationsfenster site.css ausgewählt ist, so wird WebMatrix versuchen, site.css zu browsen, und es wird Ihnen ein Fehler im Browser angezeigt.)

WebMatrixFirstWebsite_20

Sie sehen im Browser dann, dass sich die Hintergrundfarbe aller Überschriften geändert hat.

WebMatrixFirstWebsite_21

Wenn Sie sich die Änderung angesehen haben, schließen Sie den Browser. Sie können weitere Dateien im Verzeichnis wp-content/themes modifizieren, um Designs in jeglicher gewünschter Weise zu ändern.

16. Öffnen Sie den Arbeitsbereich Datenbanken

Jetzt sind Sie bereit, sich an die Änderung einiger der Daten auf der Seite zu wagen. Beginnen wir damit, dass Sie den Titel des Posts von „Hello World“ in etwas anderes ändern.

Klicken Sie auf die Arbeitsbereichsauswahl Datenbanken.

WebMatrixFirstWebsite_22

17. Machen Sie eine Änderung in der Anwendungsdatenbank

Öffnen Sie den Knoten für die Datenbank MyNewBlogDB.

WebMatrixFirstWebsite_23

Doppelklicken Sie auf Tabellen. Doppelklicken Sie in der Liste der Tabellen auf MyNewBlogDB.wp_posts.

Suchen Sie in der ersten Zeile des Tabellenblatts die Spalte post_title. Wählen Sie die entsprechende Zelle in der ersten Zeile aus, drücken Sie F2, um in den Bearbeitungsmodus zu wechseln, und ändern Sie „Hello world!“ dann in „Welcome to My New Blog!“. Während Sie die Zeile bearbeiten, wird Ihnen links ein Stift-Symbol angezeigt.

Um die gemachte Änderung zu speichern, brauchen Sie nur in eine beliebige andere Zeile in der Tabelle zu klicken.

WebMatrixFirstWebsite_24

18. Prüfen Sie Ihre Änderung

Klicken Sie im Menüband auf den Reiter Startseite und anschließend erneut auf Ausführen. Die veränderte Begrüßung wird im Browser angezeigt.

WebMatrixFirstWebsite_25

Natürlich ist es möglich, dieselbe Information mithilfe des Website-Administrator-Dashboard von WordPress zu bearbeiten. Im Rahmen dieses Tutorials haben Sie die Änderung jedoch direkt in der Datenbank gemacht, damit Sie sich mit dem Arbeitsbereich Datenbanken von WebMatrix vertraut machen können.

Schließen Sie den Browser. Vorerst sind Sie im Arbeitsbereich Datenbanken fertig.

19. Öffnen Sie den Arbeitsbereich Berichte

Als Nächstes verwenden Sie die Funktion Berichte von WebMatrix, um Ihre Website zu analysieren. Die Funktion Berichte schlägt Änderungen vor, die Ihre Website schneller und für Suchmaschinen wie Bing und Google besser auffindbar machen können.

Der Arbeitsbereich Berichte verfügt über zahlreiche Funktionalitäten, daher wird sich dieses Tutorial auf die Grundlagen konzentrieren, wie Sie eine Analyse durchführen und die Ergebnisse ansehen können.

Um zu beginnen, klicken Sie auf die Arbeitsbereichsauswahl Berichte in WebMatrix.

WebMatrixFirstWebsite_26

20. Erstellen Sie einen neuen Bericht

Klicken Sie im Arbeitsbereich Berichte im Menüband auf Neu.

WebMatrixFirstWebsite_27

21. Benennen Sie den Bericht

Geben Sie in das Feld Name im Dialogfeld Neuer Bericht „My New Blog Report“ ein. Die Analyse beginnt, sobald Sie auf OK geklickt haben.

WebMatrixFirstWebsite_28

22. Sehen Sie die Ergebnisse an

Die Ergebnisse werden im Arbeitsbereich Berichte angezeigt.

Verstöße gegen gute Methoden für die Suchmaschinenoptimierung werden als „Information“, „Warnung“ oder „Fehler“ kategorisiert. Wenn Sie mehr Information zu einem Problem erhalten möchten, klicken Sie darauf, um es zu erweitern.

Sie können den Schieberegler verwenden, um die Menge an Information, die Sie sehen wollen, zu filtern.

Wenn Sie nur Warnungen und Fehler sehen möchten, bewegen Sie den Regler in die Mitte. Wenn Sie nur Fehler sehen möchten, schieben Sie den Regler nach rechts.

Im Menüband können Sie außerdem auf die Buttons Leistung, SEO, Alle, URL und Problemtyp klicken, um die Ergebnisse zu filtern und gruppieren.

WebMatrixFirstWebsite_29

Wie angemerkt, kann diese kurze Einführung in die Berichte-Funktionalität nicht all ihre Fähigkeiten abdecken. Wenn Sie mehr über die Ansicht von Verstößen erfahren möchten und darüber, wie Sie diese beheben, sehen Sie sich das folgende Tutorial an: Use WebMatrix to optimize your site for search engines (SEO).

23. Bereiten Sie die Veröffentlichung vor

Wenn Sie bereit sind, Ihre Website im Internet zu veröffentlichen, klicken Sie auf den Button Veröffentlichen im Menüband von WebMatrix.

WebMatrixFirstWebsite_30

Bei der ersten Veröffentlichung wird das Dialogfeld Veröffentlichen – Einstellungen angezeigt. Um eine Website zu veröffentlichen, müssen Sie über einen Account bei einem Webhostinganbieter verfügen. Sollten Sie noch keinen haben, so können Sie auf Webhostinganbieter suchen klicken.

WebMatrixFirstWebsite_31

Dadurch wird eine Webseite angezeigt, auf der Sie von einer Reihe von Hostinganbietern wählen können, die mit WebMatrix kompatibel sind.

WebMatrixFirstWebsite_32

24. Importieren Sie Ihre Veröffentlichungseinstellungen

Nachdem Sie einen Account bei einem Hostinganbieter eingerichtet haben, wird Ihnen dieser Anbieter in der Regel eine E-Mail mit Ihrem Benutzernamen, Servernamen und anderen Informationen zusenden, die Sie in das Dialogfeld Veröffentlichen – Einstellungen eintragen.

Um Ihnen die Extraschritte zu ersparen, diese Information manuell einzugeben, schickt Ihnen der Anbieter möglicherweise auch eine „Profile XML“-Datei (benannt mit der Erweiterung .publishsettings), die diese Information beinhaltet. Wenn Sie eine solche Datei erhalten, dann brauchen Sie nur auf Veröffentlichungseinstellungen importieren zu klicken, die Datei auszuwählen – und Sie sind bereit für die Veröffentlichung! Andernfalls können Sie die Einstellungen aber auch manuell eingeben.

WebMatrixFirstWebsite_33

25. Veröffentlichen Sie Ihre Website

Jetzt sind Sie bereit, Ihre Website zu veröffentlichen. Einzelheiten dazu finden Sie im Tutorial How to publish a web application using WebMatrix.

Nachdem Sie Ihre Website veröffentlicht haben, möchten Sie möglicherweise Änderungen daran vornehmen und die Website neu veröffentlichen. WebMatrix macht es Ihnen leicht, die Website von Ihrem Hostinganbieter herunterzuladen, sie zu bearbeiten und erneut zu veröffentlichen. Informationen dazu finden Sie in Download, edit, and republish your website with WebMatrix.

26. Weitere Möglichkeiten, eine Website mit WebMatrix zu erstellen

Zusätzlich zu der Möglichkeit, eine Website basierend auf einer der vielen Anwendungen in der Web Gallery zu erstellen, können Sie mit WebMatrix eine Website auch auf andere Weisen erstellen:

· Verwenden Sie die integrierten Vorlagen. Die Vorlagen bieten entweder eine ganz elementare Website, mit der Sie anfangen können (wie die Vorlage Starter Site) oder eine zweckspezifische Website (wie die Vorlagen Fotogallerie, Kalender oder Konditorei). Diese Vorlagen erstellen die grundlegende Website für Sie, die Sie dann nach Ihren Wünschen anpassen. Weitere Informationen über die Erstellung von Vorlagen finden Sie unter: Create a website from a WebMatrix site template.

· Erstellen Sie selbst eine Website. Diese Option erfordert mehr Aufwand von Ihrer Seite, könnte jedoch die beste Option sein, wenn Sie direkt alle Aspekte Ihrer Website kontrollieren möchten. Eine Möglichkeit, um loszulegen, ist die Verwendung der Vorlage Leere Website. Weitere Informationen dazu finden Sie unter: Create an ASP.NET website from scratch.

· Erstellen Sie eine Website aus einem Ordner. Wenn Sie bereits Website-Dateien (wie beispielsweise .html-Dateien) in einem Ordner auf Ihrem Computer haben, können Sie Website aus Ordner im Schnellstart-Bildschirm von WebMatrix anklicken. Der Ordnername wird dann zum Namen einer neuen Website, deren Dateien Sie in WebMatrix bearbeiten können. Alternativ können Sie in Windows Explorer per Rechtsklick auf einen bestehenden Ordner klicken und dann auf Open as a Web Site with Microsoft WebMatrix klicken.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!