Comment démarrer un blog avec Hugo

Un tutoriel détaillé pour démarrer un nouveau blog en utilisant Hugo de zéro au déploiement

Hugo est un excellent outil pour créer un blog.

J'utilise moi-même Hugo dans ce blog, depuis plus de 2 ans. J'ai quelques raisons d'aimer utiliser Hugo.

Il estFacile,ennuyeux,souple,vite.

La raison principale est que c'estFacile. Il n'y a pas grand-chose à apprendre pour commencer.

Vous écrivez du contenu dans Markdown, un format qui me permet d'utiliser mon éditeur préféré (Bear) pour écrire des articles.

Hugo estennuyeux. Ne vous méprenez pas, c'est une chose très positive. En tant que développeur, je suis tenté de peaufiner les choses ici et là tout le temps. Il n'y a pas de technologie sophistiquée sous-jacente à Hugo. Il est construit avec Go, l'un des langages que j'aime le plus, mais cela ne veut pas dire que je veux me plonger dans les rouages d'Hugo et changer son fonctionnement.

Et il ne fait apparaître aucun truc cool ou de nouvelle génération comme de nombreux frameworks JavaScript ont tendance à le faire.

C'est donc ennuyeux, ce qui me laisse beaucoup de temps pour faire ce qui est vraiment utile lorsque je travaille sur un blog:rédaction de contenu. Je me concentre sur le contenu, pas sur le conteneur de contenu.

Cela dit, Hugo est vraiment sacrémentsouple. J'ai commencé mon propre blog avec un thème open source, puis je l'ai complètement changé au fil du temps. Parfois, je veux faire des choses sur mon site Web qui sortent du cadre d'un simple blog, et Hugo me permet de créer ces choses.

Enfin, une autre raison pour laquelle j'aime Hugo est que c'estvite. Pourquoi? Premièrement, il a Go au cœur, qui est connu pour être un langage très rapide. Et dans l'écosystème Go, il n'y a pas de concept de dépendances de 100 mégaoctets. Les choses sont faites pour être aussi rapides que possible. De plus, Hugo n'a pas besoin de faire certaines des choses sophistiquées nécessaires lors de l'utilisation d'une technologie sophistiquée. C'est un sous-produit d'être ennuyeux.

Bref, assez de mots.

Hugo est incroyable, surtout si vous êtes développeur et que vous êtes prêt à écrire en Markdown. Les non-techniciens pourraient tout simplement refuser d'utiliser Markdown, et c'est parfaitement compréhensible.

De plus, vous devez être préparé à un flux de travail centré sur Git pour que les choses cliquent vraiment.

Ce que vous faites, c'est que vous rédigez un article à l'aide de Markdown, puis que vous validez vos modifications dans un référentiel Git, le plus souvent sur GitHub, et une technologie glue déploie les modifications sur le serveur qui héberge le site.

Hébergement d'un site Web Hugo

Un blog Hugo est complètementstatique. Cela signifie que vous n'avez pas besoin d'héberger votre propre serveur ou d'utiliser un service spécial pour celui-ci.

Les pages Netlify, Now et GitHub sont 3 excellents endroits où vous pouvez héberger gratuitement un blog Hugo.

Le seul coût est celui que vous devez supporter pour le nom de domaine. Je ne peux pas insister davantage sur l'importance d'avoir votre propre nom de domaine. Non.github.ioou.netlify.comou.now.shsites, s'il vous plaît.

Mes propres sites Hugo sont hébergés sur Netlify.

Choisissez un domaine

Mettez votre blog sous votre propre domaine. Choisissez-en un. Utilisez votre propre nom. Et utilise.comou.blog. N'essayez pas d'être intelligent en utilisant un domaine localisé, n'utilisez pas.io..comdonne juste une meilleure impression et il est réutilisable pour tous vos futurs projets, pas seulement pour héberger votre blog. J'ai choisi ça.

Oh et si vous avez un ancien domaine qui traîne, utilisez-le. Pourquoi? Plus votre domaine est ancien, mieux c'est.

Remarque sur les sous-domaines: chaque sous-domaine, pour Google, est un site Web différent. Donc, si votre domaine estflaviocopes.com, et vous créez votre blog enblog.flaviocopes.com, alors c'est un tout nouveau site Web pour Google, et il aura son propre classement distinct du domaine principal.

Ma suggestion est d'éviter complètement les sous-domaines.

Installez Hugo

