Hexo with Image Hosting

Posted on Edited on In ,

Preface

Sometimes, I might need to insert images into a blog post. The pain point I had earlier is storing image somewhere and copy that path inside the blog post in an organized manner. After some research online, I decided to use an image hosing service (imgur) with a VS Code extension (picGo) to faciliate the upload and link generation process.

Imgur Registration

After registering an account with imgur, we can go to this page to get a Client ID for uploading images with PicGo extension later. In case the link does not work, follow instructions on Imgur API Documentation page.

On the Register an Application page for imgur, remember to choose the OAuth 2 authorization without a callback URL (Red box in the screenshot below), because we do not need the callback URL.

imgur_register_application

Also remember to fill in other mandatory information on the page as well, the Application Name is for your referrence only, I put PicGo.

After registering an application, keep the Client ID somewhere safe, it is needed for configuration in PicGo extension.

PicGo Extension

After installing the extension in VS Code, we need to configure it. Like changing default Pic Bed to imgur and add Client ID generated earlier to Imgur: Client ID. Changed configuration looks like below in VS Code json format:

.vscode/settings.json
1
2
"picgo.picBed.imgur.clientId": "xxx",
"picgo.picBed.current": "imgur",

Usage

For uploading an image in VS Code:

  1. Copy the image to be uploaded by Cmd + C (or Ctrl + C for Windows/Linux)
  2. Cmd + Opt + U (or Ctrl + Alt + U for Windows/Linux) to upload an image from clipboard
  3. VS Code will prompt a message about uploading image, and a link like ![picName](https://example.com/xxx.jpg) will be inserted once the upload is done

Issues - Huge Image

Normally I might need to upload some screenshots, and they have quite high resolutions, hence the image inserted takes a lot space, which reduces the reading experience. I found hexo supports html img tag.

1
<img src="https://link" alt="display text when link died" width="40%" height="40%">

PicGo extension also supports Custom Output Format. For me I changed the output format to <img src="${url}" alt="${uploadedName}" width="" height="">.

However, this type of markdown syntax conflicts with markdownlint’s MD033-Inline HTML. To allow img tag for this rule, change markdownlint config like below.

.vscode/settings.json
1
2
3
4
5
6
7
"markdownlint.config": {
    "MD033": {
        "allowed_elements": [
            "img"
        ]
    }
}

Referrence

Configure imgur for PicGo VS Code Extension

Allowing elements for inline HTML for markdownlint