一.前言

本文主要使用一下工具搭建一个静态的网页网站，用与存储个人markdown笔记到github。

二.安装步骤

1.安装Typora

下载对应版本安装即可

2.安装PicGo

下载对应版本安装即可

3.安装docsify

如果不需要静态页面只需要markdown文件此步骤跳过

4.安装git

# 下载对应版本安装即可,为了使提交有用户名
git config --global user.name {用户名}
git config --global user.email {用户邮箱}
# 其他配置自行查找

5.github.io

step1: 创建仓库

// 需要github账号,没有账号自行申请
仓库名:{Owener}/github.io 
访问地址: https://{Owener}.github.io/
{Owener} 填写自己的用户名
{Owener}/github.io 主分支下index.html为主页面

step2: 配置权限

1. 配置ssh（略）
2. 配置图床token,创建后只会显示一次token请复制保存。
   
   

6. 配置PicGo

目的: 将文件上传至github图床链路打通

# 详细窗口 -> 图床设置 -> github图床
仓库名: 填写存储图片的仓库 public即可
分支名: 通常为main或者master
token: 为上一步配置权限生成的token
存储路径: 仓库二级目录
自定义域名: 默认为 https://raw.githubusercontent.com/仓库名/仓库二级目录可代理加速 https://cdn.jsdelivr.net/gh/仓库名/仓库二级目录

7.配置Typora

目的:将Typora图片上传并转换为图床地址

# 偏好设置 -> 图像 -> 上传服务选择 -> PicGo

三.简单使用

# 检出分支
git clone https://github.com/{Owener}/{Owener}.github.io.git# 初始化docsify
cd /User/xxx/{Owener}.github.io
docsify init # Typora打开目录添加markdown
touch /User/xxx/{Owener}.github.io/1.md
touch /User/xxx/{Owener}.github.io/2.md# docsify添加侧边栏 
# 参考 https://blog.csdn.net/qq_22211217/article/details/121446815
cd /User/xxx/{Owener}.github.io
docsify generate /User/xxx/{Owener}.github.io# 提交代码
cd /User/xxx/{Owener}.github.io
git add . 
git commit -m '提交网页'
git push origin master # 分支为main则为main# 访问静态pages
https://{Owener}/github.io

四.总结

1.整体流程比较简单,值得思考的问题是pages服务和图床都是public,无法私有化文档和图片资源。
2.每次添加文档后需要docsify generate 生成侧边栏目录,并提交至github。网页才能更新。
3.docsify本身有许多插件可以扩展，进而丰富静态网页。
4.picgo也有许多插件可以进行扩展，进而分布图床和图片处理。