the mvm.github.io
Initial Release of V2.0.0
Site de démonstration est maintenant reflété en IPFS!
par Armando Maynez basé sur la V1.0 par Artem Sheludko.
Adam Blog 2.0 est un thème Jekyll qui a été conçu pour être 100% compatible avec les pages GitHub. Si vous n'êtes pas familier avec les pages GitHub, vous pouvez consulter leur documentation pour plus d'informations. Le guide de Jonathan McGlone sur la création et l'hébergement d'un site personnel sur GitHub est également une bonne ressource.
Jekyll est un générateur de sites statique simple, conscient de blog pour les sites personnels, de projet ou d'organisation. Fondamentalement, Jekyll prend le contenu de votre page avec des fichiers de modèle et produit un site Web complet. Pour plus d'informations, visitez le site officiel de Jekyll pour leur documentation. Codecademy propose également un excellent cours sur la façon de déployer un site Jekyll pour les débutants complets.
La beauté d'héberger votre site Web sur GitHub est que vous n'avez pas à faire installer Jekyll sur votre ordinateur. Tout peut être fait via l'éditeur de code GitHub, avec une connaissance minimale de la façon d'utiliser Jekyll ou la ligne de commande. Tout ce que vous avez à faire est d'ajouter vos messages au répertoire _posts et de modifier le fichier _config.yml pour modifier les paramètres du site. Avec une connaissance rudimentaire de HTML et CSS, vous pouvez même modifier le site à votre goût. Tout cela peut être fait via l'éditeur de code GitHub, qui agit comme un système de gestion de contenu (CMS).
<tweet> </tweet> dans votre marque.Consultez le thème en action
La page principale ressemble à ceci:
Sélecteur de mode noir dans le menu principal:
La page du message ressemble:
Custom Reactive 404:
Le mode sombre ressemble à ceci:
Pour une installation locale complète d'Adam Blog 2.0, téléchargez votre propre copie d'Adam Blog 2.0 et dézippez-le dans son propre répertoire. À partir de là, ouvrez votre outil de ligne de commande préféré, entrez bundle install , puis entrez jekyll serve . Votre site doit être opérationnel localement sur http: // localhost: 4000.
Si vous êtes complètement nouveau sur Jekyll, je vous recommande de consulter la documentation sur https://jekyllrb.com/ ou il y a un tutoriel de Smashing Magazine.
Si vous hébergez votre site sur les pages GitHub, alors commettre une modification du fichier _config.yml (ou tout autre fichier) forcera une reconstruction de votre site avec Jekyll. Toutes les modifications apportées devraient être visibles peu de temps après. Si vous hébergez votre site localement, vous devez exécuter jekyll serve à nouveau pour les modifications.
Rendez-vous au répertoire _posts pour afficher tous les articles qui se trouvent actuellement sur le site Web et pour voir des exemples de ce à quoi ressemblent les fichiers de publication. Vous pouvez simplement dupliquer le modèle de modèle et commencer à ajouter votre propre contenu.
Fourk ce référentiel dans votre propre compte.
Vous pouvez héberger votre site Jekyll gratuitement avec des pages GitHub. Cliquez ici pour plus d'informations.
Lors de la fourniture, si vous utilisez comme destination, un référentiel nommé USERNAME.github.io , votre URL sera https://USERNAME.github.io/ , else https://USERNAME.github.io/REPONAME/ ) et votre site sera publié à la branche GH-Pages. Remarque: Si vous hébergez plusieurs sites sous le même nom d'utilisateur GitHub, vous devrez utiliser des pages de projet au lieu des pages utilisateur - il suffit de changer le nom du référentiel en autre chose que 'http://username.github.io'.
En plus de votre repo github-username.github.io qui mappe à l'URL racine, vous pouvez servir des sites en utilisant une branche GH-Pages pour d'autres références afin qu'ils soient disponibles sur github-sername.github.io/repo-name.
Cela vous obligera à modifier le _config.yml comme:
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "Cela garantira que le chemin relatif correct est construit pour vos actifs et messages.
Modifier le fichier _config.yml , situé dans le répertoire racine, avec vos données.
# 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 Pour configurer la newsletter, veuillez créer un compte dans https://mailchimp.com, configurez un formulaire d'inscription Web et collez le lien à partir du formulaire d'inscription intégré dans le fichier config.yml :
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " Pour configurer Disqus, configurez un site Disqus avec le même nom que votre site. Ensuite, dans _config.yml , modifiez la valeur disqus_identifier pour activer.
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyPlus d'informations sur la façon de configurer Disqus.
Personnalisez les couleurs du site. Modifier /assets/css/main.css comme suit:
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 );
} Personnalisez les polices de site. Modifier /assets/css/main.css comme suit:
...
--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;
... Si vous modifiez les polices, vous devez également modifier /_includes/head.html comme suit: Uncomment et modifier la ligne suivante avec vos nouvelles polices et poids de police:
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > Supprimez tout dans <style></style> juste avant la ligne ci-dessus:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > Vous trouverez des exemples de messages dans votre /_posts/ répertoire. Allez-y et modifiez n'importe quel article et renforcez le site pour voir vos modifications, pour les pages GitHub, cela se produit automatiquement avec chaque engagement. Vous pouvez reconstruire le site de différentes manières, mais la façon la plus courante consiste à exécuter jekyll serve , qui lance un serveur Web et régénére automatiquement votre site lorsqu'un fichier est mis à jour.
Pour ajouter de nouveaux messages, ajoutez simplement un fichier dans le répertoire _posts qui suit la convention de YYYY-MM-DD-name-of-post.md et inclut le front de la matière nécessaire. Jetez un œil à tout exemple de publication pour avoir une idée de la façon dont cela fonctionne. Si vous avez déjà un site Web construit avec Jekyll, copiez simplement vos messages pour migrer vers Adam Blog 2.0.
Les options de matière pour chaque message sont:
---
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
---Modifiez votre blog en utilisant Markdown. Voici un bon guide sur la façon de l'utiliser.
Supprimez des images à l'intérieur /assets/img/posts/ et téléchargez vos propres images pour vos messages.
Assurez-vous que les pages GitHub sont activées dans les paramètres du référentiel et pointant vers la branche principale ou maître (où vous avez cloné ce repo).
Si vous connaissez Jekyll, la structure du répertoire Adam Blog 2.0 ne devrait pas être trop difficile à naviguer. Les points forts suivants des différences que vous remarquerez peut-être entre la structure du répertoire par défaut. Plus d'informations sur ce que font ces dossiers et fichiers peuvent être trouvés dans le site de documentation Jekyll.
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 Pour commencer complètement à zéro, supprimez simplement tous les fichiers dans les dossiers _posts , assets/img/posts et ajoutez votre propre contenu. Tout dans le fichier _config.yml peut être modifié en fonction de vos besoins. Modifiez également le fichier favicon.ico dans votre propre favicon.
Si vous avez un devis tweetable dans votre article de blog et que vous souhaitez le présenter en cas de clic pour tweeter, il vous suffit d'utiliser les balises <tweet></tweet> , tout entre eux sera converti en cas de clic pour tweeter la boîte.
Il est possible de suivre les statistiques de votre site via Google Analytics. Semblable à Disqus, vous devrez créer un compte pour Google Analytics et saisir l'ID Google correct pour votre site sous google-ID dans le fichier _config.yml . Plus d'informations sur la façon de configurer Google Analytics.
Atom est pris en charge par défaut via un jekyll-alimentation. Avec Jekyll-Fied, vous pouvez définir des variables de configuration telles que «Title», «Description» et «Auteur», dans le fichier _config.yml .
Votre fichier de flux Atom sera en direct à l'exemple https://your.site/feed.xml .
Toutes les icônes des médias sociaux sont gracieuseté de Font Awesome. Vous pouvez modifier les icônes qui apparaissent, ainsi que le compte auquel ils sont liés, dans le fichier _config.yml .
Adam Blog 2.0 sort de la boîte avec Mathjax, qui vous permet d'afficher des équations mathématiques dans vos messages grâce à l'utilisation de latex. Ajoutez simplement Mathjax: yes dans la front-lame de votre message.
< 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 fournit la syntaxe qui se met en évidence via des blocs de code clôturés. La mise en évidence de la syntaxe vous permet d'afficher le code source de différentes couleurs et polices en fonction de la programmation du langage affiché. Vous pouvez trouver la liste complète des langages de programmation pris en charge ici. Une autre option consiste à intégrer votre code via Gist.
Vous pouvez choisir le thème de couleur pour le point fort de la syntaxe dans le fichier _config.yml :
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighterVoir le répertoire de surligneur pour référence sur les options.
Jekyll offre une prise en charge de Github à aromatisation Markdown, qui vous permet de formater vos messages à l'aide de la syntaxe Markdown.
Consultez les documents Jekyll pour plus d'informations sur la façon de tirer le meilleur parti de Jekyll. Fixez toutes les bogues / demandes de fonctionnalités au Repo GitHub de Jekyll. Si vous avez des questions, vous pouvez leur poser sur Jekyll Talk.
Si vous souhaitez faire une demande de fonctionnalité ou signaler un bogue ou une faute de frappe dans la documentation, veuillez soumettre un problème GitHub. Si vous souhaitez apporter une contribution, n'hésitez pas à soumettre une demande de traction - en prime, je créditerai tous les contributeurs ci-dessous! S'il s'agit de votre première demande de traction, il peut être utile de lire d'abord sur le flux GitHub.
Adam Blog 2.0 a été conçu comme une base pour que les utilisateurs puissent personnaliser et s'adapter à leurs propres besoins uniques. Veuillez garder cela à l'esprit lors de la demande de fonctionnalités et / ou de la soumission des demandes de traction. Certains exemples de changements que j'aimerais voir sont des choses qui rendraient le site plus facile à utiliser, ou de meilleures façons de faire les choses. Veuillez éviter les modifications qui ne profitent pas à la majorité des utilisateurs.
Ce thème est entièrement gratuit et open source. Vous pouvez l'utiliser comme vous le souhaitez, car il est distribué sous la licence MIT. Si vous rencontrez des problèmes, des questions ou des suggestions, n'hésitez pas à déposer un problème GitHub.
