This Website (OUTDATED) 🌐

Preview Image

How I made the website that you are on right now 🪞 🧬

This is an outdated tutorial that I created to demonstrate how I created this website. I will be creating an updated tutorial for the current incarnation of this website, which is still using Hugo to generate the site, but is not using the ‘Terminal’ theme by panr. It is instead currently using a custom theme using only HTML and CSS.

I developed this website on Arch Linux, so my instructions will be specific to that Linux distro. The steps taken will be broadly similar for all Linux distros, but my instructions will be specific to Arch. Firstly, you will need to install Hugo:

sudo pacman -S hugo

Once you have Hugo installed, you will need to create a new website. In this case, the site is called portfolio.

hugo new site portfolio

After you’ve generated your new website, change directories to your new portfolio directory.

cd portfolio

From here, you will generate your index.md file.

hugo new index.md

This will create your index.md file in your /content directory. This will be your site’s home page. Now, open up /content/index.md in your text editor of choice. I am personally using Neovim.

nvim /content/index.md

Configuration of this file will depend on what you want your website to be, but I will show you how it is configured on this website.

---
title: "Portfolio"
---

## My Programming and IT Projects

Here is a directory of my programming and IT projects:

- [🐍 Python Projects](/python/)
- [🦀 Rust Projects](/rust/)
- [🖥️ Web Development Projects](/webdev/)

This creates a title, a header and links to 3 web pages. One for Python Projects, one for Rust and one for Web Development. You’ll notice that the links contain directories next to their name in the source code, such as (/webdev/). These directories will need to be created in the /content directory.

mkdir /content/webdev

From here, you will create an _index.md file in the /content/webdev directory.

nvim /content/webdev/_index.md

In this new file, I simply have a title.

---
title: "Webdev Portfolio"
---

Now, at this point I am creating the page on which you are reading this article. I created a new directory called this_site, but really you can call it whatever you want.

mkdir /content/webdev/this_site

I then created a new file called content1.md in the /content/webdev/this_site directory, but you can call it whatever you want.

nvim /content/webdev/this_site/content1.md

I will only show you a portion of the code from this webpage, as it begins to become repetitive. I’ll note though, that there is a field that reads: cover = screenshot.jpg. This is the preview photo that is at the top of the screen, to do something similar you would just store a file named screenshot.jpg in the /portfolio/static/ directory.

+++
title = "This Website"
author = "Eli Salazar"
cover = "screenshot.jpg"
description = "How I made the website that you are on right now"
+++

## I created this website using Hugo, with the Terminal theme by panr.

I developed this website on Arch Linux, so my instructions will be specific to that Linux distro. The steps taken will be broadly similar for all Linux distros, but my instructions will be specific to Arch.
Firstly, you will need to install Hugo:
```bash
sudo pacman -S hugo
```
Once you have Hugo installed, you will need to create a new website. In this case, the site is called *`portfolio`*.
```bash
hugo new site portfolio
```
After you've generated your new website, change directories to your new *`portfolio`* directory.
```bash
cd portfolio
```
From here, you will generate your *`index.md`* file.
```bash
hugo new index.md
```
This will create your *`index.md`* file in your *`/content`* directory. This will be your site's home page.
Now, open up *`/content/index.md`* in your text editor of choice. I am personally using Neovim.
```bash
nvim /content/index.md
```
Configuration of this file will depend on what you want your website to be, but I will show you how it is configured on this website.
```md
---
title: "Portfolio"
---

## My Programming and IT Projects

Here is a directory of my programming and IT projects:

- [🐍 Python Projects](/python/)
- [🦀 Rust Projects](/rust/)
- [🖥️ Web Development Projects](/webdev/)
```

I’m sure you noticed the litany of triple backticks ``` throughout the code. This is how code blocks are implemented. You simply type the triple backticks followed by the programming language you’re using, write the code, then end it with triple backticks to end the code block. To show those triple backticks without ending my own code block, I had to wrap the last code block in quadruple backticks ````. Anyway, now that I’ve demonstrated how to create webpages, now I will show you how I implemented this Terminal theme that you are seeing. Before you can even generate your website and view it, you will need a theme. You can create your own theme and it is a simple process, but I am going to show you how to get the theme that I am using. I found this theme at https://themes.gohugo.io/, there are many nice looking themes on that site but Terminal is what stuck out to me. In your terminal, run the following 2 commands:

git init

git submodule add https://github.com/panr/hugo-theme-terminal.git themes/hugo-theme-terminal

This will install the Terminal theme as a submodule in your /themes directory in a new /hugo-theme-terminal directory. Now, in the root directory of this website (/portfolio/), open up config.toml in your text editor.

nvim config.toml

At the bottom of the file, you will add a new theme field:

theme = "hugo-theme-terminal"

After saving, you will be ready to generate your website and start the server so that you can view it. In your terminal, enter the following command:

hugo

This will generate the site. Now, enter this command:

hugo server -D

This will start the Hugo web server. You can view the site by opening up a web browser of your choice, and typing the following in the URL bar:

http://localhost:1313

You should see your website now. The final step I will show you will be changing the color of the Terminal theme, I have chosen green. Open your config.toml file again.

nvim config.toml

Add the following field:

[params]
  themeColor = "green"

There are several parameters that you can add to the [params] field, but this is all that you’ll need to change the color. So that’s it, Hugo makes the process of static site generation very simple and straightforward. I hope that you found this article useful, thank you for reading.