創建hugo博客

Hugo is a great tool to use if you want to start a blog.

如果您想創建博客，Hugo是一個很好的工具。

I use Hugo myself for my blog, flaviocopes.com, and I've been using it for more than two years. I have a few reasons for loving Hugo.

我本人在博客flaviocopes.com上使用Hugo，并且已經使用了兩年多。 我有幾個愛雨果的理由。

First of all, it is simple, boring, flexible, and fast.

首先，它簡單 ， 無聊 ， 靈活且快速 。

The main reason is that it is simple. There’s not much you have to learn to get started.

主要原因是它很簡單 。 入門不需要太多的學習。

You write content in Markdown, a format that lets me use my favorite editor (Bear) to write posts.

您以Markdown編寫內容，該格式使我可以使用自己喜歡的編輯器(Bear)編寫帖子。

Hugo is boring. Don’t get me wrong, this is a very positive thing. As a developer I am tempted to tweak things here and there all the time. There’s no fancy technology underlying Hugo. It’s built using Go, one of the languages I love the most, but that does not mean I want to dive into the internals of Hugo and change how it works.

雨果很無聊 。 不要誤會我的意思，這是非常積極的事情。 作為開發人員，我很想一直在這里和那里進行調整。 雨果沒有花哨的技術。 它是使用Go(我最喜歡的一種語言)構建的，但這并不意味著我想深入Hugo的內部并改變其工作方式。

And it does not surface any cool or next-generation stuff like many JavaScript frameworks tend to do.

而且它不會像許多JavaScript框架那樣出現任何酷的或下一代的東西。

Hence it is boring, which gives me a lot of time to do what is really useful when working on a blog: writing content. I focus on the content, not on the content container.

因此，這很無聊，這使我有很多時間去做博客上真正有用的事情： 編寫內容 。 我專注于內容，而不是內容容器。

That said, Hugo is pretty darn flexible. I started my own blog with an open source theme, then changed it completely over time. Sometimes I want to do things in my website that are out of the scope of a simple blog, and Hugo allows me to create those things.

就是說，雨果相當靈活 。 我以開源主題開始了自己的博客，然后隨著時間的推移完全對其進行了更改。 有時我想在網站上做超出簡單博客范圍之內的事情，而Hugo允許我創建這些事情。

Finally, another reason I love Hugo is that it is fast. Why? First, it has Go at the core, which is known to be a very fast language. And in the Go ecosystem, there’s no concept of 100 megabytes dependencies. Things are made to be as fast as possible. Plus, Hugo does not need to do some of the fancy stuff that is needed when using fancy technology. This is a by-product of being boring.

最后，我愛雨果的另一個原因是它速度很快 。 為什么？ 首先，它以Go為核心，這是一種非常快速的語言。 在Go生態系統中，沒有100 MB依賴性的概念。 事情要盡可能快。 另外，Hugo不需要執行使用高級技術時所需的一些高級工作。 這是無聊的副產品。

Anyway, enough with words.

無論如何，用言語就足夠了。

Hugo is amazing, especially if you are a developer and you’re willing to write in Markdown. Non-tech people might just refuse to use Markdown, and it’s perfectly understandable.

Hugo很棒，特別是如果您是開發人員并且愿意用Markdown編寫。 非技術人員可能只是拒絕使用Markdown，這是完全可以理解的。

Also, you have to be prepared for a Git-centric workflow to make things really click.

另外，您還必須為以Git為中心的工作流程做好準備，以使事情真正發生點擊。

This is the process for writing a blog:

這是寫博客的過程：

• write a post using Markdown,
  使用Markdown撰寫文章，
• then commit your changes to a Git repository, most commonly on GitHub,
  然后將您的更改提交到Git存儲庫(通常在GitHub上)，
• and then some glue technology deploys the changes on the server that hosts the site.
  然后一些粘合技術將所做的更改部署在托管站點的服務器上。

托管雨果網站 (Hosting a Hugo website)

A Hugo blog is completely static. This means you don’t need to host your own server, or use a special service for it.

一個雨果博客是完全靜態的 。 這意味著您不需要托管自己的服務器，也無需為其使用特殊服務。

Netlify, Now and GitHub Pages are three great places where you can host a Hugo blog, for free.

Netlify，Now和GitHub Pages是您可以免費托管Hugo博客的三個好地方。

The only cost is the one you have to sustain for the domain name. I can’t stress enough the importance of having your own domain name. No .github.io or .netlify.com or .now.sh sites, please.

唯一的成本就是您必須維持的域名成本。 我不能太過強調擁有自己的域名的重要性。 請沒有.github.io或.netlify.com或.now.sh網站。

