Monodyee

这个屌丝很懒，什么也没留下！

热门标签

使用Hugo和Github Pages服务从零开始搭建个人博客_hugo中文文档

作者：Monodyee | 2024-05-01 02:07:26

踩

hugo中文文档

前言

前几天查资料的时候，意外注意到了别人的博客地址是github.io结尾的，出于好奇就查了一下，原来是利用github的免费Pages服务来托管静态网站。因此本篇文章还是采用学习笔记的方式来记录，不断更新。如有错误疏漏之处还望指出，共同学习进步。

简介

Github提供静态网站托管服务，也就是Github Pages服务；而Hugo是一个静态网站生成器，可从一系列源文件生成静态网站。

资料

GitHub Pages英文文档 https://docs.github.com/en/pages
GitHub Pages中文文档 https://docs.github.com/zh/pages
Hugo英文文档 https://gohugo.io
Hugo中文文档 https://www.gohugo.org

准备工作

关于Git

首先得安装git，官网 https://git-scm.com/
具体的安装和使用方法百度一下有很多资料，这里不占用篇幅了，个人推荐看这个Git教程：https://www.liaoxuefeng.com/wiki/896043488029600

还有就是可以安装tortoisegit，官网 https://tortoisegit.org/
安装tortoisegit就不用敲git命令了，右键一下很方便，而且还有中文语言包，对小白很友好。

github的正确打开方式

虽然可能有些太基础，但是还是提一下子，毕竟标题是从零开始搭建个人博客嘛。
注册账号就不提了，按照官网的注册账号流程走就行。
有些了解的同学应该知道github访问时灵时不灵的，具体什么原因就不乱讲了，总之方法有两种：
1.科学上网（需要梯子）
2.修改hosts
第一种就是弄个梯子就ok，这里只说第二种怎么操作。

首先打开cmd（win+r输入cmd），输入命令ping github.com，可以看到下面返回了IP[20.205.243.166]，注意具体的IP以当前返回的为准。
注意：如果ping不通，则去 https://github.com.ipaddress.com/获取IP。
在这里插入图片描述
然后进入电脑的C:\Windows\System32\drivers\etc路径，找到hosts文件。
如果打不开文件需要管理员权限，就右键-属性-安全，点编辑再选完全控制就行。

最后使用记事本或者各类文本编辑软件打开hosts文件并修改就行。
如图增加一行20.205.243.166 github.com，注意IP填自己ping的。
在这里插入图片描述
原理简单提一下，其实就是不通过DNS服务器解析域名，而是使用IP来访问github。

github的推送代码方法

为什么要提一下github推送代码的方法呢，因为现在已经不能使用账号密码作为凭证，而是需要使用令牌，所以需要注意一下。

1.点右上角头像选择settings，进入页面后再选择左侧列表的Developer settings。
在这里插入图片描述

2.来到这个页面可以看到左侧列表有个Personal access tokens项，点开后有两种tokens，这里我们选择Tokens(classic)；然后点页面中的Generate new token，选项中选择Generate new token(classic)。
在这里插入图片描述 3.然后跳出输入登录密码，之后进入下面的页面。
这里要注意：Note输入的名称会作为之后令牌登录的username，而生成的token则是password。
默认令牌有效期30天，可以按需修改。然后勾选repo项，就可以拉到最下面点击Generate token来生成token了。
在这里插入图片描述 4.生成的token是一串字符，点击旁边的复制按钮复制下来并妥善保管，这个token只能看一次，弄丢了的话需要重新生成。

5.前面也说到了，Note输入的名称会作为之后令牌登录的username，而生成的token则是password。之后在推送代码到git仓库时，就不要输自己的github登录账号密码了，是无法通过验证的。
在成功推送过一次之后，控制面板\所有控制面板项\凭据管理器中就会存储凭证，之后推送就不用再输任何东西了。如果令牌过期了，就到这里点开git:https://github.com项，把用户名和密码修改为新生成的、有效期内的note和token，然后就ok了。
在这里插入图片描述

初次尝试：建立一个简单的html页面

准备工作就絮絮叨叨写了这么多，实非我愿。但这些都是自己学习时踩过的坑，希望能帮助到更多的人不会重蹈覆辙。
现在进入正题，来建立一个简单的html页面作为登录页。

创建一个静态网站项目仓库

1.登录后点击右上方头像旁边的+号，选择新建一个仓库。
在这里插入图片描述
2.创建项目仓库时注意，仓库名以格式：账户名.github.io来创建。
如图我的账户名是test2782，那么仓库名就是test2782.github.io，仓库地址就是https://github.com/test2782/test2782.github.io，访问博客的网址就是https://test2782.github.io。
在这里插入图片描述

创建一个index.html

