基于hugo搭建个人站点

2021-06-06  本文已影响0人  GaryHertel

1.为什么使用hugo?

以前使用wordpress搭建网站,插件太多,完善起来比较费时费力。现在,静态博客也很受欢迎,hugo就是GO语言开发的一个静态博客生成器。

2.安装hugo

mackbook上直接使用brew install hugo安装hugo,安装完成后使用hugo version来查看hugo的版本。

3.创建站点

在Github目录下打开终端,或者cd到Github目录下:

hugo new site site_name

其中,si te_name为github账号名称加上.github.io,例如:

hugo new site gary-hertel.github.io

创建成功后会显示一些信息,诸如:

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
 Choose a theme from https://themes.gohugo.io/ or
 create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
 with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.</pre>

这就表示站点已经创建成功了。

然后进入到站点目录:
cd gary-hertel.github.io

使用tree查看目录结构如下:

├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

接下来需要为我们的网站指定一个主题,这里我们选择even这个主题:

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

将该主题增加到网站的配置文件中,这样才能生效:

echo 'theme = "even"' >> config.toml

测试下是否成功,运行:

hugo serve

这里是按照别的教程操作的,但是发生了报错,查看even这个主题的文档后发现有如下内容:

Installation

Important: Take a look inside the exampleSite folder of this theme. You’ll find a file called config.toml. To use it, copy the config.toml in the root folder of your Hugo site. Feel free to change it.

Important: This theme uses Hugo Pipes. Modifying contents in assets requires the extended version to be installed.

NOTE: For this theme, you should use post instead of posts, namely hugo new post/some-content.md.

这里提示我们查看themes/even/exampleSite目录下有一个示例的config配置文件,我们需要将这个文件复制到站点根目录,覆盖原文件,这样才能够使站点生效。配置文件中的信息可以查看一下,然后进行相应的修改。

4.增加文章

在站点根目录:

hugo new post/first_article.md

查看gary-hertel.github.io/content/post目录下新增了一个first_article.md的markdown文档,打开之后对其进行编辑即可,注意将draft:true修改为false.

撰写文章的方法就是通常开发者常用的markdown格式。

5.查看站点

在站点根目录下:

Hugo serve

然后就可以在浏览器中输入http://127.0.0.1:1313/进行查看了,在撰写文章或者进行配置修改等等操作时,内容会自动更新。

6.生成静态页面

hugo -d docs

静态页面会保存至站点根目录下的docs文件夹。

每次更新后我们都需要执行一下这条命令。

7.部署到github

在github上新建一个公开仓库,名为github用户名加上.github.io,例如gary-hertel.github.io

在仓库的settings的pages设置中,Source那里设置为:

image

说明如下:

8.总结

使用hugo搭建个个人博客还是不错的,一开始要花些时间折腾和摸索,后续就使用起来比较方便了,也不需要购买服务器去部署,部署在github上可能国内访问较慢,可以考虑部署到gitee.

上一篇下一篇

猜你喜欢

热点阅读