第一次购买使用 Mac，简单记录一下。

为什么选择 Mac ​

可能很多人会说 Mac 和 Linux 有很多相似之处，都是基于 Unix 的操作系统，很适合程序员，不用关机开盖即可使用，稳定性高等等。但其实不是我选择 Mac 的直接原因，主要有以下几个直接原因：

• 跟随大佬，我所了解到的程序员大佬们大多数（90%）使用 Mac
• 极简和续航强大
• 想要尝试一下 Mac
• 国补和教育优惠

购买 Mac ​

我是在京东平台苹果自营旗舰店店购买的 MacBook Air M4 24 512，使用了国补和教育优惠，价格是8249元。

使用感受 ​

第一天使用真的很想退了它，和 Windows 的操作习惯差异太大了。

很多快捷键都不一样，很多操作需要重新适应，比如赋值粘贴快捷键，Windows 是 Ctrl + C/V，而 Mac 是 Command + C/V，这个差异导致难以适应的点在于怎么按 Command + C/V 这个组合键，在Windows 中，我是小拇指按 Ctrl，食指按 C/V，而在 Mac 中，我只能大拇指按 Command，食指按 C/V，这个操作手势真的很不习惯。再比如 Mac 应用的关闭最小化放大按钮真的好小，不方便盲点。另外，Mac 的文件管理和 Windows 也有很大差异。

不过深度使用了几天后，慢慢适应了 Mac 的大部分操作习惯，截止到现在已经有两个多月了，总体上感觉还是挺不错的。Mac 的系统很简洁，无广告，操作流畅，对编程环境比较友好，比如安装 Node.js 很简单，只需要在官网下载安装包，然后安装即可（或者使用 NVM 和 FNM 等 Node 版本管理工具安装 Node）。而在 Windows 上安装 Node.js 可能需要配置环境变量等操作。此外搭配 iPhone 和 iPad 使用，会感受那种统一的操作逻辑，很舒服，这一点是在 Windows 中感受不到的。iCloud 同步也很方便，比如备忘录应用，iPhone 上的备忘录可以直接在 Mac 上查看和编辑，反之亦然。触控板很好用，手势操作很流畅，除了大范围的拖移场景，其他使用场景很牛逼，完全能替代鼠标。续航很强大，目前上班连续使用八小时没问题。

推荐的 Mac 应用 ​

• Clash Verge Rev: 代理工具，配置简单，跨平台。
• Snipaste: 截图工具，功能强大。
• Chrome: 浏览器，自大学用到现在，挺好用的。

另外，Mac 的自带应用也很不错，比如备忘录、提醒、邮件、音乐、播客等。

是否应该购买 Mac ​

如果你是程序员、经济允许、有 iPhone 或 iPad、想要尝试新的操作系统，建议购买试试。

今天分享的主题是使用 VitePress 搭建并自动化部署个人网站。

VitePress 是什么 ​

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。

使用 VitePress 的网站 ​

• Vue
• Vite
• Rollup
• Pinia
• VueUse
• Vitest
• D3
• UnoCSS
• Element Plus
• Husky
• 陈磊个人网站

...

快速搭建一个 Demo ​

# 创建文件目录
mkdir vitepress-demo

# 进入文件目录
cd vitepress-demo

# 安装 vitepress
npm add -D vitepress # 或 pnpm add -D vitepress

# 初始化 vitepress
npx vitepress init # 或 pnpm vitepress init

# 回答几个简单的问题
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

语法 ​

VitePress 的语法不算多，下面只介绍几个特别的语法点

基于文件的路由 ​

VitePress 使用基于文件的路由，这意味着生成的 HTML 页面是从源 Markdown 文件的目录结构映射而来的。例如，给定以下目录结构：

.
├─ guide
│  ├─ getting-started.md
│  └─ index.md
├─ index.md
└─ prologue.md

生成的 HTML 页面会是这样：

index.md                  -->  /index.html (可以通过 / 访问)
prologue.md               -->  /prologue.html
guide/index.md            -->  /guide/index.html (可以通过 /guide/ 访问)
guide/getting-started.md  -->  /guide/getting-started.html

// config.ts
export default defineConfig({
  cleanUrls: true
})

index.md                  -->  /
prologue.md               -->  /prologue
guide/index.md            -->  /guide/index
guide/getting-started.md  -->  /guide/getting-started

