Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署，非常适合用来生成数据量不大的静态博客。 本篇教程介绍怎样用Hugo生成静态网页的，并配合Filebrowser完成文章编写，图片管理，主题修改等操作。

Hugo is a static website generator implemented by Go lang. It’s simple, easy to use, efficient, easy to extend, and fast to deploy. Which is great for generating static blogs. This tutorial describes how to use Hugo to generate static web pages, and with Filebrowser to complete article writing, image management, theme modification and other operations.

目录 / LIST

• 下载安装 | Download and install
• 新建站点 | Creat new site
• 安装主题 | Theme installation
• 添加内容 | Add contents
• 生成网页 | Genetare pages
• 个性化主题 | Customization
• 发布网站 | Publish website

# 下载安装 | Download and install

• Hugo本身就是一个二进制文件，并不需要任何依赖，直接在官方Github上下载最新的文件后解压即可运行。
• Hugo is a binary file, it does not require any dependencies, and can be downloaded on the official Github page.

Releases · gohugoio/hugo · GitHub

• 直接下载相应版本（以Debian为例下载hugo_0.57.2_Linux-64bit.tar.gz），通过Filebrowser下载hugo文件到/usr/local/bin目录。
• Download the corresponding version directly (using Debian for example: hugo_0.57.2_Linux-64bit.tar.gz), unzip the hugo file and put it into the /usr/local/bin directory using Filebrowser.

你可能会感兴趣 | Maybe interested in

# 新建站点 | Creat new site

• 首先需要用Hugo在你选定的目录下新建站点。目录任意选择，例如选定root/mysites作为网站的根目录，以newblog作为网站的，先在Filebrowser里新建newsite目录，然后在SSH下输入如下命令：
• First you need to use Hugo to create a new site in your chosen directory. Select any directory, for example, select root/mysites as the root directory of the website and newblog as the name of your site. Firstly create a new newsite directory in Filebrowser, then enter the following command in SSH:

sudo -i
cd mysites
hugo new site newblog

# 安装主题 | Theme installation

• 接下来从官网主题页面选择喜欢的主题：https://themes.gohugo.io/
• Next, select the theme you like from the official website theme page: https://themes.gohugo.io/

• 以这个主题为例：https://themes.gohugo.io/hugo-theme-massively/，第一种安装主题的方法是点Download按钮，转到Github直接到Releases下载压缩包，解压到/root/mysites/newblog/themes目录下。
• Take this theme as an example: https://themes.gohugo.io/hugo-theme-massively/, the first way to install the theme is to click the Download button, go to Github and go directly to Releases to download the archive. Unzip it into the /root/mysites/newblog/themes directory.

• 另一种方法，也适合没有压缩包的主题安装，即使用git命令安装主题，如果没有安装git命令，通过一条指令sudo apt-get install git即可安装。
• 安装好git后，进入/root/mysites/newblog/themes目录，把刚才主题页面Download按钮的链接右键保存下来，输入下面的命令安装主题：
• The other method is also suitable for theme installation without a compressed package, that is, using the git command to install the theme. If the git command is not installed, install it with a command sudo apt-get install git.
• After installing git, go to the /root/mysites/newblog/themes directory, save the link to the theme page Download button, and enter the following command to install the theme:

git clone https://github.com/curttimson/hugo-theme-massively.git

• 安装好主题之后，需要修改位于网站newblog目录下的config.toml配置文件，指定使用主题的名称。
• 这里推荐参考主题目录中exampleSite目录下的config.toml来完成配置，把这个文件的内容复制到网站根目录下的配置文件即可，包括后续修改主题都需要修改这个文件。
• After installing the theme, you need to modify the config.toml configuration file located in the website newblog directory to specify the name of the theme.
• It is recommended to refer to the config.toml in the exampleSite directory of the theme directory to complete the configuration. Copy the contents of this file to the configuration file under the root directory of the website.

# 添加内容 | Add contents

• 主题添加完成后就可以开始创作了，网站根目录下content文件夹是保存博文的目录，static目录可以存放图片、css、js等文件。
• 借助Filebrowser在线编辑.md文件，用Markdown语法直接写文章即可。
• After adding theme, you can start creating. The content folder in the root directory of the website is the directory where the blog posts are saved, and the static directory can store files such as images, css, and js.
• Edit the .md file online with Filebrowser and write the article directly in Markdown syntax.

# 生成网页 | Genetare pages

• 用Hugo生成网页再简单不过了，只需要进入网站根目录/root/mysites/newblog，执行hugo即可。
• 后期更新了新的文章，或者修改了主题，凡是有变动，直接执行一遍hugo命令刷新即可。
• It’s easy to generate a web page with Hugo. Just go to the root directory of the website /root/mysites/newblog and execute hugo.
• Later, when you update new articles, or modify the theme. If there is any changes, just execute the hugo command to refresh your site.

# 个性化主题 | Customization

• 可以通过修改theme中主题目录的实现细节的微调，删减或者添加功能等。其中layout目录主要包括html的代码，static/assets目录下基本都是css、js、字体等文件。
• You can fine-tune the implementation details of the theme directory in theme, delete or add functions. The layout directory mainly includes the html code, and the static/assets directory contains css, js, fonts and other files.

# 发布网站 | Publish website

• 用Hugo生成的静态文件位于网站根目录下的public目录，挂到网页服务器上即可完成发布。
• 下一篇博文将带来使用Caddy发布网站的教程，在这里先预告一下，敬请期待。

你可能会感兴趣 | Maybe interested in