Πώς να δημιουργήσετε το πρώτο σας ιστολόγιο Hugo: ένας πρακτικός οδηγός

Το Hugo είναι ένα εξαιρετικό εργαλείο για χρήση εάν θέλετε να ξεκινήσετε ένα blog.

Χρησιμοποιώ τον ίδιο τον Hugo για το blog μου, το flaviocopes.com και το χρησιμοποιώ για περισσότερα από δύο χρόνια. Έχω μερικούς λόγους για την αγάπη του Hugo.

Πρώτα απ 'όλα, είναι απλό , βαρετό , ευέλικτο και γρήγορο .

Ο κύριος λόγος είναι ότι είναι απλό . Δεν πρέπει να μάθετε πολλά για να ξεκινήσετε.

Γράφετε περιεχόμενο στο Markdown, μια μορφή που μου επιτρέπει να χρησιμοποιώ τον αγαπημένο μου επεξεργαστή (Bear) για να γράφω αναρτήσεις.

Ο Ούγκο είναι βαρετός . Μην με παρεξηγείτε, αυτό είναι πολύ θετικό. Ως προγραμματιστής είμαι στον πειρασμό να τροποποιώ τα πράγματα εδώ και εκεί όλη την ώρα. Δεν υπάρχει φανταστική τεχνολογία που να διέπει τον Hugo Είναι χτισμένο χρησιμοποιώντας το Go, μία από τις γλώσσες που μου αρέσουν περισσότερο, αλλά αυτό δεν σημαίνει ότι θέλω να βουτήξω στα εσωτερικά του Hugo και να αλλάξω πώς λειτουργεί.

Και δεν εμφανίζει ενδιαφέροντα πράγματα επόμενης γενιάς, όπως τείνουν να κάνουν πολλά πλαίσια JavaScript.

Ως εκ τούτου, είναι βαρετό, που μου δίνει πολύ χρόνο να κάνω ό, τι είναι πραγματικά χρήσιμο όταν δουλεύω σε ένα blog: γράφοντας περιεχόμενο . Εστιάζομαι στο περιεχόμενο και όχι στο κοντέινερ περιεχομένου.

Τούτου λεχθέντος, ο Hugo είναι αρκετά εύκαμπτος . Ξεκίνησα το δικό μου blog με θέμα ανοιχτού κώδικα και μετά το άλλαξα εντελώς με την πάροδο του χρόνου. Μερικές φορές θέλω να κάνω πράγματα στον ιστότοπό μου που δεν εμπίπτουν στο πεδίο ενός απλού ιστολογίου και ο Hugo μου επιτρέπει να δημιουργήσω αυτά τα πράγματα.

Τέλος, ένας άλλος λόγος που μου αρέσει ο Hugo είναι ότι είναι γρήγορο . Γιατί; Πρώτον, έχει τον πυρήνα Go, που είναι γνωστό ότι είναι μια πολύ γρήγορη γλώσσα. Και στο οικοσύστημα Go, δεν υπάρχει έννοια των εξαρτήσεων των 100 megabyte. Τα πράγματα γίνονται όσο το δυνατόν γρηγορότερα. Επιπλέον, το Hugo δεν χρειάζεται να κάνει μερικά από τα φανταχτερά πράγματα που χρειάζονται κατά τη χρήση τεχνολογίας φαντασίας. Αυτό είναι ένα υποπροϊόν του βαρετού.

Τέλος πάντων, αρκετά με λόγια.

Το Hugo είναι καταπληκτικό, ειδικά αν είστε προγραμματιστής και είστε πρόθυμοι να γράψετε στο Markdown. Οι μη τεχνολογικοί άνθρωποι ίσως απλώς αρνούνται να χρησιμοποιήσουν το Markdown και είναι απολύτως κατανοητό.

Επίσης, πρέπει να είστε προετοιμασμένοι για μια ροή εργασίας με επίκεντρο το Git για να κάνετε τα πράγματα να κάνουν κλικ.

Αυτή είναι η διαδικασία για τη σύνταξη ενός ιστολογίου:

  • γράψτε μια δημοσίευση χρησιμοποιώντας το Markdown,
  • στη συνέχεια δεσμεύστε τις αλλαγές σας σε ένα αποθετήριο Git, πιο συχνά στο GitHub,
  • και στη συνέχεια κάποια τεχνολογία κόλλας αναπτύσσει τις αλλαγές στον διακομιστή που φιλοξενεί τον ιστότοπο.

Φιλοξενία ιστότοπου Hugo

Ένα blog Hugo είναι εντελώς στατικό . Αυτό σημαίνει ότι δεν χρειάζεται να φιλοξενείτε τον δικό σας διακομιστή ή να χρησιμοποιείτε ειδική υπηρεσία για αυτόν.

