Hugo重启 迁移博客 静态Blog Stack主题

本人对于前端几乎没有任何基础。
这里主要记录一次Hugo博客重启的记录,使用的主题是Stack,理由(配置简单,功能齐全,文档较为友好)
主要内容包含以下几点:

  • hugo在archlinux上的安装
  • hugo的启动,stack主题的安装
  • 一些基本的新建,build,推送操作
  • hugo从linux迁移到windows

hugo在archlinux上的安装

直接使用pacman安装即可

1
sudo pacman -Sy hugo

其他发行版使用对应的包管理器安装即可

hugo的启动,stack主题安装

可以直接参考Hugo官方教程
新建一个你放hugo博客的文件夹,然后进入,这里是在用户目录下的HugoBlog文件夹下

1
2
hugo new ~/HugoBlog
cd ~/HugoBlog

安装主题stack

我选择submodule的方式安装,就是在HugoBlog新建一个git仓库

1
2
git init
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

网络不好可以替换到gitee,其他方法参考stack官方

修改一些配置

下载stack的内容后,可以选择直接修改theme文件夹下的stack主题的内容,我选择修改本地的文件,一些不需要修改的文件就留在stack主题文件夹里面,需要修改的部分就复制一份到HugoBlog(站点根目录)
这里我们只复制archetypes文件夹下的内容到跟目录下的archetypes文件夹

1
cp themes/hugo-theme-stack/archetypes/* ./archetypes/

复制官方示例网站的config配置文件,直接把文件拷贝到本地HugoBlog/config/_default/,我这里是全部转为了yaml,也可以直接使用toml。
配置好之后如图所示:

简单提一下,修改网页的标题啥的在config.yaml里面修改,并且加入theme: hugo-theme-stack启用主题,根目录下的hugo.toml可以直接删掉
还有一些头像,标签什么的在param.yaml文件里面设置

图片文件的说明

  • 配置config文件夹里面的yaml文件用的图片
    • params.yaml中的favicon用的图片放在根目录的static文件夹
    • 其他的yaml用的图片先在根目录的assets文件夹找,找不到的去theme主题文件夹里面的assets文件夹找
  • 写文章的markdown文件中插图全部放在文章所在目录即可

stack主题包含的主要内容

在content文件夹下有以下内容:
(官方content文件

  • categories 写分类页面,即点击主页的archive会跳转到一个分类好的页面,下面是文章目录,参考官方页面
  • page 每个文件夹对应一个小组件
  • post 放自己的markdown文章的地方

新建文章,Build,推送

新建

1
hugo new post/分类文件夹/文章.md # 使用的是archetypes文件夹中的default模板

新建分类

1
hugo new categories/分类文件夹/_index.md # 使用的是archetypes文件夹中的categories模板

新简小组件page同理。

写好分类信息,标签信息,标题即可

Build

就是把markdown文件转换为可以显示的网页 直接运行hugo即可

推送

生成的文件在public文件夹下,进入public文件夹并新建git参考,关联到远程的github.io仓库即可,然后git push即可

从linux迁移到windows

Windows安装hugo

  • 去官方github下载release的hugo压缩包 注意下载extended版本,stack主题需求

  • 解压到D:/Hugo/bin,并将该bin路径添加到环境变量path

  • 在Hugo目录下新建Site文件夹作为网页根目录,将Linux下的根目录文件全部复制过来即可,本人是从虚拟机迁移到宿主机,后续会将根站点一并推到git仓库,更方便修改更新迁移

Built with Hugo
Theme Stack designed by Jimmy