handmade blog

✍️

Blog fait à la main

Lire ce document dans une autre langue : ?? ?? ?? ?? ?? ?? ??

Handmade Blog est un générateur de blog statique léger destiné aux personnes qui souhaitent créer un blog rapidement. Il prend en charge les documents de type article pour un article de blog, les documents de type travail pour le portfolio, les points forts du code, la syntaxe KaTeX, les notes de bas de page, etc.

Démo : ici

Vitrine

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

Résultats phare

article/0.html sur mobile

article/0.html sur le bureau

Commencer

1. Cliquez sur le bouton « Utiliser ce modèle » au-dessus de la liste des fichiers pour créer un nouveau référentiel. Si vous souhaitez utiliser le domaine github.io, vous devez nommer le référentiel {YOUR_ID}.github.io . (par exemple, betty-grof.github.io ) N'oubliez pas d'activer l'option « Inclure toutes les branches ».

   

   

2. Cliquez sur l'onglet « Paramètres » dans votre référentiel et définissez la branche source des pages GitHub sur la branche gh-pages . GitHub Pages hébergera votre site Web basé sur la branche gh-pages . Vous pourrez accéder au site Web via https://{YOUR_ID}.github.io/ dans quelques minutes.

   

   

3. Clonez le référentiel et installez les packages de nœuds.

   $ 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. Personnalisez certains textes tels que le titre de la navigation (dans app/templates/navigations.ejs ) et exécutez 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. Exécutez le script npm start pour démarrer un serveur local en écoute sur http://localhost:8080/ . Le serveur local est basé sur le répertoire dist .

   $ npm run build
   $ npm start

   

6. Validez et transmettez les modifications de votre répertoire de travail vers le référentiel distant.

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

7. Exécutez le script deploy si vous êtes prêt à héberger le site Web. Ce script crée des fichiers locaux dans le répertoire dist et les pousse vers la branche gh-pages qui contient uniquement les fichiers du répertoire dist . GitHub Pages hébergera automatiquement votre site Web sur https://{YOUR_ID}.github.io/ en fonction de la branche gh-pages .

   $ npm run deploy

Usage

Rechargement en direct

1. Exécutez npm run watch pour suivre les changements en temps réel.
2. Exécutez npm start pour démarrer le serveur local. ( npm run watch doit toujours être exécuté en arrière-plan ou dans un autre onglet, ou dans une autre session.)
3. Désormais, il est construit automatiquement chaque fois que vous apportez des modifications à des fichiers dans les répertoires app/templates , app/styles et _articles .

Rédaction et publication de documents

1. Écrivez un document dans le répertoire _articles ou _works .
2. Exécutez npm run publish article ou npm run publish work pour convertir les documents markdown en HTML.
3. Prévisualisez le document converti sur le serveur local à l'aide du script npm start .
4. Validez et transmettez les modifications au référentiel, puis exécutez npm run deploy pour déployer.

Modèle d'édition

Modifiez un modèle ejs pour changer le contenu de la page existante. Par exemple, si vous souhaitez placer une image sur la page de destination, ouvrez le fichier app/templates/index.ejs et ajoutez la balise img à l'élément 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 >

Ensuite, exécutez le script npm run build pour publier la page de destination modifiée et prévisualiser les modifications sur le serveur local à l'aide du script npm start .

$ npm run build
$ npm start

Si vous êtes prêt à déployer, exécutez le script npm run deploy . Vous pouvez modifier non seulement la page de destination, mais également toutes les pages de cette manière. (Vous devrez peut-être comprendre la structure du projet.)

Ajouter un domaine personnalisé

Créez un fichier CNAME dans le répertoire racine. Le processus de création récupérera automatiquement le CNAME pour vous et vous pourrez servir votre blog à partir de votre domaine personnalisé.

Pour en savoir plus sur la façon dont Github gère les CNAME, consultez la documentation

Structure du projet

• _articles - Fichiers Markdown pour les articles de blog.
• _works - Fichiers Markdown pour le portfolio.
• app
  • assets - Tous les fichiers à importer par des fichiers HTML tels qu'une image, une police, etc.
  • public - Fichiers HTML générés par le script publish . Le répertoire server et dist est basé sur ce répertoire. Ne modifiez pas directement les fichiers de ce répertoire.
    • article - Fichiers HTML convertis à partir du répertoire _articles .
    • work - Fichiers HTML convertis à partir du répertoire _works .
  • styles - Code source CSS à importer par les fichiers HTML.
  • static - Tous les fichiers statiques qui ne sont pas compilés par un script build comme les fichiers robots.txt , sitemap.xml ou SEO. Le script build copie tous les fichiers de ce répertoire dans le répertoire dist .
  • templates - Fichiers de modèles EJS. Le script publish convertit les modèles de ce répertoire en fichiers HTML.
• dist - Fichiers compilés par le script build . Le script start ouvre le serveur local basé sur ce répertoire et le script deploy déploie un site Web sur les pages GitHub basées sur ce répertoire. Ne modifiez pas directement les fichiers de ce répertoire.
• services - Code source implémentant le script publish .
  • classes
  • models
• tools - Code source implémentant divers scripts npm.

Scripts disponibles

npm start

Démarre l'écoute du serveur de développement local sur http://localhost:8080/.

npm run publish

Convertit les modèles en fichiers HTML.

$ npm run publish article

Convertit tous les articles.

$ npm run publish works

Convertit toutes les œuvres.

$ npm run publish article 5

Convertit un article dont l'identifiant est 5.

$ npm run publish work 3

Convertit une œuvre dont l'identifiant est 3.

$ npm run publish page

Convertit toutes les pages.

npm run watch

Reconstruit automatiquement les fichiers modèles dans le répertoire templates , les fichiers css dans le répertoire styles et les fichiers markdown dans le répertoire _articles chaque fois que les fichiers sont modifiés.

npm run build

Crée des fichiers avec le regroupeur de colis.

npm run deploy

Construit et déploie les fichiers.

Licence

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.