如何用 hugo 搭建个人博客

453 阅读2分钟

1.安装Hugo

Hugo Releases上下载最新版的Release程序。

2.配置环境

1.解压,把hugo.exe放到D:\Software\hugo\hugo.exe

2.把D:\Software\hugo放到PATH:我的电脑右键-->属性-->高级系统设置-->在"高级"标签页中-->环境变量...,选中PATH变量,并编辑...,在编辑值中新添加hugo程序的路径D:\Software\hugo即可。

3.重启终端并运行hugo version查看hugo版本。

3.创建本地网站

1.创建新文件夹D:\Software\Hugo\Sites
2.创建文件夹名为blog的网站,运行命令行hugo new site blog

创建的站点文件目录说明:

  • archetypes :存放default.md,头文件格式
  • content :content目录存放博客文章(.markdown/.md文件)
  • data :存放自定义模版,导入的toml文件(或json,yaml)
  • layouts :layouts目录存放的是网站的模板文件
  • static :static目录存放js/css/img等静态资源
  • config.toml :config.toml是网站的配置文件

4.安装主题

Hugo官方主题:themes.gohugo.io/

Hugo官方主题GitHub:github.com/spf13/hugoT…

这里选取Hyde主题为例,从gitHub下载下来,将解压出的文件放到themes文件夹下。主题存放的路径为:Sites\blog\themes\hyde,包含以下文件:

  • archetypes :存放default.md,头文件格式
  • layouts :主题模板文件
  • static :静态资源
  • theme.toml :主题配置文件

5.运行Hugo Server

Hugo内置http server,在你的站点根目录执行hugo server命令,即可在浏览器里输入: http://localhost:1313访问网站。命令行:hugo server --theme=hyde

6.发表文章

使用hugo new命令创建文章。 命令行:hugo new post/xxxx.md 用文本文件或markdown编辑器打开文件 post/test.md ,并增加内容。 默认创建的是草稿类型,需要将draft值改为false才能看到页面。

7.生成静态网站

命令行:hugo --theme=hyde --baseUrl="https://自己的用户名.github.io/"

所有静态页面都会生成到 public 目录下,生成静态网站后并push到你的GitHub Pages上,就能得到一个在线的个人博客。

首先在GitHub上创建个Repository,命名为:自己的用户名.github.io,然后用git 将刚才创建的 自己的用户名.github.io 项目clone下来。

将生成的 public 目录下所有文件拷贝到 自己的用户名.github.io 项目中,并提交版本。

最后,打开 自己的用户名.github.io的Github Pages