the mvm.github.io
Initial Release of V2.0.0
¡Sitio de demostración ahora reflejado en IPFS!
por Armando Maynez basado en V1.0 por Artem Sheludko.
Adam Blog 2.0 es un tema de Jekyll que fue creado para ser 100% compatible con las páginas de GitHub. Si no está familiarizado con las páginas de GitHub, puede consultar su documentación para obtener más información. La guía de Jonathan McGlone sobre la creación y el alojamiento de un sitio personal en Github también es un buen recurso.
Jekyll es un generador de sitios estático simple, consciente de blog, para sitios personales, de proyectos u organizaciones. Básicamente, Jekyll toma el contenido de su página junto con archivos de plantilla y produce un sitio web completo. Para obtener más información, visite el sitio oficial de Jekyll para obtener su documentación. CodeCademy también ofrece un excelente curso sobre cómo implementar un sitio de Jekyll para principiantes completos.
La belleza de alojar su sitio web en GitHub es que no tiene que tener a Jekyll instalado en su computadora. Todo se puede hacer a través del editor de código GitHub, con un conocimiento mínimo de cómo usar Jekyll o la línea de comandos. Todo lo que tiene que hacer es agregar sus publicaciones al directorio _posts y editar el archivo _config.yml para cambiar la configuración del sitio. Con algún conocimiento rudimentario de HTML y CSS, incluso puede modificar el sitio a su gusto. Todo esto se puede hacer a través del editor de código GitHub, que actúa como un sistema de gestión de contenido (CMS).
<tweet> </tweet> en su Markdown.Verifique el tema en acción
La página principal se ve así:
Selector de modo oscuro en el menú principal:
La página de la publicación se ve como:
Responsivo personalizado 404:
El modo oscuro se ve así:
Para una instalación local completa de Adam Blog 2.0, descargue su propia copia de Adam Blog 2.0 y descúplica en su propio directorio. Desde allí, abra su herramienta de línea de comandos favorita, ingrese bundle install y luego ingrese jekyll serve . Su sitio debe estar en funcionamiento localmente en http: // localhost: 4000.
Si eres completamente nuevo en Jekyll, le recomiendo que consulte la documentación en https://jekyllrb.com/ o hay un tutorial de Smashing Magazine.
Si está alojando su sitio en las páginas de GitHub, entonces cometer un cambio en el archivo _config.yml (o cualquier otro archivo) forzará una reconstrucción de su sitio con Jekyll. Cualquier cambio realizado debe ser visible poco después. Si está alojando su sitio localmente, debe ejecutar jekyll serve nuevamente para que los cambios se realicen.
Dirígete al directorio _posts para ver todas las publicaciones que están actualmente en el sitio web y para ver ejemplos de cómo se ven generalmente los archivos de publicación. Simplemente puede simplemente duplicar la publicación de plantilla y comenzar a agregar su propio contenido.
Bifurca este repositorio en su propia cuenta.
Puede alojar su sitio Jekyll gratis con páginas GitHub. Haga clic aquí para obtener más información.
Cuando bifurca, si usa como destino, un repositorio llamado USERNAME.github.io , su URL será https://USERNAME.github.io/ , else https://USERNAME.github.io/REPONAME/ ) y su sitio se publicará en la rama GH-Pages. Nota: Si está alojando varios sitios bajo el mismo nombre de usuario GitHub, entonces tendrá que usar páginas de proyecto en lugar de páginas de usuario, simplemente cambie el nombre del repositorio a algo más que 'http://username.github.io'.
Además de su repositorio de GitHub-UserName.github.io que se asigna a la URL de la raíz, puede servir sitios utilizando una rama de GH-PAGE para otros repositorios para que estén disponibles en Github-username.github.io/Repo-Name.
Esto requerirá que modifique el _config.yml así:
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "Esto asegurará que se construya la ruta relativa correcta para sus activos y publicaciones.
Modificar el archivo _config.yml , ubicado en el directorio raíz, con sus datos.
# 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 Para configurar el boletín, cree una cuenta en https://mailchimp.com, configure un formulario de registro web y pegue el enlace desde el formulario de registro de incrustación en el archivo config.yml :
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " Para configurar Disqus, configure un sitio de Disqus con el mismo nombre que su sitio. Luego, en _config.yml , edite el valor disqus_identifier para habilitar.
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyMás información sobre cómo configurar Disqus.
Personaliza los colores del sitio. Modificar /assets/css/main.css de la siguiente manera:
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 );
} Personaliza las fuentes del sitio. Modificar /assets/css/main.css de la siguiente manera:
...
--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 cambia las fuentes, también debe modificar /_includes/head.html de la siguiente manera: sin comment y cambiar la siguiente línea con sus nuevas fuentes y pesos de fuentes:
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > Elimine todo dentro de <style></style> justo antes de la línea de arriba:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > Encontrará publicaciones de ejemplo en su /_posts/ directorio. Continúe y edite cualquier publicación y reconstruya el sitio para ver sus cambios, para las páginas de GitHub, esto sucede automáticamente con cada confirmación. Puede reconstruir el sitio de muchas maneras diferentes, pero la forma más común es ejecutar jekyll serve , que inicia un servidor web y se registra automáticamente su sitio cuando se actualiza un archivo.
Para agregar nuevas publicaciones, simplemente agregue un archivo en el directorio _posts que sigue la convención de YYYY-MM-DD-name-of-post.md e incluye la materia frontal necesaria. Eche un vistazo a cualquier publicación de muestra para tener una idea sobre cómo funciona. Si ya tiene un sitio web construido con Jekyll, simplemente copie sus publicaciones para migrar al Blog 2.0 de Adam.
Las opciones de materia frontal para cada publicación son:
---
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
---Edite su blog Post usando Markdown. Aquí hay una buena guía sobre cómo usarlo.
Elimine imágenes dentro de /assets/img/posts/ y cargue sus propias imágenes para sus publicaciones.
Asegúrese de que las páginas de GitHub se activen en la configuración del repositorio y apunten a la rama principal o maestra (donde clonó este repositorio).
Si está familiarizado con Jekyll, entonces la estructura del directorio de Adam Blog 2.0 no debería ser demasiado difícil de navegar. Los siguientes resaltados de las diferencias que puede notar entre la estructura de directorio predeterminada. Se puede encontrar más información sobre lo que hacen estas carpetas y archivos en el sitio de documentación de 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 Para comenzar completamente desde cero, simplemente elimine todos los archivos en las carpetas _posts , assets/img/posts , y agregue su propio contenido. Todo en el archivo _config.yml se puede editar para satisfacer sus necesidades. También cambie el archivo favicon.ico a su propio Favicon.
Si tiene una cita tweetable en su publicación de blog y desea presentarla como un clic para el bloque de tweet, solo tiene que usar las etiquetas <tweet></tweet> , todo entre ellas se convertirá en un cuadro de clic para tweet.
Es posible rastrear las estadísticas de su sitio a través de Google Analytics. Similar a Disqus, deberá crear una cuenta para Google Analytics e ingresar la ID de Google correcta para su sitio en google-ID en el archivo _config.yml . Más información sobre cómo configurar Google Analytics.
Atom es compatible de forma predeterminada a través de Jekyll-Feed. Con Jekyll-Feed, puede establecer variables de configuración como 'Título', 'Descripción' y 'Autor', en el archivo _config.yml .
Su archivo de alimentación Atom estará en vivo en https://your.site/feed.xml ejemplo.
Todos los íconos de las redes sociales son cortesía de Font Awesome. Puede cambiar qué iconos aparecen, así como la cuenta a la que vinculan, en el archivo _config.yml .
Adam Blog 2.0 sale de la caja con Mathjax, que le permite mostrar ecuaciones matemáticas en sus publicaciones mediante el uso del látex. Simplemente agregue Mathjax: yes en la redonda de su publicación.
< 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 proporciona resaltado de sintaxis a través de bloques de código cercados. La resaltura de sintaxis le permite mostrar el código fuente en diferentes colores y fuentes dependiendo de qué lenguaje de programación se esté mostrando. Puede encontrar la lista completa de lenguajes de programación compatibles aquí. Otra opción es incrustar su código a través de GIST.
Puede elegir el tema de color para el resaltado de sintaxis en el archivo _config.yml :
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighterConsulte el directorio del resaltador como referencia sobre las opciones.
Jekyll ofrece soporte para Markdown con sabor a GitHub, que le permite formatear sus publicaciones utilizando la sintaxis de Markdown.
Echa un vistazo a los documentos de Jekyll para obtener más información sobre cómo aprovechar al máximo Jekyll. File todas las solicitudes de errores/funciones en Jekyll's GitHub Repo. Si tiene preguntas, puede hacerlas en Jekyll Talk.
Si desea realizar una solicitud de función, o informar un error o error tipográfico en la documentación, envíe un problema de GitHub. Si desea hacer una contribución, no dude en enviar una solicitud de extracción, como un bono, ¡acreditaré a todos los contribuyentes a continuación! Si esta es su primera solicitud de extracción, puede ser útil leer primero en el flujo de GitHub.
Adam Blog 2.0 ha sido diseñado como base para que los usuarios personalicen y se ajusten a sus propias necesidades únicas. Tenga esto en cuenta al solicitar funciones y/o enviar solicitudes de extracción. Algunos ejemplos de cambios que me encantaría ver son cosas que harían que el sitio sea más fácil de usar o mejores formas de hacer las cosas. Evite los cambios que no benefician a la mayoría de los usuarios.
Este tema es completamente gratuito y de código abierto. Puede usarlo como desee, ya que se distribuye bajo la licencia MIT. Si tiene algún problema, alguna pregunta o sugerencia, no dude en presentar un problema de GitHub.
