Welcome !

Hogo技术文档

目录


MacOS搭建Hugo进行Github托管

1.搭建环境

MacOS下需要安装Homebrew,其它操作系统访问https://gohugo.io/installation 查询安装文档。

安装Homebrew

##安装时如弹出443错误,则需将终端配置网络代理
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
##终端代理配置格式
export https_proxy=http://127.0.0.1:7890

安装hugo并进行配置

##安装Hugo
brew install hugo
##创建blog
hugo new site blog
##初始化仓库
git init
##下载主题,也可访问https://themes.gohugo.io/ 获取其它主题
git submodule add https://github.com/jinyekey/hugo-y.git themes/hugo-y

使用VScode打开创建的blog文件夹,找到hogo.toml 设置主题

baseURL = '设置域名'
languageCode = 'en-us'
title = 'y Site'
theme = 'hugo-y'

运行hogo

##网站预览地址http://127.0.0.1:1313
hugo server -D

创建文章

hugo new blog/test.md

2.托管到Github

登陆Github-创建新存储库,存储库中点击Settings-Pages, Source项选择GitHub Actions点击browse all workflows 找到Hugo点击Configure,再点击Commit changes…提交更改。

使用Github Desktop将本地blog文件夹push到存储库

Github Desktop下载

使用Github Pages提供的二级域名便可访问托管在Github上的Hogo网站

3.托管到Cloudflare Pages

登陆Cloudflare点击Workers和Pages,创建应用程序-Pages-连接到Git,选择之前创建的Github存储库-开始设置。

在 Pages 项目 >设置>环境变量中创建环境变量。将值设置为当前使用的Hugo版本。

##查看当前Hugo版本
hugo version

设置环境变量


Windows搭建Hugo

1.下载Hugo:
访问Hugo的GitHub发布页面

2.解压:
下载的 .zip 文件,得到一个 hugo.exe 文件

3.配置环境变量:

4.验证安装:

5.创建Hugo站点
在命令提示符或 PowerShell 中,导航到你想要创建站点的目录。

cd D:\hugo
hugo new site my-site

my-site 是你站点的名称。

6.选择主题:

cd D:\hugo
git clone https://github.com/theocean/beautiful-hugo.git themes/beautiful-hugo

7.配置站点:

8.创建内容:

cd D:\hugo
hugo new posts/my-first-post.md

9.启动本地服务器:
在 my-site 目录下,使用 hugo server 命令启动本地开发服务器。

hugo server

打开浏览器,访问 http://localhost:1313,可以查看你的站点预览效果。


在Hugo中嵌入视频

1.在 /layouts/shortcodes/ 目录下创建youtube.html 并粘贴以下代码

<div class="embed video-player">
  <iframe 
          class="youtube-player" 
          type="text/html" 
          width="640" 
          height="385"
          src="https://www.youtube.com/embed/{{ index .Params 0 }}?autoplay=1"
          style="
                 position: absolute; 
                 top: 0; 
                 left: 0; 
                 width: 100%; 
                 height: 100%; 
                 border:0;"
          allowfullscreen frameborder="0">
  </iframe>
</div>

2.创建一个markdown 嵌入youtube视频参数为:

##xxx为youtube视频链接watch?v=后面的数值
##编辑时将@删除
{@{< youtube xxx >}}

##自动播放
{@{< youtube id="xxx" autoplay="true" >}}

效果:

嵌入Bilibili视频

1.在 /layouts/shortcodes/ 目录下创建bilibili.html 并粘贴以下代码

<!DOCTYPE HTML>
<html>

  <head>
    <!-- style 样式 是为了让网页上的视频框按比例显示而非固定的大小 -->
    <style type="text/css">
      .aspect-ratio {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%;
      }

      .aspect-ratio iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
      }
    </style>
  </head>

  <body>
    <div class="aspect-ratio">
      <iframe
              src="https://player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1&high_quality=1&danmaku=0{{end}}"
              scrolling="no" 
              border="0" 
              frameborder="no" 
              framespacing="0" 
              allowfullscreen="true"
              sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
              >
      </iframe>
      <!-- src 中的 &high_quality=1&danmaku=0 设定了高清程度并默认屏蔽弹幕 -->
      <!-- sandbox 阻止了点击视频中的按钮跳转到B站的行为 -->
    </div>
  </body>

</html>

2.创建一个markdown 嵌入bilibili视频参数为:

##xxx为bilibili视频链接video/后的数值
##编辑时将@删除
{@{< bilibili xxx >}} 

##指定集数
{@{< bilibili xxx 8 >}}

效果:


Markdown超链接在新窗口中打开

新建目录layouts/_default/_markup/ 并创建render-link.html

##粘贴以下参数

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
[链接](https://www.github.com "Title")

Hugo中调整Markdown字体大小

在 layouts/shortcodes 目录下创建一个名为 fontsize.html 的文件,内容如下:

<span style="font-size: {{ .Get "size" }};">{{ .Inner }}</span>

然后在Markdown中这样使用:

##编辑时将@删除
{@{< fontsize size="20px" >}}这是20像素的文本。{@{< /fontsize >}}

在Hugo中锚点跳转的应用

Hugo常规的锚点跳转Markdown语法为:

# 目录
* [目录一](#标题)
## 标题
//跳转目的地

而锚点跳转到页面指定位置,并非某段文章标题时,可以使用Hugo Shortcodes,操作如下:

1.创建Shortcode文件

Hugo项目的根目录下,找到或创建一个layouts/shortcodes 目录。

2.编辑Shortcode文件

编辑或创建anchor.html文件,并添加如下内容:

<a id="{{ .Get "id" }}"></a>

Shortcode会生成一个带有指定ID的锚点

3.在Markdown文件中插入Shortcode

在Markdown文件中,使用Shortcode来插入跳转到目的地的锚点:

##编辑时将@删除
{@{< anchor id="display" >}@}

这行代码会在生成的HTML中插入一个带有ID:display的锚点。

4.链接到锚点

在Markdown文件中的其他位置创建链接,指向这个锚点:

[跳转到锚点](#display)

5.完整示例

## 目录

- [跳转到锚点](#display)

## 显示部分


这里是显示部分的内容。