Typora+PicGo+Gitee搭建博客写作环境（超详细）

红太狼 2022-12-25 09:53 179阅读 0赞

### 文章目录 ###

*  1、软件安装
 *   *  1.1. Typora
     *   *  1.1.1、下载
         *  1.1.2、主题扩展
     *  1.2、PicGo
 *  2、配置图床
 *   *  2.1、创建仓库
     *  2.2、设置私人令牌
     *  2.3、PicGo配置Gitee图床
     *  2.4、PicGo配置
 *  3、图床接入
 *  4、Typora快捷方式

在我们的博客写作中，通常有这样的需求：

*  使用Markdown编辑博客
 *  一篇博客发布多个平台
 *  图片一次上传，处处引用

为了方便写作，我们可以采用`Typora+PicGo+Gitee`的方案来搭建我们的博客写作环境。

*  `Typora`：它是一款轻便简洁的Markdown编辑器，支持即时渲染技术，即所写立刻所见，少了排版的时间，专注于文章内容的编辑。
 *  `PicGo`:它是一个用于快速上传图片并获取图片 URL 链接的工具，支持多种图库。
 *  `Gitee`:目前中国最大的代码托管的工具，除了代码，还可以用作图片存储。

# 1、软件安装 #

## 1.1. Typora ##

### 1.1.1、下载 ###

`Typora`下载地址：[typora.io][]，下载对应的版本，一步步安装即可：

![在这里插入图片描述][20201216212022378.png_pic_center]

### 1.1.2、主题扩展 ###

`Typora`有五种主题，基本够用了，如果还不满意，Typora提供了添加更多主题的方法。

可以参见这篇文章：[Typora添加主题][Typora]。

## 1.2、PicGo ##

`PicGo`下载地址：[ Molunerfinn /PicGo ][Molunerfinn _PicGo]

PicGO安装包放在了Github上面，下载对应的版本，一步步安装即可。

![在这里插入图片描述][20201216213219959.png_pic_center]

# 2、配置图床 #

## 2.1、创建仓库 ##

![在这里插入图片描述][20201216214043632.png_pic_center]

*  选择`Redeme初始化这个仓库`，**这样码云会自动给你的仓库建立master分支**,不然可能会出现插件无法找到分支的错误  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQwNzcwNjU2_size_16_color_FFFFFF_t_70]

## 2.2、设置私人令牌 ##

*  击右上角头像-设置，找到 `安全设置`下 `私人令牌`，然后点击`生成新令牌`，权限选择`project`即可。

![在这里插入图片描述][20201216214610132.png_pic_center]

![在这里插入图片描述][20201216214716753.png_pic_center]

*  随便填入一个名字  
    ![在这里插入图片描述][20201216214823313.png_pic_center]
 *  发布私人令牌，这个令牌记下来，后面会用到

![在这里插入图片描述][20201216214921147.png_pic_center]

## 2.3、PicGo配置Gitee图床 ##

*  打开`PicGo`，在插件设置中查找gitee，安装gitee-uploader

![在这里插入图片描述][20201216215255706.png_pic_center]

*  安装完毕重新启动，点开"`图床设置`"可以看到 gitee图床

![在这里插入图片描述][20201216215552220.png_pic_center]

*  gitee图床配置

![在这里插入图片描述][202012162201313.png_pic_center]  
  - `repo`写入码云建的仓库地址

![在这里插入图片描述][20201216220248548.png_pic_center]

- `token`写入前面生成的私人令牌

## 2.4、PicGo配置 ##

*  `PicGo`本身我们也进行一些配置。打开`PicGo设置·`

![在这里插入图片描述][2020121622081350.png_pic_center]

*  查看当前图床的服务端口，方便接下来的配置：

![在这里插入图片描述][20201216220913179.png_pic_center]

![在这里插入图片描述][20201216220949524.png_pic_center]

# 3、图床接入 #

接下来可以在 `Typora`中接入我们的图床了。

*  打开`Typora`，找到`偏好设置`，

![在这里插入图片描述][20201216221310291.png_pic_center]

*  打开`图像`

![在这里插入图片描述][20201216221434325.png_pic_center]

*  进行如下配置

![在这里插入图片描述][20201216222009920.png_pic_center]

*  最后检验图床对接是否成功，点击 “`验证图片上传选项`” ，成功就会显示获取成功。

![在这里插入图片描述][20201216221747325.png_pic_center]

*  到此，我们复制到Typora的图片就会自动上传了  
    ![在这里插入图片描述][20201216223209507.gif_pic_center]

