PicGo tool configures Gitee image bed warehouse

PicGo tool configures Gitee image bed warehouse

  • 1. The role of the image bed
  • 2. Tools used
  • 3. Download and installation of various tools
    • 3.1. PicGo
      • 3.1.1. PicGo download
      • 3.1.2. PicGo installation
    • 3.2. Node.js
      • 3.2.1. Node.js download
      • 3.2.2. Install Node.js
      • 3.2.3. Configure Node.js environment variables
        • 3.2.3.1. Configuration environment and verification
        • 3.2.3.2. Modify the module download location
        • 3.2.3.3. Test whether the default location is modified successfully
        • 3.2.3.4. Set Taobao Mirror
    • 3.3.gitee-uploader plugin
      • 3.3.1. Install via PicGo
      • 3.3.2. Manual installation via npm
      • 3.3.3. Through local manual import
    • 3.4. Gitee creates image bed warehouse
      • 3.4.1. Opening a position
      • 3.4.2. Creating a private token
  • 4. PicGo configures Gitee image bed warehouse
    • 4.1. Configuration
    • 4.2. Use
      • 4.2.1. Use of PicGo
      • 4.2.2.Typora use
  • 5. Summary of problems encountered during configuration
    • 5.1. Problems encountered by PicGo tool
    • 5.2. Problems encountered by Node.js
    • 5.3. Problems encountered in the installation of the gitee-uploader plugin
    • 5.4. Problems encountered in gitee warehouse

1. The role of the image bed

Picture bed is actually a space for storing pictures on the Internet, which serves as a person’s cloud picture link.

When we write blogs, we mostly use Markdown files to edit articles, and the pictures of Markdown files are transmitted through links. The pictures and Markdown files are stored separately. If we want to When a Markdown file with pictures is saved to other devices for display, it has to be packaged and transferred together with the picture folder to ensure that the pictures can be displayed normally when we open the Markdown file on another device.

?Therefore, a cloud picture link is very necessary, and the link found directly on the Internet is not reliable, so it is still necessary to build your own picture bed. This article uses Gitee to build a map bed warehouse.

2. Tools used

The tools needed to build your own image bed warehouse:

  • PicGo
  • Node.js
  • gitee-uploader plugin
  • Gitee

3. Download and installation of various tools

3.1. PicGo

3.1.1. PicGo download

PicGo document address: PicGo-Doc
PicGo Download link: https://molunerfinn.com/PicGo
Or download directly through the GitHub warehouse address: https://github.com/Molunerfinn/picgo/releases
Download the PicGo installation package through the provided domestic download link or the link in Assets (Windows environment download.exe)

3.1.2.PicGo installation

  1. Right click on the installation file to install, install as needed
  2. Select the installation location and click Install
  3. Click Install to complete the PicGo installation
  4. PicGo interface

3.2. Node.js

3.2.1.Node.js download

Node.js download link: https://nodejs.org/en

3.2.2. Install Node.js

  1. Right-click the file and select Install to install it.

  2. Select “Next” to proceed to the next step, after accepting the license, click “Next” to proceed to the next step.

  3. Select the installation path and click “Next” to proceed to the next step.

  4. Direct default installation, select “Next” to the last step, select “Install” to install.

  5. Select “Finish” to complete the installation.

3.2.3. Configure Node.js environment variables

3.2.3.1. Configuration environment and verification

  1. Add the Node.js installation path to “Path” in “System Variables” (this step will be added by default when installing Node.js).
  2. To verify whether the installation is successful, enter the following command to verify:
//Check the Node.js version in the cmd command window
node -v
//Check the npm version in the cmd command window
npm -v

If the version number is displayed normally, the installation is successful:

3.2.3.2. Modify the module download location

  1. Create two new folders “node_global” and “node_cache” in the Node.js installation directory
  2. Modify the default folder
//Set the installation path of the global module to the "node_global" folder
npm config set prefix "C:\Program Files\
odejs\
ode-global"
//Set the cache to the "node_cache" folder
npm config set cache "C:\Program Files\
odejs\
ode-cache"

