如何使用Hugo建立一个博客

322 阅读9分钟

Hugo是一个开博客的好工具。

我自己在这个博客中使用Hugo,已经有两年多了。我喜欢使用Hugo有几个原因。

简单无聊灵活快速

最主要的原因是,它很简单。你没有太多的东西需要学习才能开始使用。

你用Markdown写内容,这种格式可以让我用我最喜欢的编辑器(Bear)来写文章。

雨果很无聊。不要误会我的意思,这是一个非常积极的事情。作为一个开发者,我一直想在这里和那里调整一些东西。Hugo的底层没有什么花哨的技术。它是用Go构建的,是我最喜欢的语言之一,但这并不意味着我想潜入Hugo的内部并改变它的工作方式。

而且,它并没有像许多JavaScript框架那样浮现出任何很酷或下一代的东西。

因此,它很无聊,这让我有很多时间来做在博客上工作时真正有用的事情:写内容。我专注于内容,而不是内容容器。

这就是说,雨果是相当灵活的。我用一个开源的主题开始我自己的博客,然后随着时间的推移完全改变它。有时我想在我的网站上做一些超出简单博客范围的事情,而Hugo允许我创造这些事情。

最后,我喜欢Hugo的另一个原因是,它的速度很快。为什么呢?首先,它的核心是Go,众所周知,Go是一种非常快的语言。而在Go的生态系统中,没有100兆字节的依赖关系的概念。事情都是尽可能的快。另外,Hugo不需要做一些使用花哨技术时需要的花哨事情。这是无聊的一个副产品。

总之,话说得够多了。

Hugo很了不起,特别是如果你是一个开发者,而且你愿意用Markdown写作。非技术人员可能只是拒绝使用Markdown,这完全可以理解。

另外,你必须准备好以Git为中心的工作流程,才能让事情真正地点击。

你要做的是,你用Markdown写一篇文章,然后把你的修改提交到Git仓库,最常见的是在GitHub上,然后一些胶水技术把这些修改部署到托管网站的服务器上。

托管一个Hugo网站

一个Hugo博客是完全静态的。这意味着你不需要托管你自己的服务器,也不需要为此使用特殊的服务。

Netlify、Now和GitHub Pages是3个不错的地方,你可以免费托管一个Hugo博客。

唯一的费用是你必须维持域名的费用。我不能再强调拥有你自己的域名的重要性了。请不要使用.github.io.netlify.com.now.sh 网站。

我自己的雨果网站是托管在Netlify上。

选择一个域名

把你的博客放在你自己的域名下。选一个。使用你自己的名字。并使用.com.blog 。不要试图通过使用一个本地化的域名来耍小聪明,不要使用.io.com ,只是给人一个更好的印象,而且它可以在你未来的所有项目中重复使用,而不仅仅是用来托管你的博客。我选了这个。

哦,如果你身边有一个旧的域名,就用它吧。为什么?你的域名越老越好。

关于子域名的注意事项:对谷歌来说,每个子域名都是一个不同的网站。因此,如果你的域名是flaviocopes.com ,而你在blog.flaviocopes.com ,那么对谷歌来说,这就是一个全新的网站,它将有自己的排名,与主域名分开。

我的建议是完全避免使用子域。

安装Hugo

要在macOS上安装Hugo,请从你的终端运行

brew 命令在你的Mac上不存在?请查看Homebrew指南

对于Windows和Linux,请查看官方安装指南

创建一个Hugo网站

一旦Hugo安装完毕,你可以通过运行以下命令创建一个Hugo站点

我建议在你的主目录下的www ,因为该命令会在你运行它的地方创建一个新的myblog 文件夹。

选择一个主题

现在在你开始之前,你需要选择一个主题。我希望Hugo包含一个默认的主题,使事情变得简单,但它没有。

themes.gohugo.io,有很多选择我个人的建议是先用themes.gohugo.io/ghostwriter…,以后再调整。

我也建议避免使用他们在那一页上建议的git clone 工作流程,因为你将来肯定会调整主题,我觉得最好是内容和主题都有一个单一的仓库。它简化了部署。

所以,去github.com/jbub/ghostw…,下载当前版本的主题。

然后在你新创建的Hugo网站的themes/ghostwriter 文件夹中解压。

注意在themes/ghostwriter 中有一个exampleSite 文件夹。 打开它,并打开其content 子文件夹。在那里,你可以看到page,postproject 子文件夹。

在网站的content 文件夹中复制pagepost

该配置

样本数据还提供了一个样本config.toml 文件,在themes/ghostwriter/exampleSite/config.toml 。这是Hugo的配置文件,它告诉Hugo一些配置的细节,而不需要你在主题中硬编码信息。

