website config pwa

.gitea/workflows/build.yml

@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
 on: [push]
 
 jobs:
-  build-and-deploy:
+  build-and-deploy-to-local-server:
     runs-on: ubuntu-latest
     env:
       HUGO_VERSION: '0.147.5'
@@ -22,9 +22,18 @@ jobs:
       - run: echo "💡 The ${{ gitea.repository }} repository has been cloned to the runner."
       - name: Build with Hugo
         run: hugo
-      - name: Deploy
+      - name: Local Deploy
         run: |
           rm -rf /workspace/html/blog
           mkdir -p /workspace/html/blog
           cp -r public/* /workspace/html/blog/
-      - run: echo "🍏 This job's status is ${{ job.status }}."
+      - run: echo "🍏 This job's status is ${{ job.status }}."
+  
+  deploy-to-remote-server:
+    needs: build-and-deploy-to-local-server
+    runs-on: mac
+    steps:
+      - name: Deploy to remote server
+        run: |
+          ssh -i /home/.ssh/id_rsa root@1970666.xyz "rm -rf /workspace/docker/docker-nginx/html/blog"
+          scp -i /home/.ssh/id_rsa -r /workspace/docker/docker-nginx/html/blog root@1970666.xyz:/workspace/docker/docker-nginx/html/

content/about/index.md

@@ -0,0 +1,36 @@
+---
+date: '2025-05-28T20:32:04+08:00'
+draft: false
+title: '自言自语'
+---
+
+我本是山野之人，  
+不问红尘事，不识功名味。  
+偶尔走出深林，踏入人群，  
+像一阵风，吹过热闹的街市，又悄然离去。  
+
+我在书堆中起舞，  
+半卷残书也能让我醉倒其中。  
+可我知道，  
+哪怕坐在井底仰望天空，  
+也总有人以为那就是全部的世界。  
+一片叶，足以遮住双眼；  
+一句话，足以蒙蔽心灵。  
+
+我煮一壶新茶，  
+用刚燃起的火，试这初春的味道。  
+琴声悠悠，诗行缓缓，  
+字里行间，都是我自己与世界的对话。  
+
+我不求世事圆满，  
+也不奢望梦有多远。  
+我只是站在佛门之外，  
+轻轻问一句：  
+什么是觉悟？  
+什么是道？  
+
+或许，  
+真正的“悟”，  
+不是逃离人间，  
+而是在人世间，  
+看清自己。  

content/posts/blog-operation/index.md

@@ -0,0 +1,7 @@
+---
+date: '2025-06-15T20:32:04+08:00'
+draft: true
+title: '博客站运营'
+---
+
+## 

content/posts/build-a-blog/index.md

@@ -0,0 +1,44 @@
+---
+date: '2025-06-13T20:32:04+08:00'
+draft: false
+title: '百元搭建的博客'
+---
+
+## 搭建博客需要什么？
+
+- 一个域名
+- 一个云服务器
+- 一个静态网站生成器
+- 一个博客主题
+- 网站备案
+- SSL证书
+
+**域名 + 云服务器**
+
+域名和云服务器是博客搭建的基本条件，购入之后作为个人资产。
+
+**博客主题 +  静态网站生成器**
+
+有很多开源的静态网站生成器和博客主题，按需和个人喜好选择。本站采用[Hugo](https://gohugo.io/) + [PaperMod](https://github.com/adityatelange/hugo-PaperMod)。
+
+**网站备案**
+
+合规要求。
+
+**SSL证书**
+
+非必须，但建议配置。
+
+## 汇总
+
+条目 | 费用 | 话费时间
+---|---|---
+域名 | 7元/年 | 0天
+云服务器 | 99元/年 | 0天
+静态网站生成器 | 0元 | 0天
+博客主题 | 0元 | 0天
+网站备案 | 0元 | 7天
+SSL证书 | 0元 | 0天
+网站搭建 | 0元 | 1天
+
+备注：网站搭建很简单，在Linux系统的云服务器上，安装nginx即可。

content/posts/first.md

@@ -0,0 +1,13 @@
+---
+date: '2025-05-27T21:03:50+08:00'
+draft: false
+title: '建站记'
+---
+
+癸卯年冬，余购域名、赁服务器，始建博客。或问其故，答曰：「欲存思想于一隅耳。」
+
+初，择技术栈，踌躇难决。或荐WordPress，言其便；或劝手写代码，称其洁。余思之再三，终选HUGO框架，以其简而有力也。
+
+部署之日，遇谬误无数。终端报红，汗涔涔下；忽而解决，则拊掌大笑。历三昼夜，终见「Hello World」跃于屏上，快哉！
+
+嗟乎！今人著述，多托于社交媒体，然平台无常，倏忽湮灭。昔人刻石于山，今余编码于云，其志一也。

content/posts/hugo-pwa/index.md

@@ -0,0 +1,89 @@
+---
+date: '2025-06-17T21:02:27+08:00'
+draft: false
+title: 'Hugo静态网站增加对PWA的支持'
+---
+
+Progressive Web App (PWA) 是一种增强型网页应用形式，具备：
+- 可被安装（添加到主屏幕）
+- 离线访问
+- 类似原生 App 的体验
+
+实现 PWA 核心需要以下三个要素：
+
+1. manifest.json: 用于描述你的 Web App 的外观和行为，如图标、名称、主题色等。
+2. service-worker.js: 是一个浏览器后台脚本，可以拦截网络请求、缓存资源，实现离线访问。
+3. 在 HTML 中注册 Service Worker 和引入 manifest
+
+**第一步：添加 manifest.json**
+
+创建 static/manifest.json：
+```json
+{
+  "name": "Hugo PWA",
+  "short_name": "PWA",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#317EFB",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
+```
+
+**第二步：添加 service-worker.js**
+
+在 static/service-worker.js 中添加：
+```javascript
+const cacheName = 'v1';
+
+const cacheAssets = [
+  '/',
+  '/index.html',
+  '/style.css',
+  // 可以添加其他需要缓存的资源路径
+];
+
+self.addEventListener('install', e => {
+  e.waitUntil(
+    caches.open(cacheName).then(cache => {
+      console.log('Caching files...');
+      return cache.addAll(cacheAssets);
+    })
+  );
+});
+
+self.addEventListener('fetch', e => {
+  e.respondWith(
+    fetch(e.request).catch(() => caches.match(e.request))
+  );
+});
+```
+
+**第三步：在页面中注册 service worker 和引入 manifest**
+
+修改你的```layouts/partials/head.html```（或 ```baseof.html``` 中的 ```<head>``` 部分）：
+```html
+<link rel="manifest" href="/manifest.json" />
+<script>
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js')
+      .then(reg => console.log('Service Worker registered', reg))
+      .catch(err => console.log('Service Worker failed', err));
+  }
+</script>
+```
+
+**测试**
+
+然后就可以在浏览器中测试你的 PWA 了。并不是所有的浏览器多支持PWA。测试时，发现firefox支持PWA，表现就是在浏览器菜单里面操作```添加应用到主屏幕```后，通过桌面的ICON访问网站，是一个全屏窗口的网站，不在出现浏览器的地址栏和菜单的UI。测试发现，Edge浏览器不支持PWA。以上测试基于Android系统。

content/posts/network-terminology/index.md

@@ -0,0 +1,21 @@
+---
+date: '2025-06-15T20:32:04+08:00'
+draft: true
+title: '网络术语'
+---
+
+## 软路由
+
+“软路由”是“软体路由器”（Software Router）的简称，是指通过 普通 PC 或嵌入式硬件 安装专门的路由系统（如 OpenWrt、LEDE、RouterOS、爱快、ZeroShell 等）来实现路由器功能的设备。区别于“硬路由”（专用硬件 + 固化系统），软路由通常具有更高的可玩性、性能和灵活性。
+
+## VPS
+
+“VPS” 是 Virtual Private Server 的缩写，中文常译为“虚拟专用服务器”，是一种基于虚拟化技术的服务器租赁服务，介于虚拟主机和独立服务器之间。
+
+## 私有云
+
+“私有云”是指由个人或组织构建并拥有的云计算环境，其硬件资源和数据完全由自己控制，通常用于实现文件同步、数据备份、远程访问、办公协作等功能。
+
+## NAS
+
+NAS（Network Attached Storage，网络附加存储）是一种专门用于存储和共享数据的设备，它通过网络将文件服务提供给多个用户，广泛用于家庭、工作室、中小企业等场景。

content/posts/the-method-of-replacing-the-SSL-certificate/index.md

@@ -0,0 +1,76 @@
+---
+date: '2025-06-12T20:32:04+08:00'
+draft: false
+title: '更换SSL证书的方法'
+---
+
+## 背景说明
+
+- 网站通过NGINX代理
+- NGINX通过Docker部署
+- 域名通过阿里云购入
+- SSL证书通过阿里云申请
+
+## 更换方法
+
+基于上面的背景，更换SSL证书共分为四步：
+
+1. 申请新的SSL证书
+
+    ![alt text](image.png)
+
+    点击```创建证书```，在弹出的页面中，输入```域名名称```，然后点击```提交审核```。等待大概10分钟，就会通过审核并完成证书签发，这个过程无需做任何操作，因为域名和SSL证书都是通过阿里云，所以会自动添加记录值和验证。
+
+2. 下载证书
+
+    ![alt text](image-1.png)
+
+    服务器类型为Nginx，点击下载。解压之后，可以得到```.key```和```.pem```文件。
+
+3. 配置新的SSL证书
+
+    把```.key```和```.pem```文件放在```cert/```目录下（替换原来的证书文件）。
+
+4. 重启NGINX服务
+
+    ```bash
+    docker restart nginx
+    ```
+
+至此，SSL证书更换完成。
+
+## 后记
+
+如果是首次配置SSL证书，还需要在nginx的配置文件中添加如下内容：
+
+```nginx
+server
+{
+    listen 443 ssl;
+    server_name [your domain name];
+
+    ssl_certificate cert/1970666.xyz.pem;
+    ssl_certificate_key cert/1970666.xyz.key;
+
+    ssl_session_cache shared:SSL:1m;
+    ssl_session_timeout  5m;
+
+    location / {
+        root /usr/share/nginx/html/blog;
+        index index.html;
+        try_files $uri $uri/ =404;
+    }
+
+     access_log /logs/blog.log;
+}
+
+server {
+    listen 80;
+    server_name [your domain name];
+    
+    rewrite ^(.*)$ https://$host$1;
+    location / {
+        index index.html index.htm;
+    }
+}
+```

hugo.yaml

@@ -1,24 +1,19 @@
-baseURL: https://example.org/
+baseURL: https://1970666.xyz/
 languageCode: zh-cn
-title: 魔芋土豆
+title: 技术文章
 theme: ["PaperMod"]
 
-languages:
-  zh:
-    languageName: "中文"
-    # title: 魔芋土豆
-    weight: 10
-    menu:
-      main:
-        - name: "主页"
-          url: "/"
-          weight: 1
-        - name: "文章"
-          url: "/posts/"
-          weight: 2
-        - name: "关于"
-          url: "/about/"
-          weight: 3
+menu:
+  main:
+    - name: "主页"
+      url: "/"
+      weight: 1
+    - name: "文章"
+      url: "/posts/"
+      weight: 2
+    - name: "关于"
+      url: "/about/"
+      weight: 3
 
 params:
   env: production # to enable google analytics, opengraph, twitter-cards and schema.
@@ -29,28 +24,36 @@ params:
   ShowReadingTime: true
   profileMode:
     enabled: true
-    title: 深夜适合思考
-    imageUrl: "#"
+    title: " "
+    subtitle: 在川渝的街头巷尾，有一种朴素又迷人的食物，它没有山珍海味的贵气，也没有异国料理的新奇，却总能在寒冷的冬日里，或是疲惫的午后，悄悄地温暖一个人的胃，也安抚一颗心。
+    imageUrl: "/images/website_icon.png"
     imageTitle: icon
-    # imageWidth: 120
-    # imageHeight: 120
+    imageWidth: 300
+    imageHeight: 300
     buttons:
       - name: 文章
         url: posts
       - name: 关于
         url: about
   homeInfoParams: # 当profileMode.enabled为false时生效
-    Title: "PaperMod's Demo"
-    Content: >
-      👋 Welcome to demo page of Hugo's theme PaperMod!
-
-      - **PaperMod**  is designed to be clean and simple but fast and responsive theme with useful feature-set that enhances UX.
-
-      - Feel free to show your support by giving us a star 🌟 on GitHub and sharing with your friends and social media .
-
-      - PaperMod is based on theme [Paper](https://github.com/nanxiaobei/hugo-paper/tree/4330c8b12aa48bfdecbcad6ad66145f679a430b3).
+    Title: Hi there!
+    Content: 👋 Welcome to my blog!
+  ShowShareButtons: true
+  ShowBreadCrumbs: false   # 是否显示面包屑
+  ShowPostNavLinks: true    # 是否显示文章前后的链接(上一篇、下一篇，位于文章底部)
+  ShowCodeCopyButtons: true   # 是否显示代码复制按钮
   socialIcons:
+  footer:
+    text: "粤ICP备2025426649号"
+  assets:
+    favicon: "favicon.ico"
+    favicon16x16: "favicon-16x16.png"
+    favicon32x32: "favicon-32x32.png"
+    apple_touch_icon: "apple-touch-icon.png"
+    safari_pinned_tab: "safari-pinned-tab.svg"
+    theme_color: "#2e2e33"
+    msapplication_TileColor: "#2e2e33"
 
 pagination:
   disableAliases: false
-  pagerSize: 5
+  pagerSize: 5

static/manifest.json

@@ -0,0 +1,21 @@
+{
+    "name": "技术文章",
+    "short_name": "技术文章",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#317EFB",
+    "icons": [
+      {
+        "src": "favicon.ico",
+        "type": "image/png",
+        "sizes": "192x192"
+      },
+      {
+        "src": "favicon.ico",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ]
+}
+  

static/service-worker.js

@@ -0,0 +1,23 @@
+const cacheName = 'v1';
+
+const cacheAssets = [
+  '/',
+  '/index.html',
+  '/style.css',
+  // 可以添加其他需要缓存的资源路径
+];
+
+self.addEventListener('install', e => {
+  e.waitUntil(
+    caches.open(cacheName).then(cache => {
+      console.log('Caching files...');
+      return cache.addAll(cacheAssets);
+    })
+  );
+});
+
+self.addEventListener('fetch', e => {
+  e.respondWith(
+    fetch(e.request).catch(() => caches.match(e.request))
+  );
+});

themes/PaperMod/layouts/partials/footer.html

@@ -10,7 +10,7 @@
     {{- end }}
 
     {{- with site.Params.footer.text }}
-        {{ . | markdownify }}
+        <a href="https://beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">{{ . | markdownify }}</a>
         {{- print " · "}}
     {{- end }}
 

themes/PaperMod/layouts/partials/head.html

@@ -36,6 +36,15 @@
 <meta name="naver-site-verification" content="{{ site.Params.analytics.naver.SiteVerificationTag }}">
 {{- end }}
 
+<link rel="manifest" href="/manifest.json" />
+<script>
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js')
+      .then(reg => console.log('Service Worker registered', reg))
+      .catch(err => console.log('Service Worker failed', err));
+  }
+</script>
+
 {{- /* Styles */}}
 
 {{- /* includes */}}