Tutorial Jekyll: Cum se creează un site web static

În era digitală de astăzi, a avea un site web este esențială pentru a-ți stabili o prezență online, pentru a-ți promova brandul și pentru a ajunge la potențialii clienți. Cu toate acestea, crearea unui site web poate fi o sarcină descurajantă.

Aici intervin generatoarele de site-uri statice (SSG) - facilitează crearea de site-uri web frumoase, cu încărcare rapidă, fără a fi nevoie de sisteme backend complexe sau baze de date.

În acest articol, veți fi introdus în unul dintre SSG-urile populare - Jekyll, aflați cum funcționează și cum puteți crea un site web static cu el.

Iată o demonstrație live a blogului pe care îl vei construi cu Jekyll.

Puteți accesa depozitul GitHub al proiectului dacă doriți să aruncați o privire mai atentă.

Ce este Jekyll?

Jekyll este un SSG open-source gratuit care este construit și rulează pe limbajul de programare Ruby. Nu trebuie să înțelegeți cum funcționează Ruby pentru a utiliza Jekyll; trebuie doar să aveți Ruby instalat pe computer.

Jekyll poate fi folosit pentru a construi diverse tipuri de site-uri statice, cum ar fi un blog personal, un site web de portofoliu și un site web de documentare, fără a avea nevoie de o bază de date sau de a utiliza un sistem de gestionare a conținutului precum WordPress.

Iată ce îl face pe Jekyll să iasă în evidență printre SSG-uri:

1. Ușor de utilizat : Jekyll folosește fișiere text simplu și sintaxă markdown pentru a crea și gestiona conținut, ceea ce înseamnă că nu trebuie să aveți cunoștințe de HTML sau CSS pentru a începe.
2. Rapid și sigur: Jekyll nu se ocupă cu nicio bază de date sau scripting de pe server, ceea ce înseamnă că există mai puțin risc de vulnerabilități și atacuri. Acesta generează fișiere HTML statice, făcând site-ul dvs. incredibil de rapid și sigur.
3. Personalizabil: Jekyll este extrem de personalizabil, permițându-vă să utilizați machete și șabloane sau chiar să creați pluginuri pentru a extinde funcționalitatea.
4. Ușor de implementat : Jekyll generează fișiere HTML statice care pot fi implementate pe un server web sau furnizor de găzduire fără a avea nevoie de un sistem dinamic de gestionare a conținutului.
5. Susținut de o comunitate mare: Jekyll are o comunitate mare de utilizatori și dezvoltatori, ceea ce înseamnă că sunt disponibile o mulțime de resurse dacă aveți nevoie de ajutor sau doriți să extindeți funcționalitatea site-ului dvs.

Cum se instalează Jekyll

Mai întâi trebuie să instalați Ruby pe mașina dvs. înainte de a putea continua instalarea Jekyll așa cum este menționat în documentația Jekyll.

Cum se instalează Jekyll pe macOS

În mod implicit, Ruby vine preinstalat cu macOS, dar nu este recomandat să utilizați o astfel de versiune de Ruby pentru a instala Jekyll, deoarece este veche. De exemplu, pe Ventura, cel mai recent sistem de operare al Apple, versiunea de Ruby care vine preinstalată este 2.6.10, dintre care cea mai recentă versiune este 3.1.3 (de la momentul scrierii acestui articol).

Pentru a remedia acest lucru, ar trebui să instalați Ruby corect folosind un manager de versiuni, cum ar fi chruby. Mai întâi ar trebui să instalați Homebrew pe Mac folosind comanda de mai jos în terminalul dvs.:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Odată ce instalarea a reușit, închideți și reporniți Terminalul, apoi verificați dacă Homebrew este gata de funcționare executând această comandă:

 brew doctor

Dacă obțineți „ Sistemul dumneavoastră este gata de preparare” , puteți trece acum la instalarea chruby și ruby-install cu comanda de mai jos:

 brew install chruby ruby-install