Οι σελίδες Netlify, Now και GitHub είναι τρία υπέροχα μέρη όπου μπορείτε να φιλοξενήσετε δωρεάν ένα blog Hugo.

Το μόνο κόστος είναι αυτό που πρέπει να διατηρήσετε για το όνομα τομέα. Δεν μπορώ να τονίσω αρκετά τη σημασία του να έχετε το δικό σας όνομα τομέα. Δεν .github.ioή .netlify.comή .now.shτόπους, παρακαλώ.

Οι δικοί μου ιστότοποι Hugo φιλοξενούνται στο Netlify.

Επιλέξτε τομέα

Βάλτε το ιστολόγιό σας στον δικό σας τομέα. Διαλέξτε ένα. Χρησιμοποιήστε το δικό σας όνομα. Και χρησιμοποιήστε .comή .blog. Μην προσπαθήσετε να είστε έξυπνοι χρησιμοποιώντας έναν τοπικό τομέα - για παράδειγμα, μην το χρησιμοποιείτε .io. .comαπλώς δίνει καλύτερη εντύπωση και είναι επαναχρησιμοποιήσιμο για όλα τα μελλοντικά σας έργα, όχι μόνο για να φιλοξενήσει το ιστολόγιό σας. Διάλεξα αυτό.

Ω και αν έχετε έναν παλιό τομέα, απλώς χρησιμοποιήστε τον. Γιατί; Όσο μεγαλύτερος είναι ο τομέας σας, τόσο το καλύτερο.

Σημείωση για υποτομείς: κάθε υποτομέας, για την Google, είναι ένας διαφορετικός ιστότοπος. Επομένως, εάν ο τομέας σας είναι flaviocopes.comκαι δημιουργείτε το ιστολόγιό σας blog.flaviocopes.com, τότε αυτός είναι ένας εντελώς νέος ιστότοπος για την Google και θα έχει τη δική του κατάταξη ξεχωριστή από τον κύριο τομέα.

Η πρότασή μου είναι να αποφύγετε εντελώς τους υποτομείς.

Εγκαταστήστε το Hugo

Για να εγκαταστήσετε το Hugo σε macOS, από το τερματικό σας

brew install hugo 

Η brewεντολή δεν υπάρχει στο Mac σας; Ελέγξτε τον οδηγό Homebrew .

Για Windows και Linux, ανατρέξτε στον επίσημο οδηγό εγκατάστασης.

Δημιουργήστε έναν ιστότοπο Hugo

Μόλις εγκατασταθεί το Hugo, μπορείτε να δημιουργήσετε έναν ιστότοπο Hugo εκτελώντας

hugo new site myblog 

Προτείνω να το εκτελέσετε σε έναν wwwφάκελο στον αρχικό σας κατάλογο, επειδή η εντολή θα δημιουργήσει έναν νέο myblogφάκελο στον οποίο θα τον εκτελέσετε.

Διαλέξτε ένα θέμα

Τώρα για να ξεκινήσετε θα πρέπει να επιλέξετε ένα θέμα. Εύχομαι ο Hugo να συμπεριλάβει ένα προεπιλεγμένο θέμα για να κάνει τα πράγματα απλά, αλλά δεν το κάνει.

Υπάρχουν πολλές επιλογές στο //themes.gohugo.io. Η προσωπική μου πρόταση είναι να ξεκινήσω με το //themes.gohugo.io/ghostwriter/ και να το τροποποιήσω αργότερα.

Προτείνω επίσης να αποφύγετε τη git cloneροή εργασίας που προτείνουν σε αυτήν τη σελίδα. Σίγουρα θα τροποποιήσετε το θέμα στο μέλλον και θεωρώ καλύτερα να έχω ένα αποθετήριο τόσο για περιεχόμενο όσο και για θέμα. Απλοποιεί την ανάπτυξη.

Λοιπόν, μεταβείτε στη διεύθυνση //github.com/jbub/ghostwriter/archive/master.zip για να κατεβάσετε την τρέχουσα έκδοση του θέματος.

Στη συνέχεια, αποσυσκευάστε το στο themes/ghostwriterφάκελο στον πρόσφατα δημιουργημένο ιστότοπό σας Hugo:

Notice there is an exampleSite folder in the themes/ghostwriter. Open it, and open its content subfolder. In there, you can see the page, post and project subfolders.

Copy page and post in the content folder of the site:

The configuration

The sample data also provide a sample config.toml file in themes/ghostwriter/exampleSite/config.toml. This is the Hugo configuration file, which tells Hugo some details of the configuration without you having to hardcode information in the theme.

I recommend that you not copy that, because it has too many things, and instead use this:

