How to add a Jekyll blog to an existing non Jekyll static website

Be it Landing pages, a startup website, an mvp page or a showcase — static websites are pretty useful if your structure is consistent and does not need to be frequently updated. However, if you have a blog, you might need monthly, weekly or even daily updates. Frameworks like Jekyll do make the job of writing a blog and publishing it easier. But what if your blog is attached to a static website that is already live? I had the same problem. I did not want to touch the website, just attach a blog to it, which could be dynamically updated.

I looked around on the internet, but couldn’t find a satisfactory guide — most of the guides I found told me to convert my entire website to Jekyll. I didn’t want to do that. So I tinkered around with Jekyll for a while, and was able to successfully attach a Jekyll blog to my existing static website. I made no changes to the website other than creating a link to the newly created blog. Here’s what worked for me:

(Note: Please install Jekyll first. You can follow the instructions given here.)

1. Create a new ‘mywebsite’ (or whatever you want to name it) folder with the command jekyll new mywebsite
2. Create folders ‘_jekyll’ and ‘blog’ inside the mywebsite folder. This is how it will look

3. Now move everything except _config.yml & the newly created blog folder to the _jekyll folder.

4. Paste the index.html of your original website (and any other files and folders it may require) in the mywebsite folder. This is how it looks now:

5. In the config.yml file, define the source and destination as following: source: _jekyll and destination:blog

6. In the index.html create the link to the blog: blog/index.html

Run the jekyll build command.

Thats it! You’re done. The generated files will be in the blog folder. The source files are in the _jekyll folder. You needn’t upload the _jekyll folder to the server.

Every time you write a new blog, just run jekyll build and replace the blog folder on the server with the newly generated blog folder. No need to touch the rest of your website!

Here’s a sample of the blog I’ve created using the same mechanism.

P.S. Don’t forget to have another sitemap.xml in the blog folder if you wish to get your blog pages indexed as well.