As shown in the following figure, it is successful:

  1. Add the “node-global” path to “Path” under “System Variables” (since most node global modules can be accessed through the command line, add the path to “Path” under “System Variables” Path”, convenient to use the command line to run)

3.2.3.3. Test whether the default location is modified successfully

//Use the following command to test whether the default location is modified successfully
npm install express -g
// or the following command
npm install express --global

/**
"-g" is equivalent to "-global", "-g" is global installation, without "-g", it is downloaded to the current directory by default.
"-g" means to install to the previously set "node_global" directory, and nodejs will automatically create a "node_modules" subfolder under the node_global folder.
*/

The following image shows that the test was successful:

Note: When testing npm, you will encounter the problem of test failure. There may be two reasons:

  1. The folder does not have permission to modify, just release the permission of the file;
  2. The npm version is low, just upgrade the npm version;
//npm version upgrade (you can release the modification permission of the folder before the version upgrade)

//clear npm cache
npm cache clean -f
//Upgrade to the latest version
npm install npm -g
//npm upgrade to the specified version
npm install npm@[version number] -g

3.2.3.4. Set Taobao Mirror

  1. Change the default registry of npm to Taobao registry
//View the currently used mirror path
npm config get registry


//Replace npm domestic mirror
npm config set registry https://registry.npmmirror.com


//Use the code to view the image again to view the image path
npm config get registry


Successfully changed!

  1. Install cnpm based on Taobao source (you can not install it depending on your personal needs)
//Install cnpmcnpm based on Taobao source
npm install -g cnpm --registry=https://registry.npmmirror.com


//Execute the command to check whether cnmp is installed successfully
cnmp -v

cnpm installed successfully!

3.3.gitee-uploader plugin

The gitee-uploader plug-in can be installed through the “Plugin Settings” in PicGo, or can be installed using npm, or you can download the plug-in to your computer and import it manually through the plug-in settings in PicGo.

3.3.1. Install via PicGo

  1. On the “Plugin Settings” interface in PicGo, enter “gitee” in the search box to search for the gitee-uploader plugin.
  2. Click the “Install” button on the gitee-uploader plugin to install it.
  3. When the install button on the gitee-uploader plugin says “Installed”, the plugin is installed successfully.

    Note: There is a possibility that the installation may fail when installing through the “Plug-in Settings” in PicGo. (The reason for the installation failure and the solution have not yet been found)

3.3.2. Manual installation via npm

  1. Run command prompt as administrator
  2. Enter the “cd C:\Program Files\PicGo” command to enter the PicGo installation directory
  3. Enter the “npm install picgo-plugin-gitee-uploader” command to install the gitee-uploader plugin,
  4. Restart PicGo to complete the plugin installation

    Note: The gitee-uploader plug-in that has been manually installed using npm may not be displayed in PicGo (installation failure), and then it needs to be manually imported again.

3.3.3. Through local manual import

  1. First download the gitee-uploader plugin locally
  2. Open “Plugin Settings” in PicGo, find “Import Local Plugins”
  3. Find the downloaded plugin picgo-plugin-gitee-uploader file, select the file and import it successfully

    Note: Plug-ins are generally downloaded to the “node_modules” file in the PicGo installation directory. If there is no root directory, just create it manually.

3.4. Gitee creates image bed warehouse

3.4.1. Opening a position

  1. Name the warehouse when building a warehouse
  2. Add warehouse introduction
  3. The nature of the warehouse only has the “private” option (it may be changed to “open source” in the future)
  4. Select the branch model as a single branch model (master)
  5. Click “Create” to complete the opening
  6. Find the warehouse “management” and change the warehouse to “open source”
  7. Allow “Warehouse Public Notice”, click “Save” to complete the change
    Note: No matter the nature of the Gitee warehouse is open source or private, it can realize the function of the picture bed warehouse, but the pictures in the private warehouse do not display thumbnails in the PicGo tool, and the open source warehouse does not have this problem.

