Hugo使用且部署GitHubPages

2024-01-23 01:04
文章标签 部署 使用 hugo githubpages

本文主要是介绍Hugo使用且部署GitHubPages,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

hugo的使用 20201121

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

安装Hugo

0.windows安装(releases)

下载地址:https://github.com/spf13/hugo/releases。

配置环境变量

验证测试是否安装成功

hugo help

1. 二进制安装(推荐:简单、快速)

到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)

Mac下直接使用 Homebrew 安装:

brew install hugo

2. 源码安装

源码编译安装,首先安装好依赖的工具:

  • Git
  • Mercurial
  • Go 1.3+ (Go 1.4+ on Windows)

设置好 GOPATH 环境变量,获取源码并编译:

$ export GOPATH=$HOME/go
$ go get -v github.com/spf13/hugo

源码会下载到 $GOPATH/src 目录,二进制在 $GOPATH/bin/

如果需要更新所有Hugo的依赖库,增加 -u 参数:

$ go get -u -v github.com/spf13/hugo https://github.com/gohugoio/hugo.gitgo get -u -v  github.com/gohugoio/hugo

生成站点

使用Hugo快速生成站点,比如希望生成到 /path/to/site 路径:

$ hugo new site /path/to/site
这样就在 /path/to/site 目录里生成了初始站点,进去目录:$ cd /path/to/site

创建站点成功

提示:Congratulations! Your new Hugo site is created in xxx

站点目录结构:

  ▸ archetypes/▸ content/▸ layouts/▸ static/config.toml

创建文章

创建一个 about 页面:

$ hugo new about.md

about.md 自动生成到了 content/about.md ,打开 about.md 看下:

+++
date = "2015-10-25T08:36:54-07:00"
draft = true
title = "about"+++正文内容

内容是 Markdown 格式的,+++ 之间的内容是 TOML 格式的,根据你的喜好,你可以换成 YAML 格式(使用 — 标记)或者 JSON 格式。

创建第一篇文章,放到 post 目录,方便之后生成聚合页面。

$ hugo new post/first.md
打开编辑 post/first.md :---
date: "2015-10-25T08:36:54-07:00"
title: "first"---### Hello Hugo1. aaa1. bbb1. ccc

安装皮肤

到 皮肤列表 挑选一个心仪的皮肤,比如你觉得 Hyde 皮肤不错,找到相关的 GitHub 地址,创建目录 themes,在 themes 目录里把皮肤 git clone 下来:

# 创建 themes 目录
$ cd themes
$ git clone https://github.com/spf13/hyde.git

可以选择不同类型的皮肤使用,如:

https://github.com/flysnow-org/maupassant-hugo

更多主题,请点击

运行Hugo

在你的站点根目录执行 Hugo 命令进行调试:

$ hugo server --theme=hyde --buildDrafts

(注明:v0.15 版本之后,不再需要使用 --watch 参数了)

浏览器里打开: http://localhost:1313

关键第一步目前使用:

hugo server --theme=maupassant-hugo --buildDrafts

部署

假设你需要部署在 GitHub Pages 上,首先在GitHub上创建一个Repository,命名为:hmx224.github.io (hmx224替换为你的github用户名)。

在站点根目录执行 Hugo 命令生成最终页面(关键第二步):

$ hugo --theme=maupassant-hugo --baseUrl="http://hmx224.github.io/"

(注意,以上命令并不会生成草稿页面,如果未生成任何文章,请去掉文章头部的 draft=true 再重新生成。)

如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/hmx224/hmx224.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问:http://hmx224.github.io/,即可使用hugo。

参考

  • https://www.gohugo.org/

这篇关于Hugo使用且部署GitHubPages的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/634789

相关文章

从零教你安装pytorch并在pycharm中使用

《从零教你安装pytorch并在pycharm中使用》本文详细介绍了如何使用Anaconda包管理工具创建虚拟环境,并安装CUDA加速平台和PyTorch库,同时在PyCharm中配置和使用PyTor... 目录背景介绍安装Anaconda安装CUDA安装pytorch报错解决——fbgemm.dll连接p

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4

一文详解如何在Python中使用Requests库

《一文详解如何在Python中使用Requests库》:本文主要介绍如何在Python中使用Requests库的相关资料,Requests库是Python中常用的第三方库,用于简化HTTP请求的发... 目录前言1. 安装Requests库2. 发起GET请求3. 发送带有查询参数的GET请求4. 发起PO

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码,有一段代码涉及到Cursor,感觉写法挺有意思的。注意是Cursor,而不是Consumer

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

Docker部署Jenkins持续集成(CI)工具的实现

《Docker部署Jenkins持续集成(CI)工具的实现》Jenkins是一个流行的开源自动化工具,广泛应用于持续集成(CI)和持续交付(CD)的环境中,本文介绍了使用Docker部署Jenkins... 目录前言一、准备工作二、设置变量和目录结构三、配置 docker 权限和网络四、启动 Jenkins

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例:行注释2. 块注释示例:块注释3. 文档注释示例:文档注释4. 综合示例总结Rust 中的注释

Linux使用cut进行文本提取的操作方法

《Linux使用cut进行文本提取的操作方法》Linux中的cut命令是一个命令行实用程序,用于从文件或标准输入中提取文本行的部分,本文给大家介绍了Linux使用cut进行文本提取的操作方法,文中有详... 目录简介基础语法常用选项范围选择示例用法-f:字段选择-d:分隔符-c:字符选择-b:字节选择--c