Skip to main content
  1. Posts/

个人博客搭建记录 hugo github actions

322 字· 0 · 0 ·
1. 安装hugo>

1. 安装hugo #

如果您以前没有使用过 Hugo,则需要将其 安装到本地计算机上。您可以通过运行命令检查它是否已经安装hugo version

确保您使用的是Hugo 版本 0.87.0或更高版本,因为该主题利用了一些最新的 Hugo 功能。

您可以在Hugo 文档中找到适用于您的平台的详细安装说明。

实操步骤>

实操步骤 #

  1. 下载zip文件

    https://github.com/gohugoio/hugo/releases

  2. 如图解压

    image-20230114190820149

  3. 添加系统变量

    image-20230114190913732

    根据实际情况看是否需要重启电脑
  4. 命令行测试是否添加成功

    image-20230114191021147

2. 创建一个新站点>

2. 创建一个新站点 #

运行命令hugo new site mywebsite在名为mywebsite.

请注意,您可以随意命名项目目录,但下面的说明将假定它的名称为mywebsite. 如果您使用不同的名称,请务必相应地替换它。

实操步骤>

实操步骤 #

  1. D:\hugo\Sites目录下运行命令hugo new site yoursitename

    image-20230114191322090

  2. 查看新建目录结构,并在其内部打开终端,即D:\hugo\Sites\mywebsite

    image-20230114191602643

3. 下载主题 — blowfish>

3. 下载主题 — blowfish #

使用 git 安装

此方法是使主题保持最新的最快和最简单的方法。除了HugoGo之外,您还需要确保在本地计算机上安装了Git 。

切换到您的 Hugo 网站(您在上面创建的)的目录,初始化一个新的git存储库并将 Blowfish 添加为子模块。

cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

然后继续 设置主题配置文件

另外:使用 git 更新

可以使用git命令更新 Git 子模块。只需执行以下命令,最新版本的主题就会下载到您的本地存储库中:

git submodule update --remote --merge

更新子模块后,重建您的站点并检查一切是否按预期工作。

4. 复制配置文件>

4. 复制配置文件 #

将建站时,删除在根目录自动生成的config.toml

mywebsite/themes/blowfish/config/_default复制到根目录mywebsite/ (复制后文件结构如图所示)

移动后

5. 具体配置>

5. 具体配置 #

基本配置>

基本配置 #

语言、baseURL、主题

# config/_default/config.toml
theme = "blowfish"
baseURL = "https://mykaneki.github.io/"
defaultContentLanguage = "zh-cn"
pluralizeListTitles = "true"

languages.en.toml在配置文件夹中找到该文件,重命名为languages.zh-cn.toml

[author]配置决定了作者信息在网站上的显示方式。图片应该放在站点的assets/文件夹中。链接将按照它们列出的顺序显示。

# config/_default/languages.zh-cn.toml
languageCode = "zh-cn"
languageName = "简体中文"
displayName = "ZH-CN"
isoCode = "zh-cn"
# 语言权重,越小越重
weight = 1
# 语言是否是从右到左显示的
rtl = false

title = "mykaneki's blog"
logo = "img/logo.png"
description = "My awesome website"
dateFormat = "2006-01-02"

[author]
  name = "mykaneki"
  # assets\img\OIP-C.jfif
  image = "img/OIP-C.jfif"
  headline = "I'm only human"
  bio = "Hello World"
  links = [
    { email = "cmy_kaneki@qq.com" },
    { github = "https://github.com/mykaneki" }
  ]

对应效果图

image-20230114230710443

菜单>

菜单 #

# config/_default/menus.zh-cn.toml
[[main]]
    # 显示的名称
    name = "文章"
    # 指向的目录
    pageRef = "posts"
    # 权重,自左向右变大
    weight = 20
[[main]]
	# 图标
    pre = "github"
    # 名称
    # name = "GitHub"
    # 指向外部链接
    url = "https://github.com/nunocoracao/blowfish"
    weight = 30

pageRef指向的是content\posts

image-20230114231536649

效果图

image-20230114231921446

缩略图和背景>

缩略图和背景 #

给每篇文章设置一个图片作为背景

图片名称为feature.*

文章内容应该写在index.md

image-20230114232122686

_index.md 是一个索引文件,作用是列出该目录下所有文章

一篇文章可以引用另一篇文章,此时需要注意目录的名称不能使用中文,而要使用英文,否则无法识别。
引用示例:
{{< article link="/posts/networkmapping/" >}}

文章目录分类

posts放比较短的文章,并且没有背景图片

image-20230114233033330

image-20230114233534617

docs放较长的笔记,有背景图片

image-20230114233417834

image-20230114233515051

series放系列文章,串联各个文章

image-20230114233604763

image-20230114233552790

标签和系列>

标签和系列 #

在每一篇文章的头部进行设置

---
title: "Shortcodes"
date: 2020-08-11
draft: false
description: "All the shortcodes available in Blowfish."
slug: "shortcodes"
tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
series: ["Documentation"]
series_order: 8
---

: 冒号后必须要空一格

tags要用双引号,而不是单引号

不能在tags中使用\ 但是可以使用/ (最好是都不要用),经测试,C\C++会显示成下图

image-20230114234407262

6. 浏览量、分析支持>

6. 浏览量、分析支持 #

  1. 转到 Firebase 网站并免费创建一个帐户

  2. 创建一个新项目

  3. 选择分析位置

  4. 通过获取项目的变量并将它们设置在params.toml文件中,在 Blowfish 中设置 firebase。可以在 该页面中找到更多详细信息。您可以在下面找到 Firebase 将提供的文件示例,注意 FirebaseConfig 对象中的参数。

    image-20230115002150587

  5. 设置 Firestore - 选择构建并打开 Firestore。新建一个数据库,选择以生产模式启动。选择服务器位置并等待。启动后,您需要配置规则。只需复制并粘贴下面的文件,然后按发布。

image-20230115000536111

image-20230115000737717

7. 托管和部署>

7. 托管和部署 #