3.4.2. Create a private token

  1. Find “Private Token” in gitee “Settings”
  2. Click “Generate New Token” to create a private token for use with PicGo’s image bed
  3. Add description of private token
  4. Permissions that allow “View, Create, Update Items”
  5. Click “Submit” to complete the creation of the private token
  6. It can be closed after saving the private token (The private token will not be visible after closing)

4. PicGo configures Gitee image bed warehouse

4.1. Configuration

  1. Open PicGo, find the “gitee” option in “Image Bed Settings” and click to open

  2. Select “gitee” and open it, click “+” to add the gitee image bed warehouse

  3. Add the gitee image bed warehouse, and fill in the information of the warehouse according to the requirements (image bed configuration name, repo image bed warehouse name, branch branch name, token private token, path image storage path)

  4. After the picture bed warehouse is added, find the “image upload” drop-down box in the “upload area”, find “gitee” and select the configured picture bed warehouse

    Note: When PicGo configures the Gitee repository, pay special attention to “repo (name of the repository)“. This requires the user name of gitee plus the repository name. line, filling in the warehouse name alone is not successful. The parameters of repo can be directly copied and obtained through URL in the browser.

//repo parameter format is as follows
username/repository name

//eg:
zhangsan/picgo-images

4.2. Use

4.2.1. Use of PicGo

  1. Upload by dragging and dropping pictures
  2. Click “Click to upload” to select an image to upload
  3. The copied image is uploaded via the “Clipboard Image” button

    Note: The reason for the failure to upload the image may be that there is a problem with the configuration of the image bed warehouse, or the configured image bed warehouse is not selected in the upload interface.

4.2.2.Typora use

  1. Open “Typora”, click “File” and select “Preferences”
  2. Select “Image” to set
  3. “When inserting a picture…” select Upload picture
  4. Select PicGo(app) for “Upload Service” in “Upload Service Settings”, and select PicGo.exe file under the PicGo installation directory for “PicGo Path”
  5. Click “Verify image upload options” to check whether the configuration is successful

    Note: If Typora displays upload failure when using PicGo, the possible reason is that there is a problem with the image bed warehouse configuration on PicGo.

5. Summary of problems encountered during configuration

5.1. Problems encountered by PicGo tool

  • When installing the plug-in directly on the PicGo tool, the installation may fail. In this case, you need to install it manually through the npm tool, or manually import the local plug-in;
  • PicGo should pay attention to the warehouse name of repo when configuring the picture bed warehouse (format: username/warehouse name);
  • Before uploading pictures, you must first select the configured Gitee picture bed warehouse on the upload interface;

5.2. Problems encountered by Node.js

  • When using the command prompt to modify the module Download location, the modification may fail. At this time, you need to release the permissions of the folder to be modified before operating, which can avoid the above problems;
  • Add the “node-global” path to “Path” under “System Variables” (because most node global modules can be accessed through the command line, add the path to “Path” under “System Variables” to facilitate the use of commands run);
  • cnpm tools may fail to install, if the image of the npm tool has been changed to a domestic image, cnpm does not need to be installed;
  • When testing the npm tool, it prompts that the npm tool version is too low, upgrade the npm tool version to the latest, command: npm install npm – g;

5.3.Problems encountered in the installation of the gitee-uploader plugin

  • When installing on the PicGo tool interface, the installation will fail (the specific reason and solution cannot be found);
  • After using the npm tool to install the gitee-uploader plugin, there is still no plugin displayed after restarting PicGo (the installation is still unsuccessful);
  • At this time, the gitee-uploader plug-in has been downloaded to the local through the npm tool, and PicGo needs to be imported manually;

5.4.Problems encountered by gitee warehouse

  • The picture bed warehouse created by Gitee can be private or open source, all of which can realize the function of the picture bed warehouse, but the pictures in the private warehouse do not have thumbnails displayed in PicGo;
  • Gitee has restrictions on the number of warehouses, the size of warehouses, and the size of uploaded files;
  • Frequent access to files in the Gitee warehouse may be restricted and inaccessible through external links;