Design and Deploy My Website

Step 1

Decide on a name for your site, and purchase a domain from your favorite domain service (Namecheap,GoDaddy, etc.) cost will vary on how popular your idea is.

You will need to set your A Record once you setup your servers reserved IP address. Mimic this on both your domain provider, and DigitalOcean.

Here is Namecheap’s guide.

Step 2

Choose a hosting service.

Namecheap has a hosting service, and you can purchase a subscription, but I went with DigitalOcean. DigitalOcean has a pretty reasonable 6 dollar a month option for 1 CPU, 1 GB of RAM, and 25 GB of diskspace.

Plenty for our needs, but also scaleable, depending on your wallet size.

Step 3

Install an Operating System

When you first setup your server you will have the option to install an OS, I went with Ubuntu 24.10. Digital Ocean will handle the basics of loading a boot drive for you so that when you fire up your OS for the first time its available for you to install.

From the DigitalOcean dashboard click Console this will open a window for configuring your OS.

Follow the prompts, if you need help here’s the documentation.

Once you have a SHELL make sure to update your repositories and packages with

    apt update && apt upgrade -y

This is being run as the root user, its best to add a new user and provide sudo privileges, lets do that.

We will utilize the interactive helper by using the following.

    adduser management

This will create the /home directories, copy dotfiles, prompt for your password and related information.

Next we will grant the User sudo privileges.

    usermod -aG sudo management 

Now switch from the root user to the newly created management user.

  su - management
  sudo whoami

At this point you have a fresh Ubuntu server and a new user with sudo privileges ready to serve the static site we are about to create.

Step 4

We need some foundational security, so we are going to setup a firewall using UFW, and Fail2Ban to prevent brute force attacks.

Run the following.

  sudo apt install ufw fail2ban -y

Check the status.

  sudo ufw status numbered

You will see currently allowed ports/services in a numbered format.

Allow SSH. (You have the option to change your SSH port, which I recommend..)

  sudo ufw allow Openssh

Allow web traffic.

  sudo allow ufw 80/tcp comment 'HTTP'
  sudo allow 443/tcp comment 'HTTPS'

Now check the status of ufw again.

  sudo ufw status numbered

At this point install certbot to get a Let’s Ecrypt certificate, so that your users are connecting using SSL encryption.

  sudo apt update
  sudo apt install certbot

  sudo certbot --nginx -d 'domain' -d www.'domain'

Provide an email address, agree to the terms, and choose redirect to force HTTPS.

Now we need to configure Fail2Ban, DigitalOcean has a great write up on this.

Step 5

Choose a Jekyll theme. I like the aesthetic of Chirpy, so thats what we will be using, fortunately there is a github repo ready to use.

On your local machine pull the repo, I am using VSCode so I did that from within the IDE. The benefit of using a repo is portablility, so that I can manage my site from any device.

Jekyll takes Markdown files and converts them to Markup (HTML) and organizes the files in the appropriate format for deployment.

We do this by creating a .md file in the _posts directory of the repo, with the following naming convention- yyyy-mm-dd-name-of-your-page.md.

Delete the default files to start fresh.

Now in your local terminal navigate to the repositories root directory, and run-

    jekyll serve

You will notice you are missing some dependancies such as Ruby, bundler, and Node LTS.

Run

    bundle

Then

    bundle exec jekyll s

Inside your terminal there will be a link to http://127.0.0.1:4000 CTRL+Click this and it will launch in your browser.

This will serve a local copy of your website in order to preview your changes.

To setup all of the elements on your homepage edit the config.yaml file in the root of the repo, this has SEO settings and email contact, socials etc.

You can also change the avatar image by placing a URL to the image (or a local directory) within double quotes in-

avatar: “ “

Heres an outline of whats editable.

    myblog/
    ├── _config.yml      # global settings: title, url, theme_mode …
    ├── _posts/          # your Markdown blog posts
    ├── _tabs/           # About/Archive pages
    ├── assets/          # images, css, js
    ├── _data/           # navigation & socials YAML
    └── tools/           # helper scripts (build, deploy, lint, etc.)

Once you are done editing, run the following to package your site files, ready for production!

    bundle exec jekyll b

Step 6

Gather your reservered IP address from DigitalOceans dashboard, and run the following.

    scp -r _site\* 'USER'@'ReservedIP':/var/www/blog

Make sure to ssh into your server and change the permissions for this directory.

    sudo chmod -R 755 /var/www/blog

I Hope you found this usefull I learned alot, and look forward to writing some new posts!