又开始抢盐了，一有点屁事就抢盐。

## 吃碘盐能防辐射？

盐本身不能防辐射，如果说碘能防辐射，也只是微乎其微吧，在面对强辐射的时候，我智能说，有效的隔离最管用，其他都是白扯。人家倒点废水看给你急得？一下子，什么羊群效应迅速蔓延，不买点盐都要成了另类了。

## 人言可畏

我们不能苛求所有人都是理智的，绝大部分人都是盲目的，就好比股市的追涨杀跌、利润诱人的杀猪盘。防辐射之前先冷静一下，好好考虑一下你的身体能否承受的了一天几袋盐？

又开始抢盐了，一有点屁事就抢盐。

加碘盐能防核辐射的话，还怕什么核战争？

今天，女儿看到我在浏览我的博客页面，她喵了一眼说到：你博客现在的界面没有之前的“老年跑马灯好看”，我愣了一下，好，那咱就换回去！

## shields.io

把之前的暗黑风格又拾到了一下又换上了，觉得底部还是优点不够板正，顺带这也收拾了，有两个文字的地址，呼的一下载想起有种小图标挺好看，是啥还想不起来了，后来翻了之前的一些页面终于在收藏夹里找到了：shields.io 一个简洁、一致、清晰的徽章。

## 安装及使用

登录shields.io，然后就能可以使用他的在线生成图标的功能了，目前现在市面上的长条方形的小图标都是出自这里了，这个网站提供很多类型的图表底图，可以根据需求设置背景颜色，而且他还准备了大量的模板，可以直接套用，非常方便，具体效果：

<a href="https://github.com/bosichong/suiyan" target="_blank">
          <img class="w-auto" alt="suiyan.cc" src="https://img.shields.io/badge/SuiYan-%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E7%94%9F%E6%88%90%E5%99%A8-green">
  </a>

## 总结

如果有软件制作需要一些图标来标明依赖和版本信息的时候，shields就可以出场了，看起来会更专业些。

今天，女儿看到我在浏览我的博客页面，她喵了一眼说到：你博客现在的界面没有之前的“老年跑马灯好看”，我愣了一下，好，那咱就换回去！

shields.io 一个简洁、一致、清晰的徽章

虚拟机中装了个Ubuntu，使用非root登录总是需要sudo,好麻烦的一说，查了一下如何启用root的ssh登录便修改了，这里记录一下操作过程。

## 修改root的密码

    bosi@kk:~$ sudo passwd root
    [sudo] password for bosi:
    New password:
    Retype new password:
    passwd: password updated successfully

先输入密码，后两次输入root的新密码。

## 修改配置文件时root可以ssh登录

    sudo vim /etc/ssh/sshd_config

Ubuntu 22 打开后可以直接添加：

    PermitRootLogin yes

保存退出

重启服务：

    sudo service ssh restart

OK！可以试试了，root应该可以登录ssh了.



虚拟机中装了个Ubuntu，使用非root登录总是需要sudo,好麻烦的一说，查了一下如何启用root的ssh登录便修改了，这里记录一下操作过程。

Ubuntu下使用root登录ssh的设置


国内连接GitHub的速度真是喜人，所以测试GitHub Actions总是再重复的push连接失败中煎熬，好在最后实践通过了，记录一下这里的坑。

## Actions代码

GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的 .github/workflows目录中，这里复制使用的一位前辈的代码，除了修改了pnpm的版本意外，其他基本上没有修改，代码如下：

    name: Actions CI - Next.js version 12 static site export, GitHub Actions Build and Deploy
    on:
    push:
        branches: [ master ]
    # 执行的一项或  多项任务
    jobs:
    build-and-deploy:
        # 运行在虚拟机环境ubuntu-latest
        # https://docs.github.com/zh/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idruns-on
        runs-on: ubuntu-latest
        steps:
        - name: 获取源码  🛎️
            uses: actions/checkout@v3
        - name: Node环境版本 🗜️
            uses: actions/setup-node@v3
            with:
            node-version: 18
        - name: 安装 Pnpm 🧬
            uses: pnpm/action-setup@v2
            id: pnpm-install
            with:
            version: 8
            run_install: true
        - name: 安装依赖 ⚙️
            run: pnpm install
        - name: 打包 🏗️
            run: |
            npm run build
            touch out/.nojekyll
        - name: 部署 🚀
            uses: JamesIves/github-pages-deploy-action@v4
            with:
            branch: gh-pages
            folder: out
            clean: true


