返回
Featured image of post Hugo站点搭建

Hugo站点搭建

本篇记录了我当前使用主题的相关资料

首先感谢该主题的作者：树洞

Hugo环境搭建

参考视频教程：https://www.bilibili.com/video/BV13c411h7k7

  1. Hugo下载地址：https://github.com/gohugoio/hugo/releases

  2. 下载完成后，在系统环境变量中配置对应的环境变量

  3. 在cmd中输入：hugo version查看是否安装成功

  4. 在cmd中输入：hugo new site yourname.com创建网站站点

    执行成功后会返还站点本地地址。

博客模板下载

模板下载地址：https://themes.gohugo.io/

  1. 将下载好的模板放入本地地址中的themes文件夹内，并去除"-master"后缀

  2. 将模板目录下->exampleSite文件夹中的content文件夹与config文件覆盖到站点根目录下。

  3. 在站点根目录下打开cmd，并输入指令hugo server即可编译站点

  4. 编译成功后会返还一个本地博客地址：http://localhost:1313/，点击后即可进入站点

    需要注意的是不同的模板配置方式可能不同，需要根据作者在模板页面下的教程来搭建

当前网站使用的模板：https://themes.gohugo.io/hugo-theme-stack/

当前使用模板安装时需要配置的地方：

  1. 除content文件夹与config文件外，还需要将上层目录下的assets文件夹也复制到根目录下

  2. 修改站点根目录\content\post\rich-content\index.md文件

    这一步修改可以避免后面启动站点服务时报获取不到与Twitter和Vimeo相关的Jos错误，其他模板也有参考性

    +++
author = "Hugo Authors"
title = "Rich Content"
date = "2019-03-10"
description = "A brief description of Hugo Shortcodes"
tags = [
    "shortcodes",
    "privacy",
]
+++

Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

---

## YouTube Privacy Enhanced Shortcode

<br>

---

## Twitter Simple Shortcode


<br>

---

## Vimeo Simple Shortcode

博客插件

评论插件1：Valine

一般博客模板里面都集成了utteranc和disqus两个评论系统，两个在国内都不太好用（被墙），于是搜索到了一个国人开发的评论系统—Valine

相关教程1

相关教程2

后台库配置

该评论系统的后台数据库依赖Leancloud，注册流程参考相关教程2

该插件在我当前使用的网页模板下需要修改的东西较多。

  1. 在config.yaml文件中comments模块下添加Valine模板

        comments:
        enabled: true
        provider: valine

        valine:
            enable : true
            appId : N78DQAmT1WrmezAhsaLS74Y7-gzGzoHsz
            appKey : KK8kJ0sRTGct9ExtTNBzWKh1
            notify : false  
            verify : true
            avatar : 'mm' 
            placeholder : '说点什么吧...'
            visitor : true
            avatar : robohash
            enableQQ : true

        utterances:
            repo:
            issueTerm: pathname
            label:

        remark42:
            host:
            site:
            locale:

  2. 在站点根目录\themes\hugo-theme-stack\layouts\partials\comments\provider下新建valine.html文件。并写入以下代码

    {{- with .Site.Params.comments.valine -}}

  <div id="vcomments"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>


  <script type="text/javascript">
    new Valine({
        el: '#vcomments' ,
        appId: '{{ .appId }}',
        appKey: '{{ .appKey }}',
        notify: '{{ .notify }}', 
        verify: '{{ .verify }}', 
        avatar:'{{ .avatar }}', 
        placeholder: '{{ .placeholder }}',
        visitor: '{{ .visitor }}'
    });
  </script>
  {{- end -}}

  3. 与浏览数相关代码在当前网站下添加到了站点根目录\themes\hugo-theme-stack\layouts\partials\article\components\footer.html文件中

    <footer class="article-footer">
    {{ partial "article/components/tags" . }}

    {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
    <section class="article-copyright">
        {{ partial "helper/icon" "copyright" }}
        <span>{{ default .Site.Params.article.license.default .Params.license }}</span>
    </section>
    {{ end }}

    {{- if ne .Lastmod .Date -}}
    <section class="article-time">
        {{ partial "helper/icon" "clock" }}
        <span class="article-time--modified">
            {{ T "article.lastUpdatedOn" }}
            {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "2006-1-02,15:04" ) }}
        </span>
    </section>
    {{- end -}}

    <!-- 添加的代码 -->
    <!-- id 将作为查询条件 -->
    <section class="article-view">
        {{ partial "helper/icon" "rss" }}
        <span id="{{ .RelPermalink }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
            <span class="post-meta-item-text">浏览次数</span>
            <span class="leancloud-visitors-count"><i class="leancloud-visitors-count"></i></span>次
        </span>
    </section>
    <!-- 添加的代码 -->

