使用hugo-stack主题快速搭建博客

郁丹枫

于 2024-08-12 10:54:16 发布

阅读量708

点赞数 9

分类专栏： hugo博客文章标签： go

本文链接：https://blog.csdn.net/liuhouliang/article/details/141125177

版权

hugo博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为什么是hugo

hugo 是最受欢迎的开源静态网站生成器之一，使用go语言构建，宣传自己是世界上最快的网络构建框架，拥有丰富的主题。

我的博客已经运行了四年了，目前就是由hugo-stack主题构建。最初是使用vuepress，后来改成了hugo。相比vuepress，hugo构建速度更快，主题更多，资料也更多，更加开箱即用。

对于前端开发者来说，也许自己动手搭建一个自己设计、编码的博客更酷点。但对于像我这样的后端开发者，甚至完全不会编程的人来说，使用hugo来搭建博客，只需要专注于内容创作，挑选一个自己喜欢的主题就可以了。

安装hugo

第一步当然是先安装hugo

MacOS

brew install hugo

Linux

sudo snap install hugo

Windows平台

choco install hugo-extended

当然这是官方的说明，我自己也是用的Windows平台，我选择直接去github下载可运行的.exe文件。选择hugo_extended_0.123.0_windows-amd64.zip，extended表示是扩展版本，windows-amd64表示是windows平台，64位。下载完成后解压缩，会得到一个hugo.exe文件。

将hugo.exe放入一个任意一个文件夹中，然后把这个文件夹目录加入到系统环境变量path中，此时hugo.exe可以在任意目录下使用

在控制台使用hugo version测试hugo是否安装成功。

hugo version

挑选主题

第二步可以直接去挑选喜欢的主题了主题地址，可以根据不同的类型来进行筛选：比如个人、博客、相册、作品集等等，也可以根据特性筛选：比如深色、响应式、亮色等等。用来做个人博客的话选择Blog分类，稍微安利下我使用的 Stack主题很适合个人博客网站。
请添加图片描述

安装主题

一般在主题界面会介绍安装步骤，也有的主题会提供一个在线文档，比如Stack就提供了文档网站它提供了两种引入主题的方式，我们使用最简单的方式安装。

初始化hugo mod

hugo mod init github.com/me/my-new-blog

新建config.yaml文件

# config.yaml
module:
  imports:
    - path: github.com/CaiJimmy/hugo-theme-stack/v3

启动项目

hugo server

注意这一步有可能因为网络原因失败。因为要从github上下载hugo主题。有两种解决办法

使用代理

set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

直接从github下载主题，然后放置在hugo/themes目录下，同时修改config.yaml

theme: hugo-theme-stack

打包hugo

# 输出目录 public
hugo

更新主题

hugo mod get -u github.com/CaiJimmy/hugo-theme-stack/v3
hugo mod tidy

编写博客

其实经过上一步的安装主题，已经拥有了一个可以运行、打包、发布的博客了。下面我们来学习如何编写博客

目录结构

要编写博客的话，直接进入content/post目录，新建一个文件夹比如：my-first-post，然后进入文件夹新建一个index.md文件，即可开始写博客了

├── config.yaml  # 配置文件
├── content      # 网站内容根目录
│   ├── page     # 页面目录 about/links/search等
│   ├── categories # 分类目录 自定义分类
│   ├── post     # 文章根目录
│   │   └── my-first-post # 文章文件夹
|   |        └── index.md # 文章文件
|   |        └── image.jpg # 文章图片
│   └── _index.md

markdown写作

博客是以markdown格式写的，我们可以在下载Vscode作为编辑器，使用markdown语法来写博客。
可以看到上面是博客信息，下面是博客内容。

title: 博客标题
slug: 博客url地址，也是唯一标识
date: 博客创建时间
description: 博客描述，会显示在标题下方
categories: 博客分类
tags: 博客标签

---
title: 我的第一篇博客
slug:  my-first-post
date:  2024-02-20
description: 第一篇博客写点啥好呢
categories:
    - Blog
tags : 
    - First
---

# 第一篇博客
## Theme Stack
我爱hugo

保存后即可在浏览器中查看效果，一般hugo server运行在localhost:1313，更改后会自动更新
请添加图片描述

配置主题

这是官方的配置说明，具体每一项的说明查看官方文档可以配置的内容非常多，包括多语言、深色主题、侧边栏导航、评论系统等

baseurl: https://example.com
languageCode: en-us
theme: hugo-theme-stack
paginate: 5
title: Example Site

languages:
    en:
        languageName: English
        title: Example Site
        description: Example description
        weight: 1
    zh-cn:
        languageName: 中文
        title: 演示站点
        description: 演示说明
        weight: 2
    ar:
        languageName: عربي
        languagedirection: rtl
        title: موقع تجريبي
        description: وصف تجريبي
        weight: 3

# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: en

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: false

