Typora+PicGo+github+git+docsify搭建个人静态页面网站

一.前言

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

名称	功能	优点
Typora	markdown编辑器	轻量,支持picgo管理图片
PicGo	图床管理工具	支持多种图床和插件
github	图床,pages服务	每个库有2g的图床空间，支持pages服务
docsify	markdown网页渲染	轻量,支持实时渲染markdown，支持多种插件

二.安装步骤

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也有许多插件可以进行扩展，进而分布图床和图片处理。