A complete beginner's tutorial shows you how to build your personal cv with hugo and display it using github.io.
For mac user ππ»
MacOS Ventura 13.2
Hugo version -> Hugo v0.110.0+extended darwin/arm64
For linux user ππ»
Ubuntu 20.04.5 LTS (GNU/Linux 5.4.0-131-generic x86_64)
Hugo version -> Hugo Static Site Generator v0.68.3/extended linux/amd64
For windows user ππ»
Windows 11 21H2 22000.376
Hugo version -> Hugo v0.111.0+extended windows/amd64
If you want to automate the local build of your cv, execute the following command.
If you are a windows user, please install chocolatey and git first. See -> how-to-use-chocolatey-choco-to-install-git-on-windows.
Then choose a directory to open git-bash and find build-windows-x86_64.sh of this project that you clone.
Execute the following command to build your cv locally.
# When you execute the command plz remove '$' first.
$ echo "hugo server --source hugoServer/mycv" >> build-windows-x86_64.sh
$ sh build-windows-x86_64.sh
If your git-bash is already configured with ssh access to your github, then you can jump directly to step-create-repository and step-deploy.
# When you execute the command plz remove '$' first.
$ chmod +x build-macos-arm_64.sh # If you are a linux user please try build-linux-x86_64.sh
$ echo "hugo server --source hugoServer/mycv" >> build-macos-arm_64.sh
$ ./build-macos-arm_64.sh
After executing this build script, please jump directly to step-configure-ssh and step-create-repository. Then jump to step-deploy.
For most people who use github, I assume they have git installed correctly. But if you are new to github and don't have git installed, plz check out link.
Homebrew is a free and open source package management system that simplifies the installation of software on macOS systems.
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
$ brew install hugo
$ hugo version # Success if version output is available
...
Adding the ssh key is for our later operations to go on smoothly.
$ cd ~/.ssh # If you don't have this folder, please google for how to generate ssh key.
$ ls
id_rsa id_rsa.pub ...
$ cat id_rsa.pub # Copy all your output.
.
.
.
Access your github account settings page. (ps:If you are already logged in then just click -> link) Find option called SSH key and GPG keys. Create SSH key like ππ». Put the text of the id_rsa.pub you copied into the place of the key below.
Notice: repository name should be like your_account_name.github.io. When you visit your github homepage, the string at the end of your link is your_account_name. For me the link is "https://github.com/MGMCN". So my_account_name is "MGMCN".
$ mkdir hugoServer
$ hugo new site hugoServer/mycv
$ git clone https://gitlab.com/mertbakir/resume-a4.git hugoServer/mycv/themes/resume-a4
$ cp hugoServer/mycv/themes/resume-a4/config.yaml hugoServer/mycv/
$ cp -r hugoServer/mycv/themes/resume-a4/exampleSite/data hugoServer/mycv/
$ rm hugoServer/mycv/config.toml # using config.yaml as our config file
$ hugo server --source hugoServer/mycv --disableFastRender # Now you can check your hugo-server is working locally by access http://localhost:1313/ .
$ hugo --source hugoServer/mycv -D
$ cd hugoServer/mycv/public
$ git init
$ git remote add origin [email protected]:your_account_name/your_account_name.github.io.git
$ git pull origin main
$ git checkout main # Make sure you are on the main branch.
$ git add .
$ git commit -m "first commit"
$ git push -u origin main
...
# Now you can view your cv by visiting your_account_name.github.io
Edit these two files. See what has changed by using the local hugo server.
$ ls # Now back to our root directory.
.
βββ archetypes
βββ config.yaml # ππ» This is a configuration file where you can configure.
βββ content
βββ data # ππ» Your cv details are all in this folder.
β βββ education.yaml
β βββ experience.yaml
β βββ features.yaml
β βββ projects.yaml
β βββ publications.yaml
βββ layouts
βββ public
βββ resources
βββ static
βββ themes
When you have edited any one or more of these two files and you want to change the content displayed on github.io.
$ ls # First back to our root directory.
.
βββ archetypes
βββ config.yaml
βββ content
βββ data
βββ layouts
βββ public
βββ resources
βββ static
βββ themes
# Then run ππ»
$ hugo -D
$ cd public
$ git checkout main
$ git add .
$ git commit -m "cv updated"
$ git push
# Now you can view your changes by visiting your_account_name.github.io
Thanks to resume-a4. If you need more details about Hugo Themes, please check out HugoThemes. ( ps: To make sure that the resume theme is not inaccessible, I have also added an archive file. )