Featured image of post Hugo保姆级安装和使用教程
技术教程

Hugo保姆级安装和使用教程

如何一步步安装hugo

Hugo好与不好不用说了。喜欢就用，需有一点计算和代码基础。

如果有兴趣就和我一起撸一起来吧。

🍉开始使用

此安装教程运行环境为 Hugo 0.91.2

Hugo 分二个版本 Hugo 和 Hugo Extended ，如果想要漂亮主题支持SASS/SCSS等，一律安装 Hugo Extended，不再另行说明了。

以下 Windows 11环境来进行。不建议使用更低的Windows操作系统了。

🍓前期准备

  • Windows 帐号是管理员级别
  • Powershell 已安装 windows键+ X 查看
  • 下载Git软件 https://git-scm.com/download/win 选择 Git for Windows Setup 选最新版
  • 了解 Scoop
  • 下载 代码编辑器 Vim / Geany 主要是用于修改配件的文件
  • 下载 Typora Markdwon 编辑器

🍮安装Git

以Git-2.36.0-64-bit为蓝本，Git很重要，到时候发布部署到vps非常有用。

第一步：Select Componets

以下内容必选：

  • Windows Exploer intergration
  • Git LFS (Large File Support)
    • Git Bash Here
    • Git GUI Here
  • Associate .gif* configuration files with the default text editor
  • Associate .sh files to be run with Bash

第二步 Chossing the deault editor used by Git 选择默认

  • Use Vim (The ubiquitous text editor) as Git’s default editor 使用VIM做为默认编辑器

第三步 Adjusting the name of the initial branch in new repositories 选择默认

  • Let Git decide

第四步 Adjusting your PATH environment? 很重要！选第三个。

  • Use Git from Git Bash only 使用他们自带的shell
  • Git from the command line and also form 3rd-party software 将Git支持到第三方软件比方CMD和powershell
  • Use Git and optional Unix tools from the Command Prompt 同时安装上面二个选择。这样理解就行了。

第五步 Choosing the SSH executable 选默认

  • Use bundled OpenSSH

第六步 Choosing HTTPS transport backend 选默认

  • Use the OpenSSL library

第七步 Configuring the line ending conversions 选默认

  • Checkout Windows-style,commit Unix-style line endings

第八步 Configuring the terminal emulator to use with Git Bash 选默认

  • Use MinTTY (the default terminal of MSYS2)

第九步 Choose the default behavior of ‘git pull’ 选默认

  • Default (fast-forward or merge)

第十步 Choose a credntial helper 选默认

  • Gir Credential Manager

第十一步 Configuring extra options 选默认

  • Enable file system caching

第十二步 Configuring experimental options 默认都不选（空）

第十三步 Install

以上选择错没有关系。不要卸载直接重装重刷即可。

安装 Scoop

类似于以Linux命令的方式安装任何软件和依赖。必装必用，超省事

访问 Scoop 官网

第一步

已安装： PowerShell 5 或更高, （包含 PowerShell Core) 和 .NET Framework 4.5 或更高 ，

PowerShell 管理员模式打开 或 Cmd 管理员模式打开，输入powershell

1- 提权命令，一条一条输入 （Windows 11先提权去权限认证等）

1
2
3
4
5
6
7
8

Set-ExecutionPolicy RemoteSigned -scope CurrentUser
# 如果 windows 10以下用户报错安装上面一条命令

# windows 11 继续进行以下命令
iwr -useb get.scoop.sh -outfile 'install.ps1'  
.\install.ps1 -RunAsAdmin 
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
Set-ExecutionPolicy RemoteSigned -scope CurrentUser

2- 安装scoop （windows 11以下直接使用）

1
2
3

Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
#二个命令二选一
iwr -useb get.scoop.sh | iex

第二步

1

scoop install curl

scoop 安装完成

🍿安装 Hugo & 常规配置 Hugo

第一步 安装Hugo

#windows

1

scoop install hugo-extended

#mac Mac 请先安装 Homebrew

1

brew install hugo

#linux

1

snap install hugo

第二步 创建站点

比方你计划站点放在在D:\hugo\ 目录下，去建立hugo文件夹，回到命令窗口

cd \d\hugo 命令后， 运行如下命令：

1
2

hugo new site www -f yaml
# 如果使用本站主题使用这条命令，yaml格式的配置文件

1
2

hugo new site www
# 创建一个 www 为命名的站点 默认：toml格式配置文件

第三步 下载本站使用的主题并查看demo

此时，你的www站点已创建好了，进入www目录，一定要在www根目录下使用命令

1
2
3
4

cd www
#进入www目录
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
# 下载主题至 themes/hugo-theme-stack目录下，请自行翻墙

手动方法 可以在 GitHub 仓库的 Releaseopen in new window 页面找到最新的稳定版。 下载后把 hugo-theme-stack-master 改名为 hugo-theme-stack 并放到站点目录的 themes 文件夹下。

