Configurazione base di GitHub Pages

ref: github.io setting reference Migrazione da velog.io/@naem1023 a naem1023.github.io. Personalizzazione, posting locale e possibilità di deploy su un server personale — questi vantaggi mi sembravano migliori della semplicità di Velog.

Installazione

# install ruby, jekyll, bundler
# Ubuntu
sudo apt install ruby ruby-dev build-essential

# m1 mac
brew install ruby rbenv
rbenv install 3.1.2
rbenv global 3.1.2

# install jekyll, bundler
gem install jekyll bundler
bundle update --bundler
bundle add webrick
bundle install --redownload

# set zshrc
echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc
echo 'export PATH="/usr/local/opt/ruby/bin:/usr/local/lib/ruby/gems/3.0.0/bin:$PATH"' >> ~/.zshrc


# setup del tema jekyll e deploy
git clone {indirizzo git del tema jekyll}
mv ./minimal-mistakes {nome del mio repository github.io}
cd {{nome del mio repository github.io}}
git remote remove origin
git remote add origin {link del mio repository github.io}
git push -u origin master

Test

# Servire in ambiente locale
bundle exec jekyll serve

YFM (YAML Front Matter)

• Specifica i metadati del post in formato markdown.
• Scritto in YAML.
• Posizionato all’inizio del file markdown come segue:

1
---
2
title:  "velog to github.io"
3
excerpt: "excerpt"
4
toc: true
5
toc_sticky: true
6
toc_label: "Indice della pagina" # default: On this page
7
header:
8
  teaser: /assets/images/bio-photo-keyboard-teaser.jpg
9

10
categories:
11
  - Blog building
12
tags:
13
  - Blog
14
last_modified_at: 2022-04-06T08:06:00-05:00
15
---
16
Si può accedere alle informazioni YFM tramite doppie parentesi graffe
17
es., {{ page.title }}, {{ page.last_modified_at }}

Il toc (table of contents) permette di visualizzare un elenco degli header H1-H6 sul lato destro della pagina.

_config.yml

Contiene le impostazioni operative di Jekyll. Mentre gli altri file riflettono automaticamente le modifiche durante l’esecuzione del server Jekyll, le modifiche a _config.yml hanno effetto solo al rebuild.

Il contenuto di _config.yml può essere usato così:

1
<{{ site.url }}{{ site.baseurl }}/blog/>

Quando compilato con Jekyll, il codice sopra viene renderizzato come <{{ site.url }}{{ site.baseurl }}/blog/>.

Commenti

Si può aggiungere un servizio di commenti modificando la sezione comments in _config.yml. Ho intenzione di usare utterances. ref: utterances setting blog

Open Graph Image

Si può configurare l’Open Graph Protocol.

1
og_image    : "path"
2
og_description  : ""
3
og_title    : ""

Cos’è l’Open Graph Protocol

Site Author

Informazioni visualizzate nella sidebar sinistra. Attenzione: gli URL vanno scritti senza virgolette.

1
# Site Author
2
author:
3
  name             : "Sviluppatore per hobby"
4
  avatar           : "/assets/images/bio-photo-keyboard.jpg"
5
  bio              : "Uno sviluppatore che programma per stipendio al lavoro e per hobby a casa"
6
  location         : "South Korea"
7
  email            :
8
  links:
9
    - label: "Email"
10
      icon: "fas fa-fw fa-envelope-square"
11
      url: mailto:devinlifeidea@gmail.com
12
    - label: "Website"
13
      icon: "fas fa-fw fa-link"
14
      url: "https://devinlife.com"

Outputting

Impostazioni per la visualizzazione del blog. Il valore paginate controlla quanti post recenti appaiono nella prima pagina. Superato quel numero, vengono mostrati i numeri di pagina.

_posts, _pages

_posts contiene i post basati su data. _pages serve per i post non basati su data. Si possono scrivere post che appaiono a URL specifici all’interno del sito.

Le impostazioni definite per _posts e _pages in _config.yml diventano i default per i post markdown. Ridefinire il YFM nei singoli post sovrascrive quei default.

Category, Tag

Si possono configurare URL e tipi per categorie e tag.

Barra dei menu

Modificabile tramite _data/navigation.yml.

Categorie, Tag

Servono pagine separate per categorie e tag, create tramite Pages. Creare pagine con ‘/categories’ e ‘/tag’ come permalink. Qualsiasi URL va bene purché sia il base URL configurato in _config.yml. Categorie e tag hanno il profilo autore impostato su false di default, quindi l’ho cambiato in true.

Category

Se Categories contiene tutte le categorie del blog, le pagine delle singole categorie devono mostrare i post di quella specifica categoria. Creare pagine con permalink come sotto-URL di categories.

1
---
2
title: "About building blog"
3
permalink: /categories/blog
4
layout: category
5
author_profile: true
6
taxonomy: blog-building
7
---

Il campo taxonomy specifica quale categoria visualizzare.

Commenti

Assicurarsi di impostare comments su true in _config.yml. Ci ho perso parecchio tempo…

1
defaults:
2
  # _posts
3
  - scope:
4
      path: ""
5
      type: posts
6
    values:
7
      comments: true

Ho usato utterances. Dato che usa le issue di GitHub, se è un repo forkato bisogna verificare che la creazione di issue sia abilitata. A differenza dei permalink, il nome del repo va racchiuso tra virgolette.

1
repository: # GitHub username/repo-name es. "mmistakes/minimal-mistakes"
2

3
comments:
4
  provider: "utterances"
5
  utterances:
6
    theme: "github-light" # "github-dark"
7
    issue_term: "pathname"

Se issue_term è “pathname”, i commenti si mappano alle issue GitHub in base al percorso URL. Se il titolo del post cambia e il percorso URL cambia, i commenti scompaiono.

Font

Si può cambiare il font modificando i file scss.

1
# In _sass/minimal-mistakes/_variables.scss, modificare User Font
2
$sans-serif: -apple-system, BlinkMacSystemFont, {User Font}
3

4

5
# Aggiungere il seguente in assets/css/main.scss
6
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');
7

8
# Cambiare la dimensione del font in _sass/minimal-mistakes/_reset.scss
9

10
html {
11
  box-sizing: border-box;
12
  background-color: $background-color;
13
  font-size: 14px;
14

15
  @include breakpoint($medium) {
16
    font-size: 14px;
17
  }
18

19
  @include breakpoint($large) {
20
    font-size: 16px;
21
  }
22

23
  @include breakpoint($x-large) {
24
    font-size: 18px;
25
  }
26

27
  -webkit-text-size-adjust: 100%;
28
  -ms-text-size-adjust: 100%;
29
}

Visualizzazione della data

Modificando _config.yml come segue si rimuove il tempo di lettura e si mostra la data di pubblicazione. Le impostazioni inserite qui si applicano automaticamente al YFM di tutti i post. ref: Reference github comment

1
# Defaults
2
defaults:
3
  # _posts
4
  - scope:
5
      path: ""
6
      type: posts
7
    values:
8
      layout: single
9
      author_profile: true
10
      read_time: false
11
      comments: true
12
      share: true
13
      related: true
14
      show_date: true