创建博客

安装Hugo

brew install hugo git-lfs

git lfs install

创建一个新的博客目录

hugo new site blog.liwt.top --format yaml

设置PaperMod主题

cd blog.liwt.top
git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
echo 'theme: PaperMod' >> hugo.yaml

# 重新clone仓库时需要手动克隆子库
git submodule update --init --recursive

# 更新主题
git submodule update --remote --merge

调整hugo.yaml配置

baseURL: https://example.com/
languageCode: zh
defaultContentLanguage: zh
title: 网站标题
theme: PaperMod

params:
  env: production
  title: 网站标题
  description: 网站描述
  author: Me
  keywords: ["Blog", "Hugo"]
  DateFormat: "2006-01-02"
  ShowReadingTime: true
  ShowShareButtons: false
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hideMeta: false
  hideSummary: false
  showtoc: true
  tocopen: false
  hideFooter: true
  profileMode:
    enabled: true
    title: ∧__∧
    subtitle: 有朋自远方来,不亦乐乎!欢迎来到我的Blog!
    buttons:
      - name: 文章
        url: posts
      - name: 分类
        url: categories
      - name: 标签
        url: tags
      - name: 时间轴
        url: archives
      - name: 导航
        url: https://example.com

menu:
  main:
    - name: 搜索
      url: search
      weight: 10
    - name: 文章
      url: posts
      weight: 20
    - name: 分类
      url: categories
      weight: 30
    - name: 标签
      url: tags
      weight: 30
    - name: 时间轴
      url: archives
      weight: 40
    - name: 导航
      url: https://example.com
      weight: 50

outputs:
  home:
    - HTML
    - RSS
    - JSON

enableInlineShortcodes: true
enableEmoji: true
enableRobotsTXT: true
hasCJKLanguage: true

buildDrafts: false
buildFuture: false
buildExpired: false

minify:
  disableXML: true
  minifyOutput: true

创建基础结构

mkdir {archive,categories,posts,search,tags}

cat > archives/_index.md < EOF
---
title: "时间轴"
layout: "archives"
summary: "archives"
description: ""
placeholder: ""
---
EOF

cat > categories/_index.md < EOF
---
title: "分类"
layout: "categories"
summary: "categories"
description: ""
---
EOF

cat > posts/_index.md < EOF
---
title: "文章"
layout: "posts"
summary: "posts"
description: ""
ShowBreadCrumbs: false
---
EOF

cat > search/_index.md < EOF
---
title: "搜索"
layout: "search"
summary: "search"
description: ""
placeholder: "输入内容进行搜索"
---
EOF

cat > tags/_index.md < EOF
---
title: "标签"
layout: "tags"
summary: "tags"
description: ""
---
EOF

调整默认模版文件

cat > archetypes/default.md < EOF
---
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
description: '{{ replace .File.ContentBaseName "-" " " | title }}'
date: "{ .Date }"
draft: true
categories:
  -
tags:
  -
keywords:
  -
---
EOF

处理Hugo和Obsidian附件目录不兼容问题

mkdir -p layouts/_default/_markup

cat > layouts/_default/_markup/render-image.html < EOF
<figure>
  <img
    loading="lazy"
    {{ if strings.HasSuffix .Destination ".md" }}
      src="{{ relref .Page .Destination | safeURL }}"
    {{ else }}
      {{ $link := .Destination}}
      {{ if strings.HasPrefix .Destination "assets/" }}
        {{ $link = strings.TrimPrefix "assets" .Destination }}
      {{ end }}

      {{ $img := resources.Get $link }}
      {{ if not $img }}
        {{ $img = resources.GetRemote $link }}
      {{ end }}
      {{ if not $img }}
        {{ $img = .Page.Resources.Get $link }}
      {{ end }}

      {{ with $img }}
        {{ $large := $img.Resize "1200x webp" }}
        {{ $medium := $large.Fill "726x402" }}
        {{ $small := $medium.Fill "458x254" }}
        src="{{ $large.RelPermalink }}"
        srcset="{{ $small.RelPermalink }} 458w, {{ $medium.RelPermalink }} 726w, {{ $large.RelPermalink }} 1200w"
        sizes="50vw"
      {{ else }}
        src="{{ $link | safeURL }}"
      {{ end }}
    {{ end }}
    {{ with .Text }}alt="{{ . | safeHTML }}"{{ end }}
    {{ with .Title }}title="{{ . | safeHTML }}"{{ end }}
    />
  <figcaption>{{ with .Title | safeHTML }}{{ . }}{{ end }}</figcaption>
</figure>
EOF

添加.gitignore

cat > .gitignore < EOF
# ---> Hugo
# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json

# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

# Temporary lock file while building
/.hugo_build.lock

# --> Mac
.DS_Store
EOF

创建一篇文章

hugo new posts/我的第一篇文章.md

# 编辑文章内容
echo 'Hello World' >> content/posts/我的第一篇文章.md

启动hugo服务进行实时预览

hugo server

将网站编译为静态网页

hugo

创建Git仓库

Gitea上创建仓库

提交并推送到Gitea

git lfs track "assets/media/*"
git add .
git commit -m 'feat: first commit'
git remote add origin https://gitea.liwt.top/liweitao/blog.liwt.top.git
git push --force -u origin main

创建Obsidian仓库

  • Obsidian打开博客目录。
  • 点击设置/第三方插件/关闭安全模式/第三方市场,安装Obsidian Git插件。
  • 点击设置/文件与链接,将内部链接类型改为基于仓库根目录的绝对路径
  • 点击设置/文件与链接,关闭使用Wiki链接
  • 点击设置/文件与链接,将附件默认存放路径改为指定的附件文件夹附件文件夹设置为assets/media
  • 点击设置/Obsidian Git,将Commit Message on auto backup/commit设置为Obsidian Git auto sync: {{date}}
  • 点击设置/Obsidian Git,将Commit Message on manual backup/commit设置为Obsidian Git manual sync: {{date}}
  • 点击设置/Obsidian Git,将{{date}} placeholder format设置为YYYY-MM-DD HH:mm:ss
  • 点击设置/Obsidian Git,将Sync Method设置为Rebase
  • 点击设置/Obsidian Git,将Additional PATH enviroment varible paths设置为/usr/local/bin

添加Drone流水线任务

添加Drone流水线脚本.drone.yml

kind: pipeline
type: docker
name: deploy

trigger:
  branch:
    - main
  event:
    - push
    - tag
    - cron
    - custom

steps:
  - name: submodule
    image: alpine/git
    pull: if-not-exists
    commands:
      - git submodule update --init --recursive

  - name: build
    image: plugins/hugo
    pull: if-not-exists
    settings:
      config: hugo.yaml
      hugo_version: "0.121.1"

  - name: deploy
    image: appleboy/drone-scp
    pull: if-not-exists
    settings:
      host: liwt.top
      port: 22
      username:
        from_secret: ssh_user
      password:
        from_secret: ssh_pwd
      source: public
      target: /opt/docker-data/npm/data/blog.liwt.top
      rm: true
      overwrite: true
      strip_components: 1

打开drone激活仓库,添加Secret:ssh_userssh_pwd

至此,便可通过Obsidian编写文章,通过Git同步仓库,Drone自动调用Hugo编译网站并发布到Nginx。