[RUBY] Jekyll Super Introduction # 1 à partir de 0 - Construction de l'environnement

Cet article est le premier article de Jekyll Super Primer à partir de 0.

• 1 Construction de l'environnement <-Cette fois

• # 2 Création du thème original

introduction

Que faire dans cette série

1. Créons un site avec Jekyll pour le moment
2. Créez votre propre modèle
3. Déployez le site terminé pour netlify et publiez-le

Cible

--Les personnes qui souhaitent créer un site avec Jekyll à partir de 0 avec leur propre design

Connaissances préalables

--Je comprends en quelque sorte HTML et CSS --Je sais que JavaScript existe aussi --Comprendre comment rédiger une démarque --Je sais ce que fait le générateur de site statique

• Vous pouvez utiliser git ――Vous pouvez en quelque sorte fonctionner avec CUI

Il est nécessaire d'installer Ruby, mais puisque nous ne pensons pas que cette série inclura la création de plug-ins etc. Vous n'avez pas besoin de savoir / savoir ce que Ruby va faire pour le moment.

Environnement requis pour exécuter Jekyll (obligatoire)

Je ne pense pas que ce soit si difficile de créer un environnement, donc je ne vais pas l'expliquer ici.

--Ruby v2.5.0 et supérieur: Vous pouvez vérifier avec ruby -v. --RubyGems: Vous pouvez le vérifier avec gem -v. --GCC et make: Vous pouvez vérifier avec gcc -v / g ++ -v et make -v.

De la documentation officielle de Jekyll. https://jekyllrb.com/docs/installation/#requirements

Essayez de créer un projet

La première étape consiste à créer un projet. Essayez de créer un dossier pour votre projet dans un emplacement approprié. Ci-dessous, le dossier du projet est lu avec les mots appropriés tels que «racine du projet» ou «dans le répertoire racine de travail», mais veuillez tout lire.

Installation des bibliothèques requises

J'utilise un outil appelé bundler. Cela facilite la gestion des gemmes par projet. Exécutez ce qui suit dans votre répertoire racine de travail:

$ gem install bundler
$ bundle init

Si un fichier appelé Gemfile est généré, il réussit. Modifiez ensuite le Gemfile comme suit:

Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "jekyll"

Si vous le pouvez, procédez comme suit:

$ bundle config set path 'vendor/bundle'
$ bundle install

Je pense qu'il y aura plus de fichiers dans vendeur / bundle, alors gardez un œil dessus. (Ça prend beaucoup de temps) Lorsque vous avez terminé, procédez comme suit:

$ bundle exec jekyll -v

S'il renvoie comme suit, il réussit.

jekyll x.x.x

Créer un projet Jekyll

Créez un projet Jekyll. Exécutez la commande suivante.

$ bundle exec jekyll new . --force
$ bundle install

Je l'ai un peu omis, mais je pense que cela ressemblera à ceci.

./
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2020-05-19-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown

Ceci termine la création du projet. Essayons-le. Exécutez la commande suivante.

$ bundle exec jekyll s
...Omission
...
 Auto-regeneration: enabled for '<path-to-project-folder>'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Si cela ressemble à ceci, vous réussissez. Essayons d'accéder à http: // localhost: 4000 /. Par défaut, les minima du thème sont appliqués, vous devriez donc déjà avoir une page solide générée.

À propos, jekyll est un générateur de site statique, donc lorsque vous l'exécutez, le code source du site statique sera craché. Si vous regardez / _site, vous pouvez voir le code source du site spit.

Essayez d'ajouter Jekyll Admin

Jekyll vous permet de gérer vos articles à l'aide d'un écran d'administration de type CMS en utilisant un plugin (outil) appelé Jekyll Admin. Cela fonctionne sans lui, mais c'est relativement facile à comprendre, alors introduisons-le.

Modifiez le fichier gem.

Gemfile

source "https://rubygems.org"

gem "jekyll", "~> 4.0.1"

# ..Abréviation..

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-admin" # <-ajouter à
end

# ..Abréviation..

gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?

Si vous avez modifié le Gemfile, vous pouvez l'installer en exécutant la commande suivante.

$ bundle install

Essayez à nouveau de l'exécuter une fois que vous avez terminé.

$ bundle exec jekyll s

Accédons à http: // localhost: 4000 / admin.

Si vous voyez un écran comme celui-ci, vous avez réussi.

• Soyez assuré que vous ne pouvez accéder à cet écran que lorsque vous démarrez le serveur en faisant jekyll s dans l'environnement local.

Si vous regardez l'écran de publication à partir de l'onglet à côté, vous pouvez voir les articles.

Essayez d'ajouter un article

Ajoutons un article comme essai. Dans Jekyll, vous pouvez ajouter des articles en ajoutant un fichier md sous le répertoire / _posts, mais vous pouvez également ajouter des articles depuis Jekyll Admin.

Jekyll Admin créera également automatiquement un fichier dans / _ppsts à la fin, donc ce que vous faites est en fait la même chose, mais comme il configurera et nommera automatiquement le fichier, utilisez d'abord Jekyll Admin. Il vaut peut-être mieux le faire.

Cette fois, je vais l'ajouter via Jekyll Admin. Vous pouvez ajouter une nouvelle page en ouvrant la page des messages à partir de l'onglet à côté de Jekyll Admin et en appuyant sur Nouveaux messages.

Entrez un titre dans le titre et écrivez le contenu de l'article dans Body. Jekyll est essentiellement écrit en notation markdown. Il existe de nombreux articles sur le démarquage, je ne vais donc pas l'expliquer ici. C'est comme ça.

Enfin, lorsque vous avez terminé, cliquez sur "Nouveau champ de métadonnées" et saisissez ** layout ** dans la clé, Sélectionnez «publier».

Cela signifie utiliser la mise en page de publication du thème automatiquement installé (minima). J'expliquerai les détails plus tard, donc c'est normal d'avoir un léger sentiment ici que c'est un mot magique (un mot de tromperie classique).

Lorsque vous avez terminé, cliquez sur Créer. Vous verrez un bouton appelé Afficher, et si vous cliquez dessus, vous verrez que l'article a été ajouté avec succès.

Il a également été ajouté à l'article de la page supérieure.

Pour le moment, j'ai pu construire l'environnement et créer le projet, donc je pense faire le tour ici cette fois. Pour le moment, j'utilise toujours le thème standard appelé minima, Je veux le concevoir comme j'aime! Je pense qu'il y a beaucoup de gens qui disent cela.

De nombreux thèmes sont publiés sur GitHub etc., c'est donc une bonne idée de trouver celui que vous aimez. Cependant, je dois le faire moi-même! Je pense qu'il y a aussi un endroit comme ça.

La prochaine fois, je vous expliquerai comment créer vous-même un article. (Je ferai de mon mieux pour écrire!

À la prochaine!