分类目录归档:技术

black and silver laptop computer

macOS 重装记

我隔一段时间就会重装一次系统,原因是我的系统中的环境过多,会导致系统中的 PATH 紊乱。因此,当出现系统无法正常工作的时候,我就会考虑重装一次系统。

重装系统需要备份一些东西,做一些处理,写一篇博客记录一下,也方便我自己使用。

清理无用文件

1. 清理包管理器安装的依赖文件

我经常会使用 Python、Node.js 来写一些脚本,这些脚本会依赖 npm 生态下的 package。这些 package 可以基于 npm 下载又或者是类似 python ,提供了 requirements 文件的项目,可以使用命令快速恢复环境,因此,我会推荐将这些可以快速恢复的文件,直接清理掉,以加快安装的速度。

具体包括:

  • Node.js 的 Node Modules
  • Python 的 venv
  • PHP 的 vendor

这里我会使用这样的命令来进行删除

下面这段代码执行时不会确认,因此,如果修改,请再三确认再执行,避免酿成大错。

find . -name "node_modules" -exec rm -rf '{}' +
Code language: JavaScript (javascript)

具体可以参考

https://www.ixiqin.com/2019/05/tool-command-delete-the-current-directory-node_modules-command/

清理完成后,项目目录会从 21G 瘦身至 7.6 G。

备份重要文件

备份 SSH 信息

一个很重要的需要备份的文件,就是我的 SSH 密钥/公钥,我管理服务器都需要它。因此,需要对齐进行备份

cp -R ~/.ssh /Volumes/backup/ssh
Code language: JavaScript (javascript)

这里的 backup 是我的单独的磁盘,用来备份资料的。

备份项目资料

我会把所有涉及到开发的资料都放在一个文件夹里,因此,在处理备份的时候,我只需要把大的文件夹备份即可解决项目文件的存储问题。同时,因为不删除 .git 记录,还可以保留数据的编辑记录。

tar -zcvf /Volumes/backup/project.tar.gz ~/Developer

备份 MySQL 数据库

我使用 homebrew 安装了 MySQL ,因此,也需要把 MySQL 数据备份出来,以免后续搭建开发环境成本太高。执行命令,即可将所有数据库备份。

mysqldump -uroot -p --all-databases  --result-file=dump.sql

执行完命令,数据就会备份在当前目录下的 dump.sql 文件,接下来你只需要将其移动到你的备份文件中。

备份软件列表

备份软件列表,以方便后续可以方便的进行恢复,以免遗漏。当然,你也可以选择用到什么安装什么。但对于一些比较基础的、常用的,我还是比较喜欢重装完就安装,省的用到的时候现场装。

软件列表需要备份的有三处:

  • /Applications
  • brew list
  • brew cask list

需要做的就是将这些信息打印出来,并导出到 txt 文件,方便后续恢复。

ls /Applications > applications.txt
brew list > brew.txt
brew list --cask > brew-cask.txt
Code language: PHP (php)

备份 dotfiles

我们在 ~ 目录下放置了不少常用的 dotfile,也需要将其备份,以便后续使用,因此,你也可以将这部分文件备份到你自己的磁盘中。

一些值得备份的文件

  • .gitignore
  • .zshrc
  • .gitconfig

你可以通过执行如下命令,找到隐藏的 dotfiles

ls -a | grep "^\."
Code language: JavaScript (javascript)

当然,你也可以选择将其放置在 Github 上,开放自己的 dotfiles 也是一个非常常见的行为。

其他一些没有被 iCloud 备份的文件

我默认开通了 iCloud,因此 Documents 是不需要我进行维护的,不过,还有一些地方是 iCloud 无法覆盖的,因此,需要注意自行备份。他们包括

  • ~/Downloads:如果你和我一样,比较喜欢把 downlods 作为 workspace

还有哪些值得备份的?

  • 比如 Clash X,方便重装后快速联网
  • 比如 1Password 的密码备份文件,方便重装后快速恢复

重装系统

重启 macOS,并在重启后,按下 Command + R,来进入到维护模式,在维护模式中,你可以重装系统。