Pour installer Hugo sur macOS, à partir de votre terminal, exécutez

brew install hugo

Lebrewcommande n'existe pas sur votre Mac? Vérifier laGuide de l'homebrew

Pour Windows et Linux, vérifiez leguide d'installation officiel.

Créer un site Hugo

Une fois Hugo installé, vous pouvez créer un site Hugo en exécutant

hugo new site myblog

Je suggère d'exécuter ceci dans unwwwdossier dans votre répertoire personnel, car la commande créera un nouveaumyblogdossier dans lequel vous l'exécutez.

Choisissez un thème

Maintenant, avant de pouvoir commencer, vous devez choisir un thème. Je souhaite qu'Hugo inclue un thème par défaut pour rendre les choses simples, mais ce n'est pas le cas.

Il y a beaucoup de choix surhttps://themes.gohugo.io. Ma recommandation personnelle est de commencer parhttps://themes.gohugo.io/ghostwriter/et ajustez-le plus tard.

Je recommande également d'éviter legit cloneworkflow qu'ils suggèrent sur cette page, car vous allez sûrement peaufiner le thème à l'avenir, et je trouve préférable d'avoir un référentiel unique pour le contenu et le thème. Cela simplifie le déploiement.

Alors, allez àhttps://github.com/jbub/ghostwriter/archive/master.zippour télécharger la version actuelle du thème.

Déballez-le ensuite dans lethemes/ghostwriterdossier dans votre nouveau site Web Hugo:

Remarquez qu'il y a unexampleSitedossier dans lethemes/ghostwriter. Ouvrez-le et ouvrez soncontentsous-dossier. Là-dedans, vous pouvez voir lepage,postetprojectsous-dossiers.

Copiepageetpostdans lecontentdossier du site:

La configuration

Les exemples de données fournissent également un échantillonconfig.tomldéposer dansthemes/ghostwriter/exampleSite/config.toml. Il s'agit du fichier de configuration Hugo, qui indique à Hugo certains détails de la configuration sans que vous ayez à coder en dur les informations dans le thème.

Je vous recommande de ne pas copier cela, car il a trop de choses, et utilisez plutôt ceci:

baseurl = "/"
title = "My blog"
theme = "ghostwriter"

[Params] mainSections = [“post”] intro = true headline = “My headline” description = “My description” github = https://github.com/XXX twitter = https://twitter.com/XXX email = [email protected] opengraph = true shareTwitter = true dateFormat = “Mon, Jan 2, 2006”

[Permalinks] post = “/:filename/”

Vous pouvez personnaliser librement les informations de ce fichier ultérieurement.

Maintenant, à partir de la ligne de commande, exécutez:

hugo serve

Ouverthttp://localhost:1313dans votre navigateur, et vous devriez pouvoir voir le site en direct!

Ceci est la page d'accueil du site.

Il existe une liste de publications tirée ducontent/postdossier de votre site Web:

Cliquez sur le premier, intitulé "Créer un nouveau thème":

Vous pouvez ouvrir le fichiercontent/post/creating-a-new-theme.mdpour changer quoi que ce soit dans le post.

Si vous enregistrez, le site Web se mettra automatiquement à jour avec le nouveau contenu.

C'est assez génial, non?

Vous pouvez créer un nouveau message en créant un nouveau.mdfichier, en le préfixant avec tout ce que vous voulez. Vous pouvez utiliser des nombres incrémentiels, si vous préférez. Ou utilisez une date.

Si quelque chose ne vous ressemble pas, vous pouvez ouvrir lethemes/ghostwriter/layoutsdossier et peaufinez-le.

Le modèle «post» est défini dansthemes/ghostwriter/layouts/post/single.html:

Hugo utilise des modèles Go. La syntaxe peut être assez peu familière, mais le site Web de Hugo fait un très bon travail pour les expliquer dans cePrésentation des modèles Go.

Cependant, essayez de ne pas personnaliser votre modèle maintenant.

Si vous souhaitez modifier les couleurs, ajoutez un<style>balise avec du CSS dans lethemes/ghostwriter/layouts/partials/header.html.

Par exemple, rendez les liens noirs:

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

Concentrez-vous plutôt sur le contenu.

Supprimez les fichiers existants et écrivez 2-3 articles pour commencer.

Il est trop facile de se laisser piéger dans la fabrication des choses parfaitement comme vous le souhaitez, mais l'important est le contenu.

