001 - Hugo, 创建一个网站

2024-02-18 03:20
文章标签 网站 创建 001 hugo

本文主要是介绍001 - Hugo, 创建一个网站，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  • 001 - Hugo, 创建一个网站
    • 安装hugo
      • Windows系统
      • Macos
    • Hugo博客搭建
      • 初始化博客
      • 主题安装
      • 配置博客各个页面
      • 开始创作
      • 创建 GitHub Page 仓库
      • 本地调试和预览
      • 发布内容
    • 教程及鸣谢
      • 文字教程
      • 视频教程

001 - Hugo, 创建一个网站

这篇文章假设你已经：

  1. 了解基本的终端命令行知识，如：cd, ls
  2. 安装了 Git，并且了解基本的 Git 知识
  3. 有一个 GitHub账号
  4. 有自己偏好的代码编辑器（我使用的是 VS Code）

安装hugo

Windows系统

  1. 从hugo官方github仓库下载hugo,记得必须使用带有extended的版本

hugo官方下载地址: https://github.com/gohugoio/hugo/releases

  1. 在D盘下创建文件夹名为hugo,进入hugo文件夹下并创建名为bin的文件夹,将下载下来的zip文件解压到bin里面

完整的路径即为: D:\hugo\bin

  1. 接下来设置hugo环境变量,依次打开设置,然后选择系统,滑到下面选择系统信息,打开高级系统设置

  2. 打开环境变量

  3. 分别进入一下选项中进行添加D:\hugo\bin\

  4. 检查一下hugo是否安装成功,打开cmd或终端输入hugo version,如果输出一下内容则证明配置成功

Macos

  1. 这里使用包管理器安装 Hugo，我的操作系统是 Mac OS，所以使用 Homebrew 安装 Hugo。如果你使用的是 Windows 或 Linux，可以根据 Hugo 文档提示的方式安装： Hugo 文档：Install Hugo

    brew install hugo

  2. 查看 Hugo 是否安装成功，显示 Hugo 版本号代表 Hugo 安装成功。

    hugo version

Hugo博客搭建

初始化博客

在桌面右键,选择在终端打开,然后输入以下命令

hugo new site blog

然后桌面会出现一个名为blog的文件夹,可以用VScode打开文件夹并打开终端进行后续操作

  • archetypes：存放用 hugo 命令新建的 Markdown 文件应用的 front matter 模版
  • content：存放内容页面，比如「博客」、「读书笔记」等
  • layouts：存放定义网站的样式，写在layouts文件下的样式会覆盖安装的主题中的 layouts文件同名的样式
  • static：存放所有静态文件，如图片
  • data：存放创建站点时 Hugo 使用的其他数据
  • public：存放 Hugo 生成的静态网页
  • themes：存放主题文件
  • config.toml：网站配置文件

主题安装

此处以stack主题为例

  1. 删掉默认的配置文件config.toml
  2. 打开终端输入以下命令
git init
#获取主题文件
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
  1. 将获取到的主题文件中的exampleSite中的config.yaml拷贝到blog根目录中并进行配置,根据自己需要进行配置,这里我贴出自己的配置图供参考

官方配置文档: https://stack.jimmycai.com/config/