其他

如果你还有在备份的时候值得注意的,可以一并告诉我。

Reference

person holding sticky note

Python 生成公众号头图 1.0

我的公众号头图属于特别简洁的,原因是我在乎的是文章中的内容,而不是头图。虽然我知道一个好的头图会提升点击率,但其背后耗费的时间是我目前不愿去做的。因此,我目前的头图都是 PS 打开一张图,然后直接放上一行文字来生成的。

历史头图
历史头图

但是,打开 PS 还是太花费精力了,因此,我希望可以用更少的时间来生成简单明了的头图。因此,我决定优化我的头图制作方案,使用代码来完成公众号头图的生成。

环境依赖

这一次的代码使用 Python 来完成,并基于 Python 的 Pillow 库完成图片的生成,因此,你在运行我的代码时,需要先安装 Pillow

pip install pillow

实现思路

在使用 Pillow 绘图的时候,和我们在前端使用 Canvas 绘图的思路基本一致,我们要做的是

  1. 准备特定背景的画布
  2. 加载字体
  3. 绘制文字
  4. 导出图片

生成的难度并不高,也只需要花费一些时间来编写代码。具体的代码我贴在下方了,供你参考。

代码实现

具体的代码如下

from PIL import Image, ImageDraw, ImageFont
# 常用变量
img_size = (900, 383)
bg_color= "#fca652"
big_text_size = (900,383)
text = "代码生成图片"
text_color = "#eeeeee"
filename = "export.jpg"
font_size = 80
# 生成画布
export_image = Image.new("RGB", img_size, bg_color)
# 加载字体
font = ImageFont.truetype("NotoSansSC-Medium.otf", font_size)
# 计算字体宽度
text_width = font.getsize(text)
text_coordinate = int((big_text_size[0]-text_width[0])/2), int((big_text_size[1]-text_width[1])/2-20)
# 生成绘图 ctx
img_draw = ImageDraw.Draw(export_image)
# 绘制文字
img_draw.text(text_coordinate, text, font=font, fill=text_color)
export_image.save(filename, quality=95)

总结

使用 Python 来绘制头图的难度并不大,比如今天的头图,就是通过代码来绘制的,你可以看看效果。

不过,上面的代码还是很简陋,你觉得这段代码有没有什么值得优化的点呢?

6ee6df690137fd06bc6166adb63caca1

键盘设置如何优化小程序使用体验?

在小程序开发过程中,用户输入是必不可少的,我们经常会需要用户输入一些内容,来完成产品收集用户信息的需求。

在这种情况下,我们可以考虑借助小程序提供的一些和键盘相关的 API 来优化小程序的使用体验。

Input 组件的 type 属性

Input 组件的 type 属性
Input 组件的 type 属性

从小程序的 1.0 版本开始,就支持为 input 组件设置 type,不同的 type 会显示不同的手机键盘。默认情况下,显示的是 text 文本输入键盘,这个键盘的特点是显示所有的内容,可以适用于所有的场景。

但,适用于所有场景也就意味着不适用于所有场景,总会在每一个场景中有着种种不便,因此,在实际的开发中,为了获得更佳的体验,你可以通过设置不同的 Type 来控制实际的键盘显示情况。

text 类型 input 适用建议
text 类型 input 适用建议

除了默认的 text 类以外,你还可以使用 number(数字输入键盘)、idcard 身份证输入键盘和 digit带小数点的数字键盘。

idcard 类型 input 适用建议
idcard 类型 input 适用建议

你可以根据自己的实际使用场景来设置不同的类型,比如说

  • 如果你的小程序的验证码都是数字的,那么你给出一个 text 类型的键盘,显然不如给一个 number 类型的键盘更合适。
  • 如果你的小程序中涉及到了手机号的输入,那么这种情况下你就可以选择使用 number 类型的键盘,来优化用户输入时的体验。
number 类型 input 适用建议
number 类型 input 适用建议

这里的思路是类似的,当你预期用户输入的内容只有数字,就可以考虑 numberdigitidcard等类型,来优化你的小程序的实际使用体验。

