使用Hugo快速搭建个人博客网站

2 篇文章 0 订阅
1 篇文章 0 订阅

比较多人习惯用Hexo、Hugo、Jekyll这些博客框架搭建自己的博客。本文详细介绍利用最新的Hugo来(基于Go语言的博客框架)在windows上搭建个人静态博客网站。

使用Hugo搭建博客前提:

电脑安装并配置好Git
在注册GitHub账号
掌握一定cmd和linux命令操作
掌握配置各种环境变量

第一步:安装Hugo

Hugo官方下载地址
下载下面的压缩包
在这里插入图片描述
在这里插入图片描述

下载完成后就解压放在你喜欢的地方,不用安装,就直接在windows配置环境变量就好了。
配置环境变量如下图:
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
把刚刚的hugo_0.74.3_Windows-64bit文件路径复制到这里就可以了
在这里插入图片描述

在cmd输入hugo version 出现如下信息就表示安装好了。
在这里插入图片描述

第二步:创建一个人博客文件夹

在这里插入图片描述
在当前目录右键打开git
在这里插入图片描述

输入:hugo new site myblog (myblog是自己的博客名)
在这里插入图片描述
打开myblog
在这里插入图片描述

第三步:下载并设置博客主题

进入Hugo博客主题(https://themes.gohugo.io/)下载库挑选自己喜欢的博客模板这里使用Prav模板为例点击Download(如果访问Hugo博客主题官网慢的话可以看这篇博客https://blog.csdn.net/weixin_43227626/article/details/109649410

在这里插入图片描述
在这里插入图片描述
也可以点击Dome浏览一下效果
复制链接
在这里插入图片描述
切换到themes文件夹,然后输入:
git clone https://github.com/pravin/hugo-theme-prav.git克隆,这样直接克隆速度是比较慢点,可以借用gitee的仓库加快速度。
在这里插入图片描述
下载完后
在这里插入图片描述

第四步:本地启动博客

进入刚刚克隆下来的hugo-theme-prav主题文件夹里面的exampleSite文件夹,然后把里面的config.toml文件复制自己博客站点的根目录下,接点击替换就好。
在这里插入图片描述
config.toml文件是一个主题样式配置文件,想要什么样式和功能就是在这个文件配置。
在这里插入图片描述

在博客根目录下,输入一下命令:

hugo server -t hugo-theme-prav --buildDrafts

hugo-theme-prav是刚刚克隆下来的主题文件夹名
在这里插入图片描述

1711539076@qq.ocm

复制http://localhost:1313到自己的浏览器中,运行成功:
在这里插入图片描述

第五步:写一篇文章进行测试

在博客的根目录下,命令行中键入hugo new post/firstblog.md
在这里插入图片描述
使用Typora打开写入内容(也可以使用其他软件打开比如:VC或者sublime)
在这里插入图片描述
重新运行

hugo server -t hugo-theme-prav --buildDrafts

在这里插入图片描述
想要配置自己的博客主题,可以看github上这个主题Hugo Theme Prav文档介绍(https://github.com/pravin/hugo-theme-prav),里面有说如何在config.toml文件中设置这款主题的样式
在这里插入图片描述
在这里插入图片描述

第六步:将个人博客部署到Github上

点击如下创建仓库
在这里插入图片描述
名称这里一定要跟你的用户名一样然后加.github.io,我这里报错是因为我已经设置过一个了,要不然后面访问的时候就是用户名/项目名称
在这里插入图片描述
在myblog目录下,cmd命令行中键入命令hugo --theme=hugo-theme-dream --baseUrl="https://huangkongsheng.github.io/" --buildDrafts

这里的https://huangkongsheng.github.io/替换成自己的。

代码执行后就会在myblog文件夹下生成一个public文件夹
在这里插入图片描述

切换到public文件夹下
1、git init
2、git add .
3、git commit -m "我的博客第一次提交"
4、git remote add origin https://github.com/huangkongsheng/huangkongsheng.github.io.git
5、git push -u -origin master

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值