生成的 HTML 可以托管在任何支持静态文件的 Web 服务器上。

根目录 ​

项目根目录是与 .vitepress 特殊目录同级的地方。.vitepress 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的预留位置。

源目录 ​

源目录是 Markdown 源文件所在的位置。默认情况下，它与项目根目录相同。但是，可以通过 srcDir 配置选项对其进行配置。

srcDir 选项是相对于项目根目录解析的。例如，对于 srcDir: 'src'，文件结构将如下所示：

.                          # 项目根目录
├─ .vitepress              # 配置目录
└─ src                     # 源目录
   ├─ getting-started.md
   └─ index.md

生成的源代码到 HTML 的映射：

src/index.md            -->  /index.html (可以通过 / 访问)
src/getting-started.md  -->  /getting-started.html

资源处理（public 目录） ​

放置在 public 中的资源将按原样复制到输出目录的根目录中。

请注意，应使用根绝对路径来引用放置在 public 中的文件——例如，public/icon.png 应始终在源代码中使用 /icon.png 引用。

srcDir ​

• 类型：string
• 默认值： .

相对于项目根目录的 markdown 文件所在的文件夹。

export default defineConfig({
  srcDir: './src'
})

base ​

• 类型：string
• 默认值： /

如果计划在子路径例如 GitHub 页面下部署站点，则需要设置此项。如果计划将站点部署到 https://foo.github.io/bar/，那么应该将 base 设置为 '/bar/'。它应该始终以 / 开头和结尾。

base 会自动添加到其他选项中以 / 开头的所有 URL 前面，因此只需指定一次。

// config.ts
export default defineConfig({
  base: '/base/'
})

frontmatter 配置 ​

frontmatter 支持基于页面的配置。在每个 markdown 文件中，可以使用 frontmatter 配置来覆盖站点级别或主题级别的配置选项

示例用法：

---
title: Docs with VitePress
editLink: true
---

本地搜索 ​

得益于 minisearch，VitePress 支持使用浏览器内索引进行模糊全文搜索。要启用此功能，只需在 .vitepress/config.ts 文件中将 themeConfig.search.provider 选项设置为 'local' 即可：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local'
    }
  }
})

默认显示语言是英文，如果想要使用中文，请使用下面的写法：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        translations: {
          button: {
            buttonText: '搜索文档',
            buttonAriaLabel: '搜索文档'
          },
          modal: {
            noResultsText: '无法找到相关结果',
            displayDetails: '显示详细列表',
            resetButtonTitle: '清除查询条件',
            footer: {
              selectText: '选择',
              navigateText: '切换',
              closeText: '关闭'
            }
          }
        }
      }
    }
  }
})

Markdown 扩展 ​

VitePress 带有内置的 Markdown 扩展，类似于 MDX

使用 Vue ​

<script setup>
import CustomComponent from '../../components/CustomComponent.vue'
</script>

# 简介

这是在 Markdown 中使用 Vue SFC

<CustomComponent />

## 标题2

xxxxxxxxxxxxxxxxxxxxxx

## 标题3

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

内部链接 ​

内部链接将转换为单页导航的路由链接。此外，子目录中包含的每个 index.md 都会自动转换为 index.html，并带有相应的 URL /。

例如，给定以下目录结构：

.
├─ index.md
├─ foo
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ index.md
   ├─ three.md
   └─ four.md

假设现在处于 foo/one.md 文件中：

