今天来推荐一下自己开发的一个静态博客主题。先贴一个自己的主要样式,喜欢的朋友可以给一个star哟

为什么静态博客

虽然现在博客种类繁多,但是广告也非常多,且博客使用习惯参差不齐,而且无法自己管理所有的博客内容,所以就想办法自己写一个关于静态页面的博客。最初用的是Jekyll,但是由于vercel不支持低版本的Jekyll了,所以一怒之下,就改写了Hugo的主题,现在发现Hugo真香

为什么是Hugo

静态博客的生成也有很多工具,比如gitbook, vue-template, Jekyll, Hexo, Hugo等等,但是最终选定了Hugo,主要是因为自己本身也是开发Go语言的,所以想着Hugo上手可能会更快一点,没想到确实如此。另外Hugo的编译是真的快,比其他的要快上几倍,而且vercel可以指定Hugo的版本。最重要的是,Hugo编译只需要一个可以运行的文件就可以了,其他啥都不需要,这也是Go的优势体现。总而言之,Hugo真香

快速开始

  1. 下载安装Hugohugo release页面下载一个跟自己电脑平台相匹配的包,注意要下载v0.83.1版本以上的包。如果上不了github,可以参考国内github访问解决方案一文
  2. 新建一个项目 hugo new site example-site && cd && git init
  3. 添加为submodule git submodule add https://github.com/xnzone/theme-fd.git themes/theme-fd
  4. 配置config.toml 修改example-siteconfig.toml,具体可以参考themes/theme-fd/config-example.toml文件
  5. 调试测试 hugo server, 然后浏览器打开http://localhost:1313就可以看到内容了

使用技巧

修改导航栏头像

  1. 创建_override.scss make -P assets/sass && touch assets/sass/_override.scss
  2. _override.scss中添加以下内容 $avatar: // 你的导航栏地址

导航栏出现404

这是因为导航栏的地址需要配合content内容才能使用,如果没有创建相关的空markdown就会出现404,所以针对自己的导航栏,可以选择性输入以下内容

hugo new about/index.md
hugo new archive/index.md
hugo new links/index.md
hugo new guestbook/index.md

同时,如果没有输入哪个路由的话,需要在config.toml中不启用某个路由

头部栏信息

头部栏需要配合postcategory才可以使用,可以在config.toml中修改相应的名字和是否启用

如何写一个自己的主题

hugo的主题还是挺简单的,我完全是按照官方的英文文档来写的,其实主要是了解templates, functions, variableshugo pipelines就可以了,其他的可以选择不看。