wilajeni's blog
主页 文章 标签 分类 关于 简体中文
wilajeni's blog

目录

用GitHub Pages搭配Hugo建立个人网站

wilajeni 收录于 技术分享
   约 2399 字   预计阅读 5 分钟 
参考资料

Hugo官网文档：给出简洁的Hugo指令和标准用法。

LoveIt：本站使用的主题官方文档，详细介绍如何应用主题和调整自定义内容。

整体思路

  1. 调用Hugo新建网站，会在指定目录下搭好一个网站框架；

  2. 用markdown写文章，在Hugo生成的框架下保存为.md文件；

  3. 调用Hugo编译网站内容，生成的html存放在public目录下；

  4. 将public的全部内容存放到GitHub；

  5. 使用GitHub Pages发布这个网站；

  6. 使用git指令更新网站内容。

前期准备

  1. 注册GitHub
  2. 安装git
  3. 学习Markdown

Hugo和GitHub配置

在git bash中配置用户

git bash是在windows安装git自带，打开后是一个命令行。配置用户的代码为：

1git config --global user.name "git用户名" 
2git config --global user.email "git邮箱"

在git bash中选择网站在本地的存放路径

输入cd，空格，将目标文件夹从文件管理器中拖拽到git bash窗口将自动输入该文件夹路径，运行。

配置Hugo环境

Hugo的官网没有提供下载页面，只能在其GitHub页面下载。

下载后windows版本的zip中只有一个hugo.exe，将这个exe放在一个纯英文目录/Hugo/bin路径下，将这个路径配置进系统和用户的Path。

之后在git bash中即可调用hugo指令，例如查看安装的hugo版本：

1hugo version

配置GitHub仓库

GitHub Pages分两种：

  1. 用户主页，网址为：https://<USERNAME>.github.io/，要求在建立repository的时候名称即为<USERNAME>.github.io
  2. 项目网页，网址为：https://<USERNAME>.github.io/<REPOSITORYNAME>/，repository名称任意，是上面用户主页的二级路径。

如果建立网站后主要靠个人注册的其他域名访问，则建立任意名称的repository存放网页也没什么不方便的。

用Hugo新建网站

初始化Hugo网页

按照Hugo官网文档Quick Start指引，在git bash中运行：

1hugo new site my_webname
2cd my_webname

就会在当前目录下建立一个名为my_webname的文件夹并且在其中建立一系列子文件夹和配置文件。

为网页设置样式主题

将my_webname目录初始化为git仓库，并且把主题仓库（选用LoveIt）作为网站目录的子模块。在git bash中运行：

1git init
2git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

修改网站的配置文件

按照LoveIt主题文档 - 基本概念的指引，修改config.toml。

注意

将baseURL设置为对应的GitHub Pages地址，例如https://<USERNAME>.github.io/

先设置网站的标题、作者名等标志性信息，图标、目录、语言、社交信息等可后续探索。

预览网页渲染效果

在git bash中运行：

1hugo server

在浏览器中打开http://localhost:1313查看网站。本地渲染的网站为热加载，对网站内容的修改，包括修改config.toml，编辑文章.md文件等，在保存文件后页面会随着更改自动刷新。

例外
如果文章修改了分类，热加载时不刷新网站“分类”页，需要Ctrl+C结束本次渲染后重新运行才能在“分类”页看到新增的分类。

增加新页面或新文章

在git bash中运行：

1hugo new posts/post_name.md

首次运行时，在网站目录下的\content中新建了posts文件夹。

该命令新建了一个md文件，在其中配置YAML信息，并按照markdown语法编辑保存，就是一篇新的post文章。

可以直接在contents目录下新建.md文件，执行Hugo指令后会自动渲染成路径\文件名的html网页。

加载draft页面
新建的文章默认draft: true，需要使用hugo server -D才能预览draft页面。

发布Hugo网站

生成网站html

在git bash中运行：

1hugo

会在网站目录下生成一个public目录，其中包含部署网站需要的所有文件，可以直接部署到服务器。

将网站存放到GitHub

按照Hugo官网文档Host on GitHub指引，在GitHub网页上找到前述为存放网页建立的repository的git地址，形如https://github.com/<USERNAME>/<REPOSITORYNAME>.git。

在网站目录下cd public进入到public目录，运行以下代码，作用是建立git项目、与远程repository关联并上传内容。

1git init
2git add .
3git commit -m "first commit"
4git remote add origin https://github.com/<USERNAME>/<REPOSITORYNAME>.git
5git push -u origin master
代码解释

git init 将当前目录初始化为git项目。

git add . 将目录下的内容全部上传。而 git add <FILENAME> 只上传指定文件。

git commit -m "first commit." 为这次上传添加备注。

git remote add origin ... 给本地文件夹关联一个远程的git项目。

git push -u origin master 将内容上传到上一行语句指定的项目的 master 分支。

设置GitHub Pages

在GitHub网站上打开该repository的Settings，找到Pages的设置页，将Branch设置为网页所在位置，例如master-/(root)。

网站生效后Pages的设置页会显示个人网站的地址。

等待时间
从上传成功到网页生效时间较长，可以等待数分钟后再刷新页面。

更新网站内容

如果网站内容有更新，可以先使用hugo server预览网页效果。

再使用hugo重新生成public目录的网页内容。

通过cd public进入public目录，运行以下代码更新git项目并推送到远程repository。

1git add .
2git commit -m "更新内容"
3git push origin master
commit时带日期的备注 
1git commit -m "update on $(date)"

最后通过cd ..回到网站目录。

用.sh脚本简化上传步骤

将上述语句保存为.sh脚本（例如d.sh）到网站目录，再调用脚本更新内容。 脚本文件中的内容：

1hugo
2cd public
3git add .
4git commit -m "update on $(date)"
5git push origin master
6cd ..

在网站目录下调用该脚本命令：

1bash d.sh
更新于 2023-01-01
 建站日志
返回 | 主页