Blog
Database website construction
hugo联合github搭建blog

hugo联合github搭建blog

June 10, 2024

平台：macbook
时间：2024.6
参考：
hugo教程：https://hugo.opendocs.io/getting-started/quick-start/
hextra主题：https://imfing.github.io/hextra/docs/getting-started/
其他大佬的分享：https://krislinzhao.github.io/docs/create-a-wesite-using-github-pages-and-hugo/
https://www.gohugo.org/

工具配置

hugo

brew install hugo

其他平台参考官方手册 git安装

hogu创建站点

仿照krislinzhao分享的教程，创建2个 GitHub 仓库，1个源仓库：用于储存所有 Markdown 、图片等。勾选 Pricate，设置为私人仓库。
1个GitHub Pages 仓库：储存由 Hugo 从Markdown 文件生成的 HTML 文件。命名为<username.github.io>（严格规范），设置为公开仓库。
这样就可以在本地博客源仓库中进行修改，之后 Hugo 生成的静态 HTML 文件部署到远端 GitHub Pages 仓库中。当然也可以都放在一个仓库。

hugo new site BlogSource
#由于选择的主题的要求，我再加一个参数
hugo new site BlogSource --format=yaml

下载主题,主题可以从官方查找

git init
git submodule add https://github.com/imfing/hextra.git themes/hextra

#在hugo.yaml中增加
theme: hextra

创建文档

hugo new about.md

生成的md文件自动产生于 content目录下，文档格式为：

+++
date = "2015-10-25T08:36:54-07:00"
draft = true
title = "about"
+++

date是文件创建日期；draft: true代表这篇文章是一个草稿，Hugo 不会显示草稿，要在主页显示添加的文章，可以设置 draft: false 此时已经已经可以在本地进行预览：

hugo server --buildDrafts --disableFastRender

文件架构

文件组织架构可以理解为目录的结构，需要结合使用的主题进行实践探索
krislinzhao分享的教程中提到可以把theme的exampleSite中文件直接复制过来，以减少许多问题，但对我所使用的主题hextra不起作用，有幸hextra也提供了很完整的教程,尤其是已经配置了github的工作流，可以直接复制它的项目进行一点内容的修改就可以直接用了。
hextra主题支持的架构如下：

content
├── _index.md // <- /
├── docs
│   ├── _index.md // <- /docs/
│   ├── getting-started.md // <- /docs/getting-started/
│   └── guide
│       ├── _index.md // <- /docs/guide/
│       └── organize-files.md // <- /docs/guide/organize-files/
└── blog
    ├── _index.md // <- /blog/
    └── post-1.md // <- /blog/post-1/

_index.md是索引，会自定根据你的文件夹结构进行侧边栏的层次设置

部署到到GitHub pages

我们已经建立了一个初具雏形的网页，对我来讲我还需要对它进行一个“部署”的操作，也是教程非常清晰了,在public目录新建.github/workflows/pages.yaml文件，按照教程填好内容即可。

之后就可以走git的流程啦

$ hugo
$ cd public  # 切换到本地存储网站内容的文件夹（假设名称为public）
$ #git init  # 在当前文件夹中初始化一个新的 Git 仓库,只在第一次使用
$ #git remote add origin https://github.com/username/username.github.io.git  # 将本地仓库关联到远程仓库，#只在第一次使用
$ git add -A  # 将所有更改的文件添加到 Git 暂存区
$ git commit -m "first commit"  # 提交更改并附上提交信息 "first commit"
$ git push -u origin master  # 将本地仓库的内容推送到远程仓库的 master 分支，并设置 "origin" 作为默认远程仓库

通过Git同步

保证网站没有更改的时候可以强制推送到远程仓库的main，一定要保重远程没有更改的情况下

git push -f origin main

关于自动化同步的我也找到一个脚本如下（来源待补充）

#!/bin/sh

# 任一步骤执行失败都会终止整个部署过程
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# 构建静态内容
#hugo # if using a theme, replace with `hugo -t <YOURTHEME>`
hugo --theme=hextra --baseURL="http://username.github.io/"

# 切换到 Public 文件夹
cd public

# 添加更改到 git
git add .

# 提交更改
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
msg="$*"
fi
git commit -m "$msg"

# 推送到远程仓库
git push origin main

如何远程有更改，就先把远程拉到本地（注意在publish文件夹执行），之后执行推送

cd public
git fetch origin
git reset --hard origin/main
cd ..
./deploy.sh

至此，暂结。

最后更新于
Mysql