baseurl = "/" title = "My blog" theme = "ghostwriter" [Params] mainSections = ["post"] intro = true headline = "My headline" description = "My description" github = "//github.com/XXX" twitter = "//twitter.com/XXX" email = "[email protected]" opengraph = true shareTwitter = true dateFormat = "Mon, Jan 2, 2006" [Permalinks] post = "/:filename/" 

You can freely customize the information in this file later.

Now from the command line, run:

hugo serve 

Open //localhost:1313 in your browser, and you should be able to see the site live!

This is the site home page.

There is a list of posts that is taken from the content/post folder of your website:

Click the first, called “Creating a New Theme”:

You can open the file content/post/creating-a-new-theme.md to change anything in the post.

If you save, the website will automatically update with the new content.

This is pretty awesome, right?

You can create a new post by creating a new .md file, prefixing it with anything you want. You can use incremental numbers, if you prefer. Or use a date.

If something doesn't look the way you want, you can open the themes/ghostwriter/layouts folder and tweak it.

The “post” template is defined in themes/ghostwriter/layouts/post/single.html:

Hugo uses Go templates. The syntax can be pretty unfamiliar but the Hugo website does a very good job at explaining them in this Go templates introduction.

However, try to not look at customizing your template now.

If you want to tweak the colors, add a tag with some CSS in the themes/ghostwriter/layouts/partials/header.html.

For example, make links black:

 .site-title a, .button-square { background: black; } a { color: black; }  

Focus on the content instead.

Remove the existing files, and write 2-3 posts to start with.

It’s too easy to get trapped in making things perfectly the way you want, but the important thing is the content.

And the cleaner your site is, the better for your readers.

Let me now write a little about deployment.

Deploy the Hugo site to Netlify

I want to showcase how to deploy a Hugo site in 2 of the services I enjoy the most: Netlify and Now.

First, I’m going to create a GitHub repository to host the site.

I open GitHub Desktop, an app I use every day and that is part of my workflow. It’s the simplest way to use Git.

From the File menu, I pressed the “New Repository” option:

The same screen can be generated by simply dragging the myblog folder into the app.

I gave the myblog name to the repository, and picked the correct path for the repo.

The process automatically makes the first commit:

Now we can click the “Publish repository” button to push the repo to GitHub:

You can keep the repo private, of course.

Once the repo is in GitHub:

we can move to Netlify.

From my Netlify dashboard I pressed the “New site from Git” button:

I pressed GitHub, authorized Netlify to access my private repositories, then I picked the repo I just created:

Netlify automatically identified it as a Hugo repo, and entered the build command automatically:

Clicking “Deploy site” starts the deploy process:

On a real site, I would set up a custom domain. Netlify has the option to purchase a domain through them, and it’s a very (VERY) straightforward process. I highly recommend it. The site can be live in just a few minutes after purchasing the domain.

A random .netlify.com subdomain is attached to the site, in this case pedantic-engelbart-500c9a.netlify.com, and HTTPS is automatically enabled.

We can therefore immediately see the site live:

Now if you try to edit something in your local version, you just push the changes to GitHub, and Netlify will automatically update the site. You can see it building the site in the “Overview” panel of the site:

To learn more about Netlify I recommend that you check out my Netlify tutorial.

Deploy the Hugo site to Zeit Now

Another awesome platform you can use for your Hugo blog is Zeit Now.

Once you sign up, from the dashboard you press the New Project button.

The first time you deploy from GitHub you have to first install the GitHub app by clicking “Install Now For GitHub”:

This brings you to the GitHub page for the app, where you can authorize it for all your repos, or just for some:

Once you get back, click the “New Project From GitHub” button:

Select the project and click “Import”:

In the meantime, go into the main folder of mysite and add a package.json file with this content:

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

This tells Now how to deploy the site.

When you get back to the dashboard, the new deploy should start soon, and you will see the site working live:

Note that in Now you have three URLs you can use to access the site:

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

You can choose the one you prefer.

Plus, each deployment has its own URL, too. In this case I had myblog-h8xks5jhn.now.sh but it changes with every deployment.

And of course you can add your domain, too. Zeit has a great service to purchase your domain directly from them, available at //zeit.co/domains.

And if you prefer working with the command line, the now command lets you purchase domains from there, as well.

I highly recommend that you check out my Zeit Now tutorial to learn more about this platform.

Wrapping up

I hope this tutorial can give you a little guidance if you are planning to start a new blog. Hugo is my favorite platform, but it's not unique of course. Ghost (the platform powering freeCodeCamp) is great too, along with WordPress of course, and Gatsby.

Διαλέξτε το αγαπημένο σας. Κατά τη γνώμη μου, η πλατφόρμα δεν έχει σημασία όσο το περιεχόμενό σας. Επιλέξτε λοιπόν ένα και ξεκινήστε να γράφετε!