目前来说，这段代码简洁而且过程清晰，如果有特别的要求可以按自己的需求修改。

## 一些坑

1. 权限问题

    Error: The deploy step encountered an error: The process '/usr/bin/git' failed with exit code "128"  ❌ Notice: Deployment failed! ❌

基本上都动作通过了，突然出现这个128，其实是权限问题，解决方法：

[点击查看](https://github.com/actions/checkout/issues/417#issuecomment-1427951779)

![博客名称](https://suiyan.cc/assets/images/2023/git128.webp)

2. Next项目的静态文件资源地址正确，却无法打开显示404，修改方法：静态文件的根目录添加`.nojekyll`的空文件即可。
3. 如果项目保存再域名的下一级目录，可以考虑在next的配置文件中添加：


        #next.config.js
        
        basePath: '/目录名称',


##  总结

其实很简单，但是测试的时候由于网速问题造成的很费时间，所以调试的时候尽量要看仔细哈。


相关连接：

[测试项目地址，包含所有代码](https://github.com/bosichong/githubactionstest)

[使用 GitHub Actions 构建、部署 Next.js 并将其托管到 GitHub Pages](https://juejin.cn/post/7220410343649624121)

国内连接GitHub的速度真是喜人，所以测试GitHub Actions总是再重复的push连接失败中煎熬，好在最后实践通过了，记录一下这里的坑。

GitHub Actions 构建、部署 Next.js项目

自从回归Windows之后，总感觉用着chrome不是很爽，偶然的一次试了edge发现打开的速度真是不错，日常的调试也是可以替代chrome，索性就换成edge了。

## 回忆

其实使用chrome和edge区别不大，他们内核一样但功能却各不相同，相比较safari就显得有些格格不入，safari唯一的优点可能就是移动设备用起来省电吧。

绕了半天，我想说啥来着？不管是chrome还是edge、火狐、OP，这些公司的浏览器，几乎都没有什么广告，这和国内的厂商再制作软件上的理念大不相同，老外再软件上的竞争是良性的，或许是我没看到吧，但是至少不想3Q大战那样惊心动魄你死我活的，还没脸的要用户二选一。

## 未来

国内开发者最近因为app需要备案反响很大意见很多，想起当年个人网站都需要ICP备案的时候，网站成批的倒下了，因噎废食表现的淋漓尽致。国内的开发者哪个没违法？去过GitHub吧？科学上网？那些其实都是违法的，呜呼悲哉！其实大部分网名都还是好人啊。

自从回归Windows之后，总感觉用着chrome不是很爽，偶然的一次试了edge发现打开的速度真是不错，日常的调试也是可以替代chrome，索性就换成edge了。

我又用回了"IE"--edge

之前使用VMware Workstation Pro 17 安装了Ubuntu 22 server版，但是每次启动Ubuntu都会很卡，遂更换成VirtualBox-7.0.10-158379-Win，启动一切正常了，这里记录一下设置Ubuntu server固定IP的方法。

## 设置方法

打开网卡的配置文件:

    sudo vim /etc/netplan/00-installer-config.yaml

如果在系统中没有 00-installer-config.yaml 文件，可能是因为网络配置文件的名称不同。在较新的 Ubuntu 版本中，Netplan 已成为网络配置的首选工具，因此文件名可能会有所不同。确保根据实际情况修改文件名。

编辑修改内容如下：

    network:
    ethernets:
        enp0s3:  # 网络接口的名称可能会有所不同
        dhcp4: false
        addresses: [192.168.1.10/24]  # 根据您的网络进行调整
        gateway4: 192.168.1.1
        nameservers:
            addresses: [8.8.8.8, 8.8.4.4]  # 可以使用谷歌的 DNS 服务器
    version: 2

保存退出，并刷新网络。

    sudo netplan apply

查看IP

    ip a

大功告成！






之前使用VMware Workstation Pro 17 安装了Ubuntu 22 server版，但是每次启动Ubuntu都会很卡，遂更换成VirtualBox-7.0.10-158379-Win，启动一切正常了，这里记录一下设置Ubuntu server固定IP的方法。的简介

ubuntu-22-live-server 设置固定IP

next项目部署GitHub pages有两个小坑，今天就来说到说到。

## 坑一 静态资源地址

当你build打包了静态资源之后，你会push到你的GitHub仓库中，这个时候你会发现只有index.html可以打开，其他的静态资源统统404找不到地址，查看代码发现静态资源的地址都是错误的，例如你线上的正确地址是：`<script defer="" nomodule="" src="/favorites/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script>`，因为你的仓库名称:`favorites`，所以只有添加了`/favorites`的前缀才会打开，但是实际上传之后地址是:`/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js`，少了`/favorites`,就会造成资源的404状态。

解决办法：

在next的配置文件中添加：

    # next.config.js
    basePath: '/favorites',

给你的静态资源添加一个前缀就好了，然后重新编译打包，再次push到仓库，结果你会发现你的地址已经完全正确了！甚至通过浏览器的工具查看了请求地址，绝对是没有问题的，但是......

## 坑二 _惹的祸

通过浏览器的工具查看了静态资源的请求地址，绝对是没有问题的，但是依然是404，你仰天长啸：卧槽，这是见鬼了么？

这世界没有鬼，如果看似正确的事情却出现了不正常的现象，那么就一定是有人在捣鬼！没错，是GitHub搞得鬼！GitHub的静态页面服务竟然不支持`_`这个符号，也就是说`/_next/static/chunks/XXXX`这个地址是无法识别的，所以才会出现404这个鬼！那么结局的办法是：

在你的 Next.js 项目中，你可以通过在构建脚本中添加一些自定义操作来实现在输出目录（例如 out 目录）中自动生成一个 `.nojekyll` 文件。这样做可以确保在部署到 GitHub Pages 时，静态资源能够正确地被访问，而不会受到 Jekyll 处理的影响。

你可以建一个脚本，每次打包的时候都自动生成一个`.nojekyll`的空文件在out目录中，这样就解决了！再次push GitHub仓库，一切正常了

##  总结

真是见鬼了！

next项目部署GitHub pages有两个小坑，今天就来说到说到。

Next项目部署GitHub pages的一些坑

终于开始拾到我的收藏夹了...从头到尾逐一测试筛查，去除了一些404和过时的内容，整理了两个小时左右终于搞定了！

## 很闲？

额，忘了截图了，原来的收藏夹乱的狠，点开收藏可以满屏而且杂乱无序，有的时候找个东西也是很不方便，而且很多网址失效打不开太影响效率了！前几天看到别人用了网址导航不错，自己也痒痒的要搞个玩，但是看了一下网址导航的程序都好专业，咱就一个自用型，也用不上那么多的功能呢，算了还是自己动手写吧。

要不先看看效果：

[我的收藏夹](https://suiyan.cc/favorites/)

## 网址导航的设计构思

这么多的网址不可能一个一个的复制然后加入到静态页面去，所以先模拟数据设计好前端的dom结构，然后导出自己的收藏夹为HTML，使用python写了一个脚本，将收藏夹的HTML解析并生成JavaScript的对象，这样就可以直接使用这个对象在next项目中加载数据了，然后打包编译，上传到GitHub，大功告成！

## 遇到的坑

再写python的脚本的时候差点放弃了，因为导出的收藏夹的HTML结构很特殊，与普通网页的HTML不一样，所以解析的时候总是出错，中间竟然放弃了，决定手动组装JavaScript对象，但是复制粘贴了半个小时就累的不行，回头继续写脚本，后来求助与AI，调试了半个多小时，终于解析出来了，生成了JavaScript的对象。

在上传GitHub pages时候也遇到了问题，由于GitHub pages 对静态文件目录识别的特别性，导致无法正确的加载静态资源，后来修改了next的配置文件，增加了一个静态资源前缀的配置项，还添加了一个空文件：`.nojekyll`才解决的了一些资源加载的问题，明天总结一下这些坑。

至此，终于搞定了这个网址导航......，看给我闲的！

终于开始拾到我的收藏夹了...从头到尾逐一测试筛查，去除了一些404和过时的内容，整理了两个小时左右终于搞定了！

整理了一个下午的收藏夹......

使用next撸了一个极简的网址导航，本打算是用来测试GitHub actions用的，但是build都成功了，部署到GitHub pages又卡住了，访问GitHub本来就是很慢，调试起来就麻烦，算了，GitHub actions又从入门到放弃了。

## 关于这个暑假

这个暑假很忙，开学孩子就上六年级了，提前陪孩子预习初中的英语和数学，哎呀数学和英语单词都忘了妥妥的还给了体育老师，还好现在只要你想学，互联网可以给你任何你想学的课程，买了些书和资料配合视频教程，孩子看着学习我在边上陪着，偶尔也跟着做些题，还好，孩子预习初中的数学和英语还是有很大的收获的。

## 关于编程的学习

前端的学习有了些进步，切换vue到react再到next，感觉我学习的进度时赶不上前端的发展速度的，又买了几本书有next和python的，继续深入的学习和实践，编程这东西还就是得多动手练习。

## 写了一个导航

写了一个简单的网址导航，打算把自己收藏的网址整理一下，实在的太多了收藏夹也是乱套，把没用的失效的剔除，把有用的归类整理，估计得整理几天，整完发布。

使用next撸了一个极简的网址导航，本打算是用来测试GitHub actions用的，但是build都成功了，部署到GitHub pages又卡住了

短暂而忙碌的暑假即将谢幕

自学编程很久了，对GitHub的使用熟练度自认为还是可以了，以前也看到过仓库导航上的GitHub Actions，当时由于没有相关的需求所以并没有去主动的了解，这几天总是想做一些自动化的脚本，所以才发现GitHub很早就做了这个自动化的功能。

## 什么是GitHub Actions？

GitHub Actions 是一项由 GitHub 提供的持续集成（Continuous Integration，CI）和持续部署（Continuous Deployment，CD）服务。它允许开发者在代码库中配置自动化的工作流程，以便在代码发生更改时执行各种任务，如构建、测试、部署和通知等。GitHub Actions 可以帮助开发团队更加高效地管理和维护他们的软件项目。

## GitHub Actions可以做什么？

GitHub Actions可以做的事情实在太多了，简单来说就是执行一些脚本命令，例如前端的打包编译，我们可以在本地进行，也可以使用GitHub Actions发布一个任务，在GitHub仓库出发一个事件的时候，自动执行打包和编译，这样的话，假如我们使用next开发了一个基于.md的博客，我们可以设定事件当我们push一个.md的博文到博客的仓库就会触发build事件，这样就不必再本地进行build了，而是GitHub帮我们打包发布了博客的静态页面，这就极大的简化了博客更新的步骤，只需一步push代码就可以了。

## GitHub Actions 部署 Next.js 项目：

对于一些常用的actios,我们不必自己去动手写，GitHub有一个actions的市场，大部分你能想到的动作脚本这里都有，譬如部署Next.js的项目：


    # .github/workflows/build.yml
    
    name: Build, Export and Publish Next.js App
    on:
    push:
        branches:
        - main
    pull_request:
        branches:
        - main
    workflow_dispatch:

    jobs:
    build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v2
            with:
            node-version: 14.x
        - run: |
            npm i
            npm run build
        - name: Next Pages
            uses: anorcle/next-pages@v1.0
        - name: Commit and push changes
            run: |
            git config --global user.name "anorcle"
            git config --global user.email "next-pages@anorcle.com"
            git add -A
            git commit -m "New Build"
            git push

这段代码是一个 GitHub Actions 的工作流程配置文件，用于自动化构建、导出和发布 Next.js 应用程序，这是直接再市场了就能搜到的，具体代码的含义，复制到chatGPT里就会得到很好的解释。

## 总结

GitHub Actions 是一个不错的选择，实际的用途还有很多，熟练应用可以事半功倍，抽空我要试试哈。

自学编程很久了，对GitHub的使用熟练度自认为还是可以了，以前也看到过仓库导航上的GitHub Actions，当时由于没有相关的需求所以并没有去主动的了解，这几天总是想做一些自动化的脚本，所以才发现GitHub很早就做了这个自动化的功能。

GitHub Actions 是干什么用的？

前几天大言不惭的说是要使用next重构博客的程序，但是经过几天的磨合，当时的锐气几乎都被消灭了，所以说人还是不要吹牛逼，不然......

## 放弃的原因

大约花了二天的时间就把博客现有的功能和界面复刻了，但是在最后的实际测试中逐渐的失去了更换博客程序的动力，首先next的优势是部署vercel+自动化，这和我的初衷有些冲突，目前来说我的博客主要是写一些记录编程学习读书笔记日常等，连图片都很少。我写作博客日常操作就是:创建md文档、更新静态文件、同步GitHub。

    # 创建一个新的博文，开写。
    python s.py -n 'h'
    2023-08-14 21:12:48.844 | INFO     | __main__:create_blog:325 - blog文章.md创建成功！
    # 更新
    python s.py -i    
    2023-08-14 21:24:16.521 | INFO     | __main__:create_all:369 - 所有静态资源创建更新完毕！
    # 同步github
    python s.py -g

目前我的静态资源生成速度我还是比较满意的，大约也就几秒钟，同步GitHub也是很稳定的。但是如果我换成next，我就得部署vercel并关联GitHub仓库，可能我个人不太喜欢折腾主机部署什么的，想想我就觉得麻烦，我就用我的写博客三部曲我觉得挺方便的，所以我就放弃了，但是，我把新的友情链接页面给搬运过来了，不能白折腾，把友情链接的页面设计好看点也算是对友联博客的尊重嘛。

其实还有一些技术上的细节原因，一方面是对react和next代码编写和框架使用的熟练度还是很差的，例如我不喜欢看到页面上控制台输出红色的错误信息，黄色警告是我的极限。重构之后总会有些莫名其妙的错误，大红叉子看着很难受，但是我一时半会由解决不掉，对于一个不可控的程序，我就会觉得体验超差，所以，至少在我解决这些错误之前我是不会更换了。

## 收获

但是不使用并不代表不喜欢，对react和next环境下的代码编写还是很有信心的，这阵子也许会搞些小东西来试试，而且也有可能会去考虑一些自动化的项目部署玩玩，总之，重构代码还是有一些收获的。还有标题是chatGPT给起的，就当无题好了。

前几天大言不惭的说是要使用next重构博客的程序，但是经过几天的磨合，当时的锐气几乎都被消灭了，所以说人还是不要吹牛逼，不然......

放弃Next.js重构博客：经验、教训与未来技术探索

持续了一个月的 LCP 问题：超过了 2.5 秒（桌面设备），经过了20多天的验证终于通过了，总结一下关于解决LCP问题的经验。

## 问题回顾

什么是 LCP？

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

怎样算是良好的 LCP 分数？ 

为了提供良好的用户体验，网站应该努力将最大内容绘制控制在2.5 秒或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。

LCP出现了问题，会有什么后果？

Google有个核心网页指标，如果你的网页出现了LCP问题，那么Google就把你的网页移除核心网页，虽然Google没有说明核心网页被移除后会降低搜索排名，但是非核心网页的展示量却会少的很多。另外LCP存在问题的时候是很影响用户打开网页的体验的，这个我是深有体会。

## 发现问题

大约20多天前Google给我发邮件：LCP 问题：超过了 2.5 秒（桌面设备）需要解决，存在此问题的网址需要改进其网页体验的邮件，我登陆了Google站长平台看了一下数据指标，我的核心网页都被删掉了，直接为零。

![博客名称](https://suiyan.cc/assets/images/2023/lcp.png)

其中上图橙色的条子就是出现问题的网址，Google会将问题网页打好编组，Google还提供了一个在线的检测的网址，用来检测你的网页中的问题，很专业哈，我就拿来自己的网页去检测，好家伙这一检测就发向好多问题，具体如下图：

![博客名称](https://suiyan.cc/assets/images/2023/lcp6.png)

检测网址：[PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/),感兴趣的可以自己试试自己的网站。

我这个人有点强迫症，看到这样指标的图确实很不爽！所以决定对网页进行优化！

## 解决问题

使用网页速度测量工具测量后，检测工具会给出全方位指导意见，对于一些问题的发现和解决只要按着工具给出的指引就可以很好的修改和优化，我之前的问题就是因为网页上加载了一个很大的依赖文件，由于我的前端并没有优化打包，所以有些依赖的包就是一股脑都上了，造成页面加载缓慢，我清楚的记得当时我自己都觉得加载太慢了，打开页面都会烦躁！

后来我就删除了影响页面打开的依赖，当然也不能怪那个框架，因为人家也提示了，不建议直接CDN引用，建议在打包编译的环境中使用，我当时就是图个痛快，好吧只好忍痛弃之，顺便优化了前端，然后再次去测量的网站进行测量：

![博客名称](https://suiyan.cc/assets/images/2023/lcp5.png)

嘿，经过一阵折腾终于搞定了，然后就是提交Google对有问题的网页组进行审核，Google说明了需要大约30天的时间，因为他需要一个用户的体验数据，根据页面的加载速度的数据平均值来判断你是否通过了审核。

## 终于通过审核了

可能没啥人关注这个LCP问题吧？难道就我一个人在关注吗？来看看审核之后的数据图表，大约25天才审核过去，这个指标需要有人访问你的网站产生数据才会生成。

![博客名称](https://suiyan.cc/assets/images/2023/lcp4.png)
![博客名称](https://suiyan.cc/assets/images/2023/lcp3.png)
![博客名称](https://suiyan.cc/assets/images/2023/lcp2.png)
![博客名称](https://suiyan.cc/assets/images/2023/lcp1.png)

还别说，我喜欢100分，虽然不是什么比赛和考试，但是这个指标说明浏览你的网页的用户体验良好！对于一个时用GitHub pages 存放网页的站长，我把页面优化成这个分值我很满足了，博客内容咱不敢说写的如何，但是这个页面的打开和加载的体验感，至少通过了专业的审核哈！最后，来试试你的网站，看看桌面版的得了多少分？

检测网址：[PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/),感兴趣的可以自己试试自己的网站。


持续了一个月的 LCP 问题：超过了 2.5 秒（桌面设备），经过了20多天的验证终于通过了，总结一下关于解决LCP问题的经验。

关于Google LCP 问题：超过了2.5秒 验证已通过

断断续续花了几个小时的时间，我成功地使用了 Next.js 复刻了我的博客的全部功能，真是事半功倍啊！

## 效率至上

我之前尝试过使用不同的编程语言和框架编写过几个版本的博客，但从未有过像使用 Next.js 这样的体验！首先，依赖减少了，整个程序的代码量大幅减少，打包和编译过程自动化，大大减少了错误的发生。后续还能充分利用丰富的 JavaScript 相关库，添加新功能比以往更加简单。

之前采用的是 Python + Jinja2 处理后端输出的格式化数据，与 Jinja2 模板引擎协作输出静态页面。但由于需要将 Python 转成 JSON，有时需要编写繁琐的算法。再加上前后端静态化没有分离，前端的打包和编译没有机会参与，导致前端开发仍然采用老旧的方式，感觉受限。而这次使用 Next.js 后，重构博客的感觉就像是在使用原生的 JavaScript + React 编写静态 HTML，而且基于 React 的框架和库非常丰富，未来进行扩展会更加方便。

## 持续编写

在功能复刻完成后，接下来是样式的复刻。虽然可能会进行一些小小的改动，但变动不会太大。我计划将友联和关于页面单独拎出来重新设计，幸运的是，现在使用 Tailwind 修改样式非常便捷。对于友联页面，我考虑添加友联博客的 RSS 文章列表，这样就不必一个个去点开，直接查看友联的最新博文会更加方便。

## 展望未来

通过这次使用 Next.js 的编写经验，我有信心未来会继续开发一些有趣的小项目。之前一直希望能够利用 React 开发一些东西，而现在有了 Next.js，我的思路更加开阔了。毫无疑问，从 Vue 转向 React 是一个明智的选择。

断断续续花了几个小时的时间，我成功地使用了 Next.js 复刻了我的博客的全部功能，真是事半功倍啊！

仅用了几个小时就使用next.js重构博客的所有功能

手痒，又想重构博客了。博客的1.0使用的是Django，2.0使用的是JavaScript。3.0使用的python生成的静态页面，目前正在考虑使用Next.js重构现有博客。

## 为什么是Next.js

之前一直使用python作为主要的编程语言，编写了第一个版本的博客，大约使用了三年，缺点：部署和更新起来比较麻烦。后来使用python生成静态的HTML，但是前端修改起来还是不太方便，后来考虑使用react写成SPA+Ajax加载模式，可以解决前端打包编译优化的痛点，但是Ajax的缺点是不利于SEO，随着最近JavaScript的学习和技术推进，终于摸到了Next.js，原来Next.js这么强大和简单，从vue过渡到react，一直想有一种可以直接静态化站点的框架，这次Next.js终于可以入手了。

## 搭建Next.js博客的框架

创建博客项目，终端运行`pnpm create next-app 项目名称`：

    D:\code\next> pnpm create next-app suiyan
    ../../.pnpm-store/v3/tmp/dlx-3784        |   +1 +
    Packages are hard linked from the content-addressable store to the virtual store.
    Content-addressable store is at: D:\.pnpm-store\v3
    Virtual store is at:             ../../.pnpm-store/v3/tmp/dlx-3784/node_modules/.pnpm
    ../../.pnpm-store/v3/tmp/dlx-3784        | Progress: resolved 1, reused 1, downloaded 0, added 1, done
    √ Would you like to use TypeScript? ... No / Yes
    √ Would you like to use ESLint? ... No / Yes
    √ Would you like to use Tailwind CSS? ... No / Yes
    √ Would you like to use `src/` directory? ... No / Yes
    √ Would you like to use App Router? (recommended) ... No / Yes
    √ Would you like to customize the default import alias? ... No / Yes
    Creating a new Next.js app in D:\code\next\suiyan.

    Using pnpm.

    Initializing project with template: default-tw


    Installing dependencies:
    - react
    - react-dom
    - next
    - tailwindcss
    - postcss
    - autoprefixer
    - eslint
    - eslint-config-next

    Packages: +303
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Packages are hard linked from the content-addressable store to the virtual store.
    Content-addressable store is at: D:\.pnpm-store\v3
    Virtual store is at:             node_modules/.pnpm
    Progress: resolved 312, reused 303, downloaded 0, added 303, done

    dependencies:
    + autoprefixer 10.4.14
    + eslint 8.46.0
    + eslint-config-next 13.4.13
    + next 13.4.13
    + postcss 8.4.27
    + react 18.2.0
    + react-dom 18.2.0
    + tailwindcss 3.3.3

    Done in 16.5s
    Initialized a git repository.

    Success! Created suiyan at D:\code\next\suiyan

pnpm的好处这里就不再详细解释了，简单来说就是节省时间和硬盘空间，和rarn差不多一样吧，搞前端应该都知道。

进入suiyan目录，运行：

    PS D:\code\next> cd suiyan
    PS D:\code\next\suiyan> npm run dev
    > suiyan@0.1.0 dev
    > next dev

打开http://localhost:3000就会看到站点的首页了。我们修改`suiyan\pages\index.js`中的内容，保存后就会发现预览的首页也跟着变化了。至此，基于next.js博客项目就搭建完成了。

## 博客页面的生成

1. 博客的博文页面，这个可以根据articles目录下.md文档自动生成相关的博文页面，`npm install gray-matter`,用来解析.md文档中的元数据。
2. 博客的首页、标签、归档、页面的数据来源于所有.md文档的数据统计。
3. layout中添加页面中的导航页尾等一些固定的元素，使用react的上下文固定一些常用的信息避免重复计算。
4. 关于博文导航的分页（正在研究）
5. 修改"build": "next build && next export",可以生成静态的HTML页面，是全站静态化。


## 使用next.js搭建博客的优点

1. 前端调试极为方便，可以引入自己喜欢的前端UI库，打包压缩等都已经自动化了，不用再去考虑这些。
2. 精简压缩了页面的JavaScript代码，打开页面速度快，seo友好。
3. 各种依赖的插件和库很多，方便添加更多的功能。


## 总结

是否要会更换最新的博客，取决与代码编写的进度和功能的实现，我个人还是很期待的，但是next.js的编写经验还是很少，几乎为零，另外也不知道静态页面的生成速度如何，据说编译器是rust编写的速度很快，看样子可以一战。先试试再说了。


手痒，又想重构博客了。博客的1.0使用的是Django，2.0使用的是JavaScript。3.0使用的python生成的静态页面，目前正在考虑使用Next.js重构现有博客。

关于使用Next.js重构博客构思的记录

博客的页面需要一个返回顶部的功能，之前都是使用的jQuery的插件来实现的，但是一个及其简单的功能就需要引入jQuery和一个相关插件总觉得有些多余，所以只好自己动手实现一个返回顶部的功能。


## 需求分析

1. 有一个按钮，固定在页面的右下角的。
2. 当HTML页面视口不在顶部的时候，点击返回顶部按钮就会实现返回页面顶部的功能，且返回时有动画效果，不是直接立即返回。
3. 当滚动条的位置高度小于500的时候，返回按钮隐藏，当大于500的时候显示。

很简单就这二个功能。

## 具体实现

首先实现按钮的定位，这里可以使用纯CSS来实现也可以使用tailwind，由于我引用了tailwind，这里我使用tailwind css来实现：

    <div class="rightside fixed bottom-20 right-2 w-10">
        <button>Top</button>
    </div>

添加一个fixed的页面绝对定位，然后通过bottom-20 right-2 等属性来定义他的具体位置。

接下来就是实现按钮点击返回顶部的功能：

    /**
    * 按钮点击后，滚动将以平滑的动画方式进行。
    */
    function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
    }

只要为`<button>`绑定鼠标点击事件scrollToTop()，就可以实现点击返回页面顶部。

最后来实现按钮的隐藏和显示，JavaScript代码如下：

    // 获取返回顶部按钮的元素
    const topButton = document.getElementById("topButton");

    // 监听页面滚动事件
    window.onscroll = function () {
    // 获取页面滚动距离
    const scrollY = window.scrollY;


    // 如果页面没有滚动或者滚动条还在页面的顶端，隐藏按钮
    if (scrollY < 500) {
        topButton.classList.remove("block");
        topButton.classList.add("hidden");
    } else {
        topButton.classList.remove("hidden");
        topButton.classList.add("block");
    }
    };

这里使用滚动条时间来监听滚动条的位置，`const scrollY = window.scrollY;`获得了滚动条的实时位置，然后判断位置，为按钮添加class,使之隐藏和显示，进而实现了本次需求的所有功能。

博客的页面需要一个返回顶部的功能，之前都是使用的jQuery的插件来实现的，但是一个及其简单的功能就需要引入jQuery和一个相关插件总觉得有些多余，所以只好自己动手实现一个返回顶部的功能。

使用Tailwind css和JavaScript实现一个简单的返回顶部功能

原来的罗技K380键盘给老婆用了，但是键盘的F1-F2默认是一些功能键，用起来非常不习惯，所以需要恢复到原来Windows默认的功能，解决方法如下：

1. 下载罗技K380的键盘驱动：

下载地址：https://www.logitech.com/zh-cn/software/logi-options-plus.html#supported-keyboards

2. 安装后打开驱动设置，找到F1-12功能键设置的位置，锁定默认功能键即可。

然后就可以按F5快乐的刷新了。

原来的罗技K380键盘给老婆用了，但是键盘的F1-F2默认是一些功能键，用起来非常不习惯，所以需要恢复到原来Windows默认的功能，解决方法如下

加碘盐能防核辐射的话，还怕什么核战争？

shields.io 一个简洁、一致、清晰的徽章

Ubuntu下使用root登录ssh的设置

GitHub Actions 构建、部署 Next.js项目

我又用回了"IE"--edge

ubuntu-22-live-server 设置固定IP

Next项目部署GitHub pages的一些坑

整理了一个下午的收藏夹......

短暂而忙碌的暑假即将谢幕

GitHub Actions 是干什么用的？

放弃Next.js重构博客：经验、教训与未来技术探索

关于Google LCP 问题：超过了2.5秒验证已通过

仅用了几个小时就使用next.js重构博客的所有功能

关于使用Next.js重构博客构思的记录

使用Tailwind css和JavaScript实现一个简单的返回顶部功能

罗技K380 F1-F12 功能键锁定

加碘盐能防核辐射的话，还怕什么核战争？

shields.io 一个简洁、一致、清晰的徽章

Ubuntu下使用root登录ssh的设置

GitHub Actions 构建、部署 Next.js项目

我又用回了"IE"--edge

ubuntu-22-live-server 设置固定IP

Next项目部署GitHub pages的一些坑

整理了一个下午的收藏夹......

短暂而忙碌的暑假即将谢幕

GitHub Actions 是干什么用的？

放弃Next.js重构博客：经验、教训与未来技术探索

关于Google LCP 问题：超过了2.5秒 验证已通过

仅用了几个小时就使用next.js重构博客的所有功能

关于使用Next.js重构博客构思的记录

使用Tailwind css和JavaScript实现一个简单的返回顶部功能

罗技K380 F1-F12 功能键锁定

关于Google LCP 问题：超过了2.5秒验证已通过