↓跳转主页
整点内啡肽

Hugo-PaperMod | 超新手向 博客本地文件设置教程

·3796 字·8 分钟
Blog
目录

别人写的是技术博，而我只会写成吐槽博。

但吐槽也凑不出一篇文。

我努力一下，尝试让它看上去像个教程。

默默把原标题《Hugo静态博客搭建——关于我在坑里疯狂蹦迪这回事》划掉

最开始搭建时，参考的是塔塔的这篇教程 Hugo | 一起动手搭建个人博客吧。博客中推荐的是MemE主题，我照着教程很快就搭好了（在这里疯狂赞美塔塔 :blobcathearthug: ），教程写得很详细，我这个新手照着一步步来基本没有遇上什么大问题。

后来我在翻看hugo的 主题列表时，被 PaperMod吸引住了，我就：“啊！我要换成这个皮肤！” 灾难开始了。

如果你也对PaperMod感兴趣的话，请参考 这里以及 源代码，这是PaperMod的中文版网站模板、文档以及代码库，在我配置站点时，帮了大忙（有了可以抄的模板）。

关于hugo安装、Github怎么用、vercel注册以及VScode这些部分，请参考上文提及的 塔塔的博客.

在本地建好博客文件夹

首先确保已经下载安装好Visual Studio Code、Git、hugo以及在本地电脑上配置好Hugo.exe的环境变量。

其次，想好需要在哪个文件夹内放置整个博客文件夹。例如我想将博客文件夹放在D:\个人博客下，那么我就在D:\个人博客文件夹内页面空白处鼠标右键，点击Git Bash Here，在打开的命令行窗口输入 1:

hugo new site <name of site> -f yml

其中把<name of site>替换成你喜欢的名称，这里我用blogname替代。 回车完毕，可以看到在当前的文件夹页面内自动新增了一个名为blogname的文件夹（当然blogname可以替换成任意你喜欢的名称），这就是我们的整个博客文件夹了，点击去可以看到已经自动生成好了最基本的一些目录。

此时目录结构如下

|-- 个人博客
    |-- blogname
        |-- archetypes/
        |-- content/
        |-- date/
        |-- layouts/
        |-- static/
        |-- themes/
        |-- config.yml

看不懂每个文件（夹）名称的话也没关系，把它们放着不管就行了。

如果只是想照猫画虎先把博客搞出来的话，只需要知道content、themes、config.yml这三个是什么就可以了。

content
用来存放我们的markdown文档
themes
用来存放hugo主题文件夹
config.yml
站点配置文件，用VScode打开

下载PaperMod主题源码包 - themes

