小凡同学

hexo博客系统常用指令

Fri, 08 Mar 2024 00:00:00 GMT

重新部署预览使用三连

hexo clean

清除缓存文件 db.json 和已生成的静态文件 public 。

网站显示异常时可以执行这条命令试试。

hexo g

生成网站静态文件到默认设置的 public 文件夹。

便于查看网站生成的静态文件或者手动部署网站；

如果使用自动部署，不需要先执行该命令；

hexo g 是 hexo generate 的缩写，命令效果一致。

hexo s

启动本地服务器，用于预览主题。默认地址： http://localhost:4000/

hexo s 是 hexo server 的缩写，命令效果一致；

预览的同时可以修改文章内容或主题代码，保存后刷新页面即可；

对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。

hexo new

新建一篇标题为 “学习笔记一” 的文章，因为标题里有空格，所以加上了引号。

文章标题可以在对应 md 文件里改，新建时标题可以写的简单些。

hexo d

自动生成网站静态文件，并部署到设定的仓库。

hexo d 是 hexo deploy 的缩写，命令效果一致。

hexo new page

新建一个标题为 aboutme 的页面，默认链接地址为主页地址/aboutme/

标题可以为中文，但一般习惯用英文；

页面标题和文章一样可以随意修改；

页面不会出现在首页文章列表和归档中，也不支持设置分类和标签。

30s完成一个前端页面，这就是AI时代的效率吗？！

Tue, 02 Apr 2024 00:00:00 GMT

事情是这样的，前段时间加入了一位大佬的独立开发交流社区，准备一起锻炼开发能力，于是准备开发一个前端的落地页面模板，但是废柴如我，根本没有任何前端技能点，连js都用不明白，该怎么办呢？

于是我就把主意打在了AI身上。

最开始，我考虑让GPT4来完成这个工作，但是出现了以下几个问题：

1、GPT4最近变懒了，不仅懒，而且还笨了，用GPT4辅助写代码的体验比去年明显差了不少
2、GPT4不是一个专门生成代码的工具，在写代码的时候，只考虑功能，不考虑ui设计

没错，我不仅是个前端废柴，在UI设计上更是一窍不通。

于是我想起来，之前我就使用过一款AI生成前端代码的神器，v0 by Vercel

V0 dev 是由著名的赛博善人vercel推出的一款基于AI人工智能的前端代码生成工具，用户只需要使用自然语言描述就可以让AI编写出符合描述的前端代码，支持html和react ui，更值得一提的是，支持中文！

没错，只用自然语言就可以让 V0 帮你编写前端代码，而且可以用中文，对UI设计不满意还可以改。

开干！

我先是让GPT4帮我编写了整个前端落地页的各部分要求：

核心信息传达标题和副标题：应清晰、具有吸引力，直接传达产品或服务的主要优势。标题是吸引访问者注意的第一要素，应当简洁且具有针对性。独特卖点（USPs）：列出你的产品或服务的主要特点和优势。通常3-5个要点足够突出其独特性。详细说明详细内容：提供更多关于产品或服务的详细信息。这可以是功能描述、使用方法、技术规格等。故事讲述：通过用户故事或案例研究来展示产品的实际效果和应用，这可以帮助建立情感联系。视觉内容图像和视频：使用高质量的图像和视频来辅助文本内容，使其更具吸引力。图像应展示产品的实际使用情况或效果，视频则可以是产品演示或客户推荐。图表和图示：如果有复杂的数据或过程需要解释，使用图表和图示可以帮助简化信息传递。召唤行动（CTA）明确的CTA：每个落地页都应有一个清晰的召唤行动。这可以是“立即购买”、“注册免费试用”或“了解更多”。确保CTA按钮颜色鲜明、位置显眼。限时优惠：如果适用，可以提供限时折扣或特别优惠，以增加紧迫感和促进行动。免费计划、付费计划、企业用户对比信任因素客户评价和证言：展示真实的客户评价和证言，增加新访问者的信任感。合作伙伴和认证：展示任何行业认证或知名合作伙伴的标志，以提高品牌的可信度。常见问题（FAQ）解答疑问：列出潜在客户可能有的问题和相应的答案，可以减少他们的犹豫和不确定感。联系方式联系详情：提供联系方式，包括电话、邮箱或联系表单，以便用户在有更多问题时能够方便联系。

然后，直接将整个要求复制给v0，让它开始写代码：

第一次编写代码时，V0会给你3个样式供你选择，你可以选择喜欢的样式接着用自然语言进行修改，不过我测试了几次，每次都是第一个样式最好，另外两个像是充数的

于是我得到了第一版ui和代码：

看起来还挺像样的是不，但是有一个问题，也许是提示词太长了，AI忽略了其中的一个要求：

