WeChat Official Account Failed to Upload GitHub Images

The WeChat Official Account editor is notoriously difficult to use, for example, it doesn’t support Markdown. To save time, I’m used to editing and formatting in doocs/md, then copying it to the WeChat editor with one click - this step’s efficiency is resolved. But there’s another issue: the editor originally supports automatically uploading images from text to WeChat servers, but for GitHub image hosting images it shows failure. Since we can’t avoid using the WeChat editor, we need to solve this problem. Here I’ll describe my solution.

Failure Reason

Let me first explain why the upload fails.

The upload principle is that WeChat requests images based on the original image address, then stores them to its own image hosting. If the service itself doesn’t have network connectivity with user-images.githubusercontent.com, this problem naturally occurs. For example, if WeChat servers don’t have external network access capability. I can’t say specifically what it is, but it’s definitely network restrictions.

Solution

Since it’s a network restriction, the solution is to provide a proxy service to ensure WeChat services can access it, while also being able to normally access the external network, i.e., user-images.githubusercontent.com. Here I tried using domestic cloud vendor Hong Kong region servers to build a proxy service, then batch replace the original GitHub image links in articles with my proxy service domain name. After copying to the WeChat editor, you’ll find it can upload normally.

Proxy Configuration

Here’s the proxy service setup configuration. Below is the nginx configuration, HTTP should also work, you can try it yourself.

server {
    listen       443 ssl http2;
    server_name  githubusercontent.xxx.cn;  # your domain name

    ssl_certificate /etc/letsencrypt/live/githubusercontent.xxx.cn/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/githubusercontent.xxx.cn/privkey.pem;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location / {
       proxy_pass https://user-images.githubusercontent.com;
    }
}

Further Efficiency Improvement

Manually replacing multiple domain names in the editor each time is quite troublesome. If you’re an Alfred user, you can create a workflow so that by selecting the entire text, you can update GitHub image addresses to the proxy service’s new address with one click.

Final Thoughts

After solving the above, you can now: write articles in MD => update links to proxy service address with one click => copy to WeChat editor with one click while successfully uploading images. Isn’t that great?