[Home](/) <!-- 将用户导航至根目录下的 index.html -->
[foo](/foo/) <!-- 将用户导航至目录 foo 下的 index.html -->
[foo heading](./#heading) <!-- 将用户锚定到目录 foo 下的index文件中的一个标题上 -->
[bar - three](../bar/three) <!-- 可以省略扩展名 -->
[bar - three](../bar/three.md) <!-- 可以添加 .md -->
[bar - four](../bar/four.html) <!-- 或者可以添加 .html -->

• 主页
• Corepack
• Corepack (遇到的问题)

外部链接 ​

外部链接带有 target="_blank" rel="noreferrer"：

• vuejs.org
• VitePress on GitHub

自定义容器 ​

自定义容器可以通过它们的类型、标题和内容来定义。

输入

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

输出

可以通过在容器的 "type" 之后附加文本来设置自定义标题。

输入

::: danger STOP
危险区域，请勿继续
:::

::: details 点我查看代码
```js
console.log('Hello, VitePress!')
```
:::

输出

console.log('Hello, VitePress!')

此外，还可以通过在站点配置中添加以下内容来全局设置自定义标题的内容

// config.ts
export default defineConfig({
  // ...
  markdown: {
    container: {
      tipLabel: '提示',
      warningLabel: '警告',
      dangerLabel: '危险',
      infoLabel: '信息',
      detailsLabel: '详细信息'
    }
  }
  // ...
})

使用 GitHub Pages 部署 ​

1. 在项目的 .github/workflows 目录中创建一个名为 deploy.yml 的文件，其中包含这样的内容：

# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
name: Deploy VitePress site to Pages

on:
  # 在针对 `main` 分支的推送上运行
  push:
    branches: [main]

  # 允许你从 Actions 选项卡手动运行此工作流程
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不取消正在进行的运行，允许这些生产部署完成
concurrency:
  group: pages # 自定义的组名
  cancel-in-progress: false

jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # 保留 Git 信息
      # 使用 pnpm
      # - name: Setup pnpm
      #   uses: pnpm/action-setup@v3
      #   with:
      #     version: latest
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm # 或 pnpm / yarn
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: npm ci # 或 pnpm install / yarn install
      - name: Build with VitePress
        run: npm run docs:build # 或 pnpm docs:build / yarn docs:build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vitepress/dist # 构建输出目录

  # 部署工作
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

2. 在存储库设置中的 Pages 菜单项下，选择 Build and deployment > Source > GitHub Actions

3. 将更改推送到 main 分支并等待 GitHub Action 工作流完成。你应该看到站点部署到 https://user-name.github.io/repo-name/。你的站点将在每次推送到 main 分支时自动部署。

又一次强迫自己读书……

很久很久没有读书了，但是觉得需要读点书，所以挑选了一本字数少，能看下去的小说。刚开始看觉得也就那样，一般般，甚至有点看不下去，随着剧情的不断推进，慢慢觉得还行，还不错。

个人理解这是一个因为嫉妒而杀人的故事。

在中学时代杀人者常常被霸凌，有时会协助霸凌者霸凌其他人。有一个同学会常常帮助他，正常人会感激这个帮助者，然而杀人者并没有这样觉得，反而内心升起一股对帮助者的恶意。成年之后，帮助者成为了一名作家，杀人者找了一个机会接近帮助者，也想要成为一名作家，帮助者并没有因为中学时代的敌意疏远杀人者，反而帮助杀人者成为一名作家，但是杀人者没有如愿成为一名作家，并且得了癌症，慢慢的嫉妒越积越多，一次偶然机会，得知了中学时代协助霸凌的事情可能要公之于众，这成为了一个直接导火索，随后设计了杀人动机，杀了帮助者。

对于别人的优秀，如果有嫉妒，一定不要让嫉妒变得扭曲，试着做出一些改变，让嫉妒激励自己成为更好的自己。

这个报错有很多原因，我只介绍我的报错原因以及解决办法。

操作系统 ​

Windows 10

报错原因 ​

我是一个强迫症，没事的时候总喜欢删除电脑多余的软件（当时觉得是多余的软件），其中我删除了两个软件，导致了在安装 pngquant 的过程中，没有编译 pngquant 二进制文件的环境了，因此出现报错。

解决办法 ​

重新安装以下软件就可以了，应该是可以只安装一个，我是安装了两个（X86, X64）

链接：https://learn.microsoft.com/zh-cn/cpp/windows/latest-supported-vc-redist?view=msvc-170#latest-microsoft-visual-c-redistributable-version

最近换了电脑，果然又出现此网络问题了。

简单来说，出现此问题的原因是 22 端口被禁了，需要切换到 443 端口，下面是解决办法：

第一步：有梯子 ​

这儿就不多介绍了，能推送代码到 GitHub ，大概率会有梯子。

第二步：配置 GitHub 的 SSH 连接（通过 443 端口） ​

创建或编辑 ~/.ssh/config，写入以下内容：

Host github.com
  Hostname ssh.github.com
  Port 443

然后执行以下命令，并按提示输入 yes 即可

ssh -T git@github.com

吐槽一下 ​

在这儿偷偷吐槽一下，生活在中国大陆的程序员太不容易了，与各种网络问题缠斗，心太累了……