Hugo快速搭博客

1 整个ECS

Ubuntu就可以。

2 安装Hugo

本来用apt安装，结果版本更新有点麻烦，后来用官网的snap方式安装，直接最新版。

sudo snap install hugo

之前的apt的可能需要先删掉，否则混乱。

3 使用

3.1 初始化

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

启动可以使用参数：

# 可以开个tmux，或者-D后台
hugo server --bind 0.0.0.0 --port 8080

还有启动直接显示文章草稿的，我觉得没必要。

3.2 发布文章

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

会在content目录下建立md文件，编辑一下：

+++
title = '我的文章'
date = 2024-09-12T22:33:19+08:00
draft = false
categories = ['生活']
tags = ['心情']
+++

### 这里是正文了
MD格式，好好吃饭

也可以用yaml格式：

---
title: 我的文章
date: 2024-09-12T22:33:19+08:00
draft: true
categories:
  - 生活
tags
  - 心情
image: posts/abc.png

---

### 这里是正文了
MD格式，好好吃饭

题图放在posts/abc.png，自行组织一下目录。
注意，新文章Hugo检测不到，无法热更新，需要重启服务。draft设置为false才会默认显示。
如果发图片，可以这样组织文件：

content/
├── gallery
│   └── my-first-gallery
│       ├── IMG_0934.JPG
│       ├── IMG_5925.JPG
│       └── index.md

命令为：

hugo new content gallery/my-first-gallery/index.md

如果插入bilibili视频，或者插入自己的html，可以这样：

# 在hugo-theme-stack/layouts/shortcodes目录放入自己编辑的my.html
# 在正文引入：
{{< my >}}
{{< bilibili VIDEO_ID PART_NUMBER >}}
{{< quote author="A famous person" source="The book they wrote" url="https://en.wikipedia.org/wiki/Book">}} blabla
{{< /quote >}}

3.3 主题

本来准备使用官网的blowfish，不知道是不是因为版本问题，总是没成功。最终选择安装hugo-theme-stack主题。参考官网https://stack.jimmycai.com/guide/getting-started，安装：

cd myweb
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

编辑下配置vim config.toml。
把mainSections改成posts，并自己上传头像至hugo-theme-stack/assets/img，改一下sidebar-avatar-src。

去https://realfavicongenerator.net/生成了一组favicon，放在hugo-theme-stack/static目录下（自己建个目录），代码放在hugo-theme-stack/layouts/partials/head/custom.html，如下：

<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

3.4 评论

使用waline，参考官网，暂时借用vercel的服务器。

# https://waline.js.org/guide/get-started/#vercel-%E9%83%A8%E7%BD%B2-%E6%9C%8D%E5%8A%A1%E7%AB%AF
# 注意，缺点是国内无法访问，如下有解决方案，应该是需要域名
# https://izumi.vip/2022/11/12/Waline%E5%9B%BD%E5%86%85IP%E6%97%A0%E6%B3%95%E8%AF%84%E8%AE%BA%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/index.html
# 或者考虑官网的独立部署waline

大概是：

  • 注册LEAN，获取3个key
  • 注册并配置vercel
  • 把评论app的web地址写到config.yaml里（可以考虑绑定域名）
        # Waline client configuration see: https://waline.js.org/en/reference/client/props.html
        waline:
            serverURL: https://yourwaline.vercel.app/
            lang: zh-CN
            visitor: true
            avatar:
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
            requiredMeta:
                - nick
                - mail
            locale:
                admin: 管理员
                placeholder: 🎉欢迎评论~
                sofa: 赶紧抢个沙发~

但是vercel不方便访问，折腾到最后决定独立部署在本地。

3.4.1 配置nvm等

mac下这个应该挺好https://nodejs.org/zh-cn/download/package-manager。
终端如果想飞机可以：

alias proxy='export all_proxy=socks5://127.0.0.1:1086'
alias unproxy='unset all_proxy'
# 详看https://www.clloz.com/programming/assorted/2020/09/15/terminal-proxy-configure/

Linux继续看下面的，先安装nvm，参考：

# https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

接下来设置taobao镜像，哪个好使用哪个：

export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/  # 好使
nvm node_mirror https://npmmirror.com/mirrors/node/  # 不好使
nvm npm_mirror https://npmmirror.com/mirrors/npm/  # 不好使

然后安装node和npm：

