Craft Your First Blog with Hugo and Cloudflare Pages

Introduction

Thinking about starting your very own blog? That’s a fantastic idea! In this beginner-friendly guide, we’ll walk you through the process of creating a blog using Hugo (a user-friendly website builder) and hosting it on Cloudflare Pages. Don’t worry if you’re not a tech whiz; we’re here to make this easy and fun for you.

Prerequisites

Before we begin, here’s what you’ll need:

  • A Cloudflare Pages account (sign up if you don’t have one).
  • A domain name (if you have one).
  • Basic computer skills – if you can use a computer, you can do this!

Getting started

Installing Hugo

  1. Go to the Hugo website and download Hugo for your computer’s operating system (Windows, macOS, or Linux).

  2. Follow the installation instructions on their website – it’s like installing any other program.

Setting Up Your Hugo Site

Now that you have Hugo installed, let’s create your blog:

  1. Open your computer’s command prompt or terminal.

  2. Type hugo new site myblog (replace ‘myblog’ with your desired blog name) and press Enter. This creates a new Hugo site.

  3. Choose a theme for your blog by finding one you like on the Hugo Themes website.

  4. Download your chosen theme and follow the theme’s instructions to install it.

Usage

You’re ready to start adding content to your blog:

  1. Create a new blog post by typing hugo new posts/my-first-post.md in your command prompt or terminal.

  2. Open the file my-first-post.md and start writing your blog post in simple Markdown (a plain text format).

  3. Save your post.

  4. To see how your blog looks, run hugo server in your terminal and visit http://localhost:1313 in your web browser.

Deploying to Cloudflare Pages

Deploying Your Hugo Site to Cloudflare Pages in Four Main Steps

  1. GitHub Repository:
  • Create a GitHub repository for your Hugo project.
  • Push your Hugo project’s code to the repository.
  1. Cloudflare Pages Setup:
  • Go to Cloudflare Pages and log in.
  • Connect your GitHub repository to Cloudflare Pages.
  1. Build Configuration:
  • Configure build settings:
    • Production Branch: Set to “main” (or your preferred branch).
    • Build Command: hugo –minify.
    • Build Output Directory: public.
  1. Enable Auto Deployments:
  • Toggle on the “Auto Deploy” option.
  • Click “Deploy Site” to initiate deployment.

That’s it! Your Hugo blog will be live on Cloudflare Pages once the deployment is complete.

Conclusion

You’ve successfully set up your blog using Hugo and hosted it on Cloudflare Pages! This is just the beginning of your blogging journey. Keep writing, customizing, and growing your blog.

Next Steps

  • Customize your blog’s appearance by tweaking the theme or adding your own CSS.
  • Explore Hugo’s documentation for more advanced features.
  • Share your blog with the world and connect with your audience.

References

Managing Multipple gitconfig Profiles on 1 Computer

If you’re working on multiple repositories based on your work and personal projects. And you need to seperate gitconfig usernames and emails for each of scope, for example to show up your contributions on personal GitHub profile.

So, this post is for you!

Organize your repositories

First, you need to put whole repositories from each scope inside a distint directory. It help git recognizes which type of project you’re working on when doing git operations, then uses the corresponding gitconfig profile.

For example, let’s say that you may want to seperate your work and personal workspaces:

  • ~/git-repos/personal-projects/ → For personal projects.
  • ~/git-repos/work-projects/ → For work projects.

Modify global .gitconfig

Create the global .gitconfig file in your home directory if it doesn’t exist. Then add the below to the file:

[includeIf "gitdir:~/git-repos/personal-projects/*/"]
  path = ~/.gitconfig-personal
[includeIf "gitdir:~/git-repos/work-projects/*/"]
  path = ~/.gitconfig-work

With this configuration, if the path where you created the git directory matches one of the paths in inclideIF, then the corresponding configuration file will be used.

Create individual .gitconfig for each scope

If you haven’t noticed by now, we just mentioned the .gitconfig-personal and .gitconfig-work files in the global .gitconfig file, but we didn’t create them yet. These individual files can contain all the customization that you need, from user name and email to commit hooks.

Add this to .gitconfig-work file from your home directory:

[user]
 name = work_username
 email = [email protected]

And add this to .gitconfig-personal file

[user]
 name = personal_username
 email = [email protected]

Let’s check

We’re all set! Now we will create and initiate a new git repository in the personal workspace and check the configurations.

cd ~/git-repos/personal-projects/
mkdir personal-test-repo
cd personal-test-repo
git init

Then you can validate your work with git config -l, the result should be like this:

$ git init
	*Initialized empty Git repository in ~/git-repos/personal-projects/personal-test-repo/.git/*
$ git config -l
  ...
  user.name=personal_username
  [email protected]
  ...