DEV Community

Cover image for Bootstrap your Blog
Itamar Knafo
Itamar Knafo

Posted on

Bootstrap your Blog

#programming #tutorial #blog #devops

Here we will go through how to bootstrap your own blog using Hugo and fly.io.

Prerequisites

Here is a list of toolings you will need to have installed on your machine:

Optional:

  • Golang (optional, but I will be using it in this guide)
  • Docker (optional, only needed to run the blog locally using Docker)

Create a new Hugo site

First, we need to create a new Hugo site. To do so, we will use the hugo mod init command:

hugo mod init github.com/<username>/<repo-name>
Enter fullscreen mode Exit fullscreen mode

This will populate your project directory with the following structure:

your-project
├── public/
├── resources/
└── go.mod
Enter fullscreen mode Exit fullscreen mode

Add a theme

Next, we need to add a theme to our blog. For this guide, I will be using the blowfish theme.

  1. Now we want to add the theme to our blog, so we will reference it in our config/_default/module.toml file: 
# config/_default/module.toml
[[imports]]
path = "github.com/nunocoracao/blowfish/v2"
Enter fullscreen mode Exit fullscreen mode

  1. Start your server using hugo server and the theme will be downloaded automatically.

  2. In the root folder of your website, delete the config.toml file that was generated by Hugo. Copy the *.toml config files from the theme into your config/_default/ folder, download a copy from here.

Note: Do not overwrite the module.toml file you created above!

Now so far if we run hugo server we will see the following when we access http://localhost:1313:

blog site

From here you can start working on your blog following the blowfish theme documentation.

Recomnadation: I recommend you use vendoring to manage your theme dependencies.

To do so, you can use the hugo mod vendor command:

hugo mod vendor
Enter fullscreen mode Exit fullscreen mode

Add a Dockerfile

Now that we have our blog ready, we need to add a Dockerfile to our project so we can deploy it to fly.io.

Create a new file called Dockerfile in the root of your project and add the following content:

FROM golang:1.19.0-buster AS build

RUN apt update -y 
RUN apt install -y wget
# Install Hugo
RUN wget https://github.com/gohugoio/hugo/releases/download/v0.106.0/hugo_extended_0.106.0_linux-amd64.deb
RUN dpkg -i hugo_extended_0.106.0_linux-amd64.deb
RUN apt-get install -f

WORKDIR /var/hugo/src
COPY . .
RUN hugo --minify

EXPOSE 1313
CMD ["hugo", "server", "--bind", "0.0.0.0"]
Enter fullscreen mode Exit fullscreen mode

You can try running docker build . to build your image locally and see your docker hosted blog.

Important Configurations

Before we jump and deploy our blog to fly, we need to configure the baseURL of our blog.

Add a baseURL to our config/_default/config.toml file:

# config/_default/config.toml
baseURL = "https://<your-app-name>.fly.dev"
Enter fullscreen mode Exit fullscreen mode

Hosting on fly.io

Now we can create a new app on fly.io.

To do so, we will use the fly launch command:

fly launch
Enter fullscreen mode Exit fullscreen mode

The command will prompt you with a few questions about your app like so:

? App Name (leave blank to use an auto-generated name):
? Select organization: You (personal)
? Select region: lax (Los Angeles, California (US))
Created app *** in organization personal
Wrote config file fly.toml
? Would you like to deploy now? (y/N)
Enter fullscreen mode Exit fullscreen mode

The launch command generates a fly.toml file for your project with the settings. You can deploy right away, or add some config first.

Now your fly.toml file should look something like this:

app = "<app-name>"
primary_region = "<region-name>"

[http_service]
  internal_port = 1313
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
Enter fullscreen mode Exit fullscreen mode

Automatic Deployment with GitHub Actions

Now that we have our blog ready, we need to automate the deployment process. To do so, we will use GitHub Actions.

  1. First, we need to create a new file called .github/workflows/deploy.yml with the following content: 
# .github/workflows/deploy.yml
name: Fly Deploy
on:
  push:
    branches:
      - main
jobs:
  deploy:
    name: Deploy app
    runs-on: ubuntu-latest
    environment: production
    steps:
      - uses: actions/checkout@v3
      - uses: superfly/flyctl-actions/setup-flyctl@master
      - run: flyctl deploy --remote-only
        env:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0q7n4nbdlug9c0tjozb.png)


          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

Make sure you add a FLY_API_TOKEN to your repos secrets. You can get it from https://fly.io/user/personal_access_tokens.

(Optional) Adding a custom domain

If you want to add a custom domain to your blog, first you need a domain. My personal choice was Namecheap, but there are many other options out there like GoDaddy, Hostinger, AWS Route 53, etc.

Once you have your domain, we'll need to run the following command to add it to our fly.io app:

fly certs create <your-domain>
Enter fullscreen mode Exit fullscreen mode

You'll get prompted by fly needing to verify and configure your domain. Just follow the instructions and add an A Record and AAAA Record to your DNS provider as well as adding the CNAME record for www as well.

Type Name Value TTL
A Record @ <value provided by fly> Automatic
AAAA Record @ <value provided by fly> Automatic
CNAME Record www <your-app-name>.fly.dev. 5 min

Once it's ready, you can run fly certs show <your-domain> to see if everything is working as expected and add any other configuration if needed.

Don't forget to re-configure your baseURL in your config/_default/config.toml file:

# config/_default/config.toml
baseURL = "https://<your-domain>"
Enter fullscreen mode Exit fullscreen mode

Summary

Now you have a blog of your own, just like this one. You can now start writing your own posts and deploy them to fly.io.

If you have any questions, feel free to reach out to me on any social.

Originally published at https://itamadev.com on June 3, 2023.

Top comments (0)