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/

Licensed under CC BY-NC-SA 4.0
这是一个墨茶的博客
Built with Hugo
主题 StackJimmy 设计