Et plus votre site est propre, mieux c'est pour vos lecteurs.

Permettez-moi maintenant d'écrire un peu sur le déploiement.

Déployer le site Hugo sur Netlify

Je veux montrer comment déployer un site Hugo dans 2 des services que j'apprécie le plus: Netlify et Now.

Tout d'abord, je vais créer un référentiel GitHub pour héberger le site.

J'ouvre GitHub Desktop, une application que j'utilise tous les jours et qui fait partie de mon flux de travail. C'est le moyen le plus simple d'utiliser Git.

Dans le menu Fichier, j'ai appuyé sur l'option "Nouveau référentiel":

Le même écran peut être généré en faisant simplement glisser lemyblogdossier dans l'application.

J'ai donné lemyblognom du référentiel et choisi le chemin correct pour le référentiel.

Le processus effectue automatiquement le premier commit:

Maintenant, nous pouvons cliquer sur le bouton "Publier le référentiel" pour pousser le dépôt vers GitHub:

Vous pouvez bien sûr garder le dépôt privé.

Une fois le dépôt dans GitHub:

nous pouvons passer à Netlify.

Depuis mon tableau de bord Netlify, j'ai appuyé sur le bouton "Nouveau site de Git":

Pressé GitHub, autorisé Netlify à accéder à mes référentiels privés, puis j'ai choisi le référentiel que je viens de créer:

Netlify l'a automatiquement identifié comme un dépôt Hugo et a entré automatiquement la commande de construction:

Cliquez sur «Déployer le site» pour démarrer le processus de déploiement:

Sur un vrai site, je mettrais en place un domaine personnalisé. Netlify a la possibilité d'acheter un domaine à travers eux, et c'est un processus très (TRÈS) simple. Je le recommande fortement. Le site peut être mis en ligne en quelques minutes seulement après l'achat du domaine.

Un hasard.netlify.comle sous-domaine est attaché au site, dans ce caspedantic-engelbart-500c9a.netlify.comet HTTPS est automatiquement activé.

On peut donc voir immédiatement le site en direct:

Maintenant, si vous essayez de modifier quelque chose dans votre version locale, il vous suffit de pousser les modifications sur GitHub, et Netlify mettra automatiquement à jour le site. Vous pouvez le voir construire le site dans le panneau "Vue d'ensemble" du site:

Pour en savoir plus sur Netlify, je vous recommande de consulter monTutoriel Netlify.

Déployez le site Hugo sur Zeit Now

Zeit s'appelle maintenantVercel, et ce didacticiel est peut-être obsolète

Une autre plate-forme géniale que vous pouvez utiliser pour votre blog Hugo est Zeit Now.

Une fois inscrit, à partir du tableau de bord, appuyez sur le boutonNouveau projetbouton.

La première fois que vous déployez depuis GitHub, vous devez d'abord installer l'application GitHub en cliquant sur «Installer maintenant pour GitHub»:

Cela vous amène à la page GitHub de l'application, où vous pouvez l'autoriser pour tous vos dépôts, ou juste pour certains:

Une fois de retour, cliquez sur le bouton "Nouveau projet depuis GitHub":

Sélectionnez le projet et cliquez sur «Importer»:

En attendant, allez dans le dossier principal demysiteet ajoutez unpackage.jsonfichier avec ce contenu:

{
  "scripts": {
    "build": "hugo"
  }
}

Cela indique maintenant comment déployer le site.

Lorsque vous revenez au tableau de bord, le nouveau déploiement devrait bientôt démarrer et vous verrez le site fonctionner en direct:

Notez que dans Now, vous avez 3 URL que vous pouvez utiliser pour accéder au site:

  • myblog.flaviocopes.now.sh
  • myblog-alpha-swart.now.sh
  • myblog-git-master.flaviocopes.now.sh

Vous pouvez choisir celui que vous préférez.

De plus, chaque déploiement a également sa propre URL. Dans ce cas, j'avaismyblog-h8xks5jhn.now.shmais cela change à chaque déploiement.

Et bien sûr, vous pouvez également ajouter votre domaine. Zeit a un excellent service pour acheter votre domaine directement auprès d'eux, disponible àhttps://zeit.co/domains.

Et si vous préférez travailler avec la ligne de commande, lenowLa commande vous permet également d'acheter des domaines à partir de là.

Je vous recommande fortement de vérifier monTutoriel Zeit Now.


Plus de tutoriels de laboratoire: