Créez votre blog de développeur gratuit en utilisant Hugo et Firebase

Dans ce didacticiel, je vais vous montrer comment créer votre propre blog en utilisant Hugo et le déployer gratuitement sur Firebase. Hugo est un générateur de sites statiques open source et Firebase est une plate-forme Google qui propose des ressources et des services utilisés pour augmenter le développement Web et mobile. Si vous êtes un développeur qui n'a pas encore de blog mais qui souhaite en héberger un, cet article vous aidera à en créer un. Pour suivre ces étapes, vous devez savoir comment utiliser Git et votre terminal.

Avoir votre propre blog technique peut avoir des tonnes d'avantages pour votre carrière de développeur. D'une part, bloguer sur des sujets techniques vous fait apprendre des choses que vous n'auriez peut-être pas autrement retenues lors de votre travail de développeur principal. En recherchant vos pièces ou en essayant de nouvelles choses, vous finissez par apprendre toute une série de choses comme comment travailler avec de nouvelles technologies et résoudre des problèmes de cas particuliers. En plus de cela, vous pouvez pratiquer des compétences générales comme la communication et faire face aux critiques et aux commentaires lorsque vous vous engagez avec les commentaires de votre lecteur.

De plus, vous devenez plus sûr de vous dans vos compétences en développement de logiciels parce que vous pouvez écrire tellement code lors de la création d'exemples de projets pour votre blog pour illustrer les concepts. Un blog technique augmente votre marque en tant que développeur, car il vous offre une plate-forme pour mettre en valeur vos compétences et votre expertise. Cela vous ouvre à toutes sortes d'opportunités comme des emplois, des conférences et des conférences, des offres de livres, des activités parallèles, des relations avec d'autres développeurs, etc.

Lecture recommandée sur SmashingMag:

Chris Sevilleja, pour exemple, a commencé à écrire des tutoriels en 2014 sur son blog scotch.io qui est devenu une entreprise qui a rejoint plus tard Digital Ocean . Un autre avantage important d'avoir un blog technique est qu'il fait de vous un meilleur écrivain, ce qui peut être un atout dans votre travail lors de la rédaction de documents de conception de logiciels et de spécifications techniques. De plus, cela fait de vous un enseignant et un mentor exceptionnel. Par exemple, je lis souvent research.swtch.com un blog de Russ Cox qui blogue sur la langue Go et travaille également sur l'équipe Google Go qui la construit. J'en ai appris énormément sur le fonctionnement de la langue que je n'aurais peut-être pas repris dans mon travail principal.

Un autre grand blog que j'aime aussi lire et apprendre est welearncode.com par Ali Spittel qui a écrit une fois que une très grande partie du blogging est:

"Aider les autres à apprendre à coder et à le rendre plus facile pour les gens qui me suivent."

Un assez Un moyen simple et indolore de mettre en place votre blog et de le faire fonctionner consiste à utiliser une plate-forme tierce comme Medium où vous n'avez qu'à créer un compte pour obtenir un blog. Bien que ces plates-formes puissent répondre à la plupart des besoins de blogs au début, elles présentent certains inconvénients à long terme.

Certaines plates-formes offrent de mauvaises expériences utilisateur, comme l'envoi constant de notifications distrayantes pour des choses triviales, la demande d'installation d'applications, etc. Si votre lecteur a une mauvaise expérience sur une plate-forme où votre blog est hébergé, il est moins susceptible de s'engager avec votre contenu. En outre, les outils dont vous pourriez avoir besoin pour améliorer l'interaction de votre lecteur avec le temps sur votre blog peuvent ne pas être pris en charge. Des éléments tels que les flux RSS, la coloration syntaxique pour les extraits de code, entre autres, peuvent ne pas être pris en charge sur la plate-forme. Dans le pire des cas, la plateforme sur laquelle votre blog est hébergé peut se fermer et vous risquez de perdre tout le travail que vous avez fait.

L'hébergement de votre propre blog et la redirection de vos utilisateurs vers celui-ci augmentent les chances qu'ils soient plus engagés. avec les messages que vous publiez. Vous n'aurez pas à rivaliser pour attirer l'attention de votre lecteur avec d'autres écrivains sur une plate-forme, car vous serez le seul sur celle-ci. Les lecteurs sont susceptibles de lire plus de vos messages ou de vous inscrire à votre newsletter, car ils sont plus concentrés sur ce que vous communiquez. Un autre avantage de l'hébergement de votre propre blog est la possibilité de le personnaliser d'une multitude de façons selon vos goûts, ce qui n'est généralement pas possible avec les plates-formes tierces.

Configuration de Hugo

Si vous travaillez sur macOS ou Linux, la façon la plus simple d'installer Hugo est d'utiliser Homebrew . Tout ce dont vous aurez besoin pour exécuter sur votre terminal est:

 brew install hugo

Si vous utilisez Windows, Hugo peut être installé à l'aide du programme d'installation de scoop ou du gestionnaire de packages chocolatey . Pour scoop:

 scoop install hugo

Pour le chocolaté:

 choco install hugo -confirm

Si aucune de ces options ne vous concerne, consultez ces options d'installation .

Configuration des outils Firebase

Pour installer les outils Firebase, vous devez avoir Node.js installé pour accéder à npm . Pour installer les outils Firebase, exécutez:

 npm install -g firebase-tools

Créez gratuitement un compte Firebase sur ce lien . Vous aurez besoin d'un compte Google pour cela. Ensuite, connectez-vous à l'aide des outils Firebase. Vous serez redirigé vers un onglet du navigateur où vous pourrez vous connecter à l'aide de votre compte Google.

 connexion à firebase

Créez votre blog

Choisissez un répertoire dans lequel vous souhaitez que le code source de votre blog réside. Modifiez l'emplacement dans ce répertoire sur votre terminal. Choisissez un nom pour votre blog. Pour les besoins de ce didacticiel, appelons le blog sm-blog .

 hugo new site sm-blog

Il est conseillé de sauvegarder le code source de votre site en cas de problème. Je vais utiliser Github pour cela, mais vous pouvez utiliser n'importe quel service de contrôle de version – si vous choisissez de faire de même. Je vais initialiser un référentiel.

 cd sm-blog
git init

Avant de pouvoir exécuter le site localement et de le visualiser sur le navigateur, nous devons ajouter un thème, sinon tout ce que vous verrez est une page vierge.

Choisir et installer un thème pour votre blog

One ce que j'aime chez Hugo, c'est la communauté derrière et tous les développeurs qui soumettent des thèmes à la communauté. Il existe un large éventail de thèmes parmi lesquels choisir, des sites Web aux petites entreprises, des portefeuilles aux blogs. Pour choisir un thème de blog, rendez-vous dans la section du blog de themes.gohugo.io. J'ai choisi un thème appelé Cactus Plus en raison de sa simplicité et de son minimalisme. Pour installer ce thème, je dois l'ajouter en tant que sous-module de mon référentiel. De nombreux thèmes demandent à ses utilisateurs d'utiliser des sous-modules pour les installations, mais si ce n'est pas le cas, il suffit de suivre les instructions données par le créateur de thème fourni dans la description. J'ajouterai le thème au dossier / themes .

 git submodule -b master add https://github.com/nodejh/hugo-theme-cactus-plus.git theme / hugo- thème-cactus-plus

A la racine du dossier du blog, il existe un fichier généré, config.toml . C'est là que vous spécifiez les paramètres de votre site. Nous devons changer le thème là-bas. Le nom du thème correspond au nom du dossier du thème choisi dans le dossier / themes . Voici le contenu du fichier config.toml maintenant. Vous pouvez également modifier le titre du blog.

 baseURL = "http://example.org/"
languageCode = "en-us"
title = "Blog SM"
theme = "hugo-theme-cactus-plus"

Maintenant, nous pouvons exécuter le blog. Il ressemblera exactement au thème, à l'exception du changement de nom. Une fois le serveur exécuté, rendez-vous sur http: // localhost: 1313 sur votre navigateur.

 hugo server -D

Personnalisation de votre blog

L'un des avantages du déploiement de votre propre blog consiste à le personnaliser à votre guise de toutes sortes de façons. La principale façon de le faire avec Hugo est de changer le thème que vous avez sélectionné. De nombreux thèmes offrent des options de personnalisation via le config.toml . Le créateur de thème fournit généralement une liste d'options et ce qu'elles signifient toutes dans la description de la page de thème. Si ce n'est pas le cas, consultez le dossier / exampleSite du thème et copiez le contenu de config.toml dans ce dossier dans votre fichier config.toml . Par exemple:

 thèmes cp / hugo-theme-cactus-plus / exampleSite / config.toml.

Étant donné que tous les thèmes sont différents, les modifications que je fais ici peuvent ne pas s'appliquer à votre thème, mais j'espère que vous pourrez avoir une idée de ce qu'il faut faire avec votre blog.

1. Je vais changer l'image de l'avatar et le favicon du blog. Tous les fichiers statiques, y compris les images, doivent être ajoutés au dossier / static . J'ai créé un dossier / images dans statique et y ai ajouté les images.
2. J'ajouterai Google Analytics pour pouvoir suivre le trafic vers mon blog.
3. Je ' ll permettra Disqus afin que mes lecteurs puissent laisser des commentaires sur mes messages.
4. J'activerai RSS.
5. Je mettrai mes liens sociaux vers Twitter et Github.
6. J'activerai la carte Twitter. [19659047] J'activerai les résumés sous les titres des articles sur la page d'accueil.

Donc mon config.toml ressemblera à ceci:

 ### Paramètres du site
baseurl = "your_firebase_address"
languageCode = "en"
title = "Blog SM"
theme = "hugo-theme-cactus-plus"
googleAnalytics = "your_google_analytics_id"