# 自己网站的域名
baseurl: https://jacket-mouse.github.io/
# 网站语言
languageCode: zh-cn
# 网站主题
theme: hugo-theme-stack
paginate: 5
# 网站标题，显示在标签页上
title: 1ees0nのblog
# 版权、著作权
copyright: 1ees0n# 语言设置，如果超过一种语言，会在左侧菜单给出语言选项，但不同语言根据index.md或index.zh-cn.md的命名不同，会在不同的语言选项显示不同的文章，防止麻烦，直接只用中文。
languages:zh-cn:languageName: 中文title: 1ees0nのblogweight: 1params:description: 1ees0nのblog
#  en:
#    languageName: English
#    title: 1ees0nのblog
#    weight: 2
#    params:
#      description: 1ees0nのblog# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack# GA Tracking ID
googleAnalytics:# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
# 默认内容语言
DefaultContentLanguage: zh-cn# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: false# url的配置，与后面的slug属性相对应，
# 关于slug的介绍 https://site.zhelper.net/Hugo/hugo-slug/#slug
# post对应的url https://jacket-mouse.github.io/p/github-action-blog/
# page对应的url https://jacket-mouse.github.io/archives/
permalinks:post: /p/:slug/page: /:slug/# https://stack.jimmycai.com/config/site
# Site-wide settings
params:# 设置网站首页要展示的Section,一般设成post。这样就会默认展示post文件夹里面的内容。mainSections:- postfeaturedImageField: imagerssFullContent: true# e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)# 该图为标签页的图标favicon: 火锅.svg# 版权信息的显示footer:# 网站开始年份since: 2024customText:# 日期格式dateFormat:published: Jan 02, 2006lastUpdated: Jan 02, 2006 15:04 MST# 官方教程 https://stack.jimmycai.com/config/sidebarsidebar:emoji: 🍥subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.avatar:enabled: truelocal: true# 在theme文件夹下的assets文件夹下的img,该图片为头像src: img/avatar.jpg# 官方教程 https://stack.jimmycai.com/config/articlearticle:math: truetoc: truereadingTime: truelicense:enabled: truedefault: Licensed under CC BY-NC-SA 4.0# 关闭评论功能comments:enabled: falseprovider: disqusdisqusjs:shortname:apiUrl:apiKey:admin:adminLabel:utterances:repo:issueTerm: pathnamelabel:remark42:host:site:locale:vssue:platform:owner:repo:clientId:clientSecret:autoCreateIssue: false# Waline client configuration see: https://waline.js.org/en/reference/component.htmlwaline:serverURL:lang:pageview:emoji:- https://unpkg.com/@waline/emojis@1.0.1/weiborequiredMeta:- name- email- urllocale:admin: Adminplaceholder:twikoo:envId:region:path:lang:# See https://cactus.chat/docs/reference/web-client/#configuration for description of the various optionscactus:defaultHomeserverUrl: "https://matrix.cactus.chat:8448"serverName: "cactus.chat"siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)giscus:repo:repoID:category:categoryID:mapping:lightTheme:darkTheme:reactionsEnabled: 1emitMetadata: 0gitalk:owner:admin:repo:clientID:clientSecret:cusdis:host:id:# 右侧组件# https://stack.jimmycai.com/config/widgetswidgets:# 主页会显示homepage:- type: search# Display a list of years with the number of posts published in each year.- type: archivesparams:limit: 5- type: categoriesparams:limit: 10- type: tag-cloudparams:limit: 10# 点开一个文章会显示,目录page:- type: tocopengraph:twitter:# Your Twitter usernamesite:# Available values: summary, summary_large_imagecard: summary_large_imagedefaultImage:opengraph:enabled: falselocal: falsesrc:colorScheme:# Display toggletoggle: true# Available values: auto, light, darkdefault: autoimageProcessing:cover:enabled: truecontent:enabled: true### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:main: []# 自己的社交账号social:- identifier: githubname: GitHuburl: https://github.com/jacket-mouseparams:icon: brand-github- identifier: twittername: Twitterurl: https://twitter.comparams:icon: brand-twitter- identifier: bilibiliname: Bilibiliurl: https://space.bilibili.com/366460274?spm_id_from=333.788.0.0params:icon: brand-bilibilirelated:includeNewer: truethreshold: 60toLower: falseindices:- name: tagsweight: 100- name: categoriesweight: 200markup:goldmark:renderer:## Set to true if you have HTML content inside Markdownunsafe: truetableOfContents:endLevel: 4ordered: truestartLevel: 2highlight:noClasses: falsecodeFences: trueguessSyntax: truelineNoStart: 1# 行号是否显示lineNos: false# 行号和代码的同步滚动：false，同步，true，不同步lineNumbersInTable: falsetabWidth: 4
  1. 将~themes/hugo-theme-stack/exampleSite里的content整个文件夹复制到根目录中,然后即可在根目录的content中创建md文件进行blog了

[!error] 报错
unknown: mapping values are not allowed in this context at line 119 column 16

yaml配置文件存在一个地方代码层级有问题。

  # right tableOfContents:endLevel: 4ordered: truestartLevel: 2# errortableOfContents:endLevel: 4ordered: truestartLevel: 2

配置博客各个页面

这部分的配置在官方文档中很详细,就不重复造轮子了,直接给出官方文档

https://stack.jimmycai.com/config/menu

开始创作

博客文章主要都存放在content中,这里可以参考一下我的content文件夹布局,例如我现在想要创建一篇文章,我们可以在blog根目录下打开终端输入hugo new post/2022/XXXX.md这条命令的意思是在conent/post/2022里创建一个名为XXXX.md的文件

官方写作文档: https://stack.jimmycai.com/writing/markdown

├─.obsidian
├─categories
│  └─Test
├─page
│  ├─about
│  ├─archives
│  ├─links
│  └─search
└─post├─chinese-test├─emoji-support├─Git教程├─markdown-syntax├─math-typesetting├─placeholder-text└─rich-content