1.打开前面创建的仓库，点击Add file，选择Create new file。
在这里插入图片描述 2.文件名：index.html，这样才能作为首页来访问。
内容的话就写个经典的helloworld吧，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
</head>
<body>
hello world
</body>
</html>
1
2
3
4
5
6
7
8
9

3.最后点Commit changes提交代码就ok了。
在这里插入图片描述稍等几分钟，就可以输入网址：https://自己的账户名.github.io来访问自己的helloworld页面了。至此博客教程就算完成了第一步，在互联网上也是拥有属于自己页面的人啦。

浅尝辄止：使用hugo生成初始模板

hugo下载安装

安装包地址：https://github.com/gohugoio/hugo/releases
根据自己的系统选择对应的安装包，这里还是以windows系统举例：
在这里插入图片描述
但是hugo还有个extended版本，推荐直接安装这个版本，避免一些主题不支持基础版本。

环境配置

下载的文件解压后将其中的hugo.exe放在自定义文件路径下，这里我选择了D:\hugo。
然后就是基础操作，把路径D:\hugo加到环境变量的path里。
简单提一下怎么加环境变量，从来没加过环境变量、找不到在哪加的话还是百度下。桌面上右键计算机-属性-高级系统配置-环境变量，来到下面这个界面找到path点开，在最后面加上";D:\hugo"，注意每一个路径之间都有英文分号";"分隔。
在这里插入图片描述
加环境变量这一步做完就可以验证一下了。还是打开cmd，输入hugo version查看安装的hugo版本号，如果显示如下，说明安装配置成功了。
如果显示"hugo不是内部或外部命令，也不是可运行的程序或批处理文件。"那就说明环境配置有误，再重新检查一遍。在这里插入图片描述

生成初始站点

还是打开cmd，进入自己准备生成项目的文件目录。以D:\hugo为例：
切换到D盘：D:
进入文件目录：cd D:\hugo
在这里插入图片描述
以生成项目名test2782.github.io为例，输入命令：hugo new site ./test2782.github.io
这样就在 D:\hugo\test2782.github.io 目录里生成了初始站点。
进去目录：cd ./test2782.github.io

在文件夹里看一下目录结构。

创建第一篇文章

输入命令：hugo new post/first.md，first.md 自动生成到了 content/post/first.md。
在这里插入图片描述
使用markdown编辑器（例如typora）或者文本编辑器（例如vs code）打开，初始内容如下。
这里得提一下子，文件后缀.md就是markdown文件，使用markdown标记语言编写。语法很简单，百度一下几分钟就能上手，主要作用就是用来写笔记。
在这里插入图片描述
title就是这篇文章的标题，修改成自己想起的名字。
darft是标记这篇文章是否为草稿，虽然有预览草稿页面的命令，但正式生成的时候是不生成草稿页面的，所以现在先把true改为false。
正文内容就写在- - -之外，这里还是写个经典的helloworld。
在这里插入图片描述

引入一个主题

进入themes目录：cd ./themes
git克隆一个hyde主题：git clone https://github.com/spf13/hyde.git
在这里插入图片描述

本地启动

先修改下配置文件，也就是hugo.toml。
在初始的基础上我们需要做一些修改，增加一行：theme = ‘hyde’。
在这里插入图片描述
返回上一级文件目录：cd …
启动指令：hugo server

注意看倒数第二行，web服务启动在http://localhost:1313/，默认使用1313端口，但如果被占用的话就以实际为准。现在打开浏览器，在地址栏输入http://localhost:1313/，就可以访问部署在本地服务器上的个人博客了。
在这里插入图片描述

打包上传到github

修改配置文件hugo.toml，将baseURL的值替换为自己的github博客访问地址，代表网站语言的languageCode的值改为zh-CN。
在这里插入图片描述
然后输入打包指令：hugo -D

此时文件目录下生成了一个public的文件夹，将这个public文件夹中的内容推送到github仓库即可（怎么推送代码不再赘述，准备工作有讲）。

稍等几分钟，即可看到之前访问html文件的博客网站，已经替换为了由hugo生成的个人博客页面。

渐入佳境：引入心仪的自定义主题

资料

主题列表英文地址 https://themes.gohugo.io/
主题列表中文地址 https://www.gohugo.org/theme/
主题loveit项目地址 https://github.com/dillonzq/LoveIt

引入主题

在上述的主题列表网站中选择自己心仪的主题，然后和上一部分中的引入一个主题做法一致：
进入themes目录：cd ./themes
git克隆一个主题：git clone 主题的github地址
（以克隆主题loveit为例：git clone https://github.com/dillonzq/LoveIt.git）

进行配置

事实上主题就是一个预设模板，只需要根据说明文档来进行配置，修改hugo.toml文件就可以了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/516418