Back

【hugo+stack】搭建过程

简单的记录一下搭建该博客的过程。

hugo+stack

本主题由 CaiJimmy 制作并发布,这个仓库是由 Mantyke 修改的魔改版本

Github 仓库地址:Mantyke/stack-theme-mod


参考文章:https://cuttontail.blog/blog/create-a-wesite-using-github-pages-and-hugo/(师傅写得很详细,我就不再赘述。)

思路:GitHub pages + hugo 进行搭建博客。

不过在途中遇到一些问题:hugo server 时总是报错,因此决定采取更加容易的搭建方式。

可能原因是:

  • 主题模板与hugo 版本不适配。
  • 模板中post文章的语法出错。

hugo

根据Hugo 文档:Install Hugo去安装hugo。

1
2
#检查是否安装成功(extend版)
hugo version  

stack

在项目目录下:(把Mantyke师傅的版本直接git到本地)

1
git clone https://github.com/Mantyke/Hugo-stack-theme-mod.git

不再使用 hugo new site xxxx创建网点的方式进行搭建。

GitHub pages

这个仓库必须使用特殊的命名格式 <username.github.io><username> 是自己的 GitHub 的用户名。

发布

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#生成静态网页到public
hugo 

#将  public  文件夹初始化为 Git 仓库,并设置默认主分支名为  main。
cd public
git init -b main

#需要设置 GitHub 的 ssh 链接
git remote add origin git@github.com:Rosewwwfr/Rosewwwfr.github.io.git

git pull --rebase origin main
git add .
git commit -m "...(修改的信息)"
git push origin main

后续管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#创建文章
hugo new xxx.md

#本地调试
hugo server

#生成html
hugo 

#上传到GitHub pages 
git add .
git commit -m "...(修改的信息)"
git pull --rebase origin main #可选,如果远端仓库与本地一致,则不需要合并。
git push origin main

刚开始可以手动发布,后续学习 gitthub action 自动发布。

相关配置

可以参考:官网的配置,写的十分清楚。

https://mantyke.icu/posts/2022/stack-theme-mod/

修改了一个实现分类双栏的效果:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
//--------------------------------------------------
// 文件位置~/assets/scss/custom/_custom.scss
/* 归档页面两栏 */
@media (min-width: 1024px) {
    .article-list--compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: none;
      box-shadow: none;
      gap: 1rem;
  
      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        border-radius: 16px;
      }
    }
  }
  

利用GitHub搭建简易图床

博客肯定少不了图片,手动上传就麻烦了一点,于是学一下搭建免费简易图床。参考

  1. GitHub 创建仓库
  2. 创建GitHub token
  3. 在 picgo 上设置。

image-20240410143656485
image-20240410143656485

在typroa 上设置 上传图片,方便写博客。

image-20240410143812940
image-20240410143812940

(先试试效果怎么样,不行再换)


到此,博客已经可以开始使用了,后续无聊在进行改动。

参考文章:

author: rose
Built with Hugo
Theme Stack designed by Jimmy
© Licensed Under CC BY-NC-SA 4.0