# 4、Typora快捷方式 #

*  关于Typora有一些好用的快捷键，可以提高写文的效率：  
    一级标题：`CTRL + 1`  
    二级标题：`CTRL + 2`  
    三级标题：`CTRL + 3`  
    四级标题：`CTRL + 4`  
    五级标题：`CTRL + 5`  
    六级标题：`CTRL + 6`  
    加粗文字：`CTRL + B`  
    插入图片：`CTRL + SHIFT + I`  
    插入链接：`CTRL + K`  
    插入表格：`CTRL + T`  
    插入下划线：`CTRL + U`  
    全文搜索：`CTRL + F`  
    全文替换：`CTRL + H`  
    有序列表：`CTRL + SHIFT + [`  
    无序列表：`CTRL + SHIFT + ]`  
    打开或者关闭源代码模式：`CTRL + /`
 *  要插入代码片段，可以在英文状态下，输入`~`键(esc键下面)三次，后边紧接着所需语言小写，如下：

```html          回车，这就是插入html代码片段
    ```css           回车，这就是插入css代码片段
    ```javascript    回车，这就是插入javascript代码片段
    ```c             回车，这就是插入c代码片段
    ```java          回车，这就是插入java代码片段
    ```bash          回车，这就是插入bash代码片段

**参考：**

【1】：[学习Typora这一篇就够了][Typora 1]

【2】：[手把手教学 Typora+PicGo+Gitee+Mubu 博客笔记写作环境搭建 ][Typora_PicGo_Gitee_Mubu _]  
【3】：[PicGo + Gitee(码云)实现markdown图床][PicGo _ Gitee_markdown]

[typora.io]: https://www.typora.io/
[20201216212022378.png_pic_center]: /images/20221120/19fb56dff73840528bcaf06253433525.png
[Typora]: https://www.cnblogs.com/superdrew/p/12821051.html
[Molunerfinn _PicGo]: https://github.com/Molunerfinn/PicGo/releases
[20201216213219959.png_pic_center]: https://img-blog.csdnimg.cn/20201216213219959.png?#pic_center
[gitee]: https://gitee.com/
[20201216214043632.png_pic_center]: https://img-blog.csdnimg.cn/20201216214043632.png?#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQwNzcwNjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201226121707393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQwNzcwNjU2,size_16,color_FFFFFF,t_70
[20201216214610132.png_pic_center]: https://img-blog.csdnimg.cn/20201216214610132.png?#pic_center
[20201216214716753.png_pic_center]: https://img-blog.csdnimg.cn/20201216214716753.png?#pic_center
[20201216214823313.png_pic_center]: https://img-blog.csdnimg.cn/20201216214823313.png?#pic_center
[20201216214921147.png_pic_center]: https://img-blog.csdnimg.cn/20201216214921147.png?#pic_center
[20201216215255706.png_pic_center]: https://img-blog.csdnimg.cn/20201216215255706.png?#pic_center
[20201216215552220.png_pic_center]: https://img-blog.csdnimg.cn/20201216215552220.png?#pic_center
[202012162201313.png_pic_center]: https://img-blog.csdnimg.cn/202012162201313.png?#pic_center
[20201216220248548.png_pic_center]: https://img-blog.csdnimg.cn/20201216220248548.png?#pic_center
[2020121622081350.png_pic_center]: https://img-blog.csdnimg.cn/2020121622081350.png?#pic_center
[20201216220913179.png_pic_center]: https://img-blog.csdnimg.cn/20201216220913179.png?#pic_center
[20201216220949524.png_pic_center]: https://img-blog.csdnimg.cn/20201216220949524.png?#pic_center
[20201216221310291.png_pic_center]: https://img-blog.csdnimg.cn/20201216221310291.png?#pic_center
[20201216221434325.png_pic_center]: https://img-blog.csdnimg.cn/20201216221434325.png?#pic_center
[20201216222009920.png_pic_center]: https://img-blog.csdnimg.cn/20201216222009920.png?#pic_center
[20201216221747325.png_pic_center]: https://img-blog.csdnimg.cn/20201216221747325.png?#pic_center
[20201216223209507.gif_pic_center]: https://img-blog.csdnimg.cn/20201216223209507.gif#pic_center
[Typora 1]: https://blog.csdn.net/qq_38490457/article/details/109752298
[Typora_PicGo_Gitee_Mubu _]: https://juejin.cn/post/6859379021281656839
[PicGo _ Gitee_markdown]: https://zhuanlan.zhihu.com/p/102594554