Acum puteți instala cea mai recentă versiune a lui Ruby, care este 3.1.3, folosind pachetul ruby-install pe care tocmai l-ați instalat:

 ruby-install 3.1.3

Va dura câteva minute. Odată ce are succes, configurați-vă shell-ul pentru a utiliza automat chruby cu comanda de mai jos:

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

Acum puteți închide și relansa terminalul, apoi verificați dacă totul funcționează rulând această comandă:

 ruby -v

Ar trebui să spună rubin 3.1.3 .

Acum aveți cea mai recentă versiune a lui Ruby instalată pe computer. Acum puteți continua să instalați cea mai recentă bijuterie Jekyll și bundler:

 gem install jekyll bundler

Cum se instalează Jekyll pe Windows

Pentru a instala Ruby și Jekyll pe o mașină Windows, ați folosi RubyInstaller. Acest lucru se poate face prin descărcarea și instalarea unei versiuni Ruby+Devkit din RubyInstaller Downloads și folosind opțiunile implicite pentru instalare.

În ultima etapă a expertului de instalare, rulați pasul ridk install - care este folosit pentru a instala pietre prețioase. Citiți mai multe prin documentația RubyInstaller.

Din opțiuni, alegeți lanțul de instrumente de dezvoltare MSYS2 și MINGW. Deschideți o nouă fereastră de prompt de comandă și instalați Jekyll și Bundler folosind comanda de mai jos:

 gem install jekyll bundler

Cum să verificați dacă Jekyll este instalat corect

Pentru a verifica dacă Jekyll este instalat corect pe computer, deschideți terminalul și executați următoarea comandă:

 jekyll -v

Dacă vedeți numărul versiunii, înseamnă că Jekyll este instalat și funcționează corect pe sistemul dumneavoastră. Acum ești gata să folosești Jekyll!

Comenzi și configurare Jekyll

Înainte de a începe să creăm și să personalizăm un site static cu Jekyll, este plăcut să ne familiarizăm cu diversele sale comenzi CLI și parametrii fișierului de configurare.

Comenzi CLI Jekyll

Iată câteva dintre comenzile populare Jekyll CLI. Nu trebuie să le memorați, ci doar să știți că există și nu ezitați să verificați ce face oricare dintre ele când observați utilizarea lor mai târziu în acest articol.

• jekyll build : generează site-ul static în directorul _site .
• jekyll serve : creează site-ul și pornește un server web pe mașina dvs. locală, permițându-vă să previzualizați site-ul în browser la http://localhost:4000.
• jekyll new [site name] : creează un nou site Jekyll într-un director nou cu numele site-ului specificat.
• jekyll doctor : afișează orice problemă de configurare sau dependență care ar putea fi prezentă.
• jekyll clean : Șterge directorul _site , care este locul unde sunt stocate fișierele site-ului generate.
• jekyll help : scoate documentația de ajutor pentru Jekyll.
• jekyll serve --draft : generează și servește site-ul tău Jekyll, inclusiv orice postări care se află în directorul _drafts .

De asemenea, puteți adăuga câteva opțiuni la aceste comenzi. Vedeți o listă completă de comenzi și opțiuni Jekyll în documentația Jekyll.

Fișierul de configurare Jekyll

Fișierul de configurare Jekyll este un fișier YAML numit _config.yml care conține setări și opțiuni pentru site-ul dumneavoastră Jekyll. Este folosit pentru a configura diverse aspecte ale site-ului dvs., inclusiv titlul site-ului, descrierea, adresa URL și alte setări.

Iată câteva dintre opțiunile de configurare cele mai frecvent utilizate:

