如何用hugo搭建一个个人博客网站

最新推荐文章于 2024-09-23 17:40:16 发布

女可

最新推荐文章于 2024-09-23 17:40:16 发布

阅读量1.8k

点赞数 1

分类专栏：功能实现文章标签： go

本文链接：https://blog.csdn.net/qq_40605238/article/details/111193659

版权

功能实现专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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

官网地址：https://gohugo.io/
中文文档：https://www.gohugo.org/
参考视频：手把手教你从0开始搭建自己的个人博客-CodeSheep

这个项目，主要是通过hugo来搭建一个属于自己的个人博客网站。
官网有现成的博客主题可供下载，对于想快速拥有一个个人主页或搭建一个网站的程序猿来说，是个不二之选~

这是我搭建的一个比较基础的博客网站，大家可以先看看效果是怎样的
博客地址：https://liuhui713.github.io/
git地址：https://github.com/LiuHui713/LiuHui713.github.io.git

以下为我整个搭建过程的记录，使用到的网站链接都附上了，还贴了一些搭建过程中查找的资料。

1、软件安装

1.1 hugo

mac安装hugo：需先下载好软件安装工具brew，然后在brew中输入命令行下载hugo

下载命令：brew install hugo
查看版本（检查是否安装成功）：hugo version

windows安装hugo：可直接在官网下载hugo安装包
官网地址👉 https://github.com/gohugoio/hugo/releases
在这里插入图片描述
下载完成后，配置hugo环境变量：

右键电脑→属性→高级系统设置→环境变量，进行配置

在这里插入图片描述

1.2 git

后续安装博客主题、部署时会用到。
git安装配置：菜鸟教程
注册github账号：github官网

2、用hugo生成个人博客

启动hugo：双击hugo.exe（几秒后会闪退）
打开cmd，输入：cd  你要存放博客文件的目录
生成静态网站：hugo new site 网站文件名
（生成成功后，会提示网站所在文件路径）

进入生成的网站文件夹：
可看到生成了以下一些文件，说明此时站点已成功生成
在这里插入图片描述

3、下载并设置主题

我使用的主题是：https://themes.gohugo.io/theme/hugo-theme-dream/

进入hugo官网主题选择页面：https://themes.gohugo.io/
选择喜欢的主题，找到git地址链接，git到本地

git clone git地址

若主题下载成功，进入themes文件夹，可看到以“主题名”命名的一个文件
在这里插入图片描述

4、本地启动博客站点

启动hugo：hugo server -t 主题名 --buildDrafts

启动成功后，复制访问地址，浏览器打开即可查看生成的网站效果
在这里插入图片描述
这时网站里除了默认内容，其他什么都没有

5、新建博客

创建博客

还是在myblog根目录

新建md文件命令：hugo new post/博客文件名.md

编写博客内容

方式一命令行

在mac或Linux下，可以直接输入如下命令来修改博客内容，但这样写起来很不方便。

vim blog.md

方式二 markdown

markdown语法：https://www.runoob.com/markdown/md-tutorial.html

拓展：
图床服务器：可将本地图片上传到图床服务器，并转换为链接，这样git的时候，就不用将本地图片一起push啦，访问的时候，加载图片速度也会更快。
这里给大家推荐两个我找到的免费、免登录的图床服务器：
路过图床（每天限量30张图)
SM.MS（这个不知道是否限量，大家可以试试）

vscode中打开.md文件，编写markdown格式的内容（或者其他可编写md文档的软件都行），写完后保存。

博客预览

还是进入根目录，启动项目访问。

启动hugo：hugo server -t 主题名 --buildDrafts

6、将个人博客部署到远程服务器

有的同学部署到github上，访问比较慢，但我感觉还好，手机上访问也挺快的如果你的访问很慢的话，可以试试部署到gitee，据说访问很快

6.1 git主页新建一个仓库

如果你做的是个人博客网站的话，仓库名建议使用你的git账户名：
在这里插入图片描述

6.2 部署网站到GitHub

1、生成公共文件public

hugo --theme=主题名 --baseUrl="http://仓库名/" --buildDrafts

进入根目录，会发现生成了一个public文件

进入public目录里的post文件夹，可以看到生成了一个index.xml静态文件，这就是我们git部署后跳转访问的地址

2、将public文件push到github上
进入public目录，然后以下都是git操作了，依次输入即可：

git init
git add *
git commit -m “提交备注信息”
git remote add origin 仓库地址
git push -u origin master
输入用户名、密码

push完成后，刷新github仓库页面，可看到本次push的内容
在这里插入图片描述

6.3 访问博客

浏览器输入仓库名，访问博客主页，即可看到我们新建的博客啦~
在这里插入图片描述

7、修改样式

最后，跟大家说一下我是怎么修改样式的

先给大家看看这个主题的作者搭建的网站（在主题目录里的README.md文件有这个主题作者的个人博客网站作为参考）
在这里插入图片描述

这是作者搭建的博客：

可以看到作者的网站地址和我们的不一样，因为我们是部署到github服务器上的，是一个静态文件，国外服务器访问较慢，但好在免费，而作者是应该部署到国内服务器上的，是需要money的，哈哈哈

那如何修改样式呢？
我是直接把作者的博客git下来一一对照着改的，这里就直接和大家说结论啦

1、网站黑白主题的背景图、个人信息、网站图标等配置内容是在config.toml里修改的
2、static文件夹主要用来存放一些配置图片：头像、网站图标、博客封面等等
3、博客：content文件夹里有两个子文件夹，post文件夹就是用来存放首页博客的
在这里插入图片描述 4、content里的about文件夹，主要是用来存放展示在网站背面介绍信息的md文件
5、另外，这个网站还支持将博客存为图片的功能哦~很nice

最后，网站导航栏的搜索功能说明一下，本地运行的时候可以用；访问git生成的网站地址无法使用搜索功能，是因为这已经是一个静态文件了

好啦，到这里，搭建一个静态网站的过程就全部结束啦~
做完感觉还是挺爽的，只是后续维护，交互方面个人认为还处于劝退阶段……尤其是添加博客，像我这种部署在git上的，操作起来太麻烦了，而且评论、点赞、数据统计等功能如何嵌入进去，还有待解锁。
所以，继续优化吧！