My-Portfolio (This is a portfolio website made with Hugo)
Are you an individual/company attempting to impress job recruiters/clients with your portfolio website but are unfamiliar with the so-called basics of any website, such as H.T.M.L, C.S.S, and J.S?
Hugo is here to assist you.
1. Let us assume you have
- A GitHub account (click_here_for_help)
- Git Bash installed (click_here_for_help)
- Visual Studio Code (or any other code editor, for the sake of time, I’m using VS Code)
==> If you have any doubts regarding anything,
1. Ask Google
2. And if the doubt persists feel_free_to_ping_me
3. ask Google again
4. Follow the principle of Trial and Error
Let’s dive into it
1. Install Hugo
I. Windows OS (Using Powershell)
i. install scoop
iwr -useb get.scoop.sh | iex
- If it returned error you might need to change the execution policy
(i.e. : enable PowerShell) with
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
ii. install hugo
scoop install hugo
II. Linux OS
sudo apt install hugo
III. macOS
brew install hugo
OR
port install hugo
2. Verify installation, by typing In command prompt/Terminal
hugo version
3. Generating website file
3.1 Creating a Hugo site file
hugo new site fileabc
(This will create a hugo website file, here we gave the name “fileabc”)
cd fileabc
(make fileabc as working directory)
3.2. Add Theme
Themes are collections of Hugo layouts that help you in building your site.
If you wish to use a theme, you may either build one for yourself or use one from the Hugo community.
- The first step is to select a theme for your website. Go to the official website to see a section fully dedicated to this. Refer to https://themes.gohugo.io/ to see if any themes strikes your mind.
- Here I’m using a theme named hugo-coder: https://github.com/luizdepra/hugo-coder
For that
git init
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder
OR
cd themes
git clone https://github.com/luizdepra/hugo-coder.git
cd ../
3.3. Copy all files and folders in name_of_your_file/themes/hugo-coder to fileabc
(you may use command if you are in Linux)
cp -rf themes/hugo-coder/* .
(note the FullStop in the end)
3.4. Copy all files in fileabc/exampleSite to fileabc
(If you are in linux you may use the command)
cp -rf exampleSite/ .
< Make Sure You Are In Your main folder a.k.a fileabc>
3.4.1. Generate Static website locally for testing
(These are the main commands while building site with Hugo)
hugo
hugo server
(search in browser http://localhost:1313 and you can see its present format of the website created by the creator of theme)
3.5. Tailoring according to your need:
3.5.1 Open VS Code
3.5.2. Open the site file a.k.a fileabc
3.5.3.1 Make changes:
baseURL = “http://localhost"
title = “the_title_you_like”
.
.
.
.
author= “your_name”
in contents starting with:
[[params.social]]
add your social media links in
url = “social_media_link_here”
OR (may change according to the theme you have selected)
link = “social_media_link_here”
<< 3.5.3.addon. >>
— — — —
If you would like to remove any of the sub-files use # before everything related.
Consider that, you want to delete the file named Testimonial,
for that, go to config.toml
[[Languages.en.menu.main]]
name = “Testimonial”
pre = “#”
url = “testimonial”
weight = 5
TO
#[[Languages.en.menu.main]]
#name = “Testimonial”
#pre = “#”
#url = “testimonial”
#weight = 5
OR
delete the whole lines of related content, if the local build returned an error use the most powerful command i.e: ctrl+Z a.k.a Undo, and ask the Knowledge-Baba
— — — —
3.5.4. Adding sub-files
<verify that you are in fileabc>
- create file
hugo new *filename*.md (.md is a must)
if you wish to remove those existing ones, you may use # before that filename or delete that file.
copy your newly created .md file to content/english/blog
And Write your contents:
.
.
.
title: “enter_your_blog’s_heading”
date: “(It_is_prefilled_with_time_of_file_creation)”
image: “images/name_of_image.jpg”
( paste the image in static/images folder and give the directory to the image with extension in place of name_of_image.jpg )
slug: “ ”
(Enter_Your_Contents_Here)
.
.
.
(for making it eye-catchy use markdown_languages)
- If you are still confused about this; we have been using this in WhatsApp.
i.e:
** To make a text bold
and
_ _ To make the text italic
To check for errors use the commands
hugo
hugo server
( search in browser http://localhost:1313 and you can see the present format of the website you have made. )
4. Deploy your website in GitHub
4.1.1 Create Repository in GitHub
- Go to your GitHub Account(in browser)
- SignIn
- Create New Repository ( click on Green “New” icon, seen in the left side box)
- 1. Repo name should be <username_in _github>.github.io
- 2. Unmark “Add a README file”
- 3. Make the repository public
4.1.2 In site File
In config.toml
edit baseURL = “http://localhost"
TO
baseURL = “/”
4.2. goto Terminal (in VS Code OR Outside)
4.2.1 Switch the Folder to public
(if you are using Terminal Outside)
cd name_of_your_file
cd public
4.2.2 Initialize a Git repository in the public folder
git init
4.2.3. Add the files to Staging Area
git add .
4.2.4. Enter a commit message
git commit -m “first commit”
4.2.5. Checkout main branch
git branch -M main
4.2.6. Add remote
(Setting up remote is only for identifying the destination where the file is to be uploaded)
git remote add origin <link_to_your_repo>
4.2.7. Upload the code
git push -u origin main
(It will ask for UserName & Password, fill it correctly, and press Enter)
4.3. Enable GitHub Pages
From the homepage of your repository, choose Settings -> then select Pages from the sidebar on the left. Underneath the Source, choose the “main” branch.
Go to the GitHub Pages section again, and you should see a line “Your site is ready to be published at https://xxxxxx.github.io.”
- Click on that link to see your website
Voila, the website is served ready.
If you got something to convey to me, connect me via LinkedIn
