Background

一直以來部落格的圖片我都是現丟到Dropbox然後在copy public link到Blog中使用. 因為之前都是用其他線上免費的部落格空間有限啊, 導致養成這種習慣. 這兩年轉到Ghost還是一直維持這種習慣. 直到前幾天我才想起來, 我是在我自己租的主機Host Blog. 所以我應該可以放心的把圖片丟上去. 不然空間也是浪費. 所以今天來紀錄一下. 怎麼把圖片丟上去&會遇到的一些問題該怎麼解決.

Upload images

在ghost中上傳圖片很簡單, 當你打出![]() 旁邊的Priview應該會出現下面的圖. 然後在框框裡面點一下就可以上傳圖片了.

![](/content/images/2016/12/Screen-Shot-2016-12-11-at-11.49.29-AM.png)

那上傳完的圖片的位址會在 /var/www/ghost/content/images 這個資料夾下by year by month放.

Maximum file size error

那如我你在上傳圖片中遇到 Maximum file size error, 就表示你上傳的圖片太大了. 你可以透過改Nginx的設定檔來解決這個問題.

加入 client_max_body_size 4m; 到http的section中. 4m表示檔案上限的大小, 你可以自己更改.

/etc/nginx/nginx.conf

user www-data;
worker_processes 4;
pid /run/nginx.pid;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##
 
    ...

    client_max_body_size 4m;

    ...
}
...

然後重新reload nginx.conf 這個問題應該就解決了

sudo service nginx reload  

Adjust image sizes

那圖片上傳上去基本設定都會去配合你頁面寬度的大小(100%). 所以如果上傳一些圖片的寬度比較小就會自動被放大導致圖片很模糊. 那剛好網路上有人提供怎麼解決這個問題. 基本上是利用html的code來解決. 如下面所示. style="width: 600px;" 你可以在style中自己決定圖片寬度的大小.

<div class="image-div" style="width: 600px;">
    ![Alt Text](path/to/image)
</div>

我想以上就是在Ghost Blog中使用圖片會遇到的一些問題. 記錄並分享給大家.

Reference