• title: titlul site-ului dvs.
• descriere: o scurtă descriere a site-ului dvs.
• url: adresa URL de bază a site-ului dvs.
• baseurl: subdirectorul site-ului dvs., dacă este găzduit într-un subdirector al unui domeniu.
• permalink: structura URL pentru postările și paginile dvs.
• exclude: o listă de fișiere sau directoare de exclus din procesul de generare a site-ului.
• include: O listă de fișiere sau directoare de inclus în procesul de generare a site-ului.
• paginate: numărul de postări de afișat pe pagină atunci când utilizați paginarea.
• pluginuri: o listă de pluginuri Jekyll de încărcat.
• theme: În mod implicit, aceasta este setată la minima . Puteți folosi orice altă temă setându-i numele și implementând alte setări despre care vom afla mai târziu în acest articol.

De asemenea, puteți crea variabile personalizate în fișierul de configurare și le puteți utiliza în șabloanele, machetele și includerile site-ului dvs. De exemplu, puteți crea o variabilă numită author_name și apoi să o utilizați în șabloanele dvs. astfel: {{ site.author_name }} .

Pentru a modifica fișierul de configurare Jekyll, deschideți fișierul _config.yml din directorul proiectului Jekyll într-un editor de text și faceți modificări.

Notă: orice modificări pe care le faceți fișierului de configurare vor avea efect data viitoare când veți genera site-ul cu jekyll build sau jekyll serve .

Cum creezi un site web static pe Jekyll?

Acum că aveți Jekyll instalat pe computer, acum este posibil să creați un site web static Jekyll cu o singură comandă în câteva secunde. Deschideți terminalul și rulați această comandă:

 jekyll new joels-blog

Asigurați-vă că înlocuiți „joels-blog” cu numele site-ului preferat.

Apoi, navigați la folderul site-ului web. Veți observa o structură de bază a site-ului Jekyll care include directoare și fișiere precum acestea:

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

Iată pentru ce este fiecare dintre aceste directoare și fișiere:

• _config.yml: fișierul de configurare Jekyll care conține setările și opțiunile site-ului dvs.
• _posts: un director care conține conținutul site-ului dvs. (pot fi postări de blog). Acestea pot fi fișiere Markdown sau HTML cu o convenție specifică de denumire a fișierelor: YEAR-MONTH-DAY-title.MARKUP .
• Gemfile și Gemfile.lock: Bundler utilizează aceste fișiere pentru a gestiona pietrele Ruby pe care se bazează site-ul dvs.
• index.md: Pagina de pornire implicită pentru site-ul dvs., generată dintr-un fișier Markdown sau HTML.

Dar există mai multe fișiere/foldere care pot fi folosite pentru a vă personaliza site-ul web Jekyll. Aceste foldere includ:

• _includes: un director care conține fragmente HTML reutilizabile care pot fi incluse în machetele și paginile dvs. Cum ar fi bara de navigare, subsolul etc
• _layouts: un director care conține șabloane HTML care definesc structura paginilor dvs.
• active: un director care conține orice fișiere care sunt utilizate de site-ul dvs., cum ar fi imagini și fișiere CSS.
• _sass: un director care conține fișiere Sass care pot fi folosite pentru a genera CSS pentru site-ul dvs.

Această structură de fișiere oferă o bază solidă pentru un proiect Jekyll, dar o puteți modifica după cum este necesar pentru a se potrivi nevoilor specifice ale proiectului dumneavoastră.

Opțiune de pornire rapidă: utilizați șablonul nostru GitHub

Ca alternativă la începerea proiectului folosind Jekyll CLI, puteți crea un depozit Git folosind șablonul Jekyll „Hello World” de la Kinsta pe GitHub. Selectați Utilizați acest șablon > Creați un nou depozit pentru a copia codul de pornire într-un nou depozit din propriul dvs. cont GitHub.

Cum să previzualizați un site Jekyll

Acum aveți un site Jekyll, dar cum puteți previzualiza site-ul pentru a vedea cum arată înainte de a începe poate să-l personalizați pentru a se potrivi nevoilor dvs.? Deschideți terminalul și mutați-vă în directorul proiectului, apoi executați următoarea comandă:

 jekyll serve

Aceasta va genera un folder _site care include toate fișierele statice generate din proiectul dumneavoastră. De asemenea, va porni serverul Jekyll și vă puteți previzualiza site-ul prin http://localhost:4000 .