My own Hugo sites are hosted on Netlify.

我自己的Hugo網站托管在Netlify上。

選擇一個域 (Choose a domain)

Put your blog under your own domain. Pick one. Use your own name. And use .com or .blog. Don’t try to be clever by using a localized domain - for example, don’t use .io. .com just gives a better impression and it’s reusable for all your future projects, not just to host your blog. I picked that one.

將您的博客放在您自己的域下。 選一個。 使用您自己的名字。 并使用.com或.blog 。 不要嘗試通過使用本地化域來變得聰明-例如，不要使用.io 。 .com只會給人留下更好的印象，它可用于您以后的所有項目，而不僅僅是托管您的博客。 我選了那個。

Oh and if you have an old domain lying around, just use that. Why? The older your domain is, the better.

哦，如果您周圍有舊域名，請使用它。 為什么？ 您的域越舊越好。

Note on subdomains: every subdomain, to Google, is a different website. So if your domain is flaviocopes.com, and you create your blog in blog.flaviocopes.com, then that’s a completely new website to Google, and it will have its own ranking separate from the main domain.

關于子域的注意事項：對于Google而言，每個子域都是一個不同的網站。 因此，如果您的域名是flaviocopes.com ，并且您在blog.flaviocopes.com創建了博客，那么對于Google而言，這是一個全新的網站，它將具有與主域名不同的排名。

My suggestion is to avoid subdomains completely.

我的建議是完全避免子域。

安裝雨果 (Install Hugo)

To install Hugo on macOS, from your terminal run

要在macOS上安裝Hugo，請從終端運行

brew install hugo

The brew command does not exist on your Mac? Check the Homebrew guide.

Mac上不存在brew命令？ 查看Homebrew指南 。

For Windows and Linux, check the official installation guide.

對于Windows和Linux，請查看官方安裝指南 。

創建一個雨果網站 (Create a Hugo site)

Once Hugo is installed, you can create a Hugo site by running

安裝Hugo后，您可以通過運行以下命令創建一個Hugo網站

hugo new site myblog

I suggest that you run this into a www folder in your Home directory, because the command will create a new myblog folder where you run it.

我建議您將其運行到Home目錄中的www文件夾中，因為該命令將在運行它的位置創建一個新的myblog文件夾。

選擇一個主題 (Pick a theme)

Now before you can start you need to pick a theme. I wish Hugo included a default theme to make things straightforward, but it does not.

現在，在您可以開始之前，您需要選擇一個主題。 我希望Hugo包含一個默認主題以使事情變得簡單，但事實并非如此。

There are a lot of choices on https://themes.gohugo.io. My personal recommendation is to start with https://themes.gohugo.io/ghostwriter/ and tweak it later.

https://themes.gohugo.io上有很多選擇。 我個人的建議是從https://themes.gohugo.io/ghostwriter/開始，然后進行調整。

I also recommend that you avoid the git clone workflow they suggest on that page. You’ll surely be tweaking the theme in the future, and I find it best to have a single repository for both content and theme. It simplifies deployment.

我還建議您避免他們在該頁面上建議的git clone工作流程。 您肯定會在將來調整主題，而我發現最好為內容和主題有一個單一的存儲庫。 它簡化了部署。

So, go to https://github.com/jbub/ghostwriter/archive/master.zip to download the current version of the theme.

因此，請轉到https://github.com/jbub/ghostwriter/archive/master.zip下載當前版本的主題。

Then unpackage it in the themes/ghostwriter folder in your newly created Hugo website:

然后將其解包到新創建的Hugo網站的themes/ghostwriter文件夾中：

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.

注意在themes/ghostwriter有一個exampleSite文件夾。 打開它，然后打開其content子文件夾。 在這里，您可以看到page ， post和project子文件夾。

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

復制page并post到站點的content文件夾中：