我建议你不要复制,因为它有太多的东西,而要使用这个。

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 = "XXX@example.com"
    opengraph = true
    shareTwitter = true
    dateFormat = "Mon, Jan 2, 2006"

[Permalinks]
    post = "/:filename/"

你可以自由地定制这个文件中的信息,以后。

现在从命令行中,运行。

在你的浏览器中打开http://localhost:1313 ,你应该可以看到网站上线了

这是网站的主页。

这里有一个帖子列表,是从你网站的content/post 文件夹中提取的。

点击第一个,叫做 "创建一个新的主题"。

你可以打开文件content/post/creating-a-new-theme.md ,改变帖子中的任何内容。

如果你保存,网站将自动更新新的内容。

这很了不起,对吗?

你可以通过创建一个新的.md 文件来创建一个新的帖子,用你想要的任何东西作为前缀。如果你愿意,你可以使用递增的数字。或者使用一个日期。

如果有些东西看起来不像你想要的,你可以打开themes/ghostwriter/layouts 文件夹,对它进行调整。

"post "模板定义在themes/ghostwriter/layouts/post/single.html

Hugo使用Go模板。语法可能相当不熟悉,但Hugo网站在这个Go模板介绍中做了非常好的解释。

然而,现在尽量不要看定制你的模板。

如果你想调整颜色,可以在themes/ghostwriter/layouts/partials/header.html ,添加一个带有一些CSS的<style> 标签。

例如,把链接变成黑色。

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

而要把注意力放在内容上。

删除现有的文件,先写2-3篇文章。

陷于把事情做得像你想要的那样完美太容易了,但重要的是内容。

你的网站越干净,对你的读者就越有利。

现在让我写一点关于部署的内容。

将Hugo网站部署到Netlify上

我想展示一下如何在我最喜欢的两个服务中部署Hugo网站:Netlify和Now。

首先,我将创建一个GitHub仓库来托管该网站。

我打开GitHub Desktop,这是我每天都在使用的应用程序,是我工作流程的一部分。这是最简单的使用Git的方式。

在文件菜单中,我按下了 "新建仓库 "选项。

只需将myblog 文件夹拖入应用程序,就可以生成同样的界面。

我给仓库起了myblog 的名字,并为仓库选择了正确的路径。

这个过程会自动进行第一次提交。

现在我们可以点击 "发布仓库 "按钮,将仓库推送到GitHub。

当然,你也可以保持该仓库的私密性。

一旦版本库进入GitHub,我们就可以进入Netlify。

我们就可以转到Netlify。

我在Netlify的仪表板上按下了 "New site from Git "按钮。

按下GitHub,授权Netlify访问我的私有仓库,然后我选中了我刚刚创建的 repo。

Netlify自动将其识别为Hugo repo,并自动输入构建命令。

点击 "Deploy site "开始部署过程。

在一个真正的网站上,我会设置一个自定义域名。Netlify可以选择通过他们购买一个域名,这是一个非常(非常)简单的过程。我强烈建议这样做。从购买域名开始,网站可以在短短几分钟内上线。

一个随机的.netlify.com 子域被附加到网站上,在这种情况下,pedantic-engelbart-500c9a.netlify.com ,并且HTTPS被自动启用。

因此,我们可以立即看到该网站的上线。

现在,如果你想在本地版本中编辑一些东西,你只需将修改推送到GitHub,Netlify就会自动更新网站。你可以在网站的 "概览 "面板上看到它在构建网站。

要了解更多关于Netlify的信息,我建议你查看我的Netlify教程

现在将Hugo网站部署到Zeit上

Zeit现在被称为Vercel,这个教程可能已经过时了

你可以为你的Hugo博客使用的另一个很棒的平台是Zeit Now。

一旦你注册了,从仪表板上按下新项目按钮。

第一次从GitHub部署时,你必须先安装GitHub应用,点击 "Install Now For GitHub"。

这时你会进入该应用的GitHub页面,在那里你可以为你所有的仓库授权,或者只为某些仓库授权。

一旦你回来,点击 "New Project From GitHub "按钮。

选择项目并点击 "导入"。

同时,进入mysite 的主文件夹,添加一个带有此内容的package.json 文件。

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

这告诉Now如何部署网站。

当你回到仪表板时,新的部署应该很快开始,你会看到网站正在运行。

请注意,在Now中,你有3个URL可以用来访问该网站。

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

你可以选择你喜欢的那个。

另外,每个部署也有自己的URL。在这种情况下,我有myblog-h8xks5jhn.now.sh ,但它会随着每次部署而改变。

当然,你也可以添加你的域名。Zeit有一个很好的服务,可以直接从他们那里购买你的域名,可在zeit.co/domains。

如果你喜欢用命令行工作,now 命令也可以让你从那里购买域名。

我强烈建议你查看我的Zeit Now教程