Dacă vizitați adresa URL în browserul dvs. web, ar trebui să vedeți site-ul dvs. Jekyll cu tema minime:

Cum să personalizați un site Jekyll

Când creați un site cu Jekyll și utilizați o temă, puteți personaliza site-ul pentru a se potrivi nevoilor dvs. De exemplu, este posibil să doriți să adăugați pagini noi, să modificați aspectul unei pagini sau să ajustați modul în care sunt afișate unele elemente. Toate acestea sunt posibile cu Jekyll.

Cum funcționează Front Matter în Jekyll

Când deschideți fiecare pagină sau postare de blog din dosarul proiectului dvs., veți observa un bloc de informații în trei liniuțe (—) în partea de sus a paginii. Aceasta este denumită materie frontală .

Este un format de metadate folosit în Jekyll, pentru a stoca informații despre o pagină sau postare - poate fi scris fie în YAML, fie în JSON.

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

În exemplul de mai sus, subiectul din față include variabile, cum ar fi titlul postării, descrierea și data. Aceste variabile pot fi utilizate în aspectul sau conținutul paginii sau postării.

Jekyll Parse este problema principală și o folosește pentru a genera HTML de ieșire pentru site-ul dvs. Puteți utiliza materialul frontal pentru a specifica diverse opțiuni, cum ar fi aspectul, permalinkul, starea publicată etc.

Cum se configurează Front Matter implicit

De asemenea, puteți configura materialul frontal implicit, astfel încât nu trebuie să definiți același material frontal pentru fișiere similare. De exemplu, dacă fiecare postare de blog folosește numele și aspectul aceluiași autor. Puteți defini o chestiune personalizată în fișierul dvs. _config.yml pentru a difuza toate postările de blog.

Modul în care este structurat este puțin complex, dar iată cum va arăta. Lipiți aceasta sub ultima configurație din fișierul dvs. _config.yml :

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

Când rulați acum comanda jekyll serve , veți observa că, chiar și atunci când nu definiți aspectul și autorul pentru fiecare postare, încă aveți acces la ele în fișierele dvs.

Notă: Când nu definiți o cale, toate fișierele vor folosi valorile de bază definite.

Crearea de pagini în Jekyll

Când creați un fișier în directorul rădăcină al proiectului, acesta este considerat o pagină. Numele pe care îl dați fișierului este folosit de cele mai multe ori în adresa URL, așa că veți numi fiecare fișier de pagină cu un nume care rezonează bine.

De exemplu, dacă doriți să creați o pagină cu adresa URL https://example.com/about , creați un fișier numit about.htm l sau about.md . Extensia de fișier determină limbajul de marcare de utilizat pentru conținutul paginii (HTML sau Markdown).

După ce ați creat un fișier, adăugați material frontal și conținut adecvat. Salvați fișierul și reîmprospătați site-ul dvs. Jekyll în browser. Noua pagină ar trebui să fie acum accesibilă la adresa URL corespunzătoare numelui fișierului.

Crearea layout-urilor în Jekyll

Puteți utiliza Aspecte pentru a defini structura și designul paginilor și postărilor site-ului dvs. Acest lucru se face de obicei în principal cu cod HTML. Puteți include un antet, un subsol, metainformații cu metadatele paginii.

Primul pas ar fi să creați un folder _layouts în directorul rădăcină al proiectului. Apoi creați un fișier pentru fiecare aspect - fișierul ar trebui să aibă un nume descriptiv care să reflecte scopul aspectului. De exemplu, puteți crea un fișier denumit page.htm l pentru a defini aspectul paginii pentru toate paginile de pe site-ul dvs.

Cel mai bine este să definiți structura generală a machetelor dvs. cu HTML sau alt limbaj de marcare.

Puteți include substituenți pentru orice conținut dinamic care va fi inserat în aspect, cum ar fi titlul paginii, conținutul și metadatele. De exemplu, puteți crea un aspect de bază care include un antet, un subsol și o zonă de conținut, astfel:

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