digit 类型 input 适用建议
digit 类型 input 适用建议

总结

input 组件默认提供的 四种 type ,可以通过选择不同的类型,从而获得不同的体验效果,从而对于你的小程序体验进行优化和推进。

我是如何优化博客的

由于主域名的备案掉了,所以我不得已,将站点从国内的 VPS 上迁移到了国外的 VPS 上,但是,站点迁移,速度不能下降。

事实上,经过一段优化,目前这个站点的速度着实不错,对我自己来说,基本上是秒开,而在测试网站上,速度也是杠杠的。

除了极个别监测点的速度实在是太慢,绝大多数的监测点都在 1s 内打开。

3elis
https://www.boce.com/http/www.ixiqin.com

能达到这样的速度,背后意味着很多种优化。我们一一来看。

原理

如果要对网站速度进行优化,就需要理解,在我们从浏览器中输入一个网址,到我们最终网页加载完成,都经历了哪些流程。

  1. 域名解析:我们输入在浏览器中的域名,是无法直接抵达目标主机的。因此,我们需要访问 DNS 服务,将域名转换为 IP 地址,从而才能抵达目标主机。
  2. 内容下载:当我们的请求抵达目标主机后,浏览器会下载服务器的返回。
  3. 本地渲染:浏览器将服务器的返回下载到本地后,会在浏览器的引擎中进行渲染。

当然, 在实际执行过程中,我们需要考虑的不仅仅是这三个点,不过就这三个点而言,也足够我们进行优化了,更加细致的,可以在后续遇见新的性能瓶颈后,进行优化。

分析

在理解了原理后,我们可以一一来分析

域名解析

对细节进行分析以后,可以看到,我的站点在解析时间上的耗时是普遍比较长的,大多是在 0.3 秒,这是一个优化点。

dzvhf

DNS 的优化总的来说,乏善可陈。因为系统底层对于 DNS 的机制只有两处,分别是

  1. Hosts
  2. DNS 解析

如果想要优化,那你就需要降低你的 DNS 解析时间。Hosts 显然是不靠谱的,你不可能让你的用户都去修改了 Hosts 后再使用。

而 DNS 解析,目前我使用的是免费的阿里云 DNS ,这里的优化其实依赖的是阿里云的 DNS 优化(付费版可能会好一点,不过我暂时不考虑上付费 DNS)。

内容下载

内容下载可以分为两个部分

  1. 内容生成:服务器计算得出结果。
  2. 内容下载:浏览器将服务器计算的结果下载到本地。

内容生成

在内容下载整个流程中,WordPress 主要的问题往往是卡在内容生成方面。

由于 WordPress 的功能强大,且在优化方面做的一般,因此,当我们的 WordPress 的内容足够多的时候, 数据库的查询就会开始变慢。

在这个时候,我们可以选择使用一些工具来加速站点的优化。一般的来说,会考虑使用 Key Value 数据库来替代直接使用 MySQL 进行查询。

这方面可选的包括

  • Memcached
  • Redis
  • 文件缓存

我因为懒得配置 MemeCached 和 Redis ,因此使用的是文件缓存,这里我用的是 WordPress 的 WP-Optimize 插件

kq8ap

可以看到,我的站点的缓存数量达到了 2716,缓存的大小达到了 45.6MB。也正是这些缓存,让我的站点在内容计算方面不需要耗费太多的时间,优化站点的体验。

当然,如果你追求更好的速度,可以考虑上 Redis 或 Memcache ,这些内容互联网上有非常多的教程,我就不再一一介绍。

内容下载

说完了内容生成,来谈一谈内容下载。

在内容下载方面,其实主要受限于你所使用的虚拟主机、VPS、云服务器性能。

在我们购买虚拟主机、云服务器的时候,我们往往会要购买相应的带宽。你购买的带宽越大,你的站点在下载时能够使用的带宽就会越大,相应的,下载的速度也就会越大。

在这方面,如果你的站点有备案,可以考虑购买一些国内的 CDN 服务,使用 CDN 来完成站点的加速,让你的站点加载速度可以变得更快一些。我的域名没有备案,所以没办法使用国内的 CDN,比较遗憾。