permalinks:
    post: /p/:slug/
    page: /:slug/

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon:  # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)

    footer:
        since: 2020
        customText:

    dateFormat:
        published: Jan 02, 2006
        lastUpdated: Jan 02, 2006 15:04 MST

    sidebar:
        emoji: 🍥
        subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        avatar:
            enabled: true
            local: true
            src: img/avatar.png

    article:
        math: false
        toc: true
        readingTime: true
        license:
            enabled: true
            default: Licensed under CC BY-NC-SA 4.0

    comments:
        enabled: true
        provider: disqus

        disqusjs:
            shortname:
            apiUrl:
            apiKey:
            admin:
            adminLabel:

        utterances:
            repo:
            issueTerm: pathname
            label:

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:
            autoCreateIssue: false

        # Waline client configuration see: https://waline.js.org/en/reference/component.html
        waline:
            serverURL:
            lang:
            pageview:
            emoji:
                - https://unpkg.com/@waline/emojis@1.0.1/weibo
            requiredMeta:
                - name
                - email
                - url
            locale:
                admin: Admin
                placeholder:

        twikoo:
            envId:
            region:
            path:
            lang:

        # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
        cactus:
            defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
            serverName: "cactus.chat"
            siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)

        giscus:
            repo:
            repoID:
            category:
            categoryID:
            mapping:
            lightTheme:
            darkTheme:
            reactionsEnabled: 1
            emitMetadata: 0

        gitalk:
            owner:
            admin:
            repo:
            clientID:
            clientSecret:

        cusdis:
            host:
            id:
    widgets:
        homepage:
            - type: search
            - type: archives
              params:
                  limit: 5
            - type: categories
              params:
                  limit: 10
            - type: tag-cloud
              params:
                  limit: 10
        page:
            - type: toc

    opengraph:
        twitter:
            # Your Twitter username
            site:

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main: []

    social:
        - identifier: github
          name: GitHub
          url: https://github.com/CaiJimmy/hugo-theme-stack
          params:
              icon: brand-github

        - identifier: twitter
          name: Twitter
          url: https://twitter.com
          params:
              icon: brand-twitter

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    goldmark:
        renderer:
            ## Set to true if you have HTML content inside Markdown
            unsafe: false
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        noClasses: false
        codeFences: true
        guessSyntax: true
        lineNoStart: 1
        lineNos: true
        lineNumbersInTable: true
        tabWidth: 4

打包部署

经过了安装、编写博客、配置主题，接下来就该打包和部署了。
打包命令很简单

hugo

上传代码仓库

首先我想您应该选择一个代码仓库，比如github或者gitee，把代码放到这个仓库中，记得上传.gitignore。

public
resources
themes

cloudflare pages部署

github和cloudflare都提供免费的前端页面部署，我自己使用的是cloudflare pages。首先先去注册一个cloudflare账号 cloudflare。

然后进入Workers Pages栏目，点击创建应用程序，选择从现有git项目中创建，然后链接到你的github或者gitlab，选择你的储存库。
请添加图片描述

选择框架中找到Hugo，选择生产分支，点击保存并部署即可。这样你的站点就部署成功了，可以使用xxx.pages.dev来访问。相当于cloudflare提供了服务器、测试域名和自动构建，你上传到github仓库，cloudflare会自动拉取代码，打包更新。
请添加图片描述

域名购买

如果你不满足分配的域名，可以购买域名。在cloudflare点击注册域名，不到10美刀可以购买一年的.com域名。然后在pages设置自定义域，填写你购买的域名，就可以用域名来访问博客了。

大功告成

恭喜你，如果按照我上面的步骤，你已经完成了博客的搭建。当然虽然我写了看似很多，一些步骤对于没有编程经验的人来说还是会遇到一些问题。比如如何加入系统环境变量，如何使用vscode编码，如何安装git，如何使用github等等。不过我想这些问题都可以通过搜索引擎或者ai搜索解决，查找资料也是一个很重要的过程。我当初也是看了别人分享的搭建博客教程，一步步构建了自己的博客，还是挺激动的。

在2024年了，写博客也许不再是一个潮流的事情，但在广阔的互联网世界里，拥有自己专属的域名和博客，并且坚持写作，也是一件挺酷的事。

郁丹枫

关注

9
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
使用hugo-stack主题快速搭建博客

hugo是最受欢迎的开源静态网站生成器之一，使用go语言构建，宣传自己是世界上最快的网络构建框架，拥有丰富的主题。我的博客已经运行了四年了，目前就是由hugo-stack主题构建。最初是使用vuepress，后来改成了hugo。相比vuepress，hugo构建速度更快，主题更多，资料也更多，更加开箱即用。对于前端开发者来说，也许自己动手搭建一个自己设计、编码的博客更酷点。但对于像我这样的后端开发者，甚至完全不会编程的人来说，使用hugo来搭建博客，只需要专注于内容创作，挑选一个自己喜欢的主题就可以了。
复制链接

扫一扫

专栏目录