个人博客搭建(三) freecrazy 2021-10-24T15:14:50+08:00 1743

Hugo博客搭建教程

一、目录初始化

  1. 进入前面建立好的Sites文件夹,右键点击“在windows终端打开"。(win10用户按住shift右键,应该有下图的选项,两个都可以点击。)

image-20211024154551123

  1. 进入小黑窗之后,输入如下代码即可创建hugo初始目录。test可以任意取名,之后会建立一个test的目录。
hugo new site test

image-20211024155949213

我们目前只需要关心红框目录

image-20211024160555766

content:放博客内容的,后续我们只需要在里面建立文件,更新即可。

themes:放置hugo主题文件的

config.toml:hugo配置文件

二、主题选择

进入主题页面https://themes.gohugo.io,选择自己中意的主题,点进去,跟着作者的教程一步步配置。

有些页面需要nodejs环境,有些需要hugo的extended版本,有些教程还有中文版本(没有也无妨,右键翻译即可),这些东西作者应该都会说明的。

要是没有说明的话,你换个主题吧,你俩无缘。

主题可是自己的门面担当,自然得挑三拣四、货比三家啦,自己都在主题上纠结了三天之久,最终选择了这个https://themes.gohugo.io/themes/hugo-theme-dream,所以后面的教程以这个主题为主。

三、主题安装

主题作者一般都会更新主题,修改bug,优化页面,使用新技术等等等,所以我们安装的时候选择用git的submodule安装,方便后续更新主题。

在之前的小黑窗中依次输入以下命令即可在把主题下载至theme目录下。

PS:若小黑窗关闭了,可以再Sites目录下继续右键打开(或者test目录打开,第一行命令就不要了)。

cd test
git init
git submodule add https://github.com/g1eny0ung/hugo-theme-dream.git themes/dream

都成功之后你的themes目录下就会有一个dream的文件夹

image-20211024171347168

四、主题配置

每个主题下载下来之后,都会有一个exampleSite文件夹,去里面把config.toml文件复制到test目录下替换掉。

image-20211024171704076

打开进去查看一下配置,这里我是用vscode打开的,你可以用记事本打开,我们看到主题文件那里错了。

image-20211024172856233

我们的目录是dream,它写的是hugo-theme-dream,我们把它改掉,其他的配置可以看教程来设置。

#号表示代码被注释掉了,我们需要这些属性的话可以把#号去掉,比如我把backgroundImage这个属性去掉了,这是配置博客背景的,我放了自己的图片进去。

配置好之后ctrl+s保存下。我的配置如下:网页背景跟头像链接可以用自己的。

image-20211024175744733

五、新建博客

其实上面咱们的博客已经配好了,心急的朋友可以在小黑窗中输入下面命令回车即可查看自己的博客了。

hugo server -D

image-20211024180858664

看到下面框起来的就是你的博客访问地址,你可以复制到浏览器地址栏打开,或者直接按住ctrl键点击打开。

然后你会发现除了博客啥都有了,如下图。

image-20211024181156272

新建博客也简单,一行命令搞定,posts是生成的目录,first.md是你新建的文件。

hugo new posts/first.md

PS:Hugo博客用的都是md文件。md 就是基于markdown语法的文件,只能说,超强大,类似于互联网中的毛爷爷,都支持它,有了它,word文档都没有点开过。

不懂别急,后面会介绍工具使用它,你就不用去记它的语法了。

去小黑窗,先ctrl+c把博客停了,然后输入命令,之后去content目录下找到并且打开它。我还是用vscode,你可以用记事本或其他编辑器打开它。

下面是各属性解释:

image-20211024183245532

我这里改了标题,头像你们需要可以把#号去掉,封面不要的话太丑了,网上找张图片,右键复制图片链接放进去即可。

类别,标签,自己设置,最后解释下draft属性,一般我们把它设置成false,或者直接删掉,因为我们后续会把它放入网上,这个属性为true的话,hugo不会渲染出来的。

下面是我的截图:

image-20211024184516124

看教程,还应加一个关于页面,就是页面翻转过后的页面,篇幅原因,这里就不加了,你们自己看教程去加吧

image-20211024184736763

最后输入hugo server -D,启动Hugo,查看自己的博客,你可以在posts目录下多复制几个first.md,这样就能知道你以后文章多了之后的效果了。

image-20211024185220136

点击进去就能看到我们的博客内容了,以后要新增文章,执行hugo new *** 命令即可。

至此个人博客就搭建完毕了,当然只是本地搭建完毕了,要让别人访问请移步下一篇教程。

PS:博客只是辅助,我们的文章才是我们要关注的重点。没有上线之前,可以把内容更新起来。

© 2021 - 2024 闲余悟道

载入运行时间...

avatar
关于我

癫狂乐天,狂放不羁,叛世逆俗,天纯不可一世。

跑酷

游戏玩腻,自个寻的,只喜纯跑,不喜炫技

滑板

身处异乡,未找到跑酷伙伴,转投滑板,oli练到死

骑行

通勤会的,通着通着成了爱好,不攀里数,不懂车构,菜腿一枚

爬山

老妈生错了生肖,喜欢在台阶或石头上蹦跶

设计

大学学的,PS效率实用流

代码

培训得的,已弃坑,得益于此,软件玩得起飞,如本博客内容

剪辑

无聊学的,人生苦短,想学的太多,学会罢了,我应该会了了吧……

写作

读书多了自然而然就……he,tui,人人都会,正在精进中

独自环过岛

海南岛,9天骑行,一人一包一帐篷,事故故事一堆堆

只身入过藏

心之所向,21点的太阳妙不可言

万里路

不少,如……

万卷书

微多,如……


人生苦短,繁华三千,可纵情声色,亦可摇桨泛舟。

碎年流光,若都平淡如水,岂非虚度一遭。

波澜不惊的一生虽不可恨,但数载光阴就历尽沧桑的生活应该更畅快。

别试图在文章末尾评论处留言,那只是摆设,不过若是打赏,我定会收到心意。联系方式本页社交链接中有猫腻。

清心决

心若冰清,天塌不惊。

万变犹定,神怡气静。

尘垢不沾,俗相不染。

虚空甯宓,浑然无物。

无有相生,难易相成。

份与物忘,同乎混涅。

天地无涯,万物齐一。

飞花落叶,虚怀若谷。

千般烦忧,才下心头。

即展眉头,灵台清幽。

心无挂碍,意无所执。

解心释神,莫然无魂。

水流心不惊,云在意俱迟。

一心不赘物,古今自逍遥。

自由转载-非商用-转载注明出处即可。