[教程]Hugo配置并使用Cloudflare Pages部署

BUG记录

在使用过程中发现了无数奇怪的Bug,就在这篇文章中记录吧。

  • 当发布日期是未来的时间时,这篇文章就不会被编译。

Hugo初始化以及与Github的配置

这篇文章我会记录如何初始化Hugo项目并同步到Cloudflare Pages 部署的。 为什么不用Github Pages呢?因为Github Pages 要求公开储存库或者订阅GitHub Pro。不想公开储存库的话,我们就直接用Cloudflare Pages部署还是更为便捷。Cloudfalre Pages支持构建后最大25MB的网站托管,除此之外没有任何其他限制。我初期把图片也放一起,后续文章图片多了,我会自建一个图床负责所有的图片存储,25MB足够储存大量页面。

安装Hugo

你可以使用apt安装hugo,但大多情况下不是最新版本

apt install hugo

或者使用snap安装,snap安装后对文件目录有一些限制,但是安装的是最新版的hugo

snap install hugo

创建新的网站

如果是按照官方的示例,使用ananke主题的话,直接按照以下命令执行就可以。

hugo new site mysite
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

我本人最近用Stack主题比较多,这里是Stack主题的配置方法。

hugo new site mysite
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

相关配置示例

baseurl: /
languageCode: zh-cn
theme: hugo-theme-stack
paginate: 7
title: 闲来看山
copyright: kanshan

languages:
zh-cn:
    languageName: 中文
    title: 闲来看山
    weight: 1
    params:
        description: 只缘身在此山中
en:
    languageName: English
    title: Mountains
    weight: 2
    params:
        description: Because it's there.

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

# GA Tracking ID
googleAnalytics: G-xxxxx

# 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: zh-cn

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

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

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

    footer:
        since: 2023
        customText: <a href="https://beian.miit.gov.cn/" target="_blank">备案号</a>
                    <a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备xxxxxxxx号-1</a>

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

    sidebar:
        compact: false
        emoji: 🍥
        subtitle: 只缘身在此山中.✍️
        avatar:
            enabled: false
            local: false
            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: false
        provider: waline

        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: https://waline.linsnow.cn/
            lang:
            pageview: true
            emoji:
                - /source/Sticker-100/
            requiredMeta:
                - name
                - email
            locale:
                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: 3
            - 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: light

    imageProcessing:
        cover:
            enabled: false
        content:
            enabled: false

### 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: rss
        name: RSS
        url: /index.xml
        params:
            newTab: true
            icon: rss
        
        - identifier: github
        name: GitHub
        url: https://github.com/zots0127
        params:
            newTab: true
            icon: brand-github

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: true
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        noClasses: false
        codeFences: true
        guessSyntax: true
        lineNoStart: 1
        lineNos: false
        lineNumbersInTable: true
        tabWidth: 4

使用Cloudflare Pages 自动部署Hugo到自定域名

登录到Cloudflare之后,选择worker,然后点击创建新的worker后选择pages。 然后会让你连接到GitHub并选择储存库。