前言

作为一个擅长遗忘的人
我们每次学到新东西之后
过个几天就有可能忘记了
之前喜欢用浏览器标签保存
结果现在一看999+
所以还是老老实实去写文章吧

2023.12.22

这篇文章从2022.03.03开始撰稿
但是一直反复从不同的theme中横跳
也是因为自己的生活状态在当时发生了一点点变化
也感谢马总给我了一个DDL
才能让我们这篇文章重新启动

需求

之前一直在刷CTF的题目
于是我就想着写或不写，都会忘记
那我们为什么不水一下文章呢？
就像现在我一样在水字数
我只是需要一个静态的页面
我们每次写完直接pull上去就OK
那我们最后决定的就是
Markdown写作加上网站托管
国内使用Coding【吃相难看】
国外走Github Page【不能私有库 Page】
全线走Github + Cloudflare 托管

吐槽

原本想着自己一定不要花太多的时间去维护我的Blog
但是现在写着写着写上瘾之后
感觉自己那种闷骚无处发🐍的欲望要爆发了

基础应用安装

Windows Terminal

  • Windows 11 可以跳过这一步

应该大家都有Windows Terminal了吧？
没有？那我带着大家安装一下吧
Winget安装的优势就是不用配置环境
首先我们的电脑系统不能太久
Windows 10版本低于1809的大神们就点一下右上角的❌

  1. 我们打开Windows自带的Microsoft Store
  1. 搜索Windows terminal
  1. 然后你们下载完之后重启即可

Git

  1. 桌面右键选择在终端中打开
  1. 然后我们搜索Git
1
winget search git
  1. 下载Git进行安装
1
winget install Git.Git
  1. 我们还是右键打开Git Bash Here
  1. 然后我们可以查看Git版本
1
git --version

VScode 安装

  1. 直接 winget 搜索 VScode
1
winget search vscode
  1. winget 安装 vscode
1
winget install Microsoft.VisualStudioCode

VScode Markdown 环境配置

Vscode可是个神器
虽然我也知道Typroa很多人在用
但是挡不住我是个白嫖怪呀
而且Markdown只是Vscode的一个副业啊

安装 VScode Markdown 插件

我们只需要侧边栏的扩展搜索

  1. GitHub Markdown Preview
  1. Markdown Extension Pack
  1. Markdown Extension Pack
  1. Markdown-Notes-Pack

基本上我们常用来写Markdown的工具都整合在这里了

Markdown Paste 【VScode 插件推荐】

结果我今天在写这篇文章的时候
居然发现了一个叫Markdown Paste的扩展

不仅可以复制图片，GIF、表格也不在话下
不过美中不足就是复制的时候我们要Enter确认一下

复制GIF的时候我们要复制图片链接

然后我们Ctrl + Alt + D下载即可

然后我们就能看见这只彩虹猫了

PixPin

  • 替代 Snipaste 的神器
  • 支持 GIF 和 长截图
1
https://pixpinapp.com/

Picview

  • 支持 10bit HEIC
1
https://picview.org/

caesium

  • 开源软件，支持Windows和macOS。
  • 可以批量压缩图片，无限制。
  • 可以去除图片敏感数据。
1
https://saerasoft.com/caesium/

系统框架安装配置

Node.JS 框架安装

  • Hexo
  1. 我们需要搜索Nodejs
1
winget search nodejs
  1. 下载Node.js进行安装
1
winget install OpenJS.NodeJS.LTS
  1. 查看Node.JS版本
1
npm -v

Node.js 切换镜像源

我们切换不同的镜像使得我们下载速度较快
我们这次会用淘宝源和官方源作为演示例子

  1. 全局切换镜像源命令
1
npm config set registry https://registry.npmmirror.com/
  1. 查询源版本
1
npm get registry
  1. 切换官方镜像源
1
npm config set registry https://www.npmjs.org

Hexo 框架安装

  1. 我们直接用Git Bash Here运行
1
npm install -g hexo
  1. 我们使用命令查看Hexo版本
1
hexo v

Hexo 权限配置

  1. 存在问题

如果我们使用 Powershell 进行 hexo v 操作时会报错
原因是因为我们开放第三方脚本的运行权限

  1. 解决问题

使用 管理员权限 打开 Windows Terminal

将计算机的执行策略更改为 RemoteSigned

1
set-ExecutionPolicy RemoteSigned

然后输入 get-ExecutionPolicy 查看执行策略

Hexo 框架初配置

Hexo 初始化

我们进入到我们想要的存放的文件夹
右键打开Terminal
然后注意我们的地址是否正确

1
hexo init

然后我们可以看见文件夹

Hexo 编译

1
hexo g

启动 Hexo 本地服务

1
hexo s

然后允许一下防火墙的策略

正常来说我们就这样可以打开本地网站

1
http://localhost:4000/

Hexo 端口被占用

但是你们遇到了我这种端口被堵塞的情况

然后我们需要指定端口

1
hexo s -p <port>

然后我们用浏览器打开URL
我们可以发现Hexo的初始页面

参考 & 引用

https://butterfly.js.org/
https://shoka.lostyu.me/
https://www.drflower.top/