This is my personal blog site, built with Django framework, Ajax, and Recaptcha. Additionally, it is SEO-friendly with a sitemap.xml implemented. You can check out my blog site blog.adrianrubico.com

• Introduction
• Deploy Locally
• Installation
• Edit Post
• Techonology Used
• Features
• Website Screenshots
• Admin Screenshots
• Deployment
• Credits
• License
• Author

If you want to try this locally pull the docker image from this github repo registry

docker pull ghcr.io/git-adrianrubico/blog.adrianrubico.com:latest

Then run the docker

docker run -d -p 8000:8000 --name DjangoBlog ghcr.io/git-adrianrubico/blog.adrianrubico.com:latest

git clone https://github.com/git-adrianrubico/blog.adrianrubico.com

cd blog.adrianrubico.com
python -m venv env
source env/bin/activate

pip install -r requirements.txt

python manage.py makemigrations
python manage.py migrate

python manage.py createsuperuser

Primary Modules used

• Django==5.0.7
• django-recaptcha==4.0.0

To edit post follow this format in ckeditor admin page.
In the style tag, represent the blur effect on your images.
Then, img tag your full resolution img. In addition, I include postdetail-text_container to align center of your texts.

You can use this as reference if you like 😉

<div class="main-photo-container">
    <div class="blur-load" style="background-image:url(https://bucket-adrianrubico28.s3.us-east-1.amazonaws.com/blog_app/blog_photo_main/blog-3-smallv2.jpg);">
        <img class="blurry-load" src="https://bucket-adrianrubico28.s3.us-east-1.amazonaws.com/blog_app/blog_photo_main/blog-3.jpg" loading="lazy">
    </div>
</div>
<div class="postdetail-text_container">
    <p>
        TEXT HERE
    </p>
    <div class="postdetail_subimage">
        <div class="blur-load" style="background-image:url(https://bucket-adrianrubico28.s3.us-east-1.amazonaws.com/blog_app/blog_photo_main/blog-3-smallv2.jpg);">
            <img src="https://bucket-adrianrubico28.s3.us-east-1.amazonaws.com/blog_app/blog_photo_main/blog-3.jpg" id="zoom-background" loading="lazy">
        </div>
    </div>
</div>

• Python
• HTML
• CSS
• Javascript

1. Django-Powered: A robust portfolio leveraging Django for dynamic content and seamless interactivity.

2. Google Recaptcha: Prevent bots and enhance security with Google Recaptcha, ensuring a secure and spam-free communication experience.

3. SEO-Friendly: Optimized for search engines with an implemented sitemap.xml, enhancing visibility and ranking on search engine results pages (SERPs).

In the deployment you could try using Render or Vercel. You may follow the instruction as my previous work

• https://blog.adrianrubico.com/post/Create-Your-Own-Portfolio-Website-for-Free-Using-Django
• https://github.com/git-adrianrubico/Django-Portfolio-Render

• Blog Template Design: https://github.com/deepjyoti30/blog.deepjyoti30.dev
• Django Recaptcha Setup: https://www.youtube.com/@bugbytes3923
• Simple Icons: https://cdn.simpleicons.org
• Highlight JS: https://highlightjs.org
• Medium Zoom: https://github.com/francoischalifour/medium-zoom

This project is licensed under the MIT License.

• GitHub - git-adrianrubico
• LinkedIn - Adrian Rubico