创建hugo博客

by Aravind Putrevu

通过Aravind Putrevu

Hugo + Firebase：如何在几分钟内免费创建自己的静态网站 (Hugo + Firebase: How to create your own static website for free in minutes)

Ever thought of having your own website for putting up your project portfolio or resume or a blog for yourself. By the end of this article, you will be able to create one.

曾经想过要拥有自己的网站来发布项目组合或简历，或者自己创建一个博客。在本文末尾，您将能够创建一个。

Generally, to develop a website you need to know HTML, CSS, and a bit of JavaScript (sometimes). But, for this, you don’t need to have any coding skills. You just need basic computer skills.

通常，要开发网站，您需要了解HTML，CSS和一些JavaScript(有时)。但是，为此，您不需要任何编码技能。您只需要基本的计算机技能。

To put up a website, you need to have a “space” (aka hosting) where all your files will be uploaded. Whenever someone types your website and clicks enter, these are the files that are served/presented to the user on the browser.

要建立一个网站，您需要有一个“空间”(又名托管)，所有文件都将被上传到该空间。每当有人键入您的网站并单击Enter时，这些文件就会在浏览器上提供/呈现给用户。

Let’s get started with what you need to have/know:

让我们开始了解您需要具备/知道的内容：

Google帐号 (Google Account)

I believe you might already have a Gmail account, which is enough. If not create one.

我相信您可能已经有一个Gmail帐户，这就足够了。如果没有创建一个。

域 (Domain)

This is optional. There are various domain name providers in the world, additionally you can buy one at Google. You can find a list of domain name providers. It is as simple as shopping on Amazon.

这是可选的。世界上有各种各样的域名提供商，此外，您可以从Google购买一个。您可以找到域名提供商的列表。就像在亚马逊上购物一样简单。

雨果 (Hugo)

Hugo is a Go language-based tool, which generates static websites. You can use various templates and make different types of websites like blogs, portfolio sites etc.

Hugo是一种基于Go语言的工具，可以生成静态网站。您可以使用各种模板并创建不同类型的网站，例如博客，投资组合网站等。

Download it from here.

从这里下载。

火力基地 (Firebase)

Firebase is a mobile and web application platform, acquired by Google a few years ago. Firebase offers hosting as one of its features. However, many mobile developers use it for Analytics, Notifications, Crash Reporting of apps. We are going to use it for hosting our website.

Firebase是一个移动和Web应用程序平台，几年前被Google收购。 Firebase将托管作为其功能之一。但是，许多移动开发人员将其用于应用程序的分析，通知和崩溃报告。我们将使用它来托管我们的网站。

Node.js (Node.js)

Node.js is an open-source JavaScript run time built on Chrome’s V8 JavaScript engine. For this tutorial, you need it to be installed on your machine for Firebase tools to work. You can download and install it from here.

Node.js是基于Chrome的V8 JavaScript引擎构建的开源JavaScript运行时。对于本教程，您需要将其安装在计算机上以使Firebase工具正常工作。您可以从此处下载并安装它。

第1步：在计算机上安装Hugo (Step 1: Install Hugo on your machine)

Windows: You will get a simple portable executable file. You can place it anywhere and run via command line. You can add it to your path variable in Windows environment variables to get it referenced anywhere.

Windows：您将获得一个简单的可移植可执行文件。您可以将其放置在任何地方并通过命令行运行。您可以将其添加到Windows环境变量中的path变量中，以在任何地方引用它。

Mac: You can install it using Homebrew. If you don’t have brew installed on your mac, you can download the tarball from here.

Mac：您可以使用Homebrew安装它。如果您的Mac上未安装Brew，则可以从此处下载压缩包。

Either way, make sure you are able to access Hugo by giving below command.

无论哪种方式，请通过以下命令确保您能够访问Hugo。

步骤2：创建模板站点 (Step 2: Create a template site)

Head over to the location where you have decided to create your website and enter the command below:

转至您决定创建网站的位置，然后在下面输入命令：

$ hugo new site <path_to_folder>

At the given location you can see a folder structure as shown in below image.

在给定的位置，您可以看到一个文件夹结构，如下图所示。

These folders are just placeholders for your content. All the text content of your site goes to content folder.

这些文件夹只是您内容的占位符。您网站的所有文本内容都转到内容文件夹。

You can run below commands to add new files.

您可以运行以下命令来添加新文件。

$ hugo new about.md

If you want to add a blog post create a folder named “blog” in “content” folder and start adding your files. These files have an extension of “.md” which are Markdown files.

如果要添加博客文章，请在“内容”文件夹中创建一个名为“ 博客 ”的文件夹，然后开始添加文件。这些文件的扩展名为“ .md” ，它们是Markdown文件。

Markdown is a plain text formatting markup language. It is pretty and easy. There are umpteen guides on how to approach Markdown, here is one.

Markdown是纯文本格式的标记语言。既简单又漂亮。有许多关于如何使用Markdown的指南，这里是其中之一。

步骤3：为网站设置主题 (Step 3: Set a theme for the site)

Hugo has a great community. Their themes site is enriched with different categories of website themes. Head over to it and select a theme, that suits your requirement.

雨果有一个很棒的社区。他们的主题网站充斥着不同类别的网站主题。转到它并选择一个适合您需求的主题。

I chose the Introduction theme. Clicking the download button will redirect to GitHub.