În acest exemplu, substituenții {{ page.title }} și {{ content }} vor fi înlocuiți cu titlul și conținutul real al paginii care se redă.

În acest moment, orice pagină sau postare care utilizează pagina ca valoare de aspect în prima pagină va avea acest aspect. Puteți crea mai multe machete în dosarul _layouts și puteți stila machetele după cum doriți. De asemenea, puteți suprascrie aspectul unei teme definind un aspect cu un nume similar.

Cum funcționează folderul _includes în Jekyll

Dosarul _includes conține fragmente de cod reutilizabile pe care le puteți include în diferite părți ale site-ului dvs. De exemplu, puteți crea un fișier navbar.html în folderul include și îl puteți adăuga la fișierul dvs. de aspect page.html folosind eticheta {% include %} .

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

În timpul construirii, Jekyll va înlocui eticheta cu conținutul navbar.html .

Dosarul _includes poate conține orice tip de fișier, cum ar fi fișiere HTML, Markdown sau Liquid. Scopul principal este să vă păstrați codul DRY (Nu vă repetați) permițându-vă să reutilizați codul pe site-ul dvs.

Buclă prin postări în Jekyll

S-ar putea să doriți să creați o pagină de blog dedicată pentru a păstra toate postările de pe blog, aceasta înseamnă că ați dori să preluați toate postările de pe site-ul dvs. și să le căutați. Cu Jekyll, este ușor de realizat folosind eticheta {% for %} .

Toate postările de pe orice site web Jekyll sunt stocate în variabila site.posts . Puteți parcurge și utiliza variabila lichidă {{ post.title }} pentru a afișa titlul fiecărei postări în acest fel:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

De asemenea, puteți utiliza variabile lichide suplimentare pentru a afișa alte informații despre fiecare postare, cum ar fi data postării sau autorul:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

Observați că în exemplul de mai sus, filtrul de date Liquid formatează data fiecărei postări într-un format mai citit de om.

Acum, aveți o idee despre formatarea de bază care poate fi făcută site-ului dvs. Jekyll. Dar s-ar putea să nu fie nevoie să folosiți toate acestea pentru a construi un site Jekyll de la zero, deoarece puteți oricând să căutați o temă care să corespundă nevoilor dvs. și să o adăugați pe site-ul dvs. Jekyll.

Cum să adăugați o temă pe un site Jekyll

Există diverse teme ușor de adăugat, dar lucrul bun este că pentru fiecare temă, există întotdeauna informații clare despre cum să le instalați în fișierul ReadMe de pe GitHub. Puteți decide să clonați tema sau, dacă este o temă bazată pe pietre prețioase, procesul este mai ușor.

Pentru acest articol, veți instala o temă de blog și o personalizați pentru a avea un site de blog implementat în Kinsta. Aceasta este o temă bazată pe gen și îi puteți accesa codul sursă și instrucțiunile pe GitHub.

Pentru a adăuga o temă bazată pe pietre prețioase, deschideți Gemfile-ul site-ului dvs. și adăugați bijuteria pentru tema pe care doriți să o utilizați. Tema pe care o vom folosi este jekyll-theme-clean-blog . Puteți înlocui tema minima implicită în Gemfile:

 gem "jekyll-theme-clean-blog"

Rulați comanda bundle install în directorul site-ului dvs. pentru a instala bijuteria temei și dependențele acesteia.

În fișierul _config.yml al site-ului dvs., adăugați următoarea linie pentru a specifica tema pe care doriți să o utilizați:

 theme: jekyll-theme-clean-blog

În acest moment, tema dvs. este gata de utilizare.

Veți dori să eliminați toate aspectele din directorul _layouts pentru a evita ca acestea să suprascrie aspectul temei.

Puteți găsi apoi numele de aspect pentru fișierele dvs. în documentația temei. De exemplu, dacă utilizați tema jekyll-theme-clean-blog , numele aspectului pentru fișierul index.html este home , alte pagini este page , iar toate postările sunt post .