本地渲染

内容下载到本地,就会需要进行内容的渲染,而渲染的过程则和你的站点设计、标签数量、复杂度等都有关系。

你会发现,我现在站点使用的大多数是 WordPress 官方的主题,官方的主题的好处在于其站点设计简洁大方,同时页面的标签结构会比较合理,可以确保不会卡在一些奇奇怪怪得地方。

类似的,这也是为什么我很讨厌一些站点生成器(可视化拖拽工具),他们的确可以很方便的生成,但相应的,也会带来大量的冗余标签,让我觉得十分不优雅(当然,背后的人效计算又是另外一回事了)。

总结

对于你自己的博客来说,你也可以参照我的优化方法,来找到自己的问题点,并进行相应的优化,当然,如果你有什么想要讨论的,也欢迎你在下方的留言区和我一起分享。


Append:

我将 DNS 从阿里云免费 DNS 切换到 DNSPod 的个人专业版的以后,我的 DNS 解析时间获得大幅度下降,解析速度降为 0.13s 以内。如果你的解析速度也很高,值得试试。

christopher gower m HRfLhgABo unsplash scaled 1

如何免费为你的组织项目配置 Vercel

前言

Vercel 是我自己非常喜欢的平台,我自己的一些项目都会选择使用 Vercel 来部署。比如 LogolyEasyWPBook 等等。

主要是其在中国大陆的访问速度是比 Netlify 和 Github Pages 更快。但不得不说的是,Vercel 提供了 Production 环境和 Development 环境,对于项目开发时是非常有用的,当你提交一个 commit 或者是一个 PR 时, Vercel 会自动帮你部署,并将相应的 URL comment 到你的 commit 或 PR 下,你只需要点击相应链接,就可以预览效果,十分方便。

但 Vercel 的 Teams 功能是付费的,对于一些 Organization 来说,你需要付费用 Vercel 成本是比较高的。特别是如果你是一个 OpenSource Project,你大概率入不敷出。在这种情况下,如何才能在 Organization Project 中免费使用 Vercel 呢?我考虑了一个绕过去的方法。

我们之所以无法使用在项目中无法免费使用 Vercel 是 Vercel 的产品策略问题。

kpub9

而我们被禁用的无法使用官方自建的 Github Apps 来部署,但不意味着我们不可以自己实现这样的逻辑,来实现在组织内项目进行push。

而想要达成这样的效果,需要你具备两个条件

  1. 你的代码每一次提交都会自动触发 CI
  2. 你的 CI 中可以自动上传代码到 Vercel

而前者,可以通过 Github 提供的 Action 来完成。后者则可以通过编写代码来完成。不过好在,我在 Github 的 Marketplace 中找到了别人已经写好的 Action ,因此又可以少写一些代码(开心?)。

接下来,看看具体要如何操作。

步骤

安装依赖

在进行后续的操作之前, 你需要先安装配置过程中的依赖。

执行如下命令安装 Vercel CLI

npm i -g vercel

创建一个项目

为了正常部署,你需要创建一个项目,并将其 push 到 Github。当然,如果你已经创建好了项目,就直接把项目 Clone 到本地就好。

使用 Vercel 部署这个项目

这一步是为了在 Vercel 上创建一个项目,因为 Vercel 不支持通过网页端创建项目,只支持在 CLI 或通过 Git 接入自动创建。

在你的项目根目录,执行命令 vercel 来触发 Vercel 的部署,它会自动上传你的项目到 Vercel 。如果你之前登录过,会看到类似这样的界面,根据其提示进行配置就好。如果你之前没有登录过,你登录后会出现类似的界面。根据提示进行配置。

rwh9j

获取配置

想要部署一个项目到 Vercel ,你需要知道三样东西

  1. Access Token: 用于 CLI 的登录和 API 的调用,没有 Access Token ,Vercel 就没有办法获取到你的用户身份,进行鉴权校验。
  2. Org ID:Org ID 是指你在 Vercel 上的用户 ID。由于 Vercel 中一个人其实可以管理和配置多个 Team ,因此需要借助 Org ID 来指定要管理哪个账号下的项目。
  3. Project ID:很好理解,如果你要管理 Project ,就需要一个 Project ID。