去( https://github.com/adityatelange/hugo-PaperMod)，将master分支源码整个打包下载下来。

解压，将整个文件夹复制进themes

*这里需要注意，从GitHub下载出的主题文件夹名是hugo-PaperMod-master，需要手动改为PaperMod，后面我们在站点配置主题时会用到这个名称。

站点配置 - config.yml

打开config.yml，清空，再将以下内容 2 全部粘贴进去、保存

baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

googleAnalytics: UA-123-45

minify:
    disableXML: true
    minifyOutput: true

params:
    env: production # to enable google analytics, opengraph, twitter-cards and schema.
    title: ExampleSite
    description: "ExampleSite description"
    keywords: [Blog, Portfolio, PaperMod]
    author: Me
    # author: ["Me", "You"] # multiple authors
    images: ["<link or path of image for opengraph, twitter-cards>"]
    DateFormat: "January 2, 2006"
    defaultTheme: auto # dark, light
    disableThemeToggle: false

    ShowReadingTime: true
    ShowShareButtons: true
    ShowPostNavLinks: true
    ShowBreadCrumbs: true
    ShowCodeCopyButtons: false
    disableSpecial1stPost: false
    disableScrollToTop: false
    comments: false
    hidemeta: false
    hideSummary: false
    showtoc: false
    tocopen: false

    assets:
        # disableHLJS: true # to disable highlight.js
        # disableFingerprinting: true
        favicon: "<link / abs url>"
        favicon16x16: "<link / abs url>"
        favicon32x32: "<link / abs url>"
        apple_touch_icon: "<link / abs url>"
        safari_pinned_tab: "<link / abs url>"

    label:
        text: "Home"
        icon: /apple-touch-icon.png
        iconHeight: 35

    # profile-mode
    profileMode:
        enabled: false # needs to be explicitly set
        title: ExampleSite
        subtitle: "This is subtitle"
        imageUrl: "<img location>"
        imageWidth: 120
        imageHeight: 120
        imageTitle: my image
        buttons:
            - name: Posts
              url: posts
            - name: Tags
              url: tags

    # home-info mode
    homeInfoParams:
        Title: "Hi there \U0001F44B"
        Content: Welcome to my blog

    socialIcons:
        - name: twitter
          url: "https://twitter.com/"
        - name: stackoverflow
          url: "https://stackoverflow.com"
        - name: github
          url: "https://github.com/"

    analytics:
        google:
            SiteVerificationTag: "XYZabc"
        bing:
            SiteVerificationTag: "XYZabc"
        yandex:
            SiteVerificationTag: "XYZabc"

    cover:
        hidden: true # hide everywhere but not in structured data
        hiddenInList: true # hide on list pages and home
        hiddenInSingle: true # hide on single page

    editPost:
        URL: "https://github.com/<path_to_repo>/content"
        Text: "Suggest Changes" # edit text
        appendFilePath: true # to append file path to Edit link

    # for search
    # https://fusejs.io/api/options.html
    fuseOpts:
        isCaseSensitive: false
        shouldSort: true
        location: 0
        distance: 1000
        threshold: 0.4
        minMatchCharLength: 0
        keys: ["title", "permalink", "summary", "content"]
menu:
    main:
        - name: categories
          url: /categories/
          weight: 10
        - name: tags
          url: /tags/
          weight: 20
        - name: example.org
          url: https://example.org
          weight: 30

# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
# pygmentsUseClasses: true
# markup:
#     highlight:
#         # anchorLineNos: true
#         codeFences: true
#         guessSyntax: true
#         lineNos: true
#         style: monokai

本地预览 - hugo server

在你的博客文件夹（我的是blogname）空白处上，右键打开Git Bash Here，输入命令行

hugo server

如果出现如下代码，则说明本地博客building site成功。

Start building sites …
hugo v0.89.0-ADE966B8+extended windows/amd64 BuildDate=2021-11-02T10:00:18Z VendorInfo=gohugoio

                   | EN
-------------------+-----
  Pages            |  8
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Built in 17 ms
Watching for changes in D:\test\blogname\{archetypes,content,data,layouts,static,themes}
Watching for config changes in D:\test\blogname\config.yml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

在浏览器上打开http://localhost:1313/即可看到博客页面。

🎉 🎉 🎉

Congratulation! 让我们先来感受一下这份成就感！

🎉 🎉 🎉

稍后，我们随便点点几个按钮，发现是空页面，或者有出现一些报错提示，不要着急，这是因为我们还需要进行一些增增改改。

写文章 - content

在content文件夹下新建一个posts文件夹（*注意这个就不能随意改名了），进入posts文件夹，新增第一份Markdown文档（名字就叫第一篇.md好了）。 用vscode打开，输入

---
title: "第一篇"
date: 2022-01-10
draft: false
tags: ["标签"]
categories: ["分类"]
---
Hello,world!

保存

去刷新浏览器上的预览http://localhost:1313/，这时页面上已经有了“第一篇”文章了，并且点击categories、tags也有了对应的内容。（请保持Git Bash Here 界面，并且hugo server在运行中。如果预览刷新失败，重复该操作）

简单解释一下

---
title: "第一篇"
date: 2022-01-10
draft: false
tags: ["标签"]
categories: ["分类"]
---

上面这部分是记录文档的标题、时间、草稿、标签、分类等属性，而以下的部分则是正文内容，使用 Markdown语法书写。

---

---
Hello,world!

当然我们通过一些其他的代码，可以在页面上展示更丰富的自定义部分。想了解更多可以参考（https://note.ftls.xyz/papermod/posts/papermod/papermod-features/)这部分。

修改站点配置 - config.yml

终于写到了最后一大块，也就是令我秃头的部分啦 🌝 ~~~

还记得我们在config.yml中粘贴进去的那一大段代码吗，我们对内容做一些修改，把模板更换成自己的内容。

插入一个基础的知识，# 代表把这一行代码注释掉，可以用来写一些我们自己的备注。

先来看前面需要修改的部分

确认这里博客主题名称PaparMod与themes文件夹下的主题名称相同

theme: PaperMod

替换成自己的博客网址链接，目前不知道的话可以注释掉 
baseURL: "https://examplesite.com/"

ExampleSite 替换成博客名称，可用查找替换 
title: ExampleSite


这里是首页Home的头像logo，没有可注释掉，当然也可以直接删掉 
label:
    text: "Home"
    icon: /apple-touch-icon.png
    iconHeight: 35


这里是主页的展示信息，将title和content后的部分替换成自己的内容 
# home-info mode
homeInfoParams:
    Title: "Hi there \U0001F44B"
    Content: Welcome to my blog


首页的社交icons，可对应替换 
socialIcons:
    - name: twitter
      url: "https://twitter.com/"
    - name: stackoverflow
      url: "https://stackoverflow.com"
    - name: github
      url: "https://github.com/"


这里是菜单栏，默认有categories（分类）、tags（标签）、example（样例），example可直接删除，也可用其他项替代，后续我们会讲到这部分。 
menu:
    main:
        - name: categories
          url: /categories/
          weight: 10
        - name: tags
          url: /tags/
          weight: 20
        - name: example.org
          url: https://example.org
          weight: 30


到此为止，就是一些最基础的修改了。

保存好文档，hugo server就可以去本地预览博客效果啦~

新增导航栏

如果你觉得导航栏里只有“categories”“tags”实在太空了，还想加上其他的栏目，那么以"archive"“search”和“about"为例，说明添加方法。

首先在config.yml中找到

menu:
    main:
        - name: categories
          url: /categories/
          weight: 10
        - name: tags
          url: /tags/
          weight: 20

继续按格式在下面添加（请务必对齐）

        - name: archive
          url: archives
          weight: 30
        - name: search
          url: search/
          weight: 40
        - name: about
          url: about/
          weight: 50

其次在content文件夹下新建archives.md，search.md ，about.md三个文档。

以下部分粘贴进archives.md

---
title: "archive"
layout: "archives"
url: "/archives/"
summary: archives
---

以下部分粘贴进search.md 
---
title: "search"
layout: "search"
---

以下部分粘贴进about.md 
---
title: about
url: "/about"
hidemeta: true
disableShare: true
#summary:
---

welcome to my blog.

保存好文档，打开本地预览，已经可以查看到了

*需要注意的部分

请保证url中的大小写前后一致，这样才能准确识别

weight代表前后排列顺序，可以更改，但请有序更改

name可以修改为中文名字，这样导航栏上展示的就是中文

你也可以根据个人喜好，对以上五个导航栏进行取舍

好了，本地博客到这里就完成基础框架了，让我们最后来梳理一下目录框架3

附录 整个目录结构 

|-- 个人博客
    |-- blogname # 从这里开始是博客文件夹
        |-- archetypes/
        |-- content/
            |-- posts/
                |-- 第一篇.md
            |-- archives.md
            |-- search.md
            |-- about.md
        |-- date/
        |-- layouts/
        |-- resources/
        |-- static/
        |-- themes/
            |-- PaperMod/
        |-- .hugo_build.lock
        |-- config.yml

推送Github远程仓库及Vercel配置部署

完成本地博客文件的设置后，将其推送至Github远程仓库，再由Vercel部署更新完毕后，你就可以在网页上成功打开你的博客啦~

详细设置过程请参考塔塔的博客👏

[偷懒ing]

结语

写完已经深夜了啊喂！

其实不只是PaperMod主题，hugo主题大部分（应该）可以按这个流程搭建，只不过需要注意在站点配置时，对部分内容进行调整。 如果有看中的主题有demo，又能在GitHub找到代码的话，那就是照着抄啊，认真研究一下，成功的概率应该是挺大的。

虽然整个博客搭建中经历了没找到中文文档只能翻译器啃英文的头秃，以及Vercel里搞了两套环境结果把自己坑了还解决不了只能删除重来的烦躁，最终还是出来了一份基本满意的成品。后续也会继续慢慢装修调整，争取把博客改到自己满意的样子~

但最重要的难道不是好好写博客嘛！

好了，今天就到这里了，睡觉去了，bye~

🙌

  1. -f yml代表指定生成yml格式的站点配置文件config.yml；也可以不加，这样生成的就是config.toml。 ↩︎

  2. 搬运自 文档 ↩︎

  3. 这里仅对文中提及、有所修改的文件夹进行分级展示，其余文件夹不做分级展示 ↩︎