需求分析

感慨到自从修读计算机专业以来，在感受ChatGpt应付水课的完美能力之余，笔者深感长篇幅语言表达能力渐渐退化，于是便萌生放一个博客的想法来充当自己的笔记仓库。

本学期开始，课程实验需要，笔者购买了3个月腾讯云ECS，并根据要求注册了域名，配置了证书。在当时利用业余时间，笔者从WordPress折腾到Ghost，再到后来自己尝试开发一些必要的组件以更好地支持latex公式展示和编辑，让被学校占满的课余时间多了些真正有用的事情。后来由于朋友请求，笔者服务器主要用来挂载创新项目的展示网站以及部署Minecraft服务器（千万不要用境外的节点服务器来搭建游戏服务器！）

随着服务器到期，笔者重新审视了自己的需求，长时间供养一个哪怕月均10元的阿里云服务器对于一个吝啬的我来说都是不必要的，因此将博客移植到githubpage上，笔者重新进行了简单的需求分析：

系统仅为一个静态界面，展示静态内容。
系统能够支持markdown编辑，支持全部Latex公式的渲染。
文章更新应当尽可能方便甚至无感。
应当能够支持bilibili,youtube，本地视频的嵌入。

GithubPage申请

笔者最初使用的是Ghost+Buster的方式，在本地起一个ghost服务，利用buster将界面保存为静态，然后上传到Github来部署。创建一个public仓库，命名为 zephyr.github.io然后记录下仓库远程url。创建page的仓库名必须为用户名.github.io。

GithubPage提供了许多方便的模板，您可以根据需要部署自己的page，但我们的目的是利用github托管基于Ghost搭建的博客，故先不进行page的设置。

Ghost+Buster阶段

由于buster不支持python3，因此首先需要sudo apt install pip2，然后安装ghost，配置ghost，反反复复若干次，仍然无法解决解决图片的导入问题

笔者发现在githubpage的仓库中，一个后缀为.jpg的文件会被正确保存，但是真正浏览界面的时候，会发现浏览器请求的会是<文件名.jpgjpg>。

反复修改deploy.sh的脚本后无果，遂放弃。

Ghost+Gatsby阶段

Ghost+Gatsby阶段来源于这个项目,其思路可以简单认为是一个前后端分离的项目，我们将前端项目保存下来，然后push到github的仓库中进行部署。笔者在尝试后依然没有解决前面的问题，遂放弃。

期间在运行gatsby develop过程中，文件过多，超过了linux的文件描述符限制，解决办法是增加inotify文件监视器的限制,编辑/etc/sysctl.conf文件，修改fs.inotify.max_user_watches=524288，再次运行gatsby develop，正常运行。

Hugo+GithubPage阶段

首先前往hugo仓库下载最新的windows extend版本下载hugo_extended_0.127.0_windows-amd64.zip 然后在windows的环境变量中添加hugo.exe的路径。新建一个用于存放自己博客的文件夹然后运行hugo new site <yoursitename>初始化一个site，然后根据提示，可以自己安装主题或者自己写主题。再一切都准备好后，我们可以使用hugo new <yourfilefolder>/文章标题.md来创建一个新的文章，其中在archetypes定义了自己主题应该有的模板文件default.md,以我的主题为例

---
layout:     post 
title:      "hugoblog搭建记录"
subtitle:   ""
description: "关于从0选择静态博客框架，从Ghost+Buster到Ghost+Gatsby再到hugoblog，设置主题，二次优化，问题排查过程的个人笔记"
date:       2024-06-11 12:00:00
author:     "Zephyr"
image: "img/cover.jpg"
published: true
tags:
    - notebook
    - blog
URL: "/hugoblogs/"
categories: [ Tech ]
mathjax: true
---

其中这些选项一眼便知道其含义，注意其中的published选项需要被设置为true才会被真正推送，否则会被放到draft类中作为草稿。

配置config.toml

配置config.toml可以免去在使用hugo时多次添加过多参数例如theme选项可以选择你的主题，主题中的多种参数都会存放在[params]项中。

此外，我们安装主题后，会在/themes目录下面，其中的exampleSite提供了一个示例

