温馨提醒

如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢

本文最后更新于2023年10月28日,已超过 180天没有更新

Windows下安装部署:

本安装部署在 Windows 7 x64 上测试没问题,相关操作同样适用于 Windows 10

第一,下载 Windows 版本的 hugo

下载链接:https://github.com/gohugoio/hugo/releases,在这里我们下载 hugo_0.89.4_Windows-64bit.zip

第二,解压

我们把 hugo_0.89.4_Windows-64bit.zip 下载到 F:\WebStack 目录下,然后解压到当前文件夹。

解压完成后,在该目录会多出 hugo.exe、LICENSE、README.md 三个文件

第三,看 hugo 安装是否安装成功

温馨提示:

Windows 命令运行窗口中可以使用 Tab 进行命令行补全,例如你当前目录下有一个 WebStack-Hugo 目录,你在命令行窗口中输入一个 w 后按下 Tab 键,命令行就会自动出现 WebStack-Hugo!

使用命令行补全,可以减少代码(或者文件名)的输入,方便快捷,又能减少错误!

在 Windows 中使用 Win+R 打开“运行”对话框,在对话框中输入“cmd”,点击确认。

2. 在 Windows 运行窗口,先切换盘符到 F 盘,然后进入 hugo 的解压缩目录(F:\WebStack),具体操作如下。

在光标处输入F:,然后按回车;

我们就将盘符切换为 F 盘;

接着输入 cd WebStack,回车,就进入了 F:\WebStack 目录;使用 ls 可以看到当前目录下的文件。

最后,输入 hugo.exe version,回车,如图所示,则代表安装成功。

第四,下载 WebStack-Hugo

浏览器打开 https://github.com/shenweiyan/WebStack-Hugo,点击 Code 下的 "Download ZIP",把 WebStack-hugo-main.zip 下载到刚才 hugo 解压缩的目录(F:\WebStack)。

第五,解压,重命名

把 WebStack-Hugo-main.zip 解压到当前目录。

第六,安装主题

首先,进入 F:\WebStack 目录;

然后,创建一个 themes 的文件夹;

接着,把解压后的 WebStack-Hugo 整个文件夹移动到 themes 中。

将 themes/WebStack-Hugo/exampleSite 目录下的所有文件复制到 hugo 站点根目录(即 F:\WebStack)。

第七,启动 Hugo 预览服务器

在刚才已经打开的 Windows 命令运行窗口中,使用下面的命令执行 hugo server,启动站点——Hugo 可以启动一个 Web 服务器,同时构建站点内容到内存中并在检测到文件更改后重新渲染,方便我们在开发环境实时预览对站点所做的更改。

hugo.exe server

最后,在浏览器中打开 http://127.0.0.1:1313/,即可看到生成的站点。

Linux 下安装部署:

安装完本 WebStack-Hugo 主题后,将 exampleSite 目录下的文件复制到 hugo 站点根目录,根据需要把 config.toml 的一些信息改成自己的,导航的网址信息可通过 data 目录下 webstack.yml 修改。

具体执行步骤如下:

mkdir /home/shenweiyan/mysite 
cd /home/shenweiyan/mysite

# 安装 WebStack-Hugo 主题
git clone https://github.com/shenweiyan/WebStack-Hugo.git themes/WebStack-Hugo

# 将 exampleSite 目录下的文件复制到 hugo 站点根目录
cd /home/shenweiyan/mysite
cp -r themes/WebStack-Hugo/exampleSite/* ./

# 启动 hugo 站点
hugo server 
# 如果你知道你的公网 ip, 如下面的 132.76.230.31, 可以使用下面的方式执行 hugo server
hugo server --baseUrl=132.76.230.31 --bind=0.0.0.0

也可以参考 @jetsung 在 pull 15 所用的方法安装部署:

# 创建项目
mkdir navsites
cd $_

# 初始化项目
git init

# 将 WebStack-Hugo 源下载到 themes/WebStack-Hugo 文件夹
git submodule add https://github.com/shenweiyan/WebStack-Hugo.git themes/WebStack-Hugo
cp -r themes/WebStack-Hugo/exampleSite/* ./

# 安装 hugo
go install github.com/gohugoio/hugo@latest

# 本地测试
hugo server

# 生成 docs 文件夹,将并静态内容生成至此处
hugo -D

导出 HTML 静态网页至 publishDir

Windows/Linux 下执行的 hugo server 命令将会通过热加载的方式临时启动一个 Hugo 服务器(Hugo 可以启动一个 Web 服务器,同时构建站点内容到内存中并在检测到文件更改后重新渲染,方便我们在开发环境实时预览对站点所做的更改),这个时候我们打开浏览器 http://127.0.0.1:1313/,就可以看到我们站点的样子了。

如果我们想要把我们的站点部署到 GitHub/Gitee Pages(或者本地的服务器),我们可以:

1. 生成静态页面内容

可以通过下面的命令,生成(构建)静态页面内容。

hugo -D 或者 hugo --minify

这个命令会默认在public/目录中生成您的网站,当然您可以通过改变站点配置中的publishDir选项来配置这个输出目录。

Hugo 小知识 - 草案、未来和过期内容

Hugo 允许您在网站内容的前言设定中设置文档的draft,publishdate甚至expirydate字段。默认情况下,Hugo 不会发布下面内容:

1. publishdate 发布日期值设定在未来的内容;

2. draft:true 草案状态设置为真的内容;

3. expirydate 过期日期值设置为过去某事件的内容。

这三个可以在本地开发和部署编译时通过对hugo和hugo server分别添加如下参数来重新设定,或者在配置文件中设定对应(不包含--)域的 boolean 值:

1. -F, --buildFuture include content with publishdate in the future

2. -D, --buildDrafts include content marked as draft

3. -E, --buildExpired include expired content

 

参考的开源项目:

https://github.com/WebStackPage/WebStackPage.github.io

https://github.com/liutongxu/liutongxu.github.io

https://github.com/iplaycode/webstack-hugo

主题开源地址:

🔗 Gitee - https://gitee.com/shenweiyan/WebStack-Hugo

🔗 GitHub - https://github.com/shenweiyan/WebStack-Hugo

历史上的今天
10月
28
    抱歉,历史上的今天作者很懒,什么都没写!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。