Pushing Hugo Content to GitHub

Building and Updating Content

This blog content is generated by the Hugo static site generator and integrated with GitHub (which you can clearly tell by the URL), but I’m always struggling to remember the steps in pushing the newest content publicly.

But I’m getting ahead of myself. Before I get there, hugo and github need to be integrated. I’m using Windows 10, so I needed to start by installing git locally. Once that was complete, I had the git bash shell that I could use to generate the SSH keys that my computer will use to connect with my github account. On Windows 10, the .ssh directory is located at C:\Users\Administrator.ssh

  1. Start by generating a new SSH key to use for this connection. I used the ed25519 algorithm, which is faster and more ‘secure’ than the RSA-2048 key that’s commonly used today:

    Administrator@AC08871 MINGW64 ~/.ssh
    $ ssh-keygen -t ed25519 -C "email@email.com"
    
  2. Then, copy the newly generated public key to the clipboard, because we’re going to paste it to github:

    Administrator@AC08871 MINGW64 ~/.ssh
    $ clip < id_ed25519.pub
    
  3. Log into github > Settings > SSH & GPG Keys. Create a new SSH key, and paste in the contents of the clipboard (which is the public key I just created)

  4. Test the connection via. git bash shell:

    Administrator@AC08871 MINGW64 ~/.ssh
    $ ssh -T git@github.com
    Hi gbeifuss! You've successfully authenticated, but GitHub does not provide shell access.
    

Now that the connection between my computer and github is established, let’s configure github as a remote repository:

C:\Users\Greg\OneDrive\myblog.dev.repo\public> git remote add origin https://github.com/gbeifuss/gbeifuss.github.io.git

C:\Users\Greg\OneDrive\myblog.dev.repo\public>git remote -v
origin  https://github.com/gbeifuss/gbeifuss.github.io.git (fetch)
origin  https://github.com/gbeifuss/gbeifuss.github.io.git (push)

Finally, I’m ready to push my content up:

  1. Change to your site’s local directory, then tell Hugo to build the content:
    cd myblog.dev.repo
    hugo

  2. Change to your site’s public directory (where the new content was just generated):
    cd public

  3. Add all of the new files to git. This command analyzes the repository files, adding all modified and/or untracked files in the current directory and subdirectories to staged status. This prepares them for inclusion in the next git commit. The .gitignore file can be used to define any files/patterns that should be skipped:
    git add .

  4. Commit the locally staged files with a comment. This command will add all the changed files, so be aware of that if you’re only intending to commit/push select files!:
    git commit -m "Website update 2021-08-03"

  5. Push the local content up to GitHub. origin is the remote repository name (alias) and main is the branch name. (Since October 2020, main is the default branch that must exist on any repository):
    git push origin main

And here it all is in a glorious code block, so that in the future, I can just copy and paste!

cd myblog.dev.repo
hugo
cd public
git add .
git commit -m "Website update 2021-08-03"
git push origin main

I’ve also been trying to sort out how to update the theme I use (Stack), which is periodically updated. Right now my process is to:

  • log into github and pull the latest release into my fork
  • delete the contents of \themes\hugo-stack-theme on my computer
  • tell git to repopulate the directory:
    \myblog.dev.repo\themes> git clone git@github.com:gbeifuss/hugo-theme-stack hugo-theme-stack
    
    Cloning into 'hugo-theme-stack'...
    remote: Enumerating objects: 3111, done.
    remote: Counting objects: 100% (1026/1026), done.
    remote: Compressing objects: 100% (416/416), done.
    remote: Total 3111 (delta 796), reused 695 (delta 601), pack-reused 2085
    Receiving objects: 100% (3111/3111), 841.36 KiB | 2.85 MiB/s, done.
    Resolving deltas: 100% (1958/1958), done.
    
    \myblog.dev.repo\themes>
    
  • recopy my avatar image to \themes\hugo-stack-theme\assets\img\
Built with Hugo
Theme Stack designed by Jimmy