blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记

简介: 该文是关于博客引擎的系列文章,对比了jekyll、hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman。文章包括jekyll的安装和SEO,hugo和Hexo的入门,Pelican和Gatsby的介绍,VuePress和Nuxt.js的特性,以及Middleman的概述。Hugo是一个基于Go语言的快速、简单的静态网站生成器,特点包括速度快、易用、灵活和跨平台。文章还提供了Hugo在Windows上的安装步骤及创建、预览和发布网站的指南。

拓展阅读

blog-engine-01-常见博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比

blog-engine-02-通过博客引擎 jekyll 构建 github pages 博客实战笔记

blog-engine-02-博客引擎jekyll-jekyll 博客引擎介绍

blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 环境安装,官方文档

blog-engine-02-博客引擎jekyll-jekyll SEO

blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记

blog-engine-05-博客引擎 Hexo 入门介绍+安装笔记

blog-engine-06-pelican 静态网站生成 官方文档

blog-engine-06-pelican 静态网站生成 windows 安装实战

blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性

blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器

blog-engine-09-nuxt 构建快速、SEO友好和可扩展的Web应用程序变得轻松

blog-engine-10-middleman 静态站点生成器,利用了现代 Web 开发中的所有快捷方式和工具

前言

由于个人一直喜欢使用 markdown 来写 个人博客,最近就整理了一下有哪些博客引擎。

感兴趣的小伙伴也可以选择自己合适的。

Hugo 是什么?

Hugo 是一个用 Go 语言编写的静态网站生成器。你可以把它想象成一个超级能干的建筑工人,能够迅速搭建起一个网站。

Hugo 的特点

  1. 速度快
    Hugo 以快著称,它可以在几秒钟内生成一个完整的网站,这速度比大多数动态网站生成器快多了。

  2. 简单易用
    使用 Hugo,你只需要专注于内容,其他的布局和样式都由 Hugo 帮你搞定。

  3. 灵活性高
    虽然 Hugo 是静态的,但它支持各种主题和插件,你可以定制你的网站,让它独一无二。

  4. 跨平台
    Hugo 可以在 Windows、Mac、Linux 等操作系统上运行,非常灵活。

如何使用 Hugo?

  1. 创建新网站
    打开终端或命令提示符,输入以下命令:

    hugo new site my-blog
    

    这里的 my-blog 是你的网站名,可以换成任何你喜欢的名字。

  2. 选择主题
    Hugo 社区提供了很多免费的主题,你可以在 Hugo 的主题网站上挑选一个你喜欢的。

  3. 添加内容
    在网站的 content 目录下创建 Markdown 文件,就可以开始写博客了。

  4. 本地预览
    输入以下命令,启动 Hugo 的本地服务器:

    hugo server
    

    然后在浏览器中输入 http://localhost:1313,就可以实时预览你的网站了。

  5. 发布网站
    当你的网站准备好了,可以通过 FTP 或者 Git 等方式,将网站文件上传到服务器,就可以让全世界的人看到了。

Hugo 的优缺点

优点

  • 速度快
    Hugo 的生成速度非常快,适合需要快速搭建网站的场景。

  • 简单易上手
    如果你熟悉 Markdown,那么使用 Hugo 会非常轻松。

  • 社区活跃
    Hugo 有一个非常活跃的社区,你可以找到很多教程和帮助。

  • 免费开源
    Hugo 是完全免费且开源的,你可以自由使用和修改。

缺点

  • 静态网站
    Hugo 生成的是静态网站,不支持动态功能,如用户登录、数据库交互等。

  • 需要一定的技术基础
    虽然 Hugo 简单易用,但对于一些没有编程背景的用户来说,可能还是需要一定的学习成本。

hugo windows 入门例子

require

Git

λ git --version
git version 2.33.1.windows.1

Go

λ go version
go version go1.21.5 windows/amd64

Dart Sass: 用于做 sass 转换为 css

install

  1. 安装 Hugo。你可以从 Hugo 官网 下载 Hugo 的二进制文件,然后将其解压到你的电脑上。

windows 的话:

https://gohugo.io/installation/windows/

release 地址:

https://github.com/gohugoio/hugo/releases/tag/v0.121.1

这里选择了:

https://github.com/gohugoio/hugo/releases/download/v0.121.1/hugo_0.121.1_windows-amd64.zip

下载之后解压,这是一个可执行的 exe

比如解压到:

C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64

quick start

使用 WSL 或者 git bash,我们在文件夹 C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64 下打开命令行

hugo new site quickstart
cd quickstart

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml

hugo server