召唤行动（CTA）明确的CTA：每个落地页都应有一个清晰的召唤行动。这可以是“立即购买”、“注册免费试用”或“了解更多”。确保CTA按钮颜色鲜明、位置显眼。限时优惠：如果适用，可以提供限时折扣或特别优惠，以增加紧迫感和促进行动。免费计划、付费计划、企业用户对比

也就是落地页常见的各种套餐选择。

不过没关系，把这个要求明确的告诉AI，补全内容：

这样，AI就把缺失的部分补上了。

在得到完整的内容和代码之后，我们就可以把代码保存下来，V0提供了2种代码形式，React 和 html，可以通过右上角切换。

由于我不懂React该怎么操作，这里我只保存了html代码，很简单，新建一个txt文件，然后将代码复制进去，把文件后缀名改成.html即可。

不过此时，如果直接打开这个html文件的话，你就会看到整个网页的ui是错乱的，这是因为V0只提供了html部分的代码，其控制ui显示的css代码并未给出。

不过没关系，只需要打开Tailwind Play (tailwindcss.com)这个网站，然后将html代码粘贴进去，就可以得到相应的css代码了。

接下来，将生成的css文件保存到本地，依旧是新建一个txt文件，然后将css代码复制进去，把文件后缀名改成.css，之后在html文件的head部分引入这个css文件，就可以正常显示了。

最后，将html中引入的占位图片改为自己喜欢的图片。这样一个落地页就完成啦，是不是非常简单？

以上完整代码和演示地址如下：

线上地址 https://landing-page-pi-kohl.vercel.app/

开源地址 https://github.com/xiaofanxuezhang/landing-page

如果你也有做前端页面和简单设计的需求，不妨使用V0 dev试下。

Docker-Desktop-is-unable-to-detect-a-Hypervisor-解决方法

Sat, 15 Jun 2024 00:00:00 GMT

确认是否开启Hyper-V

进入控制面板 -> 程序 -> 启用或关闭Windows功能 -> 勾选Hyper-V。

如果找不到Hyper-V功能：

Windows自动隐藏了该功能，需要手动开启。桌面新建一个记事本文件，将它的后缀改成cmd或bat，复制下面的代码：

然后，右键选择：以管理员身份运行。代码执行结束后，重启电脑即可。

如果看到已开启了Hyper-V，但仍无法启动：

以管理员身份运行cmd，输入以下命令，然后重启电脑：

原文链接：https://blog.csdn.net/weixin_47190898/article/details/131060441

docker在国内下载缓慢的解决方案-换源

Fri, 08 Mar 2024 00:00:00 GMT

在windows本地拉取一个项目的时候，执行了一半就卡住了，一直显示waiting

查了一下，还是境内网络问题，需要配置镜像加速。

以下是一些常用的 Docker 镜像加速器：

阿里云加速器: https://<你的加速器ID>.mirror.aliyuncs.com

网易云加速器: https://hub-mirror.c.163.com

腾讯云加速器: https://mirror.ccs.tencentyun.com

Docker 官方中国区加速器: https://registry.docker-cn.com # windows 配置

需要在docker中添加一行镜像，这里使用阿里云

打开docker客户端，在setting设置中打开dcoker engine

指定位置添加

注意在上一行加一个英文逗号！

linux服务器

1. 打开终端

首先，登录到您的服务器，打开终端。

2. 编辑 Docker 配置文件

执行以下命令打开 Docker 的配置文件进行编辑：

3. 添加镜像加速器配置

在 daemon.json 文件中添加以下内容。如果文件为空，可以直接粘贴这些内容；如果已经有其他配置，请将加速器配置合并到现有配置中。

使用阿里云加速器

使用网易云加速器

使用腾讯云加速器

使用 Docker 官方中国区加速器

4. 重启 Docker 服务

保存文件并退出编辑器（在 nano 编辑器中，按 Ctrl+X 然后按 Y 保存并退出）。然后执行以下命令重启 Docker 服务：

5. 验证配置

您可以使用以下命令验证加速器配置是否生效：

在输出的内容中，检查 Registry Mirrors 部分，确保显示了您配置的镜像加速器。

hexo + github + cloudflare，有手就行的个人博客免费部署

Sun, 03 Mar 2024 00:00:00 GMT

😀

随着学的东西越来越多，自己的笔记也越来越多，不好管理的同时，一些自己踩过的坑也不好分享给别人，思来想去还是做一个博客，记录一下自己的学习和生活。

准备工作

1、准备一个域名

2、注册一个Cloudflare账号

3、注册一个GitHub账号

4、安装Git Node.js

5、安装一个代码编辑器，这里推荐Visual Studio Code

第一步，安装hexo

1、打开cmd控制面板

2、在合适的位置新建一个文件夹

3、打开新建的文件夹，输入

这个时候，目录下会多出一些文件，比如

4、启动代码编辑器，比如vscode，选择整个文件夹打开，就可以任意编辑文件，修改配置了

