Jekyll is a leading solution to build static websites. You write blog posts as text files, and store image assets in the
assets folder. How to effective manage a large number of posts and their images is a critical problem. I will show you the right solution in this article.
Details of the Solution
- Create a new website by the command
jekyll new effective-jekyll, and a basic content management system is just built. This content management system is based on file system, not database, so you need to manage your content like files.
- Create the assets folder to store images by the command
mkdir assetsin the root directory of the website.
- Create a text file by the command
touch 2019-11-8-image-assets-in-posts.mdin the _posts directory.
- Create a new folder named
2019-11-8-image-assets-in-postsin the assets directory to store images in the post you just created.
- Download an image from the internet and save it in the assets folder you just created. Suppose the image file is named
Append the below lines into
2019-11-8-image-assets-in-posts.mdand save changes.
--- layout: post title: "Hello World" date: 2019-11-8 18:00:00 +0800 --- ![Hello World](/assets/2019-11-8-hello-world/hello-world.jpg)
- Run the command
jekyll servein the root directory of your website to generate and run the website.
http://localhost:4000/2019/11/08/image-assets-in-posts.htmlin your browser to check your website locally.
The final screenshot on your website should like this:
But the most important result of the solution is the directory structure of your website, and it looks like this:
You can download the source code of the demo from my GitHub. https://github.com/miguoliang/effective-jekyll.git
Each article has a corresponding image folder under the assets folder. This solution make the image assets management effective and clear. When you want to change images in some article, you can find them quickly. No matter what how many files in your content management system, you won’t confuse posts and their images.