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 Static Site Generator v0.68.3/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. )