当前位置：首页 > java >正文

hugo博客搭建，github部署

java 2025/7/31 21:45:52

hugo操作

下载hugo

搜索“hugo”，进入官网点github
在这里插入图片描述
进入github，点Tags

选择最新的版本，点击。然后选择windows版本下载
在这里插入图片描述
下载后解压到桌面。进入文件夹后打开cmd，输入hugo new site dev，会创建一个文件夹。

新创建的dev文件夹里面没有hugo.exe文件，为了使在dev文件下仍能使用hugo命令，需要复制hugo.exe文件到dev文件内。（否则就只能把hugo的路径加入windows环境变量）

cmd进入到dev文件夹，输入hugo server -D，运行成功。
在这里插入图片描述

打开浏览器输入http://localhost:1313/发现会出现以下界面：
在这里插入图片描述

代表网页已经跑起来了，但是还没有内容，可以看到dev\themes文件夹下为空。

下载主题

进入hugo官网，点击themes
在这里插入图片描述
这里有很多主题，可以随便选。这里以“Stack”为例

点击“Stack”，然后点击下载。跳转到github后，点击“Tags”，选择最新版本下载
在这里插入图片描述

把下载的压缩包解压到dev/themes中

把dev\themes\hugo-theme-stack-3.30.0\exampleSite中的content和hugo.yaml复制到dev下，删除dev下的hugo.toml文件

删除rich-content文件夹，因为此文件夹中的页面内容含有yutubu等内容，会因为访问不了导致网页运行不起来。
在这里插入图片描述

打开hugo.yaml，看到主题名字是hugo-theme-stack
在这里插入图片描述
需要把dev\themes中的主题文件夹名字改成hugo-theme-stack，否则会找不到

在dev文件夹中，输入hugo server -D，运行。
浏览器输入http://localhost:1313/发现网页已经ok了。

hugo目录结构

dev/
├── content              # 存放所有内容文件
│   ├── _index.md        # 博客首页内容
│   ├── posts            # 博客文章
│   │   ├── first-post.md
│   │   └── second-post.md
│   └── pages            # 博客页面
│       └── about.md     # 关于页面
├── data                 # 存放站点数据
│   ├── authors.yml      # 作者信息
│   └── config.toml      # 站点配置文件
├── i18n                 # 国际化语言文件
│   ├── en.toml          # 英文语言文件
│   └── zh.toml          # 中文语言文件
├── layouts              # 存放页面模板
│   ├── _default         # 默认模板
│   ├── partials         # 模板片段
│   └── index.html       # 首页模板
├── assets               # 存放编译前的资源文件
│   ├── css              # 存放 CSS 源文件
│   ├── js               # 存放 JavaScript 源文件
│   └── images           # 存放图片源文件
├── resources            # 存放生成的资源文件
│   └── _gen             # 生成的资源文件
├── static               # 存放静态资源（如图片、CSS、JS）
│   ├── css              # 存放编译后的 CSS 文件
│   ├── js               # 存放编译后的 JavaScript 文件
│   └── images           # 存放图片文件
├── public               # 生成的网站文件
├── themes               # 存放主题文件
│   └── my-theme         # 自定义主题文件
│       ├── layouts      # 存放页面模板
│       ├── static       # 存放主题静态资源
│       └── theme.toml   # 主题配置文件
├── archetypes           # 内容模板文件
│   ├── default.md       # 默认内容模板
│   └── post.md          # 博客文章模板
└── hugo_build.lock      # Hugo 包管理文件

写第一篇博客

在dev下执行hugo new content post/myFirstBlog/index.md
将创建一个名为 post/myFirstBlog/index.md 的 Markdown 文件，并包含了一些archetypes/default.md 基本的文章模板，例如标题、日期等。
输入hugo server -D，运行
在这里插入图片描述
可以看到网站中多了一个内容。
博客是以文件夹形式保存在dev\content\post下的，一个文件夹就是一篇博客。

修改post/myFirstBlog/index.md内容为：

+++
date = '2025-05-20T23:28:21+08:00'
draft = true
title = 'MyFirstBlog'
+++# 一级标题*强调文本* _强调文本_**加粗文本** __加粗文本__~~删除文本~~> 引用文本

博客文章是markdown格式的。
两个+++之间是本篇文章的说明，文章的副标题、描述、关键词等放在这里。
draft: true 表示为草稿文件，正式发布前需将值修改为 false，或者直接删除 draft 整个参数，否则正式发布时不会生成文章。
下面就是文章正文了。
在网页中查看文章：
在这里插入图片描述

github部署

登录github，新建仓库，仓库名为自己的用户名+.github.io
在这里插入图片描述
修改dev/hugo.yaml，把网址修改为仓库名字

cmd进入dev\public，然后按照顺序执行如下命令

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ql-excel/ql-excel.github.io.git     #这里的网址改成自己的仓库
git push -u origin main

在这里插入图片描述

如果上传成功：

点击“settings”-“Pages”，把Branch改成如下，然后点击最后的“Save”。这个操作是打开GitHub静态页面

然后就一致刷新此网页，如果出现如下的提示，代表网页部署完成。

浏览器输入https://ql-excel.github.io/即可访问。