the mvm.github.io
Initial Release of V2.0.0
Demo -Site jetzt in IPFS gespiegelt!
von Armando Maynez basierend auf V1.0 von Artem Sheludko.
Adam Blog 2.0 ist ein Jekyll -Thema, das zu 100% kompatibel mit Github -Seiten erstellt wurde. Wenn Sie mit Github -Seiten nicht vertraut sind, können Sie die Dokumentation finden, um weitere Informationen zu erhalten. Der Leitfaden von Jonathan McGlone zum Erstellen und Hosting einer persönlichen Website auf Github ist ebenfalls eine gute Ressource.
Jekyll ist ein einfacher, bloggener, statischer Site-Generator für persönliche, Projekt- oder Organisationsseiten. Grundsätzlich nimmt Jekyll Ihren Seiteninhalt zusammen mit Vorlagendateien und erstellt eine vollständige Website. Weitere Informationen finden Sie auf der offiziellen Jekyll -Website für ihre Dokumentation. Codecademy bietet auch einen großartigen Kurs zum Bereitstellen einer Jekyll -Website für vollständige Anfänger.
Das Schöne am Hosting Ihrer Website auf GitHub ist, dass Sie Jekyll nicht auf Ihrem Computer installieren müssen. Alles kann über den GitHub -Code -Editor erfolgen, mit minimalem Wissen über die Verwendung von Jekyll oder die Befehlszeile. Alles, was Sie tun müssen, ist Ihre Beiträge dem Verzeichnis _posts hinzuzufügen und die Datei _config.yml zu bearbeiten, um die Site -Einstellungen zu ändern. Mit einigen rudimentären Kenntnissen von HTML und CSS können Sie die Website sogar nach Ihren Wünschen ändern. Dies alles kann über den GitHub -Code -Editor erfolgen, der wie ein Content Management System (CMS) wirkt.
<tweet> </tweet> Tag in Ihrem Markdown hinzu.Überprüfen Sie das Thema in Aktion
Die Hauptseite sieht so aus:
Dark Mode Selector im Hauptmenü:
Die Postseite sieht aus wie:
Custom Responsive 404:
Der dunkle Modus sieht so aus:
Für eine vollständige lokale Installation von Adam Blog 2.0 laden Sie Ihre eigene Kopie von Adam Blog 2.0 herunter und entpacken Sie sie in sein eigenes Verzeichnis. Öffnen Sie von dort aus Ihr bevorzugter Befehlszeilen -Tool, geben Sie bundle install ein und geben Sie dann jekyll serve ein. Ihre Website sollte lokal unter http: // localhost: 4000 läuft.
Wenn Sie mit Jekyll völlig neu sind, empfehle ich, die Dokumentation unter https://jekyllrb.com/ zu überprüfen, oder es gibt ein Tutorial vom Smashing Magazine.
Wenn Sie Ihre Website auf GitHub -Seiten heilen, zwingt die Änderung der Datei _config.yml (oder einer anderen Datei) einen Umbau Ihrer Website mit Jekyll. Alle vorgenommenen Änderungen sollten bald darauf angezeigt werden. Wenn Sie Ihre Website lokal hosten, müssen Sie jekyll serve erneut ausführen, damit die Änderungen stattfinden.
Besuchen Sie das Verzeichnis _posts , um alle Beiträge anzuzeigen, die sich derzeit auf der Website befinden, und Beispiele dafür zu sehen, wie Postdateien im Allgemeinen aussehen. Sie können einfach den Vorlagenbeitrag duplizieren und Ihren eigenen Inhalt hinzufügen.
Geben Sie dieses Repository in Ihr eigenes Konto.
Sie können Ihre Jekyll -Site kostenlos mit Github -Seiten hosten. Klicken Sie hier, um weitere Informationen zu erhalten.
Wenn Sie bei der Gabed als Ziel ein Repository namens USERNAME.github.io verwenden, ist Ihre URL https://USERNAME.github.io/ , sonst https://USERNAME.github.io/REPONAME/ ) und Ihre Website wird an den GH-Pages-Zweig veröffentlicht. Hinweis: Wenn Sie mehrere Websites unter demselben Github -Benutzernamen hosten, müssen Sie Projektseiten anstelle von Benutzerseiten verwenden - ändern Sie einfach den Repository -Namen in etwas anderes als 'http://username.github.io'.
Zusätzlich zu Ihrem Github-Username.github.io-Repo, der die Root-URL kartiert, können Sie Websites mit einem GH-Seiten-Zweig für andere Repos servieren, damit sie unter github-username.github.io/repo-name verfügbar sind.
Auf diese Weise müssen Sie die _config.yml wie so ändern:
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "Dadurch wird sichergestellt, dass der richtige relative Pfad für Ihre Vermögenswerte und Beiträge erstellt wird.
Ändern Sie _config.yml -Datei, die sich im Stammverzeichnis befindet, mit Ihren Daten.
# Site settings
title : The Title for Your Website
description : ' A description of your blog '
permalink : ' :title:output_ext ' # how the permalinks will behave
baseurl : " / " # the subpath of your site, e.g. /blog
url : " " # the base hostname & protocol for your site, e.g. http://example.com
logo : " " # the logo for your site
logo-icon : " " # a smaller logo, typically squared
logo-icon-SEO : " " # must be a non SVG file, could be the same as the logo-icon
# Night/Dark mode default mode is "auto", "auto" is for auto nightshift (19:00 - 07:00), "manual" is for manual toggle, and "on/off" is for default on/off. Whatever the user's choice is, it will supersede the default setting of the site and be kept during the visit (session). Only the dark mode setting is "manual", it will be always kept on every visit (i.e. no matter the browser is closed or not)
night_mode : " auto "
logo-dark : " /assets/img/branding/MVM-logo-full-dark.svg " # if you want to display a different logo when in dark mode
highlight_theme : syntax-base16.monokai.dark # select a dark theme for the code highlighter if needed
# Author settings
author : Your Name # add your name
author-pic : ' ' # a picture of you
about-author : ' ' # a brief description of you
# Contact links
email : [email protected] # Add your Email address
phone : # Add your Phone number
website : # Add your website
linkedin : # Add your Linkedin handle
github : # Add your Github handle
twitter : # Add your Twitter handle
bandcamp : # Add your Bandcamp username
# Tracker
analytics : # Google Analytics tag ID
fbadmin : # Facebook ID admin
# Paginate
paginate : 6 # number of items to show in the main page
paginate_path : ' page:num '
words_per_minute : 200 # default words per minute to be considered when calculating the read time of the blog posts Um den Newsletter zu konfigurieren, erstellen Sie bitte ein Konto in https://mailchimp.com, richten Sie ein Web -Anmeldeformular ein und fügen Sie den Link aus dem Einbetten -Anmeldeformular in der Datei config.yml ein:
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " Um disqus zu konfigurieren, richten Sie eine DISQUS -Site mit demselben Namen wie Ihrer Website ein. Bearbeiten Sie dann in _config.yml den Wert disqus_identifier , um aktiviert zu werden.
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyWeitere Informationen zum Einrichten von Disqus.
Passen Sie die Site -Farben an. Modify /assets/css/main.css wie folgt:
html {
--shadow : rgba ( 32 , 30 , 30 , .3 );
--accent : # DB504A ; /* accent */
--accent-dark : # 4e3e51 ; /* accent 2 (dark) */
--main : # 326273 ; /* main color */
--main-dim : # 879dab ; /* dimmed version of main color */
--text : # 201E1E ;
--grey1 : # 5F5E58 ;
--grey2 : # 8D897C ;
--grey3 : # B4B3A7 ;
--grey4 : # DAD7D2 ;
--grey5 : # F0EFED ;
--background : # ffffff ;
}
html [ data-theme = "dark" ] {
--accent : # d14c47 ; /* accent */
--accent-dark : # CD8A7A ; /* accent 2 (dark) */
--main : # 4C6567 ; /* main color */
--main-dim : # 273335 ; /* dimmed version of main color */
--text : # B4B3A7 ;
--grey1 : # 8D897C ;
--grey2 : # 827F73 ;
--grey3 : # 76746A ;
--grey4 : # 66645D ;
--grey5 : # 4A4945 ;
--background : # 201E1E ;
--shadow : rgba ( 180 , 179 , 167 , .3 );
} Passen Sie die Site -Schriftarten an. Modify /assets/css/main.css wie folgt:
...
--font1 : 'Lora' , charter , Georgia , Cambria , 'Times New Roman' , Times , serif ; /* body text */
- - font2 : 'Source Sans Pro' , 'Helvetica Neue' , Helvetica , Arial , sans-serif ; /* headers and titles */
- - font1 - light : 400;
- - font1 - regular : 400;
- - font1 - bold : 600;
- - font2 - light : 200;
- - font2 - regular : 400;
- - font2 - bold : 700;
... Wenn Sie die Schriftarten ändern, müssen Sie wie folgt auch /_includes/head.html modifizieren: Inkonjizieren und die folgende Zeile mit Ihren neuen Schriftarten und Schriftgewichten ändern:
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > Löschen Sie alles in <style></style> kurz vor der obigen Zeile:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > Sie finden Beispiele in Ihrem /_posts/ Verzeichnis. Bearbeiten Sie den Beitrag und bauen Sie die Website neu auf, um Ihre Änderungen für GitHub-Seiten zu sehen. Dies geschieht automatisch bei jedem Commit. Sie können die Site auf viele verschiedene Arten wieder aufbauen. Am häufigsten ist es, jekyll serve auszuführen, der einen Webserver startet und Ihre Website automatisch regeneriert, wenn eine Datei aktualisiert wird.
Um neue Beiträge hinzuzufügen, fügen Sie einfach eine Datei in das Verzeichnis _posts hinzu, das der Konvention von YYYY-MM-DD-name-of-post.md folgt und die erforderlichen Frontmaterie enthält. Schauen Sie sich einen Beispielposten an, um eine Vorstellung davon zu erhalten, wie es funktioniert. Wenn Sie bereits eine Website mit Jekyll erstellt haben, kopieren Sie einfach Ihre Beiträge, um auf Adam Blog 2.0 zu migrieren.
Die Optionen vorne für jeden Beitrag sind:
---
layout : post # ensure this one stays like this
read_time : true # calculate and show read time based on number of words
show_date : true # show the date of the post
title : Your Blog Post Title
date : XXXX-XX-XX XX:XX:XX XXXX
description : " The description of your blog post "
img : # the path for the hero image, from the image folder (if the image is directly on the image folder, just the filename is needed)
tags : [tags, of, your, post]
author : Your Name
github : username/reponame/ # set this to show a github button on the post
toc : yes # leave empty or erase for no table of contents
---Bearbeiten Sie Ihren Blogpost mit dem Markdown. Hier ist ein guter Leitfaden darüber, wie man es benutzt.
Löschen Sie Bilder in /assets/img/posts/ laden Sie Ihre eigenen Bilder für Ihre Beiträge hoch.
Stellen Sie sicher, dass die GitHub -Seiten in den Repository -Einstellungen eingeschaltet sind und auf den Haupt- oder Master -Zweig verweisen (wo Sie dieses Repo kloniert haben).
Wenn Sie mit Jekyll vertraut sind, sollte die Verzeichnisstruktur von Adam Blog 2.0 nicht zu schwer zu navigieren sein. Die folgenden Highlights der Unterschiede, die Sie möglicherweise zwischen der Standardverzeichnisstruktur feststellen. Weitere Informationen darüber, was diese Ordner und Dateien tun, finden Sie auf der Jekyll -Dokumentationsseite.
Adam Blog 2.0/
├── _includes # Theme includes
├── _layouts # Theme layouts (see below for details)
├── _posts # Where all your posts will go
├── assets # Style sheets and images are found here
| ├── css # Style sheets go here
| | └── _sass # Folder containing SCSS files
| | └── main.css # Main SCSS file
| | └── highlighter # Style sheet for code syntax highlighting
| └── img #
| └── posts # Images go here
├── _pages # Website pages (that are not posts)
├── _config.yml # Site settings
├── Gemfile # Ruby Gemfile for managing Jekyll plugins
├── index.html # Home page
├── LICENSE.md # License for this theme
├── README.md # Includes all of the documentation for this theme
├── feed.xml # Generates atom file which Jekyll points to
├── 404.html # custom and responsive 404 page
├── all-posts.json # database of all posts used for infinite scroll
├── ipfs-404.html # 404 page for IPFS
├── posts-by-tag.json # database of posts by tag
├── robots.txt # SEO crawlers exclusion file
├── search.json # database of posts used for search
└── sitemap.xml # automatically generated sitemap for search engines Um vollständig von vorne zu beginnen, löschen Sie einfach alle Dateien in den Ordnern _posts , assets/img/posts und fügen Sie Ihren eigenen Inhalt hinzu. Alles in der Datei _config.yml kann so bearbeitet werden, dass sie Ihren Anforderungen entsprechen. Ändern Sie auch die favicon.ico -Datei in Ihr eigenes Favicon.
Wenn Sie ein tweetbares Angebot in Ihrem Blog -Beitrag haben und es als Klick zum Tweet -Block aufnehmen möchten, müssen Sie nur die <tweet></tweet> -Tags verwenden, alles zwischen ihnen wird in einem Klick zum Tweet -Feld konvertiert.
Es ist möglich, Ihre Site -Statistiken über Google Analytics zu verfolgen. Ähnlich wie bei ISQUS müssen Sie ein Konto für Google Analytics erstellen und die richtige Google-ID für Ihre Website unter google-ID in der Datei _config.yml eingeben. Weitere Informationen zum Einrichten von Google Analytics.
Atom wird standardmäßig über Jekyll-Feed unterstützt. Mit Jekyll-Feed können Sie Konfigurationsvariablen wie "Titel", "Beschreibung" und "Autor" in der Datei _config.yml festlegen.
Ihre Atom -Feed -Datei findet live unter https://your.site/feed.xml Beispiel.
Alle Social -Media -Ikonen sind mit freundlicher Genehmigung von fantastischer Schriftart. Sie können ändern, welche Symbole angezeigt werden, sowie auf das Konto, mit dem sie in der Datei _config.yml verknüpft sind.
Adam Blog 2.0 kommt mit Mathjax aus der Box, mit der Sie mathematische Gleichungen in Ihren Beiträgen durch die Verwendung von Latex anzeigen können. Fügen Sie einfach Mathjax: yes in der Frontmatter Ihres Beitrags.
< p style = " text-align : center " >
( theta _ {t+1} = theta _ {t} - dfrac{eta}{sqrt{hat{v} _ t} + epsilon} hat{m} _ t ) .
</ p >
ADAM Blog 2.0 bietet Syntax -Hervorhebung durch eingezäunte Codeblöcke. Mit der Syntax -Hervorhebung können Sie den Quellcode in verschiedenen Farben und Schriftarten angezeigt, je nachdem, welche Programmiersprache angezeigt wird. Hier finden Sie die vollständige Liste der unterstützten Programmiersprachen. Eine andere Möglichkeit besteht darin, Ihren Code durch GIST einzubetten.
Sie können das Farbthema für das Syntax -Highlight in der Datei _config.yml auswählen:
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighterSehen Sie sich das Highlighter -Verzeichnis an, um die Optionen zu verweisen.
Jekyll bietet Unterstützung für den Markdown mit GitHub -Aroma, mit dem Sie Ihre Beiträge mit der Markdown -Syntax formatieren können.
In den Jekyll -Dokumenten finden Sie weitere Informationen darüber, wie Sie Jekyll optimal nutzen können. Datei alle Fehler/Feature -Anfragen bei Jekylls Github Repo. Wenn Sie Fragen haben, können Sie sie auf Jekyll Talk stellen.
Wenn Sie eine Feature -Anfrage stellen oder in der Dokumentation einen Fehler oder Tippfehler melden möchten, senden Sie bitte ein GitHub -Problem. Wenn Sie einen Beitrag leisten möchten, können Sie eine Pull -Anfrage stellen - als Bonus werde ich alle Mitwirkenden unten zuschreiben! Wenn dies Ihre erste Pull -Anfrage ist, ist es möglicherweise hilfreich, zuerst über den Github -Fluss nachzuweisen.
Adam Blog 2.0 wurde als Basis für Benutzer konzipiert, um ihre eigenen Bedürfnisse anzupassen und zu passen. Bitte beachten Sie dies, wenn Sie Funktionen anfordern und/oder Pull -Anfragen senden. Einige Beispiele für Änderungen, die ich gerne sehen würde, sind Dinge, die die Site erleichtern würden, oder bessere Möglichkeiten, Dinge zu tun. Bitte vermeiden Sie Änderungen, die nicht der Mehrheit der Benutzer zugute kommen.
Dieses Thema ist vollständig kostenlos und Open -Source -Software. Sie können es verwenden, wie Sie möchten, wie es unter der MIT -Lizenz verteilt ist. Wenn Sie Probleme, Fragen oder Vorschläge haben, können Sie ein GitHub -Problem einreichen.