安装demo数据

  • 将 www/themes/hugo-theme-stack 下的 exampleSite 文件夹中 config.yaml 文件和 content 文件夹 复制到 www 根目当下。有提示存在直接“替换”
  • 将 www/themes/hugo-theme-stack 下的 assets 文件夹 复制到 www 根目录下。

运行站点查看 Demo

在www 根目下运行

1

hugo server D

进行一次页面生成 ，在浏览器访问：http://localhost:1313/

完成Hugo&Demo 的安装

🍷开始建站指南

结构说明

要为Hugo静态博客项目准备一个文件夹，比如 C:\User\[YOURNAME]\hugo 或 ~/Documents/hugo

windows 系统不建议放C:\盘

1
2
3

# 新建网站项目
hugo new site /path/to/site
cd /path/to/site

查看项目目录结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

$ tree .
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

其中，两个文件分别是网站配置文件和文章模板文件，各个文件夹的作用如下：

  • archetypes：包含内容模板文件。
  • content：包含网站内容文件，通常使用 markdown 格式。
  • data: 可以为网站内容文件提供数据。
  • layouts：包含网站模版文件。优先级高于 /themes/<THEME>/layouts/。
  • static：包含 CSS、JavaScript、图片等静态资源文件。
  • themes: 存放网站主题。

content 文件夹支持按层级组织内容，支持URL定制以方便对内容的访问，详见官方文档。

添加文章

1
2
3
4

# 添加第一篇文章
hugo new post/my-first-post.md
# 注意：even 主题使用 post 而不是 posts
# 格式：hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>

1
2

# 编辑文章 (命令使用 VSCode)
code content/post/my-first-post.md

打开 *.md 文件

以上命令将在 content 文件夹中创建相应的目录和文件，然后使用文本编辑器或Markdown编辑器打开文件，使用 Markdown 语法 编辑文章的内容。

1
2
3
4
5
6
7

---
title: "My First Post"
date: 2020-03-20T21:08:09+08:00
draft: true
---

Hello World!

文中头部 --- 括起的部分，称为 Front Matter，内容来自 archetypes/default.md（文章内容模板），定义了当前博客文章的 Metadata，参与网页生成与控制。其中---表示使用了 YAML 格式，详见官方文档。可将文章模板替换为主题提供的模板文件，即 cp themes/even/archetypes/default.md ./archetypes/。

Front Matter 中的一些配置如下：

1
2
3
4
5
6
7
8

---
tags: [""]  # 文章技术、内容、知识点 - 是什么
categories: [""]  # 文章所属专题类别 - 能做什么
draft: true  # 草稿需使用 -D 参数
author: ""  # 可单独设置文章作者
weight: 10  # 文章列表排序权重
toc: true  # 是否开启文章目录
---

本地预览

1
2
3

# 启动服务
hugo server -D
# -D 选项表示包含草稿，即 draft=true 的文章

此命令将启动一个 Web 服务，输出内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

Building sites …
                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  5
  Processed images |  0
  Aliases          |  2
  Sitemaps         |  1
  Cleaned          |  0

Built in 8 ms
Watching for changes in D:\hugo\blog\{archetypes,content,data,layouts,static,themes}
Watching for config changes in D:\hugo\blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

注意输出内容中的网址。打开浏览器，输入这个网址 http://localhost:1313/。现在，你有了一个本地运行的博客网站。尝试在编辑器里修改文章的内容，保存。几乎同时，网站的内容更新了，这就是 Live Reload。

端口号1313可能会发生改变，可使用 -p 参数指定端口号，如 hugo server -p 8080。

🍪预发布

如何让别人能够访问到我们的网站，内网穿透还是部署到互联网，通常还是部署到互联网。不过，在不远的将来，基于区块链和家庭数据中心的部署方式必将大行其道。

1
2
3

# 准备发布
hugo  # 生成静态网站，或:
hugo -D  # 包含 draft = true 的文章

生成的网站文件保存在 public 目录中。由于Hugo生成的是静态网站，不需要为静态网站配置任何代码执行环境，只要将 public 目录上传到互联网 Web 服务器的相应目录中，即可实现线上部署。

如果你安装了 Node.js，可使用 serve 在本地体验静态网站：

安装node.js [通过包管理器安装 Node.js | Node.js (nodejs.org)

1
2
3
4

cd public
npm i -g serve
serve .
open http://localhost:5000

-本教程完-

🥂一些非常规玩法

可以不用命令来创建 markdown 页面。直接用”文件资源管理器“也可以的

但只要记住

content （网站数据存储库）

​ page 页面文件夹

​ post 内容文件夹

这二个文件任何文件或文件夹都可以copy 以前的md 实现创建。

Typora进行 md文件 编辑。

📖衍生阅读

Hugo 主题 Stack : https://docs.stack.jimmycai.com/zh/

Hugo 官网（英文）：https://gohugo.io/

hugo
Licensed under CC BY-NC-SA 4.0
© 2020 - 2022 墨茶
这是一个墨茶的博客
Built with Hugo
主题 Stack 由 Jimmy 设计