</footer>

评论插件2：Twikoo

由于Valine存在安全漏洞，所以现在改用Twikoo为新的评论插件了

服务端部署根据Twikoo官网的教程来

前端部署流程如下：

  1. 在config.yaml文件中comments模块下添加twikoo模板

        comments:
        enabled: true
        provider: twikoo

        twikoo:
            env_id: fungusfox-8g4cw0r8793e10e2 # 腾讯云环境id      

        valine:
            enable: true
     ......

  2. 在站点根目录\themes\hugo-theme-stack\layouts\partials\comments\provider下新建twikoo.html文件。并写入以下代码

    {{- with .Site.Params.comments.twikoo -}}
<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.2.0/dist/twikoo.all.min.js"></script>
<script>
    twikoo.init({
        envId: '{{ .env_id }}',
        el: '#tcomment',
        // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
        // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
    })
</script>
{{- end -}}

  3. 与浏览数相关代码在当前网站下添加到了站点根目录\themes\hugo-theme-stack\layouts\partials\article\components\footer.html文件中

    <footer class="article-footer">
    {{ partial "article/components/tags" . }}

    {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
    <section class="article-copyright">
        {{ partial "helper/icon" "copyright" }}
        <span>{{ default .Site.Params.article.license.default .Params.license }}</span>
    </section>
    {{ end }}

    {{- if ne .Lastmod .Date -}}
    <section class="article-time">
        {{ partial "helper/icon" "clock" }}
        <span class="article-time--modified">
            {{ T "article.lastUpdatedOn" }}
            {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "2006-1-02,15:04" ) }}
        </span>
    </section>
    {{- end -}}

    <!-- 添加的代码 -->
    <!-- id 将作为查询条件 -->
    <section class="article-view">
        {{ partial "helper/icon" "rss" }}
        <span class="post-meta-item-text">浏览次数：</span>
        <span id="twikoo_visitors">0</span>
    </section>
    <!-- 添加的代码 -->

</footer>

  4. 其他的功能部署，例如管理面板就根据官网教程来

部署Gitee

  1. 在码云中创建一个仓库，仓库名需要与你的用户名相同https://gitee.com/user_name/user_name.git

  2. 在本地站点根目录下打开cmd，输入hugo，接下来在根目录下就会生成一个public文件夹。（每次生成前需要将原有的public文件夹删除，否则无法更新）

  3. 打开public文件夹，将该文件夹内所有文件上传到仓库中

  4. 在码云的仓库页面下点击：服务->Gitee Pages，然后勾选强制使用HTTPS，点击启动

    等待编译完后会给出一个我们当前站点的地址：https://user_name.gitee.io/

    注意后续每次上传代码后需要到该页面下点击更新，才能刷新我们站点的文章

其他

语法借鉴

Bug

缓存问题

第一次部署到Gitee后，后续推送刷新文章，可能出现站点没有改变的情况。

这可能是由于浏览器缓存没有刷新的关系。

解决方法为：

修改根目录下的config文件，在头部添加代码Cache-Control: no-cache, no-store，用于告诉浏览器不保存缓存。

baseurl:  https://fungusfox.gitee.io
languageCode: "zh-CN"
theme: hugo-theme-stack
paginate: 5
title: 狐狸菌的小站
Cache-Control: no-cache, no-store

......

然后上传到Gitee，再手动清除本地浏览器的缓存，之后就能正常查看博客了

Hugo
Licensed under CC BY-NC-SA 4.0
浏览次数： 0
© 2018 - 2022 狐狸菌的小站