[params]
    # Mon information
    author = "Cat Lense"
    description = "blog sur les chats"
    bio = "photographe chat"
    twitter = "chats"
    copyright = "Photographe de chat"

    # Outils
    enableRSS = true
    enableDisqus = true
    disqusShortname = "your_disqus_short_name"
    enableSummary = true
    enableGoogleAnalytics = true
    enableTwitterCard = true

[social]
    twitter = "https://twitter.com/cats"
    github = "https://github.com/cats"

Création de votre premier message

Les messages de Hugo sont écrits en démarque. Vous devrez donc vous familiariser avec celui-ci. Lorsque vous créez un article, vous créez en fait un fichier de démarque que Hugo rendra ensuite en HTML. Prenez le titre de votre message, faites-le en minuscules, remplacez les espaces par des tirets. Ce sera le nom de votre message. Hugo prend le nom du fichier, remplace les tirets par des espaces, le transforme pour commencer la casse, puis le définit comme titre. Je vais nommer mon fichier my-first-post.md . Pour créer votre premier message, exécutez:

 hugo new posts / my-first-post.md

Le message est créé dans le dossier / content . Voici le contenu du dossier.

 ---
titre: "Mon premier message"
date: 2020-03-18T15: 59: 53 + 03: 00
brouillon: vrai
---

Un article contient des informations préliminaires qui sont les métadonnées qui décrivent votre article. Si vous souhaitez conserver vos articles en tant que brouillons pendant que vous les rédigez, laissez draft: true . Une fois que vous avez fini d'écrire, changez brouillon: false pour que les articles puissent être affichés sur la page d'accueil. J'ajouterai une ligne récapitulative à la première page pour résumer le message sur la page d'accueil.

Ajout de ressources à votre message

Pour ajouter des ressources à vos messages comme des images, des vidéos, des fichiers audio, etc. créer un dossier dans le dossier / content / posts avec le même nom que votre publication à l'exclusion de l'extension.

Par exemple, je créerais ce dossier:

 mkdir content / posts / my-first-post

Ensuite, j'ajouterais toutes mes ressources de publication à ce dossier et je créerais un lien vers les ressources uniquement par nom de fichier sans avoir à spécifier une URL longue. Par exemple, j'ajouterais une image comme celle-ci:

! [A cute cat] (cute-cat.png)

Hébergement du code source de votre blog

Une fois que vous avez terminé d'écrire votre premier message, il est important de le sauvegarder avant de le déployer. Avant cela, assurez-vous d'avoir un fichier .gitignore et ajoutez-y le dossier / public . Le dossier public doit être ignoré car il peut être généré à nouveau.

Créez un référentiel sur Github pour héberger le code source de votre blog. Définissez ensuite le référentiel distant localement.

 git remote add origin [remote repository URL]

Enfin, mettez en scène et validez toutes vos modifications, puis transférez-les dans le référentiel distant.

 git add *
git commit -m "Ajouter mon premier message"
git push origin master

Déploiement de votre blog sur Firebase

Avant de pouvoir déployer votre blog sur Firebase, vous devez créer un projet sur Firebase. Rendez-vous sur la console Firebase . Cliquez sur Ajouter un projet.

Saisissez le nom de votre projet.

Activez Google Analytics si vous souhaitez l'utiliser dans votre blog.

Une fois que vous avez terminé de créer le projet, revenez à la racine de votre blog et initialisez un projet Firebase dans le blog.

 init Firebase

Vous serez invité à saisir des informations lors de l'exécution de cette commande.

Ensuite, nous allons construire le blog. Un dossier / public sera créé et contiendra votre blog généré.

 hugo

Après cela, tout ce que nous avons à faire est de déployer le blog.

 firebase deploy

Maintenant, le blog est déployé. Vérifiez-le à l'URL d'hébergement fournie dans la sortie.

Étapes suivantes

Le seul inconvénient de l'hébergement sur Firebase est l'URL qu'il utilise pour votre projet hébergé. Cela peut être inesthétique et difficile à retenir. Je vous conseille donc d'acheter un domaine et de le configurer pour votre blog.

Les plates-formes tierces ne sont pas toutes mauvaises. Ils ont des tonnes de lecteurs qui pourraient être intéressés par votre écriture mais qui n’ont pas encore trouvé votre blog. Vous pouvez effectuer une publication croisée sur ces sites pour mettre votre travail devant un large public, mais n'oubliez pas de créer un lien vers votre propre blog. Ajoutez le lien vers votre article sur votre blog sur la plate-forme sur laquelle vous publiez en tant qu'URL canonique afin qu'il ne soit pas considéré comme du contenu en double par un moteur de recherche et nuise au référencement de votre site. Des sites comme Medium dev.to et Hashnode prennent en charge les URL canoniques.

Conclusion

L'écriture sur votre propre blog technique peut avoir d'énormes avantages pour votre carrière en tant que développeur de logiciels et vous aider à cultiver vos compétences et votre expertise. J'espère que ce didacticiel vous a lancé dans ce voyage ou au moins vous a encouragé à créer votre propre blog.

(ra, il)