支持latex

我选择的主题本身不支持latex功能，latex对于我来说是刚需，因此在现有的Hugo主题框架上进行拓展，使用MathJax来使Hugo-page支持latex公式。

在themes/hugo-theme-cleanwhite/layouts/partials创建mathjax_support.html，添加如下代码

<script>
  MathJax = {
    tex: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"],
      ],
      displayMath: [
        ["$$", "$$"],
        ["\\[", "\\]"],
      ],
      processEscapes: true,
      processEnvironments: true,
    },
    options: {
      skipHtmlTags: ["script", "noscript", "style", "textarea", "pre"],
    },
  };

  window.addEventListener("load", (event) => {
    document.querySelectorAll("mjx-container").forEach(function (x) {
      x.parentElement.classList += "has-jax";
    });
  });
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
  type="text/javascript"
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>

然后添加Hugo渲染，在themes/hugo-theme-cleanwhite/layouts/partials/head.html中添加解析语法，注意解析语法要放在 head 标签之内。

<head>
  ...

  <!-- LaTeX  MathJax 3 -->
  {{ if .Params.mathjax }}{{ partial "mathjax_support.html" . }}{{ end }}
</head>
<style>
  code.has-jax {
    -webkit-font-smoothing: antialiased;
    background: inherit !important;
    border: none !important;
    font-size: 100%;
  }
</style>

在需要用到latex公式的page下添加

mathjax: true

然后就可以像平时书写markdown一样正常书写公式

在page中嵌入图片

静态页面嵌入图片属实是一个头疼的事情，笔者在前面Ghost+buster与Ghost+Gatsby过程中均在这一步挫败，因此心有余悸。在hugo中我们需要解决的重点是如何在本地书写完markdown后push到github上，保证界面仍然能够正确引用图片，笔者尝试了诸多方法，最终选择的方案是:

假设我们的博客文件都存在post目录下，每当我们想要新建一个博客的时候，我们创建一个文件夹，例如2024-06-11-helloworld
然后，将markdown文件命名为index.md，正常书写。
将图片直接放在与index.md文件同一级目录下即可。

在page中嵌入视频

Use the below hugo shortcodes to embed videos into your posts.

Bilibili (B站)

Youtube

Vimeo

注：根据自己的主题情形而定 嵌入视频的方法是在themes\<yourtheme>\layouts\shortcodes中添加对应的htmlcode 例如bilibili的嵌入

{{ $videoID := index .Params 0 }}
{{ $pageNum := index .Params 1 | default 1}}

<style>
    #biliplayer {
      width: 100%;
      height: 600px;
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      #biliplayer {
        width: 100%;
        height: 250px;
      }
    }
</style>

{{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID) }}
    <div>
        <iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" ></iframe>
    </div>
{{ else }}
    <div>
        <iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" ></iframe>
    </div>
{{ end }}

笔者添加了本地的视频嵌入方式,建立了vedio.html文件

{{- $src := .Get "src" | default "" -}}
{{- $poster := .Get "poster" | default "" -}}
<style>
    .video-wrapper {
        width: 100%;
        height: 600px;
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
        .video-wrapper {
            width: 100%;
            height: 250px;
        }
    }
</style>

<div class="video-wrapper">
    <video
        id="myVideo"
        controls
        src="{{ $src }}"
        style="width: 100%; height: 100%;"
        {{ if $poster }}poster="{{ $poster }}"{{ end }}
    >
        <p>
            Your browser doesn't support HTML5 video. Here is a
            <a href="{{ $src }}">link to the video</a> instead.
        </p>
    </video>
</div>

<script>
    var video = document.getElementById('myVideo');
    video.addEventListener('click', function() {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    });
</script>

将自己的需要的视频放在与index.md同级目录下最终通过

来引用视频。

将博客推送到github上

首先hugo来构建你的博客，然后cd public，在第一次推送时，需要git init初始化你的仓库，然后git add .,git commit -m <yourmessage>,git push origin main,最后等待githubpage部署完毕即可。


echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo -t hugo-theme-cleanwhite # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site $(date)"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin main

# Come Back up to the Project Root
cd ..

hugoblog搭建记录