hugo搭建个人博客-第一弹构建博客项目

986 阅读2分钟

本项目整体架构如下:

  1. hugo+mogege主题搭建博客
  2. 代码托管在Github
  3. 通过Github Actions自动部署到阿里云服务器
  4. 阿里云服务器采用nginx进行代理对外服务

博客链接:superssssss.cn/ Github链接:superssssss.cn

项目效果图

先看效果图

主页

在这里插入图片描述

文章

在这里插入图片描述

About me

在这里插入图片描述

安装Go

直接下载安装包安装即可:golang.org/dl/

安装Hugo

在这里插入图片描述
hugo支持多种安装方式:gohugo.io/getting-sta…

mac下安装hugo

brew install hugo

然后在终端输入命令,验证是否安装成功

hugo version

在这里插入图片描述

创建个人博客

首先在Github上创建一个用于存放博客的仓库(仓库名称为:sitename),然后clone到本地,在本地使用命令初始化博客

hugo -f new site sitename

因为clone到本地的Github仓库里面包含文件,如果不使用-f参数会提示文件夹不为空,但是我们要保持在git下使用仓库,所以强制即可

初始化后的文件目录结构如下

在这里插入图片描述
其中有几个文件或文件夹比较重要:

  • congig.toml 用于存放博客的配置
  • content 用于存放你的博客文章
  • README和LICENSE是Github项目的介绍以及开源协议
  • static可以存放一些图片,但是直接使用的话图片加载起来会比较慢,所以推荐使用CDN加速,可以使用七牛云等作为图片图床
  • themes用于存放你博客采用的主题的相关文件

下载主题

你可以在hugo的主题中心找到自己喜欢的主题,并将它的相关文件下载下来放到你的themes文件夹下,之后在config.toml中配置一下你的主题

在这里插入图片描述

创建文章

在content下我们可以创建一个文件夹叫做posts,专门用于存储你的博客内容,之后自终端输入命令创建文章

hugo new posts/020505-firstPost.md

hugo创建文章是有模板的,文章头部会有+++的配置新东西,根据的模板就是

在这里插入图片描述
你可以修改default中的默认配置,这样新生成的文件就会按照你自定义的模版生成。可以参考

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
categories: [""]
tags: [""]

其中categories代表分类,tags代表标签,这样创建的文章hugo会自动在分类和标签中进行归档,包含多个内容中间用逗号隔开即可,例如tags:["test1","test2"]。

本地预览

创建完文章之后,你可以在终端输入命令

hugo server

这样就会在本地监听一个端口,你可以在本地预览一下博客的效果。

在这里插入图片描述
首页效果
在这里插入图片描述

其他

有一些像总结和About me没有介绍,创建的方式和创建post差不多,在这里就不赘述了,感兴趣的可以看一下我的配置方式。

下篇文章介绍文件推送到阿里云并配置Nginx。大家有任何问题欢迎留言。