Cómo escribir un blog en GitHub
¿Por qué debería establecer un blog en GitHub? Esta pregunta se puede dividir en dos pasos:
Primero, ¿por qué debería establecer? ¿Un blog en GitHub?
GitHub es un servicio de alojamiento de versiones basado en git con programadores de casi todo el mundo y una gran cantidad de excelentes 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.
Entonces, cuando hay una gran cantidad de sistemas de blogs de código abierto (como WordPress), ¿por qué elegir alojar su blog en GitHub?
El "Proceso de publicación y desarrollo de blogs impulsado por Git" es muy fácil de usar para los programadores y se ve y se siente genial.
Súper sencillo, puedes aprenderlo y publicarlo 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 obtener 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. 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 "el título de esta página". Lo discutiremos en detalle más adelante. Quizás quieras entenderlo así:
lt;! -- lang： python --gt；
#--- comienzo del encabezado de la página
título = "Hola, mi blog"
#--- final del encabezado de la página
print(page.title)
Bien, ¡el diseño de la página de inicio del blog está completo! (Deja de discutir... Te prometí terminarla en 10 minutos... Primero haré una casa preliminar y hablaré de ello más tarde).
lt; p >lt; br/gt;
4. Publicar en GitHub
Regrese a git bash, verifique el estado de git, asegúrese de que _config.yml sea correcto, agregue, clasifique y luego cambie la página Agregar a index.html. 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 debe tenerse en cuenta aquí es que, dado que estamos usando la página del proyecto en GitHub Pages, GitHub. solo generará contenido automáticamente en 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), luego visite su nombre. 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 (muy 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 lamentablemente descubres que la página china está confusa, no te preocupes, sigue siendo la misma. Maldito problema de UTF-8. Lo resolveremos por completo más adelante, así que por ahora es sólo 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. dirección de correo electrónico que utilizó al registrarse en GitHub. Si hubo un error con un envío 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 }}
### Contenido
[Parte I](#partI)
[Parte II](# partII)
[parteIII](#parteIII)
------------------------------- ----
### Parte I lt;p id="partI"gt;lt;/pgt;
Esta es la primera parte del directorio
- ---------------------------------
##Parte 2lt;p id="parteII "gt;lt;/pgt;
Esta es la segunda parte
------------------- - --- -----------
## Parte IIIlt;p id="partIII"gt;lt;/pgt;
Aquí está la tercera parte
{ page.date|date_to_string }}
Este párrafo utiliza la sintaxis de Markdown más utilizada, como #, ## representa lt en HTML; lt;h2gt;lt;/h2gt;. Utilice [texto](enlace) para crear un hipervínculo, utilice un "-" 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, por lo que no entraré en detalles aquí. En resumen, esta es una sintaxis más cercana a la escritura real y te recomiendo que la pruebes.
Por cierto, el {{ page.date|date_to_string }} al final se refiere a mostrar el atributo de fecha de la 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 }}
El otro 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
Debido a las razones mencionadas anteriormente. , creamos Es un sitio de tipo página de proyecto
y su URL raíz es en última instancia: nombre de usuario.github.com/nombre del proyecto, mientras que el hipervínculo generado por post.url
es solo automáticamente 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 su nombre indica, es "layout". 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...