搭建Hugo博客并部署到Github

xuejoy 收录于博客搭建

2021-03-26 约 1379 字预计阅读 3 分钟次阅读

利用Hugo框架搭建个人博客

初衷

毕业工作也有大半年了，最近一阵子发现，我已经好久没有学习新的技术，而且对什么事情都是三分热度，再这样下去怕是要废了😂

去年可能是因为疫情原因，在家里躺的太久，整个人有点丧😪，做啥事都提不起兴趣。工作后，发现周围的人都很优秀，莫名陷入一种焦虑的情绪中，加上抖音经常推送的一些内容，使我有点浮躁。

我觉得人还是需要给自己设定目标，这样才会有动力激发自己的潜能💃

现在突然想搭建个博客，用于记录工作学习中踩的坑，或是学习总结，或是日常记录…不管怎样，都要坚持更新下去，算是今年给自己立的一个flag吧🤔

废话不多说，第一篇博客就记录下搭建Hugo博客的过程吧。

安装Hugo

Hugo介绍

我之前用过Hexo搭建个人博客，选择Hexo搭建个人博客也是个不错的选择，但就是内容多的时候，每次生成静态资源的速度有点慢。所以这次我就选了Hugo来搭建个人博客，最主要的原因还是因为这个框架是基于go语言开发的，因此它最大的优势就是速度快，效率高😉

Hugo安装很简单，在官网下载所需的安装包，建议直接安装hugo_extended版本，因为LoveIt主题中有一些Features的实现只有extended版本的Hugo支持。

1

snap install hugo --channel=extended

安装完后，检查安装是否成功：

1

hugo version

接着，我们来创建博客的站点：

1

hugo new site myblog  #myblog是你创建站点的名称

安装主题

LoveIt：A Clean, Elegant but Advanced Hugo Theme

在Hugo主题官网上有很多不同风格的主题可供选择，这里我安装的是LoveIt这款主题。

进入刚创建的博客站点路径，下载LoveIt主题：

1

git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

主题配置

这里很容易出错，我在配置的时候，一直在报错，后面才发现原来是我的操作不对😵

一定注意

将LoveIt提供的范例站点文件直接覆盖当前站点。

1

cp themes/LoveIt/exampleSite/* .

并且如果不能访问Instagram网站，还需要删除content/posts/theme-documentation-built-in-shortcodes文件夹，否则会报错。

修改config.toml：关闭获取git信息，注释掉主题目录。

1
2
3
4


# 是否使用 git 信息
enableGitInfo = false
# 主题目录
# themesDir = "../.."

配置完主题，我们可以新增一篇博客并预览下效果：

1
2
3
4


# 新增博文
hugo new posts/first.md
# 预览效果
hugo serve

我们通过修改config.toml文件，可以自定义配置博客站点的信息，真正实现个人博客的自定义化。

具体参数可以参考👉官网。

部署到Github

部署到github上，可以通过公网访问个人博客

至此，我们已经搭建完个人博客的站点了，那问题来了，如果别人想访问或者自己通过公网怎么才能访问刚刚搭建的博客呢？接下来我们只需要将博客部署到Github上，就可以通过链接直接访问我们的博客了。

首先在GitHub上创建一个Repository，命名为：xxx.github.io （xxx就是你的github用户名的小写）；

将我们博客的静态资源编译打包：

1

hugo  --baseUrl="https://xxx.github.io" --buildDrafts

可以看到博客根目录下多了个public的文件夹，该文件夹的内容就是Hugo生成的整个静态网站内容。接着，只需要进入public文件夹下执行我们熟悉的git提交代码命令，即可通过https://xxx.github.io链接访问个人博客。

1
2
3
4
5
6


cd public
git init
git add *
git commit -m "第一次提交"
git remote add origin https://github.com/xxx/xxx.github.io.git
git push -u origin master

以上👆，我们的个人博客站点就搭建完成了。