技术栈碎记

Nginx

Mon, 05 Feb 2024 01:16:38 +0000

Download & Install

https://nginx.org/en/download.html
docker安装：

先创建一个nginx容器 docker run -d --name=nginx --restart unless-stopped nginx:latest
拷贝容器内的配置到本地 docker cp nginx:/etc/nginx /mnt/sda1/dockers/nginx
删除容器 docker rm -f nginx
创建一个开放8080，8081端口，映射本地配置的容器

 docker run -d \
  --name=nginx \
  -p 8080:8080 \
  -p 8081:8081 \
  -v /mnt/sda1/dockers/nginx/conf.d:/etc/nginx/conf.d \
  --restart unless-stopped \
  nginx:latest

配置文件路径：

本地： /mnt/sda1/dockers/nginx/conf.d/default.conf
docker内部： /etc/nginx/conf.d/default.conf

指向本地的文件夹

server {
    listen  8081;
    server_name localhost;

    location / {
        root /etc/nginx/sites;
        index index.html;
    }
}

浏览器访问 http://docker_ip:8081

反向代理http

可以域名不同，但端口号相同

server {
    listen       8080;
    listen  [::]:8080;
    server_name  sites.ifelse01.top;

    location / {
        proxy_pass          http://192.168.50.4:23000;
        proxy_redirect      off;
        proxy_set_header    Host    $host;
        proxy_set_header    X-Real-IP       $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen       8080;
    listen  [::]:8080;
    server_name  adminer.ifelse01.top;

    location / {
        proxy_pass          http://192.168.50.3:28080;
        proxy_redirect      off;
        proxy_set_header    Host    $host;
        proxy_set_header    X-Real-IP       $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

浏览器分别访问 sites.ifelse01.top, adminer.ifelse01.top

反向代理https

可以域名不同，但端口号相同

server {
    listen       8080 ssl;         # 增加ssl
    listen  [::]:8080 ssl;         # 增加ssl
    server_name  pwd.ifelse01.top;

    # ssl证书的pem文件路径: /etc/nginx/cert/***
    ssl_certificate  ./cert/ifelse01.top.pem;
    # ssl证书的key文件路径
    ssl_certificate_key ./cert/ifelse01.top.key;

    location = /identity/accounts/prelogin {
        rewrite ^/identity/accounts/prelogin$ /api/accounts/prelogin;
    }

    location / {
        proxy_pass          http://192.168.50.4:480;
        proxy_redirect      off;
        proxy_set_header    Host    $host;
        proxy_set_header    X-Real-IP       $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

url的二级目录指向另外的文件夹

主要是alias的使用

server {
    listen       8080;
    listen  [::]:8080;
    server_name  sites.ifelse01.top;

    location ^~ /sites {
        alias  /etc/nginx/sites;
        index index.html;
    }

    location / {
        proxy_pass          http://192.168.50.4:23000;
        proxy_redirect      off;
        proxy_set_header    Host    $host;
        proxy_set_header    X-Real-IP       $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Vaultwarden

Sat, 27 Jan 2024 01:16:38 +0000

安装Vaultwarden

目的

手里有个域名(还没申请ssl证书)，就想在家里的小主机上搭建个自己的密码管理，通过内网穿透以便随时随地可以使用

步骤

简单运行

docker run -d --name vaultwarden -v /mnt/sda1/dockers/vaultwarden/data:/data --restart unless-stopped -p 480:80 vaultwarden/server:latest

问题：只能通过127.0.0.1访问网站，用ip时登录报错，

解决思路：Caddy可以不用搞ssl而直接代理http成https

附加安装caddy

安装caddy，达到无需证书直接https转http

caddy文档：https://caddy2.dengxiaolong.com/docs/install#debian-ubuntu-raspbian

`1`	`vim /etc/caddy/Caddyfile`

192.168.50.4:1480 {
  reverse_proxy 127.0.0.1:480
  tls internal
}

问题：进行内网穿透时没办法将http的网站穿透到caddy的https

解决思路：看来还得去申请SSL，创建正常的https类型容器

申请ssl证书

不错的是阿里云申请免费证书还挺快，十几分钟搞定，一直以为很麻烦来着。可惜的是有效期只有三个月

重新创建带ssl的容器，然后直接内网穿透https到容器对应的端口

创建容器时带上ROCKET_TLS

docker run -d --name vaultwarden -v /mnt/sda1/dockers/vaultwarden/data:/data --restart unless-stopped -p 1480:80 -e ROCKET_TLS='{certs="/data/cert/ifelse01.top.pem",key="/data/cert/ifelse01.top.key"}' vaultwarden/server:latest

问题：内外网页面登录都没问题了，结果在浏览器插件登录时不行了

解决思路：试过增加Domain=pwd.ifelse01.top, 但没效果。后来看到一位大佬的是通过nginx rewrite一下报错的api，走起～～

最终解决：回归最简单的方式创建容器

创建容器

docker run -d --name vaultwarden -v /mnt/sda1/dockers/vaultwarden/data:/data --restart unless-stopped -p 480:80 vaultwarden/server:latest

用nginx的 https的端口反向代理到容器端口, 重点是rewrite /identity/accounts/prelogin


server {
    listen       8080 ssl;
    listen  [::]:8080 ssl;
    server_name  pwd.ifelse01.top;

    #ssl证书的pem文件路径
    ssl_certificate  ./cert/ifelse01.top.pem;
    #ssl证书的key文件路径
    ssl_certificate_key ./cert/ifelse01.top.key;

    location = /identity/accounts/prelogin {
        rewrite ^/identity/accounts/prelogin$ /api/accounts/prelogin;
    }

    location / {
        proxy_pass          http://192.168.50.4:480;
        proxy_redirect      off;
        proxy_set_header    Host    $host;
        proxy_set_header    X-Real-IP       $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Hugo & Stack

Fri, 19 Jan 2024 01:16:38 +0000

安装hugo并使用Stack主题

安装

安装文档: https://gohugo.io/installation/
Mac安装： brew install hugo

创建网站

hugo new site myblog

下载Stack主题

文档：https://stack.jimmycai.com/

cd myblog
git clone https://hub.nuaa.cf/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

将主题应用到网站

cp -r themes/hugo-theme-stack/exampleSite/content ./
cp -r themes/hugo-theme-stack/exampleSite/config.yaml ./
rm config.toml

修改错误文件

移除国内不支持的youtube，twitter， vimeo
vim ./content/post/rich-content/index.md

本地启动

hugo server

修改文章模版 & 新增文章

vim ./archetypes/default.md

---
title: "{{ replace .Name "-" " " | title }}"
description: 
date: {{ .Date }}
image: 
categories: 
tags: 
draft: false
---

hugo new post/eSir/index.md or new post/eSir.md

发布网站

默认发布到./public
hugo
指定发布到文件夹
hugo -d ./public

定制自己的Hugo和优化Stack主题

修改网站标题

修改./config.yaml文件中的title
如果是多语言:

修改英文 languages > en > title 和 languages > en > parms > description
修改中文 languages > zh-cn > title 和 languages > zh-cn > parms > description

修改网站头像

修改./config.yaml文件中的params > sidebar > avatar > src为img/**.jpg, 把自己的头像复制到 ./assets/img/文件夹下

修改网站图标

修改./config.yaml文件中的params > favicon为/favicon.ico,将自己的favicon.ico复制到./static文件夹中, 可能需要重启几次才会显示出来

修改默认语言

修改./config.yaml文件中的DefaultContentLanguage, 想要中文就改成 zh-cn

多语言默认是中文时，网站会在./content文件夹中先找对应语言的文章如 **/index.zh-cn.md来显示，如果没有则显示**/index.md的

修改左侧主菜单

如果想移除archives/links/search菜单，则去移除./content/page/about/index.**.md文件中的menu字段

修改右侧插件菜单

eg: 移除右侧的档案块修改./config.yaml文件，移除params > widgets > homepage > archives

修改友情链接单行为双行

在文件./assets/scss/custom.scss中增加样式, custom.scss文件中的样式会覆盖原来的

/* 友情链接改为双列显示 */
@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: none;
        box-shadow: none;
        
        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
            border-radius: 10px;
            &:nth-child(odd) {
                margin-right: 8px;
            }
        }
    }
  }

文章页显示最后修改时间 & 增加Icon

修改./config.yaml文件，增加一个lastmod

1
2

frontmatter:
  lastmod: [":fileModTime", "lastmod"]

这样就会在文章页尾显示最后修改时间
修改 最后修改时间 的图标为 edit样式：

去tabler[https://tabler.io/icons]下载edit的图标到./assets/icons/edit.svg
修改 themes/hugo-theme-stack/layouts/partials/article/components/footer.html文件line13的 {{ partial "helper/icon" "clock" }} 为 {{ partial "helper/icon" "edit" }}

附上我的config.yaml

baseurl: http://ifelse01.top
languageCode: en-us
theme: hugo-theme-stack
paginate: 5
title: Full Stack Blog
copyright: ifelse01

frontmatter:
  lastmod: [":fileModTime", "lastmod"]

languages:
    en:
        languageName: English
        title: Full Stack Blog
        weight: 1
        params:
            description: Just so so..
    zh-cn:
        languageName: 中文
        title: 技术栈碎记
        weight: 2
        params:
            description: Just so so..

# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true

permalinks:
    post: /p/:slug/
    page: /:slug/

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon: /favicon.ico # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)

    footer:
        since: 2023
        customText: '<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"><p style=" height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤ICP备 2023154696号</p></a>'

    dateFormat:
        published: Jan 02, 2006
        lastUpdated: Jan 02, 2006 15:04 MST

    sidebar:
        emoji: ❤️
        subtitle: Just so so..
        avatar:
            enabled: true
            local: true
            src: img/avatar.jpg

    article:
        math: false
        toc: true
        readingTime: true
        license:
            enabled: false
            default: Licensed under CC BY-NC-SA 4.0

    comments:
        enabled: true
        provider: disqus

        disqusjs:
            shortname:
            apiUrl:
            apiKey:
            admin:
            adminLabel:

        utterances:
            repo:
            issueTerm: pathname
            label:

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:
            autoCreateIssue: false

        # Waline client configuration see: https://waline.js.org/en/reference/component.html
        waline:
            serverURL:
            lang:
            pageview:
            emoji:
                - https://unpkg.com/@waline/emojis@1.0.1/weibo
            requiredMeta:
                - name
                - email
                - url
            locale:
                admin: Admin
                placeholder:

        twikoo:
            envId:
            region:
            path:
            lang:

        # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
        cactus:
            defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
            serverName: "cactus.chat"
            siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)

        giscus:
            repo:
            repoID:
            category:
            categoryID:
            mapping:
            lightTheme:
            darkTheme:
            reactionsEnabled: 1
            emitMetadata: 0

        gitalk:
            owner:
            admin:
            repo:
            clientID:
            clientSecret:

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

    opengraph:
        twitter:
            # Your Twitter username
            site:

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main: []

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    goldmark:
        renderer:
            ## Set to true if you have HTML content inside Markdown
            unsafe: true
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        noClasses: false
        codeFences: true
        guessSyntax: true
        lineNoStart: 1
        lineNos: true
        lineNumbersInTable: true
        tabWidth: 4

参考

Exnadio’s Blog：https://oxidane-uni.github.io/p/%E4%BD%BF%E7%94%A8-hugo-%E5%AF%B9%E5%8D%9A%E5%AE%A2%E7%9A%84%E9%87%8D%E5%BB%BA%E4%B8%8E-stack-%E4%B8%BB%E9%A2%98%E4%BC%98%E5%8C%96%E8%AE%B0%E5%BD%95/

Links

Mon, 01 Jan 0001 00:00:00 +0000

To use this feature, add links section to frontmatter.

This page’s frontmatter:

links:
  - title: GitHub
    description: GitHub is the world's largest software development platform.
    website: https://github.com
    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
  - title: TypeScript
    description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
    website: https://www.typescriptlang.org
    image: ts-logo-128.jpg

image field accepts both local and external images.

关于

Mon, 01 Jan 0001 00:00:00 +0000

镜花水月我非我

这是一个技术宅准备用来保留些零碎技术笔记的网栈，当然如果中间出现了一些奇奇怪怪的东西的话也是相当可能的。
本人全栈，主用C#以及 Javascript ，会React，对Python有浓厚的兴趣，准备被动的学习Golang，紧跟AI脚步。工龄跨域JS原生，Jquery，AngularJS， ReactJS。喜欢白嫖愿意分享但无奈人懒且宅。
开通此博客准备记录一些工作中遇到的问题以及日常工作中遇到的新技术。希望这个博客给自己留下一点回忆的可能。

南柯一梦几十年

有事没事都别与我联系，累，宅我想宅。

搜索

Mon, 01 Jan 0001 00:00:00 +0000

技术栈碎记

Nginx

Download & Install

指向本地的文件夹

反向代理http

反向代理https

url的二级目录指向另外的文件夹

Vaultwarden

安装Vaultwarden

目的

步骤

简单运行

附加安装caddy

申请ssl证书

重新创建带ssl的容器，然后直接内网穿透https到容器对应的端口

最终解决：回归最简单的方式创建容器

Hugo & Stack

安装hugo并使用Stack主题

安装

创建网站

下载Stack主题

将主题应用到网站

修改错误文件

本地启动

修改文章模版 & 新增文章

发布网站

定制自己的Hugo和优化Stack主题

修改网站标题

修改网站头像

修改网站图标

修改默认语言

修改左侧主菜单

修改右侧插件菜单

修改友情链接单行为双行

文章页显示最后修改时间 & 增加Icon

附上我的config.yaml

参考

Archives

Links

关于

镜花水月我非我

南柯一梦几十年

搜索