În cele din urmă, rulați jekyll serve pentru a construi și a vă servi site-ul folosind noua temă.

Asta este! Site-ul dvs. Jekyll ar trebui să folosească acum noua temă bazată pe pietre prețioase pe care ați adăugat-o. Puteți personaliza în continuare tema modificând aspectul acesteia în directoarele _layouts ale site-ului dvs.

Personalizați o temă Jekyll

Acum ați adăugat tema pe site-ul dvs., următoarea acțiune ar fi să personalizați site-ul pentru a vă satisface nevoile și să lucrați așa cum este intenționat să funcționeze. De exemplu, imaginile pentru fiecare pagină și postare nu sunt afișate, ci afișează un fundal gri.

Puteți remedia acest lucru adăugând o opțiune frontală la fiecare pagină și postați specificând calea către o imagine pe care doriți să o utilizați. În Jekyll, activele, cum ar fi imaginile, sunt stocate în folderul de active . În acest folder, puteți decide să creați subdosare pentru a vă organiza imaginile.

Acum puteți adăuga o opțiune de fundal la blocul de materie din față și o cale către imaginea acestuia. De exemplu, pe pagina despre, acesta este subiectul principal:

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

Faceți acest lucru pentru toate paginile și postările și pagina dvs. va arăta astfel:

O altă personalizare pe care o puteți face este să ajustați opțiunile barei de navigare. De exemplu, este posibil să nu aveți nevoie de o pagină de contact, ceea ce înseamnă că ar trebui să eliminați linkul acesteia din opțiunile barei de navigare. Puteți face acest lucru studiind codul sursă al temei, observând fișierul responsabil pentru legăturile de navigare și replicând fișierul exact în proiectul dvs., eliminând opțiunea de care nu aveți nevoie.

Linkurile de navigare se află în fișierul navbar.html al folderului _includes. Puteți să creați acest fișier, să lipiți codul din codul sursă și să eliminați opțiunea de contact sau să adăugați orice opțiune nouă doriți.

Când salvați proiectul, veți observa că opțiunile de navigare vor fi personalizate:

În cele din urmă, o ultimă personalizare ar fi crearea unei pagini de postări care va conține toate postările de pe blog - ceea ce înseamnă că veți parcurge toate postările de pe această pagină.

Creați un fișier, posts.html și inserați următorul cod:

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

Simțiți-vă liber să ajustați imaginea de fundal pentru a reflecta imaginea salvată. În codul de mai sus, parcurgeți toate postările pentru a afișa toate postările de pe această pagină. Așa va arăta pagina de postări când este salvată.

Cum să adăugați conținut pe un site Jekyll

Acum ați creat un site Jekyll și configurat site-ul pentru a vă satisface nevoile. Ultimul pas ar fi să adăugați conținut sau să aflați cum poate fi adăugat conținut pe un site Jekyll.

Tot conținutul este stocat în folderul _posts. Fiecare conținut este stocat într-un fișier cu o convenție de denumire similară AAAA-LL-ZZ-title.md (sau .html pentru fișierele HTML). De exemplu, dacă doriți să creați o postare numită „Primul meu post”, creați un 2023-03-08-my-first-post.md în directorul _posts .

Apoi, pentru fiecare postare/fișier de conținut, asigurați-vă că adăugați subiecte din față despre postare în partea de sus. Aceasta va include aspectul, titlul, descrierea, data și alte informații.

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

Apoi, puteți adăuga conținutul dvs. sub blocul principal cu etichete HTML sau sintaxă markdown.

Salvați fișierul și Jekyll îl va construi automat și îl va include în site-ul dvs.

Cum să vă implementați site-ul Jekyll pe Kinsta

Kinsta este o platformă cloud care vă permite să găzduiți site-uri web statice, inclusiv Jekyll. Acest lucru se poate face prin configurarea unor configurații, împingând codurile dvs. în GitHub și, în sfârșit, implementând în Kinsta.

