Host your own CTF for free 💸 (CTFd Setup Guide)

Jihed Kdiss — Wed, 20 Mar 2024 01:54:36 +0000

Backstory

During the last weekend, a small cyber security club at my town organized their first online CTF competition. I offered to take care of the infrastructure since I've been tinkering with CTFd for a couple of weeks and surprisingly everything went well! (Except two server outages that didn't last long 😁) That's why I'm here sharing with you the process of how I set up, configured, and monitored a CTF platform that handled 150+ users simultaneously totally FOR FREE 💲

Roadmap 🛣️

Create and configure a Linux VM on the cloud
Deploy CTFd using docker-compose
Set up CTFd Admin Panel and settings
Get a domain name and link it with the VM
Enable HTTPS by generating a certificate

⚠️ Before we start make sure you have the GitHub Student Pack since it's the only way to have all these perks for free. Make sure also to link Microsoft Azure to your GitHub Student account.

First step: Linux VM on the cloud! ☁️

This step is fairly simple. You just create a new instance/resource/linode/machine/VM whatever your provider calls it. In my case I made an Ubuntu Server VM on Microsoft Azure portal.

⚠️ The most important things during this step are:

Choose a strong SSH password and keep it to yourself
Enable inbound ports 80 and 443 for HTTP and HTTPS

Once you finish this process, you'll have SSH access to your VM. It's time for a quick apt update && apt upgrade followed by a nice apt install docker.io docker-compose. At this point you're ready for step 2!

Second step: Deploying CTFd with docker 🐋

We start by cloning the CTFd github repo: git clone https://github.com/CTFd/CTFd.git

Then, you could add one of the themes in this repository to your themes folder to make your CTF shine in fashion! ✨

Finally, go on and build your docker image by running:
sudo docker-compose up. It will take some time but by the end of it, you will have CTFd up and running.

Third step: setting up the admin panel 👔

This process is pretty straight-forward. Navigate to your VM IP in your browser and you'll be welcomed by this:

All you gotta do is follow the onscreen instructions and you'll be ready to go. Don't forget to select the theme you uploaded in step 2.

Fourth step: Link the domain name! 🌐

Believe it or not, this is the easiest step in this guide. After claiming your preferred domain name from namecheap or any other provider that gives free domains to students, all you need to do is add these records in your DNS settings.

Congratulations! Now instead of typing the IP in the address bar, you can type your new domain name instead 💫

Final step: Enabling HTTPS

This article right here contains a well-explained guide on how to generate a SSL certificate and configure it with your domain name and server. By the end of it you'll have a nice shiny green lock 🔒 next to your domain name.

And that's how you host your own CTF for free! 💸

Author: Jihed Kdiss • My website: jihedkdiss.tn
Feel free to contact me in case you run into some trouble.

How to create a portfolio website for free?

Jihed Kdiss — Sun, 26 Jun 2022 10:55:45 +0000

As an aspiring developer or designer 😎 you'll have to showcase your great projects for hiring managers & recruiters through your portfolio. In today's article I'll show you how to create your very own portfolio and publish it FOR FREE! 🤩

Have a look at my own Portfolio website to get an idea of what yours will look like after you complete the tutorial! 😉

Design your portfolio website

In the first step you'll have to either design your website from scratch or edit a template. Feel free to work with any technology you'd like and any libraries you want. Be creative! 👨‍💻

Tip: Many websites out there provide free templates for any kind of website. You'll find a hand-made list at the end. If you're curious, I used HTML5UP for my website. 🌟

In this process, you'll have to gather your open source projects, clients case studies and any other works you've done that involve your professional skills. Make sure to write a little description of each project and insert a link to it if it's a website or GitHub repository. Your portfolio is also the best place to put links to all your social media accounts and give an insight of your education, career and social life. 🤓

Tip: Best work comes first! No need to fill it up with meaningless projects. Recruiters prefer quality over quantity.

Host your website

After you're done with coding your website (which takes usually 3-5 days) it's time to get it online! You have many option in this step, you can for example upload it to GitHub and get a GitHub pages link, simply. 🤷🏻‍♂️

Tip: Name your GitHub repository username.github.io and use your repository as host. 💫

Personally, I recommend Netlify or Vercel for hosting & deployment. My own portfolio is hosted on Netlify.

Why to choose Netlify 🎯

It provides VERY FAST deployment (Really. It's very fast!)
100 GB of traffic monthly for free (That's more than enough for a personal website)
Loading speeds are great thanks to their CDN. ⚡️

Tip: Netlify also provides FREE SSL Certificates 🔒 for your website provided by Let's Encrypt. It takes a couple minutes to see the green lock on your website and it doesn't need configuration at all.

Get a free domain name! 💲

The final step (and maybe the most interesting) to creating your amazing portfolio website is setting your domain name!
For this step we'll use the famous Freenom, a free domain provider that allows you to choose from a range of free domains: .tk .ml .ga .cf etc...

Tip: This step is better explained with a video. Here is the best tutorial out there, fast and straight to the point. Make sure to follow step-by-step.

Link Netlify with your new domain name ✔️

The steps to link your domain and host are pretty simple:

Add a custom domain to your site on Netlify dashboard.
Go add Netlify's nameservers to your domain name on freenom's dashboard.
Click Verify DNS Configuration on the bottom of the page to launch the auto SSL Configuration. 🔒
Wait a couple minutes (up to 10 minutes) and come back, you'll see that your website is live with a green lock!
Congrats king/queen you did it! 👑

Tip: You can follow this step-by-step video tutorial if you encounter any problem or need further clarifications.

Conclusion

These are the steps you need to follow in order to get your portfolio website up and running. Thanks for your time and I hope to see all your portfolios in the comments section. Support me by sharing this article and following me on social media:
GitHub / LinkedIn / Twitter / Facebook

Fun fact: This is my first post here I hope you guys love it :)

Free templates for your websites 🆓

html5up.net HTML5 Templates that are fully responsive and easy to customize.
ThemeFisher Free Bootstrap Templates for a variety of uses.
BootstrapMade Website templates for creative agency, design and photography.

DEV Community: Jihed Kdiss