1 整個(gè)ECS
Ubuntu就可以。
2 安裝Hugo
本來(lái)用apt安裝璧瞬，結(jié)果版本更新有點(diǎn)麻煩，后來(lái)用官網(wǎng)的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
啟動(dòng)可以使用參數(shù)：
# 可以開(kāi)個(gè)tmux瘟忱，或者-D后臺(tái)
hugo server --bind 0.0.0.0 --port 8080
還有啟動(dòng)直接顯示文章草稿的奥额，我覺(jué)得沒(méi)必要。
3.2 發(fā)布文章
cd myweb
hugo new content posts/my-first-post.md
會(huì)在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檢測(cè)不到涡相，無(wú)法熱更新哲泊，需要重啟服務(wù)。draft設(shè)置為false才會(huì)默認(rèn)顯示催蝗。
如果發(fā)圖片切威，可以這樣組織文件：
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 主題
本來(lái)準(zhǔn)備使用官網(wǎng)的blowfish牢屋，不知道是不是因?yàn)榘姹締?wèn)題，總是沒(méi)成功槽袄。最終選擇安裝hugo-theme-stack主題烙无。參考官網(wǎng)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目錄下（自己建個(gè)目錄），代碼放在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 評(píng)論
使用waline三幻，參考官網(wǎng)，暫時(shí)借用vercel的服務(wù)器呐能。
# https://waline.js.org/guide/get-started/#vercel-%E9%83%A8%E7%BD%B2-%E6%9C%8D%E5%8A%A1%E7%AB%AF
# 注意念搬，缺點(diǎn)是國(guó)內(nèi)無(wú)法訪問(wèn)，如下有解決方案摆出，應(yīng)該是需要域名
# 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
# 或者考慮官網(wǎng)的獨(dú)立部署waline
大概是：
- 注冊(cè)LEAN朗徊，獲取3個(gè)key
- 注冊(cè)并配置vercel
- 把評(píng)論app的web地址寫(xiě)到
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: ??歡迎評(píng)論~
sofa: 趕緊搶個(gè)沙發(fā)~
但是vercel不方便訪問(wèn)，折騰到最后決定獨(dú)立部署在本地偎漫。
3.4.1 配置nvm等
mac下這個(gè)應(yīng)該挺好https://nodejs.org/zh-cn/download/package-manager爷恳。
終端如果想飛機(jī)可以：
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繼續(xù)看下面的，先安裝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
接下來(lái)設(shè)置taobao鏡像温亲，哪個(gè)好使用哪個(gè)：
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 安裝運(yùn)行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和端口，去云服務(wù)器開(kāi)一下防火墻
vim node_modules/thinkjs/lib/config/config.js
vim ~/.bashrc # 添加環(huán)境變量铸豁，因?yàn)槭仟?dú)立部署灌曙，所以不需要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
如圖：
接下來(lái)運(yùn)行很關(guān)鍵在刺，必須：
cd ~/projects/waline
SQLITE_PATH=/root/projects/waline JWT_TOKEN=a123456 node node_modules/@waline/vercel/vanilla.js
這是因?yàn)閣aline會(huì)另起一個(gè)線程，導(dǎo)致外面設(shè)置的環(huán)境變量不起作用头镊，需要運(yùn)行的時(shí)候?qū)懽兞框纪铡７駝t會(huì)報(bào)如下錯(cuò)誤：
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端口相艇，懶得動(dòng)了颖杏。可以匿名評(píng)論坛芽，可以注冊(cè)評(píng)論留储，第一個(gè)注冊(cè)的將會(huì)成為管理員，如果不爽可以把整個(gè)庫(kù)刪掉重來(lái)咙轩，自己的方便获讳。這里有查看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整個(gè)復(fù)制過(guò)來(lái)的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
應(yīng)該就增加了一些頁(yè)面丐膝，可繼續(xù)自行編輯內(nèi)容。
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 target="_blank">京ICP備1234567890號(hào)</a></b>
即可。