Cerințe preliminare: configurarea site-ului dvs. Jekyll

Verificați fișierul dvs. Gemfile.lock și asigurați-vă că include o platformă pentru toate dispozitivele. Pentru a vă asigura că toate platformele sunt configurate corect, executați următoarea comandă:

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

Apoi puteți continua să creați un Procfile - acest fișier specifică comenzile care sunt executate atunci când site-ul dvs. este implementat. Acest fișier actualizează automat comenzile care urmează să fie executate în fila Proces a MyKinsta. Aceasta este comanda care trebuie adăugată la Procfile:

 web: bundle exec jekyll build && ruby -run -e httpd _site

Împingeți site-ul dvs. Jekyll pe GitHub

Pentru acest articol, să folosim comenzile Git pentru a vă trimite codurile în GitHub. Mai întâi, creați un depozit pe GitHub; aceasta vă va oferi acces la adresa URL a depozitului.

Acum puteți inițializa un depozit local Git deschizând terminalul, navigând la directorul care conține proiectul dvs. și rulând următoarea comandă:

 git init

Acum adăugați codul în depozitul local Git folosind următoarea comandă:

 git add

Acum puteți efectua modificările folosind următoarea comandă:

 git commit -m "my first commit"

Notă: puteți înlocui „primul meu commit” cu un scurt mesaj care descrie modificările dvs.

În cele din urmă, împingeți codul în GitHub folosind următoarele comenzi:

 git remote add origin [repository URL] git push -u origin master

Notă: Asigurați-vă că înlocuiți „[adresa URL a depozitului]” cu propria adresă URL a depozitului GitHub.

După ce ați finalizat acești pași, codul dvs. va fi trimis în GitHub și va fi accesibil prin adresa URL a depozitului dvs. Acum puteți implementa în Kinsta!

Implementarea site-ului dvs. Jekyll în Kinsta

Implementarea în Kinsta are loc în doar câteva minute. Începeți de la tabloul de bord My Kinsta pentru a vă conecta sau pentru a vă crea contul. Apoi, veți autoriza Kinsta pe GitHub.

Apoi puteți urma acești pași pentru a vă implementa site-ul Jekyll:

1. Faceți clic pe Aplicații în bara laterală din stânga
2. Faceți clic pe Adăugați serviciu
3. Faceți clic pe Aplicație din meniul drop-down

Va apărea un modal prin care puteți selecta depozitul pe care doriți să îl implementați. Selectați o ramură pe care doriți să o implementați dacă aveți mai multe ramuri în depozit.

Apoi, puteți atribui un nume acestei aplicații. Selectați o locație de centru de date dintre cele 25 disponibile, iar apoi Procfile va furniza automat comanda procesului web.

Aplicația dvs. va începe implementarea. În câteva minute, va fi furnizat un link pentru a accesa versiunea implementată a site-ului dvs. web. În acest caz, este: https://myblog-84b54.kinsta.app/

rezumat

Până acum, ați aflat cum funcționează Jekyll și diferitele personalizări pe care le puteți face cu Jekyll. Acum este sigur să fim de acord că Jekyll este un instrument excelent pentru crearea de site-uri web statice datorită simplității, flexibilității și caracteristicilor sale puternice.

Sistemul intuitiv de șabloane Jekyll, șabloanele lichide și suportul încorporat pentru markdown și alte limbaje de marcare facilitează crearea și gestionarea rapidă a site-urilor bogate în conținut.

Simțiți-vă liber să găzduiți gratuit toate site-urile dvs. web statice cu găzduirea aplicațiilor Kinsta și, dacă vă place, optați pentru planul nostru Hobby Tier, începând de la 7 USD/lună .

Ce părere aveți despre Jekyll? Ai folosit Jekyll pentru a construi ceva? Vă rugăm să nu ezitați să ne împărtășiți proiectele și experiențele dvs. în secțiunea de comentarii de mai jos.