Hugo Mac版快速部署

上一篇文件写了 Hugo保姆级安装教程，基本上都在windows上执行的，Mac有提及但不系统。这篇主要讲Mac部署教程，两篇结合看

Homebrew 是一款 macOS 环境下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等功能。简单的一条指令，轻松管理软件，无需关心各种依赖和文件路径的情况，方便快捷，省心省力。

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

🍉准备环境

安装xcode 环境，时间有一点久，慢慢等

打开MACOS的终端 macOS Catalina (10.15) (or higher) 需要。低于此版本跳过

1

xcode-select --install

安装hombrew

官网最新命令：https://brew.sh/index_zh-cn

1

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

如下图

🍿安装 Hugo & 常规配置 Hugo

第一步安装Hugo

#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/