prereqs:

1. find this usb and install linux on your computer (plug the usb in, access the boot menu (most likely f12, delete, or escape), as set the priority of the usb to the highest)

2. install either the ubuntu or linux mint iso following the steps on the usb (or whatever other distro if you’re good with it)

CLICK INSTALL ALONGSIDE WINDOWS BOOT MANAGER. DO NOT REMOVE WINDOWS (unless you have another laptop for fusion and stuff)

3. follow the instructions in installing linux. boot into linux when done (you may have to go to the boot menu and change the boot priority to “ubuntu” or whatever the linux version is)

4. now that you’re on linux, open terminal and install hugo using sudo apt install hugo (enter your password when prompted)

5. run hugo version to ensure you’re on the latest release

6. if you are not on the latest hugo release check here and install the hugo_0.150.0_linux-arm64.deb version and follow instructions

7. install git using sudo apt install git

8. by now you should have hugo and git installed. if so, start looking for a theme you want

9. go to this website and click “download”.

NOTE: this guide assumes you are using papermod. each theme will have different ways to do things. read the documentation of the theme if you want a different theme.

10. you should be on their github now. keep this tab open

setting up your website

1. to create a hugo file, open your terminal and run hugo new site *your website folder name*

2. run cd *your website folder name*

if you don’t see something like this, then you did something wrong

3. run git init and git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1 url is different if you use a different theme

4. from here, type ls which should show you all your files.

4a. Optional, but go into themes folder using cd themes and then ls to ensure that PaperMod is installed correctly

5. open the hugo.toml file with nano hugo.toml or code hugo.toml if you have visual studio code installed

6. add the line theme = 'PaperMod' under title

7. close out of the terminal using ctrl+x and click y to save the file and enter to close the nano. you should be back to terminal in your website main directory

8. run hugo server we will populate the page later. if there are errors, ensure you followed all the steps closely.

NOTE: hold control and click on the http://localhost:1313/ (numbers may differ) to open the website

9. you should see this. if so, move on to the next part

populating home screen and everything else

1. go back to your hugo.toml file by running nano hugo.toml

2. copy the following into your hugo.toml file. you may have to use ctrl + shift + v

[params]
  [params.homeInfoParams]
      Title = "Hey, I'm *insert your name here* 👋"
      Content = "  *insert a short description about yourself*  "

[[params.socialIcons]]
  name = "github"
  url = ""

[[params.socialIcons]]
  name = "linkedin"
  url = ""

[[menu.main]]
  identifier = "home"
  name = "Home"
  url = "/"
  weight = 10

[[menu.main]]
  identifier = "posts"
  name = "Blog"
  url = "/posts/"
  weight = 20

[[menu.main]]
  identifier = "about"
  name = "About"
  url = "/about/"
  weight = 20


[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

2a. if you want to add more social links (to your email perhaps, view this website) and copy and paste everything in one of the [[paramas.socialIcons]] but change the name and url. similiarly to the [[menu.main]] stuff.

3. rerun hugo server to ensure that your website works. if there is an error double check everything. you should something like this.

making blog posts and other directories

if you tried clicking on the “about” or “blog” section, you won’t see anything. to fix this, we will create these directories with a blog post

1. on your terminal in whatever you named your website folder (exampleSite in my case) run hugo new posts/title-of-article.md. replace title-of-article with your title.

NOTE: this is how you will create blog posts from now on. just change the title each time. optionally, open your file manager and create a folder to store each blog for each year

2. open a new terminal window and navigate to your folder and run hugo server. don’t touch this terminal from now on as it will auto-update itself whenever you make an update

3. open your blog section on your website. you should see something other than a 404 error this time.

4. to populate this, go to the terminal window that isn’t running hugo server. from here, go to your content folder with cd content then go to posts folder with cd posts

5. run ls to see all your files, and then run nano title-of-your-article.md

6. change draft = true to draft = false and put a title to your first article

NOTE: some may have — , some may have +++. DO NOT CHANGE THIS AS IT WILL BREAK YOUR SITE

7. refer to the first blog post titled “hugo blog post guide” to see all the custom things in a hugo website

about page

1. go back to your original folder (that you made when you ran hugo new site your site name) and run in terminal hugo new about.md

2. open that file by doing cd content and nano about.md afterwards.

3. copy and paste the following code

+++
title = "About Me"
draft = false
+++
<style>
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 2rem; 
    align-items: start; 
    margin-top: 2rem;
}

