搭建本地hugo博客
part1: Hugo + GitHub 免费部署自己的博客介绍
(00:00-00:15) 1.1: 视频目标与演示 视频旨在分享如何使用 Hugo 和 GitHub 免费部署一个属于自己的个人博客。开头展示了作者已经部署成功的博客页面作为最终效果预览。
(00:15-00:37) 1.2: 作者说明与目的 作者声明自己并非专业的教学视频制作者,制作此视频主要是因为近期想更新内容,且正好在研究 Hugo 博客的搭建过程。目的是分享经验,帮助观看者在搭建过程中少走弯路。
(00:37-00:44) 1.3: 博客内容示例 简要展示了博客中的一篇文章,内容即为本次视频所要讲解的 Hugo + GitHub 免费部署博客的教程记录。
part2: 搭建动机与 Hugo vs Hexo 对比
(00:45-00:57) 2.1: 历史背景 (Hexo) 作者提到自己之前已经使用 Hexo 框架搭建过一个个人博客 (展示了之前的 Hexo 博客页面)。
(00:57-01:19) 2.2: 转向 Hugo 的原因 解释了为何选择使用 Hugo 重新搭建:更换了新电脑 (天选4) 后,之前的 Hexo 本地文件丢失(因为没有上传备份到 GitHub),所以需要重新搭建。借此机会研究并尝试了 Hugo。
(01:19-01:30) 2.3: Hugo 使用体验 作者认为实际使用下来,Hugo 感觉比 Hexo 更方便。
(01:30-01:41) 2.4: 对新手的建议 (Hugo vs Hexo) 指出 Hugo 的官方文档基本都是英文,可能对新手不太友好。因此,推荐新手优先尝试 Hexo (文档相对更完善,中文资源多)。使用 Hugo 需要啃英文文档,对新手来说较为麻烦。
part3: 下载 Hugo
(01:41-01:54) 3.1: 开始教程:下载准备 正式进入教程环节,第一步是下载 Hugo。作者打开浏览器并搜索 Hugo。
(01:54-02:22) 3.2: 定位 Hugo GitHub Releases
进入 Hugo 官网 (gohugo.io),点击 GitHub 链接跳转到 Hugo 的 GitHub 仓库。在仓库页面,点击 Tags (标签/版本) 来查找发布版本。选择了当时的最新版本 v0.131.0。
(02:22-02:30) 3.3: 选择并下载 Hugo Extended 版本
在版本发布页面向下滚动到 Assets (资源) 部分,强调需要下载 Extended (扩展) 版本,并选择了适用于 Windows 64位的 hugo_extended_0.131.0_windows-amd64.zip 文件进行下载。
part4: Hugo 文件准备与站点创建
(02:30-02:55) 4.1: 解压 Hugo 文件
展示了下载好的 zip 压缩包。在桌面上创建了一个名为 test 的新文件夹。将下载的 zip 包移动到 test 文件夹中,并进行解压。解压后得到包含 hugo.exe 等文件的文件夹。
(02:55-03:04) 4.2: Hugo 可执行文件说明
强调 Hugo 是用 Go 语言编写的,但使用时不需要单独安装 Go 环境,♈下载解压后的 hugo.exe 可执行文件即可直接使用,这一点很方便。清理了多余的文件和文件夹,只保留核心文件。
(03:04-03:13) 4.3: 打开命令行工具 (CMD)
在包含 hugo.exe 的文件夹(路径类似 C:\Users\Letere\Desktop\test\hugo_extended_0.131.0_windows-amd64)的地址栏输入 cmd 并回车,从而直接在该目录下打开命令行窗口。
(03:13-03:34) 4.4: 创建新站点命令 (hugo new site)
在命令行窗口中,♈输入命令 hugo new site dev。该命令会创建一个名为 dev 的新文件夹,并在其中♈♈生成 Hugo 站点的基本目录结构。
(03:34-03:45) 4.5: 理解命令输出与后续步骤
展示了 hugo new site 命令执行后的输出提示,其中包含了建议的后续操作步骤,如切换目录、安装主题、编辑配置、创建内容和启动服务。作者截图保存了这些步骤提示。
(03:45-04:10) 4.6: 切换目录与复制 Hugo 执行文件
根据提示,首先使用 cd dev 命令切换到新创建的 dev 站点根目录。因为 hugo.exe 不在系统路径中,需要将其复制到当前的 dev 目录下,才能在该目录中执行 Hugo 相关命令。
part5: 本地预览 (无主题)
(04:10-04:28) 5.1: 准备本地预览 根据之前的步骤提示,下一步是安装主题,但作者决定先不安装主题,直接启动本地服务看下效果。
(04:28-05:08) 5.2: 启动 Hugo 本地服务 (hugo server -D)
在 dev 目录下,执行命令 hugo server -D 来启动 Hugo 的内置Web服务器进行本地预览。解释 -D 是 --buildDrafts 的简写,用于包含草稿内容。命令成功执行后,输出了本地服务器地址 http://localhost:1313。
(05:08-05:16) 5.3: 浏览器访问与结果 (Page Not Found)
复制该地址并在浏览器中打开。♈页面显示 Page Not Found (404错误)。作者解释这是正常现象,因为目前既没有安装主题,也没有任何内容,但这表明 Hugo 服务已经成功启动。
part6: 查找与下载 Hugo 主题 (Stack)
(05:16-05:33) 6.1: 前往 Hugo 主题站
回到命令行输出提示,明确需要安装一个主题。再次访问 Hugo 官网 (gohugo.io),点击导航栏中的 Themes。
(05:33-05:56) 6.2: 选择 Stack 主题
浏览 Hugo 主题列表,作者选择了名为 Stack 的主题(卡片式风格,适用于博主)。点击进入该主题的详情页。
(05:56-06:13) 6.3: ♈下载 Stack 主题源码
在 Stack 主题详情页,点击 Download 按钮,跳转到该主题的 GitHub 仓库 (CallMeMaybe/hugo-theme-stack)。在仓库页面,同样通过 Tags 找到最新版本 v3.26.0,♈并点击 Source code (zip) 下载主题的源代码压缩包。
part7: 安装与配置 Hugo 主题
(06:13-06:33) 7.1: 放置主题文件
展示下载好的主题压缩包 hugo-theme-stack-3.26.0.zip。回到本地的 Hugo 站点 dev 目录,找到 themes 文件夹。♈将下载的主题压缩包移动到 themes 文件夹内,并进行解压。
(06:33-07:03) 7.2: 重命名主题文件夹与修改配置
解压后的主题文件夹名带有版本号 (hugo-theme-stack-3.26.0)。为了方便配置,♒将其重命名为 hugo-theme-stack。打开站点根目录下的配置文件 hugo.yaml (之前从主题的 exampleSite 复制过来的)。找到 theme 配置项,将其值修改为刚刚重命名的文件夹名 hugo-theme-stack。保存配置文件。
(07:03-07:19) 7.3: 应用主题示例配置与内容
为了快速看到效果,作者将主题♐ exampleSite 目录下的 content 文件夹和 hugo.yaml 文件复制到站点根目录 (dev) 下,并选择覆盖现有文件。这样就♈直接使用了主题自带的示例内容和配置。
(07:19-07:28) 7.4: 清理与重启服务
♐删除了站点根目录下原有的 hugo.toml 文件【因为现在使用 hugo.yaml,它们是同一个配置文件,只是后缀名不同】。回到命令行窗口,停止之前运行的 Hugo 服务(通过按 Ctrl+C,虽然画面未显示),然后再次执行 hugo server -D 命令重新启动服务。
(07:28-07:47) 7.5: 预览带主题的站点
刷新浏览器中 http://localhost:1313 页面。此时,网站成功加载了 Stack 主题和其示例内容,外观与之前展示的成品相似。
part8: 主题示例内容处理
(07:47-08:07) 8.1: 删除 Rich Content 示例文章
在预览页面滚动时,作者提到主题♋示例中有一个名为 rich-content 的文章。因为这篇文章引用了 YouTube 等外部资源,在国内网络环境下可能导致加载超时或构建失败,所以♈建议删除。随后展示了♈在 根目录/content/post 目录下删除 rich-content 文件夹的操作。
(08:07-08:39) 8.2: 参考主题 Demo 站
回到主题的 GitHub 仓库页面,指出 README.md 文件通常包含重要信息。找到了♋主题提供的 Demo 演示站点链接 (demo.stack.jimmycai.com) 并打开。说明可以通过访问 Demo 站点来了解 rich-content 页面原本包含哪些内容(如嵌入视频、特殊格式等)。
part9: Hugo 国际化 (i18n) 功能说明
(08:39-09:04) 9.1: 文件名与语言代码
解释 Hugo 的国际化 (i18n) 功能。以 dev/content/post/chinese-test 文件夹为例,其中的内容文件是 index.zh-cn.md。指出文件名中的 .zh-cn 就是语言代码。对比 emoji-support 文件夹下的 index.md 文件,它没有语言代码。
(09:04-09:19) 9.2: 国际化工作原理
说明:如果文件名不带语言代码 (如 index.md),则该内容属于在 hugo.yaml 中配置的默认语言(此例中为英语)。♈网站会根据用户切换的语言(通过页面上的语言切换器)加载对应语言代码的文件【切出对应后缀名的文件】。例如,♈切换到中文,会加载 index.zh-cn.md;♈切换到英文,会加载 index.en.md 或默认的 index.md。
也就是当访问者在您的网站上选择或切换到中文(简体) 这个语言选项时,Hugo 会查找并使用带有 .zh-cn.md 后缀的文件来渲染该页面,比如 有一个名为 我的笔记.md 的 Markdown 文件,并且您希望它只在网站的中文环境下显示,需要将其重命名为 我的笔记.zh-cn.md
(09:19-09:29) 9.3: 国际化演示
为了演示,♈将 chinese-test 文件夹下的 index.zh-cn.md 重命名为 index.en.md【就是改改后缀名而】。刷新本地预览页面。此时切换到英文环境,会显示原 “Chinese Test” 的内容;♈切换到中文环境,则该文章消失,因为对应的中文文件 (index.zh-cn.md) 已不存在。说明 Hugo 的国际化实现相对简单,只需复制文件并修改语言代码即可。
part10: 创建与编辑新内容
(09:29-09:57) 10.1: 创建新文章命令 (hugo new content)
演示如何使用命令行创建新文章。命令格式为 hugo new content <section>/<slug>/index.md。其中 <section> 通常是 content 目录下的子目录(如 post),<slug> 是文章的唯一标识(会成为文件夹名),index.md 是内容文件名。
♈作者执行了命令 hugo new content post/myFirstBlog/index.md,成功创建了一个名为 myFirstBlog 的文章。
(09:57-10:15) 10.2: 编辑新文章内容 (Markdown)
使用 Typora 编辑器打开新创建的 dev/content/post/myFirstBlog/index.md 文件。文件自动包含了基础的 front matter(如 title, date, draft: true)。在文件末尾添加了一行 Markdown 内容:### Hello World!。保存文件。
(10:15-10:31) 10.3: 预览新文章
刷新本地预览页面 (http://localhost:1313)。新创建的 “MyFirstBlog” 文章出现在首页列表。点击进入该文章,可以看到刚才添加的 “Hello World!” 标题。这表明文章已成功创建并显示。
part11: 本地搭建完成与后续步骤
(10:31-10:38) 11.1: 本地搭建总结 至此,使用 Hugo 和 Stack 主题在本地搭建博客的基本流程已经完成。
(10:38-10:43) 11.2: 后续内容预告 说明接下来的步骤将涉及♐修改配置 hugo.yaml【♐至于hugo.yaml有哪些配置 一般要么样式文件里面的hugo.yaml会讲在哪里找,要么样式文件里面的hugo.yaml已经把全部配置给你了】以及如何将博客部署到 GitHub Pages。