handmade blog

✍️

Blog hecho a mano

Leer este documento en otro idioma: ?? ?? ?? ?? ?? ?? ??

Handmade Blog es un generador de blogs estáticos liviano para personas que desean iniciar un blog rápidamente. Admite documentos de tipo artículo para una publicación de blog, documentos de tipo de trabajo para portafolio, aspectos destacados del código, sintaxis KaTeX, notas a pie de página y más.

Demostración: aquí

Escaparate

• betty-grof.github.io: https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io: https://github.com/parksb/parksb.github.io

Resultados del faro

artículo/0.html en el móvil

artículo/0.html en el escritorio

Empezando

1. Haga clic en el botón 'Usar esta plantilla' encima de la lista de archivos para crear un nuevo repositorio. Si desea utilizar el dominio github.io, debe nombrar el repositorio {YOUR_ID}.github.io . (por ejemplo, betty-grof.github.io ) No olvide habilitar la opción 'Incluir todas las ramas'.

   

   

2. Haga clic en la pestaña 'Configuración' en su repositorio y configure la rama fuente de GitHub Pages en la rama gh-pages . GitHub Pages alojará su sitio web según la rama gh-pages . Podrás acceder al sitio web a través de https://{YOUR_ID}.github.io/ en unos minutos.

   

   

3. Clone el repositorio e instale los paquetes de nodos.

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. Personalice algunos textos, como el título de la navegación (en app/templates/navigations.ejs ), y ejecute npm run build .

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. Ejecute el script npm start para iniciar un servidor local escuchando en http://localhost:8080/ . El servidor local se basa en el directorio dist .

   $ npm run build
   $ npm start

   

6. Confirme y envíe los cambios en su directorio de trabajo al repositorio remoto.

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. Ejecute el script deploy si está listo para alojar el sitio web. Este script crea archivos locales en el directorio dist y los envía a la rama gh-pages que contiene solo los archivos en el directorio dist . GitHub Pages alojará su sitio web en https://{YOUR_ID}.github.io/ según la rama gh-pages automáticamente.

   $ npm run deploy

Uso

recarga en vivo

1. Ejecute npm run watch para realizar un seguimiento de los cambios en tiempo real.
2. Ejecute npm start para iniciar el servidor local. ( npm run watch aún debe estar ejecutándose en segundo plano o en otra pestaña u otra sesión).
3. Ahora, se crea automáticamente cada vez que realiza cambios en cualquier archivo en los directorios app/templates , app/styles y _articles .

Redacción y publicación de documento.

1. Escriba un documento en el directorio _articles o _works .
2. Ejecute npm run publish article o npm run publish work script para convertir documentos de rebajas a HTML.
3. Obtenga una vista previa del documento convertido en el servidor local utilizando el script npm start .
4. Confirme y envíe los cambios al repositorio y ejecute npm run deploy para implementar.

Plantilla de edición

Modifique una plantilla ejs para cambiar el contenido de la página existente. Por ejemplo, si desea colocar una imagen en la página de destino, abra el archivo app/templates/index.ejs y agregue la etiqueta img al elemento main-container .

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

Luego, ejecute el script npm run build para publicar la página de destino modificada y obtener una vista previa de los cambios en el servidor local usando el script npm start .

$ npm run build
$ npm start

Si está listo para implementar, ejecute el script npm run deploy . Puede cambiar no solo la página de destino sino también cualquier página como esta de esta manera. (Es posible que necesite comprender la estructura del proyecto).

Agregar un dominio personalizado

Cree un archivo CNAME en el directorio raíz. El proceso de creación seleccionará automáticamente el CNAME y podrá publicar su blog desde su dominio personalizado.

Para obtener más información sobre cómo Github administra los CNAME, consulte los documentos.

Estructura del proyecto

• _articles : archivos Markdown para las publicaciones del blog.
• _works : archivos Markdown para la cartera.
• app
  • assets : cualquier archivo que se importe mediante archivos HTML, como imágenes, fuentes, etc.
  • public : archivos HTML generados por el script publish . El directorio server y dist se basa en este directorio. No cambie los archivos bajo este directorio directamente.
    • article : archivos HTML convertidos desde el directorio _articles .
    • work : archivos HTML convertidos desde el directorio _works .
  • styles : código fuente CSS que se importará mediante archivos HTML.
  • static : cualquier archivo estático que no esté compilado mediante un script build , como archivos robots.txt , sitemap.xml o SEO. El script build copia todos los archivos de este directorio al directorio dist .
  • templates : archivos de plantilla EJS. El script publish convierte las plantillas de este directorio en archivos HTML.
• dist : archivos compilados por el script build . El script start abre el servidor local según este directorio y el script deploy implementa un sitio web en páginas de GitHub según este directorio. No cambie los archivos bajo este directorio directamente.
• services : código fuente que implementa el script publish .
  • classes
  • models
• tools : código fuente que implementa varios scripts npm.

Guiones disponibles

npm start

Inicia la escucha del servidor de desarrollo local en http://localhost:8080/.

npm run publish

Convierte plantillas a archivos HTML.

$ npm run publish article

Convierte todos los artículos.

$ npm run publish works

Convierte todas las obras.

$ npm run publish article 5

Convierte un artículo cuyo ID es 5.

$ npm run publish work 3

Convierte una obra cuyo id es 3.

$ npm run publish page

Convierte todas las páginas.

npm run watch

Reconstruye archivos de plantilla en el directorio templates , archivos css en el directorio styles y archivos de rebajas en el directorio _articles automáticamente cada vez que se modifican los archivos.

npm run build

Crea archivos con paquete de paquetes.

npm run deploy

Crea e implementa los archivos.

Licencia

Este proyecto tiene la licencia MIT; consulte el archivo de LICENCIA para obtener más detalles.