GitHub pages

funzionanti con Ubuntu 18-04

Installa GitHub Desktop per Linux
è sufficiente scaricare il .deb ed installarlo.

GitHub

Trova il repository per la web page che ti interessa
Fork! In alto a destra, il comando Fork ne farà una copia nel tuo profilo GitHub
Nota: il fork te lo porti a vita, quindi forse meglio clonare il repository, almeno nella condivisone social non ti appare la preview di minimal mistakes invece del proprio sito (e che cazz).
Clonare un Git da Ubuntu 18.04:

1. Crea il repo da github (es clone.git)
2. Scarica il repo che ti interessa

   cd Downloads
   git clone --bare https://github.com/AlbGri/AlbGri.github.io.git
   

3. Terminale nella cartella del repo e mirror it

   cd AlbGri.github.io.git
   git push --mirror https://github.com/AlbGri/clone.git
   

4. Rimuovi la cartella del vecchio .git

Imposta il repo come la tua page
Settings → Repository name → “AlbGri.github.io”

Configurare il dominio (google domain)

1. Google Domain, compro il dominio, 12 euro all’anno. Questo mi piace.
2. da GitHub repository
   Settings → GitHub Pages → Custom domain → “www.[nomedacomprare].com”
   
3. da Google Domain
   DNS → Custom resource records → [][A][][185.199.***.153] Link per gli IP
   
4. da Google Domain
   DNS → Custom resource records → [www][CNAME][][AlbGri.github.io]
   
5. da GitHub repository
   Settings → GitHub Pages → Custom domain → Enforce HTTPS
   
6. Verifica se sito e DNS sono up

   dig albgri.com +noall +answer
   dig www.albgri.com +nostats +nocomments +nocmd
   ping albgri.com
   

Note Pages

Jakyll e Minimal Mistakes

1. Cambiare le dimensioni del testo

2. Aggiugnere data agli articoli

3. Math \(\LaTeX\)
   dentro “_includes\script.html” aggiungere questo script alla fine. Nei post in cui si vogliono includere le formule, nell’header va aggiunto mathjax: “true”

   {% if page.mathjax %}
   <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
    TeX: {
      equationNumbers: { autoNumber: "AMS" },
      tagSide: "right"
    },
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    }
     });
     MathJax.Hub.Register.StartupHook("TeX AMSmath Ready", function () {
    MathJax.InputJax.TeX.Stack.Item.AMSarray.Augment({
      clearTag() {
        if (!this.global.notags) {
          this.super(arguments).clearTag.call(this);
        }
      }
    });
     });
   </script>
   <script type="text/javascript" charset="utf-8"
     src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
   </script>
   {% endif %}
   

4. Aggiungere la favicon
   Incolli “favicon.png” nella root del repository, poi in _includes/head.html aggiungi la stringa linkata.
   Non ho potuto fare l’highlight html block perché è buggato con l’inizio di quella stringa :(

5. Personalizzare il Markdown flavour
   Definita una skin nel ‘_config.yml’ (es. minimal_mistakes_skin: “contrast” )
   andiamo a personalizzare il file ‘_sass/minimal-mistakes/skin/_contrast.scss’ le cui variabili influenzeranno i parametri di ‘_sass/minimal-mistakes/_variables.scss’

   /* contrast syntax highlighting (base16) */
   $base00: #101218 !default;  // background
   $base01: #1f222d !default;
   $base02: #252936 !default;
   $base03: #7780a1 !default;
   $base04: #33bf2e !default;  // commenti
   $base05: #ffffff !default;  // testo, punteggiatura
   $base06: #C9CCDB !default;
   $base07: #ffffff !default;
   $base08: #ee829f !default;  // error
   $base09: #f99170 !default;
   $base0a: #ffefcc !default;
   $base0b: #a5ffe1 !default;
   $base0c: #97e0ff !default;
   $base0d: #97bbf7 !default;
   $base0e: #c0b7f9 !default;
   $base0f: #fcc09e !default;
   

6. Abilitare il numero riga
   Line number con rouge, minimal mistakes, jakyll

7. Markdown Link
   (BUG/Feature) Se non si specifica ‘https://’ il link indirizza in un sotto percorso del sito. Esempio

8. Aggiungere icona spotify (o altro) alla home
   • /_includes/author-profile.html

     {% if author.spotify %}
        <li>
          <a href="https://open.spotify.com/user/" itemprop="sameAs" rel="nofollow noopener noreferrer">
            <i class="fab fa-fw fa-spotify" aria-hidden="true"></i><span class="label">Spotify</span>
          </a>
        </li>
     {% endif %}
     

   • /_sass/minimal-mistakes/_variables.scss

     $spotify-color: #00d867 !default;
     

   • /_sass/minimal-mistakes/_utilities.scss

     .fa-spotify,
     .fa-spotify-square {
      color: $xing-color;
     }
     

   • /_config.yml

     # Site Author3
      label: "Spotify"
      icon: "fab fa-fw fa-spotify"
      url: "https://open.spotify.com/user/albgri"
     

9. Evitare il doppio slash nell’url del post
   nel _config.yml nella voce url c’era il proprio sito con slash “/” finale. Va rimosso!

10. Se si aggiorna il repo da una fonte diversa, ricordarsi da GitHub Desktop di cliccare su Fetch origin prima di lavorare, così da sincronizzare il repo localmente

11. Popup nascosto (text expand markdown jekyll)
    per generare questo tipo di spoiler popup.
    • Ho inserito il codice di quell’articolo nel file
      /_includes/Collapse.html
    • Aggiunto {% include Collapse.html %} prima dell’ultimo body in
      /_layouts/default.html
    • Per rendere chiuso di default il popup, ho inserito dentro la skin
      /_sass/minimal-mistakes/skins/_nomeskin.scss
      che utilizzo (quella che in /_config.yml è presente alla voce minimal_mistakes_skin) il seguente codice (preso spunto da qui)

       .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
       }
      

    • Purtroppo il risultato non segue l’highlight dei codici.
12. Titoli colorati
    in /_sass/minimal-mistakes/_base.css posso configurare i colori dei titoli impostando il parametro color nel blocco codice relativo a h1, h2, etc.

Google Setup

1. Search Engine Google: utilizzo google search nel search bar del sito
   • Crea il tuo Search Engine Google
   • Ottieni il tuo cx

     000000000000000000000:xxxxxxxxxxx
     

   • Modifica il _config.yml sostituendo

     search_provider        : google
     search_engine_id       : 000000000000000000000:xxxxxxxxxxx
     

2. Configura proprietario sito
   Search Console Google
   Nel caso non riconosce in automatico che si è proprietari, prova questa guida
3. Rimuovere pagine rotte nella cache di google Removal Google
   Cerca su google “site:tuodominio” per trovare le pagine scadute indicizzate e richiederne la rimozione

…