PS: 这里 hugo.toml 估计会报错。

建议手动修改:

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

如果配置了 path,就可以直接执行 hugo server。

没配置,可以指定全路径

C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64\hugo server

主题

https://themes.gohugo.io/

access

访问你的博客。你可以在浏览器中访问以下地址:

http://localhost:1313/

你应该会看到你的博客页面,不过默认这里 pages 是空的。

添加 page 页面

hugo new content posts/my-first-post.md

or

C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64\hugo new content posts/my-first-post.md

创建一个新的文件。

修改文件内容

---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
## Introduction

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

重新执行

hugo server -D

# 若要显示 draft 为 true 的草稿,则用下命令
# 若要在之后网页中显示文章,则要把 draft 改为 false

or

C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64\hugo server -D

界面还是很不错的。

hugo

部署

你可以将你的 Hugo 网站部署到任何 Web 服务器上。

例如,你可以使用 NginxApache 来部署你的 Hugo 网站。

或者 github pages

相关文章
|
12天前
|
JavaScript 前端开发 Linux
blog-engine-05-博客引擎 Hexo 入门介绍+安装笔记
这篇内容是关于博客引擎的系列文章摘要。作者对比了多个博客引擎,如 Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js 和 Middleman,并提供了实战教程,特别是详述了Jekyll的安装和SEO设置,以及Hexo的特性、优点(如简洁高效、丰富主题、插件系统和便捷部署)和Windows安装步骤。此外,还提及了添加本地搜索的配置方法。
|
12天前
|
搜索推荐 前端开发 Ruby
blog-engine-02-博客引擎jekyll-jekyll 博客引擎介绍
这组链接提供了多个静态博客引擎的对比和教程,包括Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman。Jekyll是一个基于Ruby的静态网站生成器,适合专注于写作的用户,强调简单、快速和灵活性。安装Jekyll需先安装Ruby,然后通过gem命令安装Jekyll和相关插件。创建新网站、启动本地服务器预览、写文章和定制样式是使用Jekyll的基本步骤。
|
12天前
|
数据采集 JSON 搜索推荐
blog-engine-03-博客引擎 jekyll SEO
该文集对比了多个博客引擎,包括Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman,提供了安装及SEO优化教程。SEO是Search Engine Optimization,能提升网站在搜索引擎的排名,增加曝光度和可信度。做好SEO涉及关键词研究、内容优化、速度提升、外部链接、结构清晰、移动适应和持续更新。难点在于竞争、需时间和规则变化。文章还分享了Google/Baidu收录检查方法及博客书写规范,强调标题和URL的标准格式。
|
12天前
|
Rust 前端开发 Windows
blog-engine-06-pelican 静态网站生成 windows11 安装实战笔记
这篇内容是一个关于在Windows 11上安装和使用静态网站生成器的教程,主要包括对多个博客引擎(如Jekyll、Hugo、Hexo等)的简介和对比,以及详细步骤教你如何在Windows环境下安装Python、Pelican、Rust和Cargo。作者首先介绍了Python和Pelican的安装,然后在遇到依赖问题时,引导读者安装Rust和Cargo来解决。最后,通过`pelican-quickstart`创建项目,编写Markdown文章并生成、预览站点。
|
12天前
|
JavaScript 前端开发 Windows
blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器
对比多个博客引擎如 Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress 和 Nuxt.js,文章提供了安装和入门指南。VuePress 是专为 Vue.js 爱好者设计的静态网站生成器,强调 Vue 集成、Markdown 编写、美观默认主题及插件系统。安装涉及 Node.js,通过全局安装 VuePress,然后创建、预览、构建和部署静态文件。适合技术文档和简单博客,但对非 Vue.js 用户有一定学习曲线。
|
5月前
|
前端开发 Cloud Native 安全
简单使用 Hugo 博客
简单使用 Hugo 博客
|
8月前
|
开发工具 git Ruby
|
测试技术
laodrunner入门教程(21) --人工场景
用户组模式和百分比模式
103 0
laodrunner入门教程(21) --人工场景
|
自然语言处理 C++ 芯片
SystemC Tutorial 1 简介
1、SystemC是什么?VHDL、Verilog/SystemVerilog、SystemC是现代集成电路的基本设计语言,是主流硬件描述语言仿真软件如ModelSim、VCS等所并列支持的仿真器自然语言。其中VHDL是第一种基本设计语言,Verilog和基于它发展起来的SystemVerilog是第二种基本设计语言,而SystemC是第三种基本设计语言。SystemC不是一门新语言,而是基于C+
752 0
|
资源调度 JavaScript 前端开发