创建 GitHub Page 仓库

  1. 命名 GitHub Pages 仓库，这个仓库必须使用特殊的命名格式 <username.github.io>， <username> 是自己的 GitHub 的用户名。
  2. 勾选 Public，设置为公开仓库。
  3. 将我们的blog/public文件夹设为该远程仓库的本地仓库。

本地调试和预览

  1. 在发布到网站前可以在本地预览网站或内容的效果，运行命令：

    hugo server

  2. 也可以在本地编辑 Markdown 文件时，通过 hugo server 来实时预览显示效果。

  3. hugo server 运行成功后，可以在 http://localhost:1313/ 中预览网站

server

注意：
有时候我们刚创建的文章并不会在网页中看到，是因为用hugo命名创建时，会将该文章默认为草稿（draft），所以要想显示草稿，需要另一条命令hugo serve --buildDrafts

发布内容

此处是手动发布：

  1. hugo 命令可以将你写的 Markdown 文件生成静态 HTML 网页，生成的 HTML 文件默认存放在 public 文件夹中。

    hugo

  2. 因为hugo 生成的静态 HTML 网页文件默认存放在 public 文件中，所以推送网页内容只需要把 public 中的 HTML 网页文件发布到 GitHub Pages 仓库中。

自动发布见Github Action 自动部署博客

教程及鸣谢

文字教程

  • (1)带着Stack主题入坑Hugo
  • 稀土掘金 在Windows上使用Hugo搭建博客
  • 小绵尾巴 如何用 GitHub Pages + Hugo 搭建个人博客

视频教程

Hugo - 10分钟搭建 & 部署个人网站/博客，简历中的博客网站怎么建

这篇关于001 - Hugo, 创建一个网站的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/719888。

相关文章

python如何创建等差数列

python如何创建等差数列

《python如何创建等差数列》：本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in
阅读更多...
怎么用idea创建一个SpringBoot项目

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备（JDK1.8+、Maven3.2.5+）、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA，点击New新建一个项
阅读更多...
如何使用Maven创建web目录结构

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》：本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho
阅读更多...
MySQL 用户创建与授权最佳实践

MySQL 用户创建与授权最佳实践

《MySQL用户创建与授权最佳实践》在MySQL中,用户管理和权限控制是数据库安全的重要组成部分,下面详细介绍如何在MySQL中创建用户并授予适当的权限,感兴趣的朋友跟随小编一起看看吧... 目录mysql 用户创建与授权详解一、MySQL用户管理基础1. 用户账户组成2. 查看现有用户二、创建用户1. 基
阅读更多...
Python中使用uv创建环境及原理举例详解

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,：本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点：二、安装uv1. 通过pip安装2. 通过脚本安装验证安装：配置镜像源（可
阅读更多...
Java中实现线程的创建和启动的方法

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程（调用start()方法）而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st
阅读更多...
Macos创建python虚拟环境的详细步骤教学

Macos创建python虚拟环境的详细步骤教学

《Macos创建python虚拟环境的详细步骤教学》在macOS上创建Python虚拟环境主要通过Python内置的venv模块实现,也可使用第三方工具如virtualenv,下面小编来和大家简单聊聊... 目录一、使用 python 内置 venv 模块（推荐）二、使用 virtualenv（兼容旧版 P
阅读更多...
Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

《Linuxlvm实例之如何创建一个专用于MySQL数据存储的LVM卷组》：本文主要介绍使用Linux创建一个专用于MySQL数据存储的LVM卷组的实例,具有很好的参考价值,希望对大家有所帮助,... 目录在Centos 7上创建卷China编程组并配置mysql数据目录1. 检查现有磁盘2. 创建物理卷3. 创
阅读更多...
如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

《如何关闭Mac的Safari通知?3招教你关闭Safari浏览器网站通知的技巧》当我们在使用Mac电脑专注做一件事情的时候，总是会被一些消息推送通知所打扰，这时候，我们就希望关闭这些烦人的Mac通... Safari 浏览器的「通知」功能本意是为了方便用户及时获取最新资讯，但很容易被一些网站滥用，导致我们
阅读更多...
Web技术与Nginx网站环境部署教程

Web技术与Nginx网站环境部署教程

《Web技术与Nginx网站环境部署教程》：本文主要介绍Web技术与Nginx网站环境部署教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Web基础1.域名系统DNS2.Hosts文件3.DNS4.域名注册二.网页与html1.网页概述2.HTML概述3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2