創建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!

隨時樂意為您服務！