Cómo crear tu propio blog en github
¿Por qué debería alojar su blog en GitHub? Esta pregunta se puede formular en dos pasos:
Primero, ¿por qué debería alojar su blog personal en GitHub? ¿Tu blog en GitHub? Mira
GitHub es un sitio web de servicio de alojamiento de versiones basado en git, que reúne a casi todos los programas del mundo. GitHub es un sitio web de servicio de alojamiento de versiones basado en git, que reúne a programadores de. en todo el mundo y toneladas de increíbles proyectos de código abierto. Una vez que un proyecto crece, es posible que un nombre y una descripción simples no satisfagan las necesidades de los autores y lectores. GitHub Pages se creó para permitir a los usuarios reemplazar listados de código fuente con páginas personalizadas más descriptivas. También se pueden utilizar como página de inicio personal u organizacional, alojando páginas estáticas.
¿Por qué alojar tu blog en GitHub cuando existen toneladas de sistemas de blogs de código abierto como WordPress y otros?
Aprende a publicar en 5 minutos.
Las páginas estáticas son fáciles de construir y casi no tienen riesgos de seguridad. Por supuesto, esta también es una de las desventajas, porque las páginas estáticas no permiten demasiada complejidad en el diseño de interacción y la estructura del sitio web. Pero como blog personal simple, es poco probable que sea necesario
Y es confiable
Para más detalles, consulte esto aquí: Pros y contras de Jekyll GitHub Pages
p>
Sin más preámbulos, probémoslo ahora.
lt;p id="002"gt;lt;/pgt;
Dos: crea un prototipo de blog en 10 minutos
Primero, asegúrate de :
Tener una cuenta de GitHub
Git instalado (en Windows, recomiendo instalar GitExtensions, que tiene una interfaz china e integra git putty kDiff, lo que puede ahorrarte algunos problemas)
p>
1. Crear un proyecto
Primero, cree un proyecto en GitHub, asígnele cualquier nombre e intente usar letras minúsculas para evitar conflictos de URL que se encontrarán más adelante.
p>Ejecute Git localmente, seleccione un directorio y cree un proyecto con el nombre que acaba de crear. Selecciona un directorio y clona el proyecto que acabas de crear
lt;! -- lang: bash --gt;
cd /d/
git clone
cd blogdemo
lt; ;
lt;br/gt;
2. Cree el archivo de configuración _config.yml
Nota: Todos los archivos creados después de esto deben usar UTF -8 BOM -guardar codificación gratuita
Cree un nuevo archivo _config.yml en el directorio raíz del proyecto, complete baseurl:/blogdemo, blogdemo es el nombre del proyecto, el contenido de esta línea especifica la raíz de todo Ruta del sitio web, el significado de esto se explicará en detalle más adelante.
lt; br/gt;
lt; br/gt;
3.Crear una página de inicio en el directorio raíz El nuevo archivo index.html tiene el siguiente contenido:
lt;! -- lang: html --gt;
---
título: Hola, mi blog
---
{ { page.title }}
No se apresure a preguntarse por qué aparecen etiquetas como "{}" en los archivos html.
En Liquid Template Language, {{page.title }} significa provocar el título de esta página. Hablaremos de ello con más detalle más adelante. También puedes entenderlo de esta manera:
lt;! -- lang: python --gt;
#--- Inicio del encabezado de página
title = "Hola, mi blog"
#- -- Encabezado de fin de página
print(page.title)
Bien, ¡el diseño de la página de inicio del blog está completo! (Dejen de discutir... les prometí terminarla en 10 minutos... primero haré una casa preliminar y hablaré de ello después)
lt; > lt;br/gt;
4. Publicar en GitHub
Vuelva a git bash, verifique el estado de git, asegúrese de que _config.yml sea correcto, agregue, clasifique y luego agregue la página al índice. Luego agregue y envíe, mantenga el buen hábito de usar Git, recuerde agregar instrucciones de envío
y luego envíelo a GitHub. Lo que se debe tener en cuenta aquí es que debido a que estamos usando la página del proyecto en GitHub Pages, GitHub. Solo se generará automáticamente el contenido de la rama gh-pages, por lo que la rama maestra local debe enviarse a GitHub. Por lo tanto, la rama maestra local debe enviarse a la rama remota de gh-pages
lt;! -- lang: bash --gt;
git push origin master:gh-pages
Espere un momento, hasta 10 minutos (generalmente no tanto), y luego visite yourname .github .com/blogdemo
(donde tu nombre
es el nombre de tu cuenta de GitHub y blogdemo es el nombre de tu proyecto), verás la página de inicio de tu blog (realmente fea... .). No parece un blog en absoluto, pero no te preocupes, es más fácil tomarte tu tiempo
Más rápido~)
Además, si desafortunadamente encuentras que la página china está confuso, no te preocupes. Existe ese maldito problema de UTF-8 nuevamente, lo solucionaremos más tarde, así que por ahora es solo una cuestión de ajustar manualmente la codificación del navegador.
lt; br/gt;
lt; br/gt;
5. >
p>
Al mismo tiempo, sigamos agregando ladrillos y mosaicos a su blog para que tenga la función de lectura de artículos más básica. Además de continuar con la página F5, también puede seguir el correo electrónico. dirección que utilizó al registrarse en GitHub. Si hubo un error con una inserción anterior, le avisará por correo electrónico que la compilación falló.
Vuelva al directorio raíz del proyecto, mkdir _posts, y cree un nuevo directorio para todas las publicaciones.
Vaya al directorio _posts y cree una nueva publicación. Tenga en cuenta que el formato de nombre de archivo predeterminado es año-mes-día-título de la publicación. Por ejemplo, 2013-03-23-my_first_article.md, intente evitar espacios u otros caracteres desordenados; este nombre de archivo se utilizará como base para generar la URL. El formato del nombre del archivo se puede cambiar modificando el atributo de enlace permanente en _config.yml. El valor predeterminado es una fecha y así es como se verá el archivo que acabamos de crear; las reglas exactas se pueden ver aquí y las discutiremos más adelante.
Si notas que el archivo que acabo de crear tiene una extensión .md, entonces los usuarios que estén familiarizados con GitHub o StackOverFlow conocerán el formato Markdown, y esta es una de las razones por las que se recomienda GitHub para hosting. blogs, para que pueda evitar el molesto HTML en la mayoría de los casos y utilizar una sintaxis de Markdown más intuitiva. Si eres nuevo en esto, aquí tienes una explicación de la sintaxis de Markdown, es muy fácil de aprender y muy sencillo de usar una vez que estés familiarizado con ella.
Volviendo al tema, abre el archivo que acabas de crear y escribe lo siguiente:
lt;! -- lang: html --gt;
--
título: Mi primer artículo
---
# {{ page.title }}
### Tabla de contenidos
[Parte I](#partI)
[Parte II](# partII)< / p>
[parteIII](#parteIII)
------------------------------- - ----
### Parte I lt;p id="partI"gt;lt;/pgt;
Aquí está el contenido de la primera parte
----------------------------------
##Parte 2lt; p id="partII"gt;lt;/pgt;
Aquí está el contenido de la segunda parte
--------------- -- --- --------------
## Parte IIIlt;p id="partIII"gt;lt;/pgt;
Aquí está el contenido de la tercera parte
{{ page.date|date_to_string }}
Este párrafo utiliza la sintaxis de Markdown más utilizada, como #, ## significa lt ;h1gt;lt;/h1gt;, lt;h2gt;lt;/h2gt; en HTML. Utilice [texto](enlace) para crear un hipervínculo, utilice "-" continuo para crear una línea horizontal (nota: esto no incluye la línea horizontal utilizada para rodear el título superior, que representa el atributo de encabezado de la página), etc. . Se puede encontrar una sintaxis más detallada en la página mencionada anteriormente y no entraré en detalles aquí. En resumen, esta es una sintaxis que se acerca más a la escritura real y le recomiendo que la pruebe.
Por cierto, el {{ page.date|date_to_string }} al final se refiere a mostrar el atributo de fecha de esta página y convertirlo en una cadena legible. Asimismo, sintaxis líquida.
Bien, se escribe el primer artículo y luego se envía el último repositorio a github. Espera un momento... Espera, olvidé agregar el enlace del portal del artículo.
Lo sentimos, vuelva a abrir nuestro archivo index.html y agregue contenido, se ve así:
lt;! -- idioma: html --gt;
--
título: Mi blog
---
{{ página. título }}
{ para publicación en site.posts }
{{ post.date|date _to_string }} lt; a href='{{ site.baseurl }}{{ post.url }}'gt;{{ post.title }}lt;/agt;
{ endfor }
Bueno... se trata de líquidos. Para explicarlo brevemente, hay dos tipos principales de etiquetas Liquid, una es para generar contenido variable directamente, como se muestra a continuación:
{{ page.title }}
La otra es Salida en forma de comandos lógicos, de la siguiente manera:
{ for x in y }
...... { endfor }
Y simplemente escribe The El contenido ingresado en la página de inicio se recorre a través de todos los archivos de publicaciones y se muestra uno por uno en la página. Una cosa a tener en cuenta aquí es que al crear un hipervínculo a un artículo, además de post.url, también debes prestar atención a agregar site.url delante de él.
Por las razones mencionadas anteriormente, que creamos Es un sitio de tipo página de proyecto
y su URL raíz es en última instancia: nombre de usuario.github.com/projectname, mientras que el hipervínculo generado por post.url
simplemente finaliza automáticamente. con nombre de usuario.github com/ como prefijo.
Ahora revisa todo lo que se ha cambiado para asegurarte de no cometer errores tontos como escribir "." en lugar de "." o escribir mal palabras, ¡luego confirma y presiona!
¡Maldita sea! Si todo va bien, verá aparecer su página de inicio y su lista de publicaciones.
lt; br/gt;
lt; br/gt;
6. Agregar plantilla suite_layouts
El artículo está en progreso. , Quizás los 10 minutos prometidos al principio se hayan superado con creces... Lamento engañarte, pero al menos estamos progresando rápidamente ~ A continuación, si todavía estás interesado, agreguemos un poco de uniformidad al estilo del sitio web sex. .
Regrese al directorio raíz del proyecto y cree una nueva carpeta _layouts, que, como sugiere el nombre, también es la ubicación de vista previa de los diseños. Cree un nuevo archivo de diseño básico en _layouts y asígnele el nombre default.html:
lt;! -- idioma: html --gt;
lt; !DOCTYPE htmlgt;
lt; htmlgt; > lt;meta hack.textile
| `-- 2009-04-26 -barcamp-boston-4-roundup.textile
|-- _site
`-- index.html
Esta imagen proviene de: Yes We Jekyll, perdona mi pereza, realmente no soy bueno escribiendo...