# 参考 https://nodejs.org/en/download/package-manager
nvm install 20
node -v # should print `v20.17.0`
npm -v # should print `10.8.2`
npm get registry # 查看源，参考https://www.cnblogs.com/Phil-Long/p/17750816.html

3.4.2 安装运行waline

终于到了正题：

# 参考 https://waline.js.org/guide/deploy/vps.html#%E7%9B%B4%E6%8E%A5%E8%BF%90%E8%A1%8C-%E6%8E%A8%E8%8D%90
cd projects/waline
npm install @waline/vercel
node node_modules/@waline/vercel/vanilla.js

# 修改下host为0.0.0.0和端口，去云服务器开一下防火墙
vim node_modules/thinkjs/lib/config/config.js

vim ~/.bashrc # 添加环境变量，因为是独立部署，所以不需要LEAN_ID/LEAN_KEY/LEAN_MASTER_KEY这些
# 参考 https://waline.js.org/guide/database.html#tidb，下载sqlite文件，后面也考虑MySQL
export SQLITE_PATH=/root/projects/waline
export JWT_TOKEN=a123456

如图：


image.png

接下来运行很关键，必须：

cd ~/projects/waline
SQLITE_PATH=/root/projects/waline JWT_TOKEN=a123456 node node_modules/@waline/vercel/vanilla.js

这是因为waline会另起一个线程，导致外面设置的环境变量不起作用，需要运行的时候写变量。否则会报如下错误：

 Not initialized
    at request (/root/projects/waline/node_modules/leancloud-storage/dist/node/request.js

3.4.3 使用

在之前的themes/hugo-theme-stack/config.yaml配置好waline即可，一般是8360端口，懒得动了。可以匿名评论，可以注册评论，第一个注册的将会成为管理员，如果不爽可以把整个库删掉重来，自己的方便。这里有查看sqlite的小脚本：

import sqlite3
connection = sqlite3.connect('waline.sqlite')
cursor = connection.cursor()
cursor.execute("SELECT name FROM sqlite_master WHERE type='table';")
tables = cursor.fetchall()

print("Tables in the database:")
for table in tables:
    print(table[0])

cursor.close()
connection.close()

3.5 其他widgets

如图，从exampleSite整个复制过来的page文件夹。

content/
├── gallery
│   └── my-first-gallery
│       ├── IMG_0934.JPG
│       ├── IMG_5925.JPG
│       └── index.md
├── page
│   ├── about
│   │   ├── index.md
│   │   └── index.zh-cn.md
│   ├── archives
│   │   └── index.md
│   ├── links
│   │   ├── index.md
│   │   └── ts-logo-128.jpg
│   └── search
│       └── index.md

然后编辑config.toml：

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

应该就增加了一些页面，可继续自行编辑内容。

3.6 ICP备案

到主题的目录cd themes/hugo-theme-stack/layouts/partials/footer，vim footer.html，如下：

{{/* T "footer.builtWith" (dict "Generator" $Generator) | safeHTML */}} <br />
{{/* T "footer.designedBy" (dict "Theme" $Theme "DesignedBy" $DesignedBy) | safeHTML */}}
<b><a href="https://beian.miit.gov.cn/" target="_blank">京ICP备1234567890号</a></b>

即可。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如何用hugo 搭建博客
    1，Hugo 简介 搭建个人博客有很多开源的博客框架，我们要介绍的框架叫作Hugo。Hugo 是一个基于Go 语言...
    码农充电站pro阅读 1,062评论 0赞 2
  • 使用Hugo搭建自己的博客
    生命在于折腾，生命不息，折腾不止。 最近又开始了折腾博客，以前的文章都写在简书上，现在准备使用Hugo来搭建一个静...
    路过麦田阅读 16,577评论 0赞 5
  • Hugo+GitHub 静态博客 折腾笔记
    为了个人博客 五一期间，用 WordPress 为好朋友的公司配置了一个网站，替换原来的简易公司官网，在搭建的过程...
    chaomifan阅读 5,048评论 0赞 7
  • Hugo创建个人博客指南
    最近准备建立一个个人博客网站，对比hexo与hugo后，决定使用Hugo静态页面生成引擎，使用的主题是tranqu...
    KXMING阅读 4,379评论 0赞 2
  • 使用HUGO搭建个人博客
    本文首发于我的个人博客：Suixin's Blog Hugo是一个用Go编写的静态站点生成器，由于具有丰富的主题资...
    Sui_Xin阅读 9,633评论 1赞 13