Dieses Repository bietet Ihnen den Code, den Sie benötigen, um eine persönliche Website zu starten, auf der Ihre Arbeit als Softwareentwickler vorgestellt wird. Und wenn Sie den Code in einem GitHub -Repository verwalten, werden automatisch eine Webseite mit den Profilinformationen des Eigentümers, einschließlich eines Fotos, einer Biografie und einer Repositorie, umgebracht.
Ihre persönliche Website wartet jedoch darauf, personalisiert zu sein. Es beinhaltet Raum, um Ihre spezifischen Interessenbereiche für die Softwareentwicklung wie Sprachen oder Branchen hervorzuheben. Und es steht vorbei, um Ihren nächsten großartigen Blog -Beitrag zu veröffentlichen.
Es ist alles möglich, wenn die Kombination von Jekyll (zum Erstellen Ihrer Website), Github -Seiten (zum Hosting Ihrer Website) und der API von Github (zur automatischen Fülle Ihrer Website mit Inhalten).
github/personal-website
Repo auf Sie erstellen Ihre eigene Kopie des Repositorys "Personal Website Starter", damit Sie ein eigenes Projekt zum Anpassen haben. Eine "Gabel" ist eine Kopie eines Repositorys. Wählen Sie also "Fork" auf dem github/personal-website
Repository.
Sobald Sie ein Zuhause für Ihr Forked Repository gefunden haben, gehört es Ihnen. Sie sind der Eigentümer, Sie können also bereit zu veröffentlichen, wenn Sie dies wünschen.
Wenn Sie Ihre Website in einer lokalen Webentwicklungsumgebung verwalten möchten, verwenden Sie Ruby.
Sobald Sie ein Zuhause für Ihr Forked Repository gefunden haben, klonen Sie es .
Jekyll ist ein Ruby -Juwel, das in den meisten Systemen installiert werden kann.
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
Wenn Sie den Code Ihrer persönlichen Website auf GitHub hosten, erhalten Sie die Unterstützung des kostenlosen Hosting über Github -Seiten.
Der schnellste Ansatz besteht darin username
Ihren Repository username.github.io
zu umbenennen. Wenn Sie das nächste Mal Änderungen an der master
-Filiale Ihres Repositorys überschreiten, können sie bei Ihrem username.github.io
im Web zugänglich sind.
Wenn Sie eine benutzerdefinierte Domain verwenden möchten , möchten Sie sie zu den Einstellungen Ihres Repository "benutzerdefinierten Domain" auf github.com hinzufügen. Registrieren und/oder konfigurieren Sie Ihre Domain mit einem DNS -Anbieter.
Es ist Ihre Website und Sie steuern den Quellcode. Sie können also alles anpassen, wenn Sie möchten. Wir haben jedoch eine Handvoll schneller Anpassungen zur Verfügung gestellt, die Sie berücksichtigen können, während Sie Ihre Website in den Boden lassen.
Die meisten Anpassungen können in Sekundenschnelle durchgeführt werden, indem _config.yml
-Datei Ihres Repositorys überarbeitet wird. Denken Sie nur daran, Ihren lokalen Server jedes Mal neu zu starten, wenn Sie neue Änderungen speichern, damit Ihre Jekyll-betriebene Website korrekt wieder aufgebaut wird:
jekyll serve
Standardmäßig wird Ihre Website in einem zweispaltigen Layout auf Geräten mit größerem Bildschirm angezeigt, wobei Ihr Foto, Ihren Namen und Ihre grundlegenden Informationen in einer "Seitenleiste" aus links ausgerichtet sind. Sie können jedoch schnell zu einem "gestapelten" Einspaltlayout wechseln, indem Sie die Zeile in Ihrer _config.yml
Datei ändern, in der layout: sidebar
zum layout: stacked
.
Standardmäßig erscheint Ihre Website mit einem "hellen" weißen und grauen Hintergrund mit dunklem Text. Sie können jedoch schnell zu einem "dunklen" Hintergrund mit weißem Text wechseln, indem Sie die Zeile in Ihrer _config.yml
-Datei ändern, die style: light
zum style: dark
.
Ihre Website ist mit drei Themen (z. B. "Webdesign" und "Sass") vorkonfiguriert, die in einem Abschnitt mit dem Titel "Meine Interessen" erscheinen. Diese werden auch in _config.yml
-Datei Ihres Repositorys gespeichert, in der Sie den Namen jedes Themas und zwei weitere optionale Details definieren können:
web_url
: Die Webadresse, mit der Sie Ihr Thema verlinken möchten (z. B. https://github.com/topics/sass
).image_url
: Die Webadresse eines (idealerweise quadratischen) Bildes, das Sie gerne mit Ihrem Thema erscheinen möchten. So fügen Sie Ihrer Website eine Seite hinzu (z. B. detaillierter Lebenslauf):
.html
oder .md
-Datei am Stamm Ihres Repositorys.http://yoursite.dev/filename
) verwenden möchten. ---
layout: default
---
Um Ihrer Website einen Blog -Beitrag hinzuzufügen :
.md
-Datei in Ihrem Repository /_posts/
Verzeichnis. YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
Ihre Website verfügt über einen Platzhalter -Blog -Beitrag, auf den Sie sich verweisen können. Bemerkenswerterweise published
sich die Front Materie als false
, so dass sie nicht auf Ihrer Website angezeigt wird.
Während Sie auch ein layout
in der Frontmunde definieren können , ist Ihre Website vorkonfiguriert, um alle Beiträge in Ihrem /_posts/
Verzeichnis das post
zuzuweisen. Sie müssen das also nicht in Ihren Beiträgen deklarieren, wenn Sie nicht wollen.
Jekylls Konventionen für die Autorierung und Verwaltung von Blog -Posts sind sehr flexibel. Sie können mehr in Jekylls Dokumentation für "Beiträge" erfahren.
Um Ihnen eine fundierte Grundlage für die Start Ihrer persönlichen Website zu geben, enthält Ihr Repository eine Handvoll "Include"-Dynamic .html
Dateien, die auf Ihrer Website wiederverwendet werden. Sie sind alle im /_includes/
Verzeichnis gespeichert.
Es gibt die üblichen Verdächtigen, wie header.html
und footer.html
. Aber es gibt noch wenige, darauf hinzuweisen:
interests.html
: Eine Überschrift und eine dynamische Liste von "My Interessen", die mit den Themen, die Sie in Ihrem _config.yml
auflisten, besiedelt sind.masthead.html
: Eine Sammlung Ihres Avatars, Ihrer Namen, Ihrer Biografie und anderer Metadaten, die auf allen Ihren Webseiten prominent angezeigt werden, um zu identifizieren, worum es auf der Website geht.post-card.html
: Eine kompakte, zusammengefasste Präsentation eines Blog-Beitrags, der wiederverwendet wird, um eine Auflistung Ihrer neuesten Blog-Beiträge anzuzeigen.projects.html
: Eine Überschrift und eine dynamische Liste von "My Projects", die mit einer Auflistung Ihrer neuesten Github -Repositorys besiedelt ist.repo-card.html
: Eine kompakte, zusammengefasste Präsentation eines Repositorys, das wiederverwendet wird, um eine Auflistung Ihrer Github-Repositories anzuzeigen.thoughts.html
: Eine Überschrift und eine dynamische Liste von "My Thoughts", die mit einer Auflistung Ihrer neuesten Blog -Beiträge besiedelt ist.topic-card.html
: Eine kompakte, zusammengefasste Präsentation eines Themas (definiert in Ihrem _config.yml
), das wiederverwendet wurde, um eine Auflistung Ihrer Interessen anzuzeigen.Ihr Repository verfügt über drei Layouts:
index.html
-Homepage verwendet, um Auflistungen Ihrer Projekte, Interessen und (optional) Ihrer Blog -Beiträge anzuzeigen./_posts/
Verzeichnis.Die Konvention von Jekyll zur Definition von Layouts ist sehr flexibel. Weitere Informationen zum Anpassen Ihrer Layouts in den Dokumenten von Jekyll "Layouts".
Ihre Website ist vorkonfiguriert, um ein sehr flexibles CSS-Framework mit dem Namen "Primer" zu verwenden, zusammen mit allen benutzerdefinierten Stilen, die Sie in Ihrem Sass-Stylesheet in /assets/styles.scss
schreiben. Es wird derzeit in Ihrer Datei styles.scss
verwiesen, wobei das CSS-Import-AT-RUE verwendet wird:
@import url('https://unpkg.com/primer/build/build.css');
Sie sind natürlich willkommen, es zu entfernen oder durch ein anderes Framework zu ersetzen. Denken Sie nur daran, dass die HTML, dass Ihre Website mit Referenzen mit mehreren Primer "Dienstprogrammklassen" vorverpackt wurde, um Dinge wie Spaltenbreiten, Ränder und Hintergrundfarben zu definieren.
Das Thema ist unter den Bedingungen der MIT -Lizenz als Open Source erhältlich.