我选择了简介主题。单击下载按钮将重定向到GitHub 。

Each theme will have its own way of setting things up. This particular theme doesn’t have many steps. Just clone or download the zip to the themes folder. Copy the config.toml file to the root folder of your website.

每个主题都有其自己的设置方式。这个特定主题没有很多步骤。只需将zip克隆或下载到themes文件夹即可。将config.toml文件复制到网站的根文件夹。

步骤4：设定偏好设定 (Step 4: Set up your preferences)

Open the config.toml file and start editing it. Give your name and other details you wish to show up on the website. Some themes support Google Analytics so that you can track the user visit count etc. You can give your GA Id to gather data.

打开config.toml文件并开始对其进行编辑。输入您希望显示在网站上的名称和其他详细信息。某些主题支持Google Analytics(分析)，因此您可以跟踪用户访问次数等。您可以给您的GA ID收集数据。

第5步：设置Firebase托管项目 (Step 5: Set up a Firebase Hosting Project)

As I mentioned earlier, Firebase is a beautiful mobile platform with a ton of features. I used Firebase hosting to host my static website generated via Hugo.

如前所述， Firebase是具有许多功能的漂亮移动平台。我使用Firebase托管来托管通过Hugo生成的静态网站。

To use Firebase services use your Google account and login to Firebase website.

要使用Firebase服务，请使用您的Google帐户并登录到Firebase网站。

Click on “Go to console.” Create a project by giving it a name. You will be shown an overview page in which you should select “getting started on Hosting.”

点击“转到控制台”。 通过命名来创建一个项目。系统将显示一个概述页面，您应在其中选择“ 主机托管入门”。

第6步：在计算机上设置Firebase工具 (Step 6: Set up Firebase tools on your machine)

Open your terminal/command line interface on your machine and type command below.

在计算机上打开终端/命令行界面，然后在下面键入命令。

$ npm install -g firebase-tools

The above command installs the Firebase-tools package. You need to execute a few more commands to be able to deploy your website directly.

上面的命令将安装Firebase-tools软件包。您需要执行更多命令才能直接部署您的网站。

$ firebase login

This command connects your machine to the Firebase project. It enables you to list and select the project to which you want to push your changes.

此命令将您的计算机连接到Firebase项目。它使您可以列出并选择要推送更改的项目。

$ firebase list

You can run above command to see the project which you have created. One final touch to the entire workflow, we need to initialize the root folder of your website as Firebase project root.

您可以运行以上命令来查看已创建的项目。最后，要完成整个工作流程，我们需要将您网站的根文件夹初始化为Firebase项目根目录。

$ firebase init

It will ask you some questions like

它会问你一些问题，例如

Which Firebase CLI features do you want to setup? Answer: Hosting.
您要设置哪些Firebase CLI功能？答：托管。
Select a default Firebase project for this directory Answer: Select Firebase project you have created in Step 5.
为该目录选择默认的Firebase项目答案：选择在步骤5中创建的Firebase项目。
Do you want to use as your public directory? Answer: Yes.
您想用作公共目录吗？答：可以。
Configure as a single-page app? Answer: Yes.
配置为单页应用程序？答：可以。

To avoid confusion, I have detailed screenshots taken at each step for your reference. It can be downloaded here.

为避免混淆，我在每个步骤中都拍摄了详细的屏幕截图供您参考。可以在这里下载。

Finally! Firebase initialization is complete.

最后！ Firebase初始化完成。

步骤7：在本地验证您的网站 (Step 7: Verify your website locally)

Run below command to check your site locally on your machine.

运行以下命令以在计算机上本地检查您的站点。

$ hugo server -w

Hugo comes with a light-weight high-performance web server, where you can check all your changes. Make sure that all your images are put up in static/img folder. In an iterative process, change your config.toml and verify those on browser. Below is the port on which your server will be running.

Hugo带有轻量级高性能Web服务器，您可以在其中检查所有更改。确保所有图像都放在static / img文件夹中。在迭代过程中，更改config.toml并在浏览器上进行验证。下面是服务器将在其上运行的端口。

http://localhost:1313

步骤8：部署网站 (Step 8: Deploy your website)

Type in below command to generate your site and push it to corresponding Firebase project which you have configured in Step 5.

在下面的命令中键入以生成您的站点并将其推送到您在步骤5中配置的相应Firebase项目。

$ hugo && firebase deploy

步骤9：将其连接到您的域(可选) (Step 9: Connect it to your domain (optional))

Firebase provides an option to connect your domain to Firebase app. Click on connect domain and give your domain and add the TXT records to verify your domain ownership.

Firebase提供了将您的域连接到Firebase应用程序的选项。单击连接域并提供您的域，然后添加TXT记录以验证您的域所有权。

For this log on to your domain registrar portal.

为此，请登录您的域名注册商门户。

步骤10：建立网志文章 (Step 10: Create a blog post)

Creating a blog post is pretty simple. Hugo understands markdown files. Just head over to content->blog folder (folder location depends on the theme). Create a markdown file. Repeat the Step 8 to see the results.

创建博客文章非常简单。雨果了解markdown文件。只需转到content-> b日志文件夹(文件夹位置取决于主题)。创建一个降价文件。重复步骤8以查看结果。

If you have any queries or doubts, you can DM me on twitter !

如果您有任何疑问或疑问，可以在Twitter上给我发消息！

Always Happy to help!

随时乐意为您服务！