十分钟搭建一个私人的LoveIt风格博客

大概只需要十分钟即可搭建完成一个类似上图的私人博客.

1 简介

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

本教程只为快速搭建一个风格跟LoveIt展示页几乎一样的个人博客,只在源代码上进行了简单修改.如果想要完全打造一个个人风格的博客,还需要后续自行改造.

觉得不错的话请给原作者LoveIt点个Star吧,当然也请顺便给我lizilong1993点个Star吧,谢谢!

2 环境准备

你需要下载如下软件：

• hugo
• Git
• LoveIt

Hugo extended 版本能够支持支持更多的Markdown语法,建议下载Hugoextended版本.

如果github下载网速堪忧的话，也可以去gitee自行搜索，或者直接点击如下链接下载。

• hugo_extended_0.88.1_Windows-64bit.zip

• LoveIt-0.2.10.zip

hugo下载解压后如下：

image-20211103141748934

LoveIt主题下载解压后如下：

image-20211103141616088

Hugo下载完成解压后如下

image-20211103140443419

3 主题安装

3.1 创建你的项目

Hugo 提供了一个 new 命令来创建一个新的网站:

hugo new site myblog
cd myblog

运行结果如下:

image-20211103142610000

Hugo存放的文件夹路径需要添加到系统环境变量中去。

可以通过CMD执行

hugo version

来判断环境变量是否配置正确。

3.2 安装主题

请把下载主题文件LoveIt-0.2.10.zip解压放到 themes 目录.

image-20211103145445838

请将文件夹名称修改为LoveIt,或者你也可以修改myblog/config.toml文件中的theme字段。

4 配置主题

这里是关键步骤，虽然有点不求甚解，但是真的能够省很多功夫，问题就是后期修改需要经常去翻LoveIt的官方文档。

4.1 文件替换

将myblog/themes/LoveIt/exampleSite路径下的所有文件直接复制到myblog/下覆盖掉。

其中：

• assets存放全局资源
• content存放md文件，即你的文章
• static存放静态资源
• config.toml为博客配置文件

完成上面这步应该就能实现跟LoveIt官网（如下图）一模一样的效果了。

image-20211103151042819

使用hugo serve命令启动网站来看看效果吧。

由于LoveIt主题使用了 Hugo 中的 .Scratch 来实现一些特性, 非常建议你为hugo server命令添加 --disableFastRender 参数来实时预览你正在编辑的文章页面.