配置 (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.

示例數據還在themes/ghostwriter/exampleSite/config.toml提供了一個示例config.toml文件。 這是Hugo的配置文件，它告訴Hugo某些配置細節，而無需在主題中硬編碼信息。

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 = trueheadline = "My headline"description = "My description"github = "https://github.com/XXX"twitter = "https://twitter.com/XXX"email = "XXX@example.com"opengraph = trueshareTwitter = truedateFormat = "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 http://localhost:1313 in your browser, and you should be able to see the site live!

在瀏覽器中打開http://localhost:1313 ，您應該可以看到該站點！

This is the site home page.

這是網站主頁。

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

以下是從您網站的content/post文件夾中獲取的帖子列表：

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.

您可以打開文件content/post/creating-a-new-theme.md更改帖子中的任何內容。

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.

您可以通過創建一個新的.md文件并在其前面加上所需的任何內容來創建新帖子。 如果愿意，可以使用增量數字。 或使用日期。

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

如果某些內容看起來不理想，可以打開themes/ghostwriter/layouts文件夾并進行調整。

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

“帖子”模板是在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.

Hugo使用Go模板。 語法可能不熟悉，但是Hugo網站在此Go模板介紹中很好地解釋了它們。

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

但是，請嘗試不要立即考慮自定義模板。

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

如果要調整顏色，請在themes/ghostwriter/layouts/partials/header.html添加帶有某些CSS的<style>標記。

For example, make links black:

例如，將鏈接設為黑色：

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

Focus on the content instead.

專注于內容。

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

刪除現有文件，并開始撰寫2-3個帖子。

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.

現在讓我寫一些有關部署的信息。

將Hugo網站部署到Netlify (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.

我想展示如何在我最喜歡的兩項服務中部署Hugo網站：Netlify和Now。

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

首先，我將創建一個GitHub存儲庫來托管該站點。

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.

我打開GitHub Desktop，這是我每天使用的應用程序，它是我工作流程的一部分。 這是使用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.

只需將myblog文件夾拖到應用中，即可生成同一屏幕。

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

我給存儲庫指定了myblog名稱，并為倉庫選擇了正確的路徑。

The process automatically makes the first commit:

該過程將自動進行第一次提交：

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

現在，我們可以單擊“發布存儲庫”按鈕將存儲庫推送到GitHub：

You can keep the repo private, of course.

當然，您可以將存儲庫設為私有。

Once the repo is in GitHub:

一旦倉庫進入GitHub：

we can move to Netlify.

我們可以轉到Netlify。

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

在Netlify儀表板中，我按下了“來自Git的新站點”按鈕：

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

我按下GitHub，授權Netlify訪問我的私有存儲庫，然后選擇了我剛創建的存儲庫：

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

Netlify自動將其標識為Hugo存儲庫，并自動輸入build命令：

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.

在實際站點上，我將設置一個自定義域。 Netlify可以選擇通過它們購買域名，這是一個非常非常簡單的過程。 我強烈推薦它。 購買域名后，該網站僅需幾分鐘即可上線。

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

該站點附加一個隨機的.netlify.com子域，在本例中為pedantic-engelbart-500c9a.netlify.com ，并且自動啟用了HTTPS。

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:

現在，如果您嘗試編輯本地版本中的內容，則只需將更改推送到GitHub，Netlify就會自動更新站點。 您可以在網站的“概述”面板中看到它正在構建網站：

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

要了解有關Netlify的更多信息，建議您閱讀我的Netlify教程 。

將Hugo網站部署到Zeit Now (Deploy the Hugo site to Zeit Now)

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

您可以在Hugo博客上使用的另一個很棒的平臺是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”:

首次從GitHub部署時，必須先通過單擊“立即為GitHub安裝”來安裝GitHub應用程序：

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

這會將您帶到該應用程序的GitHub頁面，您可以在其中為所有存儲庫或僅對某些存儲庫進行授權：

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

返回后，單擊“來自GitHub的新項目”按鈕：

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:

同時，進入mysite的主文件夾并添加具有以下內容的package.json文件：

{"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:

請注意，在“現在”中，您可以使用三個URL來訪問站點：

• myblog.flaviocopes.now.sh

  myblog.flaviocopes.now.sh

• myblog-alpha-swart.now.sh

  myblog-alpha-swart.now.sh

• myblog-git-master.flaviocopes.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.

另外，每個部署也都有自己的URL。 在這種情況下，我有myblog-h8xks5jhn.now.sh但每次部署都會改變。

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

當然，您也可以添加您的域。 Zeit提供了一項很棒的服務，可以直接從他們那里購買您的域名， 網址為https://zeit.co/domains 。

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

而且，如果您更喜歡使用命令行，那么now命令也可以讓您從那里購買域名。

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

我強烈建議您查看我的Zeit Now教程，以了解有關此平臺的更多信息。

結語 (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.

我希望本教程可以為您提供一些指導，如果您打算開始一個新博客。 Hugo是我最喜歡的平臺，但是它并不是唯一的平臺。 Ghost(支持freeCodeCamp的平臺)也很棒，當然還有WordPress和Gatsby。

Pick your favorite. In my opinion the platform does not matter as much as your content does. So, choose one and start writing!

選擇你喜歡的。 我認為平臺與內容無關緊要。 因此，選擇一個并開始寫作！

翻譯自: https://www.freecodecamp.org/news/your-first-hugo-blog-a-practical-guide/

創建hugo博客