5、可配置的内容比较多，需要慢慢学习摸索，可以去官方配置 | Hexo页面了解

6、安装喜欢的主题，好的主题不仅美观，而且层次分明，很提升浏览和检索效率。

这里以安装butterfly为例，你也可以去Hexo官方主题库选择喜欢的主题。

打开代码编辑器的终端，直接输入

7、之后，再安装插件和渲染器

8、为防止之后cloudflare pages在初始化时找不到主题的url，我们需要在根目录新建一个文件，取名 .gitmodules ，写入以下内容：

注意这里的path和url需要根据你设置的主题进行修改

9、运行以下命令，查看博客页面

之后Ctrl+点击

就可以在默认浏览器查看你现在博客的样子了

第二步，设置github个人仓库

1、登录github，在右上角处点击

2、设置仓库名称，属性选择私人仓库，取一个合适的名字，尽量不要有中文、符号、括号之类的。

3、来到新建的仓库页面，复制git链接

4、推荐在除C盘外的任意盘根目录下，右键点击git bash，输入：

这里替换成你自己的用户名和仓库名，会自动下载仓库的文件夹，注意当前目录不要有和仓库同名的文件夹。

5、将之前hexo新建的文件夹内，全部内容复制到github仓库文件夹内，像这样

6、进入文件夹，右键点击git bash，输入：

即可将代码上传至github仓库，后续的更新只需要输入：

即可，如果不打算每次写commit，也可以保存成一个快捷命令，在博客文件夹根目录新建一个记事本，打开，下入：

保存成.bat文件，比如 git-commands.bat，直接双击使用。

第三步，设置cloudflare

1、打开cloudflare的主页，在左下角找到

2、新建一个应用程序，选择pages

3、选择你新建的github仓库

4、开始配置

5、构建配置命令这里一定要输入 npx hexo generate

6、配置环境变量 NODE_VERSION 和 NPM_VERSION ，选择你电脑里的版本号

7、部署，大功告成，顺利的话，部署完成之后打开cloudflare给的链接，就能看到和本地调试一样的内容了。

8、为了更好记，更有个人的标记，这时候就要用到最开始准备的域名了，在项目设置找到自定义域名

输入你要使用的域名，并在域名解析中添加一个cname解析，指向cloudflare pages分配的地址，就可以用你的域名访问博客了！

最后逼逼两句

为什么不直接部署在github pages

因为免费用户想使用github pages，github仓库必须是开放的，这意味着所有人都能直接下载你的个人博客的所有内容，为了个人信息安全考虑，还是采用私人仓库，使用cloudflare pages部署比较好

建好博客之后呢

下载一个makedown编辑器，就可以开始编写博客了，这里推荐一个开源免费的编辑器MarkText

为了能让博客更好的加载图片，并且减轻我们整理图片的压力，我们还需要一个图床，来存放博客中使用的图片，我之后也会整理一下目前能免费用且好用图床，敬请期待！

以及

欢迎大家来我的博客小凡同学学点啥玩耍，不过刚刚建好，还啥都没有呢，我会尽快更新一些好的内容的。

参考来源

快速搭建个人博客 —— 保姆级教程 | 攻城狮杰森 (pdpeng.github.io)

在Cloudflare中自动化部署hexo博客_cloudflare pages hexo-CSDN博客

Hexo CloudFlare Pages Error | Eyeseas (kong.vision)

markdown格式语法入门汇总

Wed, 12 Jun 2024 00:00:00 GMT

最近发现vscode的markdown插件，发现写博客真的很方便，就不用再打开编辑器写博客了，直接在vscode编辑器中写，然后直接发布。

但是美中不足的是，没办法像专门的markdown编辑器一样设定各种格式，于是整理一下markdown的语法。 # Markdown 语法入门必备

Markdown 是一种轻量级的标记语言，它的设计目的是让写作变得更加简单和直观，同时能够生成格式良好的文档。以下是 Markdown 的基础语法指南：

标题

Markdown 使用 # 号来表示标题。一个 # 代表一级标题，两个 # 代表二级标题，以此类推，最多支持六级标题。

段落

段落之间需要空一行，以示区分。

强调

使用 * 或 _ 包围文本来表示斜体，使用 ** 或 __ 表示粗体，使用 *** 或 ___ 表示粗斜体。

列表

无序列表

使用 -、+ 或 * 表示无序列表。

有序列表

使用数字加上 . 表示有序列表。

链接

使用 [链接文本](链接地址) 语法创建超链接。

图片

使用 ![替代文本](图片地址) 语法插入图片。

引用

使用 > 表示引用。

代码

使用反引号 ` 包围单行代码，使用三个反引号包围多行代码。

这是多行代码示例。你可以在这里写多行代码。

表格

使用 | 创建表格，并用 - 分隔表头和表内容。

水平线

使用三个或更多的 -、* 或 _ 创建水平线。

希望这篇指南对你有所帮助！