創(chuàng)建hugo博客

by Aravind Putrevu

通過Aravind Putrevu

Hugo + Firebase：如何在幾分鐘內(nèi)免費(fèi)創(chuàng)建自己的靜態(tài)網(wǎng)站 (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.

曾經(jīng)想過要擁有自己的網(wǎng)站來發(fā)布項目組合或簡歷，或者自己創(chuàng)建一個博客。 在本文末尾，您將能夠創(chuàng)建一個。

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.

通常，要開發(fā)網(wǎng)站，您需要了解HTML，CSS和一些JavaScript(有時)。 但是，為此，您不需要任何編碼技能。 您只需要基本的計算機(jī)技能。

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.

要建立一個網(wǎng)站，您需要有一個“空間”(又名托管)，所有文件都將被上傳到該空間。 每當(dāng)有人鍵入您的網(wǎng)站并單擊Enter時，這些文件就會在瀏覽器上提供/呈現(xiàn)給用戶。

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

讓我們開始了解您需要具備/知道的內(nèi)容：

Google帳號 (Google Account)

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

我相信您可能已經(jīng)有一個Gmail帳戶，這就足夠了。 如果沒有創(chuàng)建一個。

域 (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語言的工具，可以生成靜態(tài)網(wǎng)站。 您可以使用各種模板并創(chuàng)建不同類型的網(wǎng)站，例如博客，投資組合網(wǎng)站等。

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應(yīng)用程序平臺，幾年前被Google收購。 Firebase將托管作為其功能之一。 但是，許多移動開發(fā)人員將其用于應(yīng)用程序的分析，通知和崩潰報告。 我們將使用它來托管我們的網(wǎng)站。

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引擎構(gòu)建的開源JavaScript運(yùn)行時。 對于本教程，您需要將其安裝在計算機(jī)上以使Firebase工具正常工作。 您可以從此處下載并安裝它。

第1步：在計算機(jī)上安裝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：您將獲得一個簡單的可移植可執(zhí)行文件。 您可以將其放置在任何地方并通過命令行運(yùn)行。 您可以將其添加到Windows環(huán)境變量中的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：創(chuàng)建模板站點(diǎn) (Step 2: Create a template site)

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

轉(zhuǎn)至您決定創(chuàng)建網(wǎng)站的位置，然后在下面輸入命令：

$ hugo new site <path_to_folder>

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

在給定的位置，您可以看到一個文件夾結(jié)構(gòu)，如下圖所示。

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

這些文件夾只是您內(nèi)容的占位符。 您網(wǎng)站的所有文本內(nèi)容都轉(zhuǎn)到內(nèi)容文件夾。

You can run below commands to add new files.

您可以運(yùn)行以下命令來添加新文件。

$ 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.

如果要添加博客文章，請在“內(nèi)容”文件夾中創(chuàng)建一個名為“ 博客 ”的文件夾，然后開始添加文件。 這些文件的擴(kuò)展名為“ .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是純文本格式的標(biāo)記語言。 既簡單又漂亮。 有許多關(guān)于如何使用Markdown的指南，這里是其中之一 。

步驟3：為網(wǎng)站設(shè)置主題 (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.

雨果有一個很棒的社區(qū)。 他們的主題網(wǎng)站充斥著不同類別的網(wǎng)站主題。 轉(zhuǎn)到它并選擇一個適合您需求的主題。

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.

每個主題都有其自己的設(shè)置方式。 這個特定主題沒有很多步驟。 只需將zip克隆或下載到themes文件夾即可。 將config.toml文件復(fù)制到網(wǎng)站的根文件夾。

步驟4：設(shè)定偏好設(shè)定 (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文件并開始對其進(jìn)行編輯。 輸入您希望顯示在網(wǎng)站上的名稱和其他詳細(xì)信息。 某些主題支持Google Analytics(分析)，因此您可以跟蹤用戶訪問次數(shù)等。您可以給您的GA ID收集數(shù)據(jù)。

第5步：設(shè)置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生成的靜態(tài)網(wǎng)站。

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

要使用Firebase服務(wù)，請使用您的Google帳戶并登錄到Firebase網(wǎng)站 。

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.”

點(diǎn)擊“轉(zhuǎn)到控制臺”。 通過命名來創(chuàng)建一個項目。 系統(tǒng)將顯示一個概述頁面，您應(yīng)在其中選擇“ 主機(jī)托管入門”。

第6步：在計算機(jī)上設(shè)置Firebase工具 (Step 6: Set up Firebase tools on your machine)

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

在計算機(jī)上打開終端/命令行界面，然后在下面鍵入命令。

$ 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軟件包。 您需要執(zhí)行更多命令才能直接部署您的網(wǎng)站。

$ 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.

此命令將您的計算機(jī)連接到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.

您可以運(yùn)行以上命令來查看已創(chuàng)建的項目。 最后，要完成整個工作流程，我們需要將您網(wǎng)站的根文件夾初始化為Firebase項目根目錄。

$ firebase init

It will ask you some questions like

它會問你一些問題，例如

• Which Firebase CLI features do you want to setup? Answer: Hosting.
  您要設(shè)置哪些Firebase CLI功能？ 答：托管。
• Select a default Firebase project for this directory Answer: Select Firebase project you have created in Step 5.
  為該目錄選擇默認(rèn)的Firebase項目答案：選擇在步驟5中創(chuàng)建的Firebase項目。
• Do you want to use as your public directory? Answer: Yes.
  您想用作公共目錄嗎？ 答：可以。
• Configure as a single-page app? Answer: Yes.
  配置為單頁應(yīng)用程序？ 答：可以。

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

為避免混淆，我在每個步驟中都拍攝了詳細(xì)的屏幕截圖供您參考。 可以在這里下載。

Finally! Firebase initialization is complete.

最后！ Firebase初始化完成。

步驟7：在本地驗證您的網(wǎng)站 (Step 7: Verify your website locally)

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

運(yùn)行以下命令以在計算機(jī)上本地檢查您的站點(diǎn)。

$ 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服務(wù)器，您可以在其中檢查所有更改。 確保所有圖像都放在static / img文件夾中。 在迭代過程中，更改config.toml并在瀏覽器上進(jìn)行驗證。 下面是服務(wù)器將在其上運(yùn)行的端口。

http://localhost:1313

步驟8：部署網(wǎng)站 (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.

在下面的命令中鍵入以生成您的站點(diǎn)并將其推送到您在步驟5中配置的相應(yīng)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應(yīng)用程序的選項。 單擊連接域并提供您的域，然后添加TXT記錄以驗證您的域所有權(quán)。

For this log on to your domain registrar portal.

為此，請登錄您的域名注冊商門戶。

步驟10：建立網(wǎng)志文章 (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.

創(chuàng)建博客文章非常簡單。 雨果了解markdown文件。 只需轉(zhuǎn)到content-> b日志文件夾(文件夾位置取決于主題)。 創(chuàng)建一個降價文件。 重復(fù)步驟8以查看結(jié)果。

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

如果您有任何疑問或疑問，可以在Twitter上給我發(fā)消息 ！

Always Happy to help!

隨時樂意為您服務(wù)！

翻譯自: https://www.freecodecamp.org/news/hugo-firebase-how-to-create-your-own-dynamic-website-for-free-in-minutes-463b4fb7bf5a/

創(chuàng)建hugo博客

總結(jié)

以上是生活随笔為你收集整理的创建hugo博客_Hugo + Firebase：如何在几分钟内免费创建自己的静态网站的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。