[Solved] Construction of Typora+PicGo+GitHub image bed and personal solutions to common problems

Article table of contents

    • Why build a map bed?
    • GitHub creates a repository
      • Description of the problem: The picture cannot be displayed or broken in github
    • PicGo settings
    • Typora settings

Why build a map bed?

When we write articles and blogs, we can write them directly on the blog editing page, or we can edit the text locally and upload it. When editing the text locally, we use Markdown for writing, and the software recommended here is Typora.

In the process of writing articles in Typora, there will be pictures inserted. In Typora, pictures are written path locations, but when uploading articles to blog editors, blogs cannot access the path of our local pictures, but Blogs can access the path of online pictures, so we need to upload the pictures to a web page to store them, and then use them directly when we write blogs.

GitHub create repository

Not much to say about GitHub account creation, this little friend can directly find articles from other bloggers.

Create a repository:

Top right corner:

image-20220902115457266

image-20220902121134125

Go back to the home page, and then we try to upload the image to the warehouse to see if it can:

image-20220902121411978

image-20220902121822689

image-20220902122021163

image-20220902122134925

view image:

image-20220902122320266

Problem description: The picture cannot be displayed or broken in github

? After uploading the image, the image cannot be displayed in github. My solution here is to speed up github by modifying the hosts file:

? Open the hosts file:

? windows path: C:\Windows\System32\drivers\etc\hosts

? At the end of the hosts file add:

185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

? After saving, launch and then enter the webpage. Some computers may need to enter ipconfig /flushdns at the command line to refresh dns

? This address will also be updated. After the update, check it at https://www.ipaddress.com/, enter raw.githubusercontent.com for query, and then modify it yourself.

After successful display, view the image, right-click to copy the image path, and paste it into the URL query to see if it can be displayed normally. If it cannot be accessed, it may be because your warehouse is not set before ***< u>public***, look it up and recreate a repository:

? image-20220902124356129

normal display:

? image-20220902124505208

PicGo settings

  1. Download PicGo, download official website

  2. Open settings

  3. After downloading, open it and find the GitHub image bed

    image-20220902130132381

    1. Set the warehouse name: GitHub account name/warehouse name format;

    2. Set branch name: fill in main;

    3. Set token:

      1. Get token:

        Open github to get:

        image-20220902130902925

        image-20220902130926304

        image-20220902130944932

        image-20220902131137174

        Copy your token after it is generated, be sure to copy and save it, it will only show this time, and it will not be found later

        image-20220902131442847

        1. Paste the copied token on picGo without spaces
    4. Specify the storage path: this can be set to empty, or you can fill in the path name + /

    5. To set a custom domain name:

      1. If you don’t fill it in, the loading speed will be a little slow, which may cause your typora to display very slowly or even not show up, but it seems that there is no problem when the blog is dumped;

      2. CDN acceleration: https://cdn.jsdelivr.net/gh/GitHub account name/warehouse name, this acceleration seems to be inaccessible in China, you can try it.

      3. fastly acceleration: https://fastly.jsdelivr.net/gh/GitHub account name/warehouse name, I use this to display pictures in Typora, but most of the pictures are Transfer failed.

      4. gcore acceleration: https://gcore.jsdelivr.net/gh/GitHub account name/warehouse name, there are still a small number of image transfer failures during this process.

        Tips

        If these three accelerations do not work, you can try adding **@main** at the end of the link, for example CDN acceleration: https://cdn.jsdelivr.net/gh/GitHub account name/warehouse name@main, if this still doesn’t work, you can only ask for another method.

  4. Try uploading an image:

    image-20220902133000354

    If it is always blue during the uploading process, then the picture is uploaded successfully, and your pasteboard will automatically have a link in the format [The external link picture transfer failed, the source site may have an anti-leech mechanism, it is recommended to save the picture Upload directly (img-OzHg148f-1662097636097)(web link)], delete other symbols, and leave the web link to see if it can be displayed.

    If it appears red, it means that the upload failed. It may be because your settings are wrong. It may also be that you upload an image. If you do not open the timestamp naming set by picgo, the upload will fail because the same image is named the same. , if not solved, open picGo settings:

    image-20220902133414192

    Open the log file, look in the log and go online to find the error.

Typora settings

  1. In the version selection of Typora, I am not using the latest version. When I use the latest version, I can’t verify the picture (I don’t know what the problem is, it has not been solved yet), and I switched back to the previous version After that, the problem is solved, this is version 0.9.8, and there is no charge QWQ for this version.

    Link: https://pan.baidu.com/s/1KMY8u7VuHrljaac2G4shyw

    Extraction code: jh89

    1. Open Preferences:
      image-20220902133756944
    2. Verify that the image upload was successful:

    image-20220902133953346

    image-20220902134026921

    Both failure and success will be displayed. If the timestamp naming is not turned on in picgo, only the first verification will succeed, and the second verification will fail because the image already exists.