.about-text {
    min-width: 0;
    align-self: center;
    margin: 1rem;
}

.about-photo {
    align-self: center;
}

.photo-placeholder {
    width: 100%;
    aspect-ratio: 7 / 10; 
    background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.photo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-text h2 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.about-text p {
    line-height: 1.8;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }
    .about-photo {
        justify-self: center;
        align-self: start;
        width: min(100%, 320px);
    }
}
</style>

<div class="about-grid">
    <div class="about-text">
        <p>  write a little about yourself here  </p>
        <p>  write a little about yourself here  </p>
        <p>  write a little about yourself here  </p>
    </div>
    <div class="about-photo">
        <div class="photo-placeholder">
            <img src="https://www.shutterstock.com/shutterstock/photos/238415209/display_1500/stock-photo-full-body-young-man-posing-full-body-in-the-studio-238415209.jpg" style="width: 100%; height: 100%; object-fit: cover; border-radius: 10px;"> 
            replace url with a photo of yourself using /*photo name* . PUT ALL IMAGES IN STATIC (optionally, create a new folder in static to separate images by blog post / years. if so, do /(name of your new folder)*photo name* )    
        </div>
    </div>
</div>

---

*A NOTE IF YOU WANT*

4. save the file using ctrl + x, y, then enter to exit nano

5. navigate to your about section and it should look like this:

6. go back to the about.md file and edit the <p> and change the image url to be an image of yourself.

7. with this, you’re ready to turn it into a real website

pushing to github

NOTE: this will be how you create blog posts and push them to your live website

1. go to github and create a repository for your website. name it whatever you want. click on create repository when done.

2. copy the url of the page it brings you to (for example, this is mine) https://github.com/destabilized/hugo-tutorial-site

note: depending on your github username and your repository name, the url will be different

3. in your terminal, cd into your folder with your website

4. type git init and click enter. on the next line, type git remote add origin https://github.com/destabilized/hugo-tutorial-site (your url here)

note: you may have noticed that the folder has changed from exampleSite to test-site. ignore this. if you named your website website then cd back into website

5. go back to your terminal on the directory of your folder and run hugo then git add . (yes there is a period there)

6. run git commit -m "initial commit" (the text in quotes can be anything. since this is your first commit it’s good practice to have it as initial commit)

7. run git push origin master and enter your github username.

8. when prompted to enter your password, use your github PAT token. (search up how to do this if you need to. make sure it has access to this repository) NOTE: you will need this everytime you push to git. keep your pat token somewhere so you don’t have to keep regenerating pat tokens

9. refresh your github repository page. you should see that it has been populated with all your files

setting up your website with vercel

NOTE: if you use any other website to host your website, don’t follow this tutorial

1. go to vercel and make an account

2. click the “add new…” button and click project

3. you shoudl be prompted to this screen. connect to your github if you havent to see all your repositories.

4. find your repository, and click import

5. create a vercel team called whatever you want, and change the project name to whatever you want. (this will be your url, so choose something that makes sense). make sure to change your framework preset to Hugo

6. click deploy then continue to dashboard

7. click on the link in domains to ensure everything is correct. if everything is perfect, then your website is done!!!111!!111!

ending notes

1. make sure to always push everything whenever you make an update. things will NOT change unless you push it.

2. your website takes some time to redeploy after each push. make sure to give it time and not relaunch multiple times

3. if you want to edit anything else besides what i’ve told you to, do your own research

okie bai

check out my website