Este repositorio le brinda el código que necesitará para iniciar un sitio web personal que muestre su trabajo como desarrollador de software. Y cuando administra el código en un repositorio de GitHub, automáticamente representará una página web con la información del perfil del propietario, que incluye una foto, biografía y repositorios.
Sin embargo, su sitio web personal está esperando ser personalizado. Incluye espacio para resaltar sus áreas específicas de interés en el desarrollo de software, como idiomas o industrias. Y está en pie para publicar su próxima gran publicación de blog.
Todo es posible usar la combinación de Jekyll (para construir su sitio web), páginas GitHub (para alojar su sitio web) y la API de GitHub (para completar automáticamente su sitio web con contenido).
github/personal-website
Hará su propia copia del repositorio del "Inicio del sitio web personal" para que tenga su propio proyecto para personalizar. Un "tenedor" es una copia de un repositorio. Así que seleccione "Bifurque" sobre el repositorio de github/personal-website
.
Una vez que haya encontrado un hogar para su repositorio bifurcado, es suyo. Eres el dueño, así que estás listo para publicar, si lo deseas.
Si desea administrar su sitio web en un entorno de desarrollo web local, usará Ruby.
Una vez que haya encontrado un hogar para su repositorio bifurcado, clona .
Jekyll es una gema Ruby que se puede instalar en la mayoría de los sistemas.
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
Cuando aloja el código de su sitio web personal en GitHub, obtiene el soporte de alojamiento gratuito a través de páginas GitHub.
El enfoque más rápido es cambiar el nombre de su repositorio username.github.io
, donde username
es su nombre de usuario GitHub (u nombre de la organización). Luego, la próxima vez que presione cualquier cambio en la rama master
de su repositorio, se puede acceder en la web en su dirección de username.github.io
.
Si desea usar un dominio personalizado , querrá agregarlo a la configuración de "dominio personalizado" de su repositorio en Github.com. Y luego registre y/o configure su dominio con un proveedor DNS.
Es su sitio web y usted controla el código fuente. Para que pueda personalizar todo, si lo desea. Pero hemos proporcionado un puñado de personalizaciones rápidas para que lo considere a medida que despegue su sitio web.
La mayoría de las personalizaciones se pueden hacer en cuestión de segundos, revisando el archivo _config.yml
de su repositorio. Solo recuerde reiniciar su servidor local cada vez que guarde nuevos cambios para que su sitio web con jekyll se reconcilie correctamente:
jekyll serve
De manera predeterminada, su sitio web se mostrará en un diseño de dos columnas en dispositivos de pantalla más grande, con su foto, nombre e información básica que se muestra en una "barra lateral" alineada a la izquierda. Pero puede cambiar rápidamente a un diseño de columna de una sola columna "apilada" cambiando la línea en su archivo _config.yml
que lee layout: sidebar
a layout: stacked
.
Por defecto, su sitio web aparece con un fondo blanco y gris "claro", con texto oscuro. Pero puede cambiar rápidamente a un fondo "oscuro" con texto blanco cambiando la línea en su archivo _config.yml
que lee style: light
to style: dark
.
Su sitio web viene preconfigurado con tres temas (por ejemplo, "diseño web" y "sass") que aparecen en una sección titulada "My Interess". Estos también se almacenan en el archivo _config.yml
de su repositorio, donde puede definir el nombre de cada tema y otros dos detalles opcionales:
web_url
: La dirección web que desea para su tema para vincular (por ejemplo, https://github.com/topics/sass
).image_url
: la dirección web de una imagen (idealmente cuadrada) que le gustaría aparecer con su tema. Para agregar una página a su sitio web (por ejemplo, currículum detallado):
.html
o .md
en la raíz de su repositorio.http://yoursite.dev/filename
). ---
layout: default
---
Para agregar una publicación de blog a su sitio web:
.md
en el directorio /_posts/
directorio de su repositorio. YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
Su sitio web viene con una publicación de blog de marcadores de posición a la que puede hacer referencia. En particular, su frente declara published
como false
, para que no aparezca en su sitio web.
Si bien también puede definir un layout
en la materia frontal, su sitio web está preconfigurado para asignar el diseño post
a todas las publicaciones en su /_posts/
directorio. Por lo tanto, no tiene que declarar eso en sus publicaciones, si no lo desea.
Las convenciones de Jekyll para autorizar y administrar publicaciones de blog son muy flexibles. Puede obtener más información en la documentación de Jekyll para "publicaciones".
Para brindarle una base sólida para iniciar su sitio web personal, su repositorio incluye un puñado de "incluye"-archivos .html
dinámicos que se reutilizan en todo su sitio web. Todos están almacenados en el directorio /_includes/
.
Están los sospechosos habituales, como header.html
y footer.html
. Pero hay poco más que vale la pena señalar:
interests.html
: una lista dinámica y de rumbo de "My Interess", que está poblada con los temas que enumera en su _config.yml
.masthead.html
: una colección de su avatar, nombre, biografía y otros metadatos que se muestran prominentemente en todas sus páginas web para ayudar a identificar de qué se trata el sitio web.post-card.html
: una presentación compacta y resumida de una publicación de blog, reutilizado para mostrar una lista de sus últimas publicaciones de blog.projects.html
: una lista dinámica y de encabezado de "My Projects", que está poblada con una lista de sus nuevos repositorios de GitHub.repo-card.html
: una presentación compacta y resumida de un repositorio, reutilizado para mostrar una lista de sus repositorios de GitHub.thoughts.html
: una lista de encabezado y dinámica de "My Thoughting", que está poblada con una lista de sus últimas publicaciones de blog.topic-card.html
: una presentación compacta y resumida de un tema (definido en su _config.yml
), reutilizado para mostrar una lista de sus intereses.Su repositorio viene con tres diseños:
index.html
para mostrar listados de sus proyectos, intereses y (opcionalmente) las publicaciones de su blog./_posts/
directorio.La convención de Jekyll para definir diseños es muy flexible. Puede obtener más información sobre cómo personalizar sus diseños en los documentos de "diseños" de Jekyll.
Su sitio web está preconfigurado para utilizar un marco CSS muy flexible llamado "Primer", junto con cualquier estilos personalizados que escriba en su /assets/styles.scss
Sass Stylesheet. Actualmente se hace referencia dentro de su archivo styles.scss
, utilizando el CSS Import At-Rule:
@import url('https://unpkg.com/primer/build/build.css');
Por supuesto, puede eliminarlo o reemplazarlo con otro marco. Simplemente tenga en cuenta que el HTML de que su sitio web fue preempaquetado con referencias múltiples "clases de utilidad" de imprimación para definir cosas como anchos de columna, márgenes y colores de fondo.
El tema está disponible como código abierto bajo los términos de la licencia MIT.