乐趣区

关于前端:10分钟用Hugo打造一个静态网站

什么是动态网站生成器?

简简略的说,动态网站生成器会获取你的内容,并将其利用于模板,而后生成基于 HTML 的动态网站。非常适合集体博客。

益处:

  • 疾速部署
  • 平安(无动静内容)
  • 疾速迅速
  • 应用简略
  • 可能进行版本控制

那么,都有哪些风行的动态网站生成器呢?

  • Gatsby (React/JS)
  • Hugo (Go)
  • Next.js (React/JS)
  • Jekyll (Ruby)
  • Gridsome (Vue/JS)

这些我的项目在 GitHub 上的知名度十分高。

Hugo 是什么?

其官方网站号称 Hugo 是世界上最快的动态网站引擎。

Hugo 是用 Go 语言编写的,它还有十分丰盛的主题零碎。

装置 Hugo

Mac:

brew install hugo

Linux:

sudo apt-get install hugo
或者
sudo pacman -Syu hugo

而后执行上面的命令查看是否装置胜利:

hugo version

应用 Hugo

创立一个新我的项目:

hugo new site my-project

下载一个主题。能够在 https://themes.gohugo.io/ 找到更多你喜爱的主题。

cd my-project
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

将主题增加到配置文件。

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

增加一篇文章。

hugo new posts/my-first-post.md

它看上去应该像这样:

---
title: "My First Post"
date: 2021-03-10T18:37:11+08:00
draft: true
---

Hello World!

能够在这里给文章增加增加更多属性配置(标签,形容,类别,作者)。

能够在 https://gohugo.io/content-man… 理解更多的配置项。

看看成果:

hugo server -D

在浏览器中关上 http://localhost:1313 就能看到你的网站了。

Hugo 的目录构造

.
├── archetypes
├── assets (not created by default)
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
  • archetypes:Archetypes 是内容模板文件,其中蕴含预配置的首选项(日期、题目、草稿等)。能够用自定义的预配置前端字段创立新的原型。
  • assets:Assets 文件夹存储所有文件,这些文件由 Hugo Pipes 解决(例如 CSS/Sass 文件)。默认不创立这个目录。
  • config.toml:Hugo 应用 config.tomlconfig.yamlconfig.json(能够在网站根目录中找到)作为默认网站配置文件。除了独自的配置文件之外,你还能够应用 config directory 来分隔不同的环境。
  • content:所有内容文件放在这里。顶级文件夹计为内容局部。如果你有 devopsnodejs 局部,那么你须要有 content/devops/first-post.mdcontent/nodejs/second-post.md 目录。
  • data:这里用来存储配置文件,Hugo 会在生成你网站时用到。
  • layouts:以 .html 文件的模式存储模板。无关更多信息,请参见 Styling 局部。
  • static:存储所有动态内容:图片、CSS、JavaScript 等。当 Hugo 创立你的网站时,static 目录中的所有资源均按原样复制。
  • themes:你所抉择的 Hugo 主题。

批改动态网站的款式

咱们在之前利用了一个主题。当初,如果咱们查看 themes 文件夹,能够看到款式文件。

然而要当心!

千万不要间接编辑这些文件!

应该将主题目录构造复制到 layouts 文件夹。

假如我要将自定义 CSS 利用于主题。

主题有一个 themes/theme-name/layouts/partials 文件夹,能够在其中找到一些 HTML 模板(header.htmlfooter.html)。当初咱们将编辑 header.html 模板,将内容从这个文件复制到 layouts/partials/header.html 中,并留神在主题 layouts 根目录中创立与主题雷同的目录构造。

layouts/partials/header.htmlss
themes/theme-name/layouts/partials/header.html

创立一个自定义 CSS 文件:static/css/custom-style.css,而后把自定义 CSS 文件增加到 config.toml 中:

[params]
 custom_css = ["css/custom-style.css"]

关上 layouts/partials/header.html

将这段代码增加到 <head> 标签内:

{{range .Site.Params.custom_css -}}
   <link rel="stylesheet" href="{{. | absURL}}">
{{- end}}

当初,就能够笼罩主题中所利用的 CSS 类。

构建动态网站

在我的项目的根目录下执行 hugo 命令:

>>> hugo
                   | EN  
-------------------+-----
  Pages            | 14  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  6  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 74 ms

执行胜利后,会生成一个 public 目录,这个目录中的内容就是咱们动态网站的所有内容。

而后就能够托管到 GitHub 或 OSS 中了。

Hugo 还提供了更多的内容,能够到官网文档查看:https://gohugo.io/documentation/。


本文首发微信公众号:前端先锋

欢送扫描二维码关注公众号,每天都给你推送陈腐的前端技术文章


欢送持续浏览本专栏其它高赞文章:

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的?从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战:在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么?
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K,该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现

  • 更多文章 …
退出移动版