其中,Access Token 你需要从 Vercel 后台的 Tokens 页面获取。

sohur

而 Org ID 则可以从你的项目中的 .vercel/project.json 中获取。你会获得类似下面这样的内容,其中的 OrgID 就是你在 Vercel 上的 ID ,而 Project ID 就是对应的项目 ID。

{"orgId":"r359XAnYONVAmiXtdxZ22A2E","projectId":"Qma3GdwoiAfJSsbsSydBgaCDh8LJj6wTWvvqpUwrN6J2F3"}
Code language: JSON / JSON with Comments (json)

准备好了这三项以后,就可以进入到下一个环节,配置 Action Secret 了。

配置 Github Action Secret

Github Action 提供了 Secret 的机制,用来让你保存哪些安全密钥,避免直接写在 Action File 中,出现泄漏的可能。

打开你的项目的 Settings – Secrets 页面

oi5yn

在这里你可以新增 Secret ,你需要新增三个 Secret ,分别是

  • ORG_ID: 填写你从 .vercel/project.json 中获取到的 orgId;
  • PROJECT_ID:填写你从 .vercel/project.json 中获取到的 projectId;
  • VERCEL_TOKEN:填写你从 Vercel 后台生成的 Token。

这样,就配置好了 Secret ,接下来就可以在你的项目中加入 a、Action 配置文件,完成项目的配置。

添加 Action 配置文件

根据 Github 的规范,你需要将你的 Action 配置文件放置在项目根目录的 .github/workflows/xxx.yml 文件中,其中 xxx 是你的 Action 名,比如叫 vercel.yml

这里我使用的是 ngduc 写的 vercel-deploy-action

按照路径创建好 vercel.yml 文件,然后在其中加入如下代码

name: deploy website
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: ngduc/vercel-deploy-action@master
        with:
          vercel-cli: vercel
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}
          github-token: ${{ secrets.GITHUB_TOKEN }}

粘贴进去以后,将 vercel.yml 添加到 git 控制中,并提交到 Github 上,就可以实现触发 Vercel 了。

总结

虽然 Vercel 本身不能免费提供 Organization 的支持,但是我们可以通过一些小的技巧,绕过其官方的配置。对于一些只是将 Vercel 配置为开发者预览的场景下来说,还是足够的。

但如果你希望将 Vercel 配置为生产环境,那么 Teams Plan 可以提供的更多的权限控制,会是你需要的,买一个,也不贵,是吧?

ocfv6

hexo-generator-podcasts 一个强大的 Hexo 播客生成插件

eultm

hexo-generator-podcasts 是我近期开发的一款 Hexo 的播客生成器插件,hexo-generatro-podcast 可以帮助你在你的 Hexo 博客中加入播客的功能,你可以通过简单的配置,在自己的博客中加入播客的配置,轻松上架播客。

不仅如此,如果你需要部署多个播客,也可以直接借助这个插件,在一个站点中部署多个播客,特别适用于一些大型的播客组织,可以在一个站点同事部署多个播客。

如果你感兴趣,不妨去试试看: https://github.com/bestony/hexo-generator-podcasts/

此外,我自己的播客生产力维基,就是使用这个插件构建的。

进行 Hexo 开发时,如何去除缓存?

表现

最近我在开发一个 Hexo 插件,在开发的过程中,遇到了一些小的问题:插件的代码发生了修改,但运行hexo 的时候却没有实时刷新出来

原因

在对代码进行分析后发现,hexo 的 tag filter 的结果会缓存在数据库中,由于缓存了,所以我使用的 generator ,所以也会被缓存。

解决方案

在预览前,删除 db.json 即可让 hexo 重新开始生成

为了方便,我在 npm 的 scripts 中加入了一个自定义的配置

{
 ...
 "scripts":{
  ...
  "s": "rm db.json && hexo server"
  ...
 }
 ...
}
Code language: JavaScript (javascript)