Contents

1. General Information
2. Getting Started

• Requirements
• Steps
• Step 1
• Step 2
• Step 3

3. Setting up config.toml

• Params Section

4. Self’s Sections
5. Front-Matter
6. SELF Features

General Information

Self’s design was inspired by exploring various minimalistic themes for HUGO. It is a responsive, two-column theme where, the left column operates as three separate sections in one, i.e. Header, Navigation Menu and Footer, and the right column, operates as the main body where the content exists.

Self was built using Semantic-UI CSS framework for its styling and Javascript for the various interactive features that it supports.

Getting Started

Building your website with HUGO and Self is a relatively easy process. Even if you are not a very technical person, if you follow the steps described here, you’ll be able to build your website successfully.

Requirements

• HUGO
• Git (optional)

Steps

Notice that this guide assumes that your operating system is Windows. However, many of those steps could apply to other OS’s as well with some slight deviations. If you’re not using Windows, I would suggest visiting the official Installation Guide from HUGO’s docs for more help.

Step 1

First, you need to download HUGO for your operating system. Visit the link from the requirements above and download the latest release. Then, extract the compressed file on its own folder. This folder now should have the following three files:

1. hugo
2. LICENSE
3. README

Next, rename that folder to “hugo” and move it to a directory where your OS user has easy access. In the case of Windows, such a directory is the drive in which the OS is installed, typically the C:\ drive. Of course this assumes that your Windows user has administrative rights.

After you’ve moved the folder, you need to set global access to that directory so that it can be accessed from anywhere on your computer from within a terminal window (command prompt on Windows or cmd).

I believe this step to be the most “difficult” part of the installation process for non-technical people and it is also different in each OS, so, if you’re not on Windows, you should check the installation guide from the link at the beginning of this guide to see how you can do this on your OS.

To install hugo globally on Windows you should do the following:

• Right click on “This PC” and select properties.
• On the left, click “Advanced system settings” and then “Environment Variables” at the bottom of this tab.
• On this window, double-click the “Path” variable under the “System Variables” panel and then click “new” and add the path of the hugo directory. If you’ve followed the steps correctly so far, this path should be “C:\hugo” without the quotes.
• Lastly, click OK on all opened windows and restart your PC to save and apply the changes.

This was basically the “global installation” process of Hugo.

If you open command prompt (click start and type cmd) and type the following command:

cmd
hugo version

you should be able to see the version you have downloaded, in which case you can move on to the next step. However, if for some reason the command was not recognized, perhaps you might have missed some part of the step. In that case, you can either repeat it or you could check the aforementioned installation guide.

Step 2

The first step was technically the installation of Hugo. In this step you’re going to build the structure of your site. This can be done very easily by opening again command prompt (or terminal for other OS’s) and typing the following two commands:

The first command, changes the directory to your Desktop for simplicity. Just make sure that when you type it, to change the part <your windows user name> with the name of your Windows user. For example, if your windows user name is John, the path then should be C:\Users\John\Desktop. (For very non-technical users, this name is basically the one that you see when you login!) Notice that in this case the quotes are required, so make sure to copy it as is and just change the name of your user!

cmd
cd "C:\Users\<your windows user name>\Desktop"

After you’ve changed the directory, just type the following HUGO command and replace the <name of your site> with the name that you want to call your site.

cmd
 hugo new site <name of your site>

If everything went well, you should see on your terminal the following message:

cmd
Congratulations! Your new Hugo site is created in C:\Users\<YOUR USER's NAME>\Desktop\<NAME OF SITE>.

Just a few more steps and you're ready to go:

...

At this point, you should also be able to see on your Desktop a folder with the name you typed in the second command.

Step 3

If you open the folder of the site you just created, you’ll notice that it contains the following:

archetypes

content

data

layouts

static

themes

config.toml

These files mean that the site’s main structure is built and it’s time to download Self and build your website.

Open (or navigate via the cd command) the themes folder and here, if you have Git installed on your computer, you can clone Self by typing:

Git Bash or Cmd
git clone https://github.com/NtinosNG/self.git

If you don’t have Git**, you can either use the link from the requirements to download it and clone it or, if you are not a technical person and you just simply want to install the theme just click Download Zip** from the repository, extract the zip file and make sure to rename it from self-master to self (all letters lowercase).

Now that you have downloaded (or cloned) Self, navigate inside its folder and copy the content folder and the config.toml file from the exampleSite folder, and paste them back on the root folder of your site to replace the existing ones. This is important as the content folder contains the files that define self’s front-matter and the config file contains some settings that you have to set up for your site as well as some features that you might want to enable or disable.

At this point, you are ready to build your site. All that is required is to open cmd again (or Git Bash) and type the simple command:

Git Bash or Cmd
hugo

After typing Hugo, you should see the following:

Git Bash or Cmd
Building sites …
| EN
+------------------+----+
Pages | 13
Paginator pages | 0
Non-page files | 3
Static files | 41
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0

Total in 1606 ms

This means that your site has been successfully built and you will also notice that a folder named public appeared on the root folder. This folder contains the HTML pages of your website that Hugo built for you. One last thing you can do now, is to type the following command to preview the website on a local server:

Git Bash or Cmd
hugo Server

After typing this command you should see something like that:

Git Bash or Cmd
Building sites …
| EN
+------------------+----+
Pages | 13
Paginator pages | 0
Non-page files | 3
Static files | 41
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0

Total in 60 ms
Watching for changes in C:\Users\<YOUR USER's NAME>\Desktop\<YOUR SITE's NAME>\{content,data,layouts,static,themes}
Watching for config changes in C:\Users\<YOUR USER's NAME>\Desktop\<YOUR SITE's NAME>\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

This means that the local server is running and if you open your browser and visit localhost:1313 you will be able to see a website exactly like this one except that it will not have any contents available.

This was the successful installation of Self.

Setting up config.toml

Now that you have built the website, the first action that is required to start setting up your site by editing the configuration file “config.toml”. This file contains some required settings and some other optional ones which will enable or disable some features that you might want to use or not. This section, analyzes these settings in detail.

baseURL = “https://example.com”

This defines your site’s URL root folder. Make sure the domain added here is the correct one as Hugo will generate all the links in your site relative to the baseURL typed here.

theme = “self”

This defines the theme that is used, which in this case is the one presented here!

languageCode = “en-us”

This defines the default language. Self supports only English for the time being. Leave this setting as is.

title = “Self”

This defines the <title> tag that will be added on the <Head> tag of your site.

copyright = “&ampcopy; Your copyright”

This defines the copyright that will be displayed on the footer. The © entity displays the copyright symbol.

paginate = 3

This setting sets the number of where pagination starts. By default it’s 3 and it’s the suggested one for this theme, but, it can be whatever you want.

googleAnalytics = " "

Self supports Google Analytics. In order to use it, you must create an account that will provide you with a tracking ID. When you get this tracking ID, just add it between the quotes. Finally, enable it by changing the analytics parameter at the [params] section to true.

disqusShortname = " "

Self supports Disqus for commenting. To use it, you must create a free account that will provide you with a “shortname”. When you get this shortname, add it between the quotes and enable it by changing the comments parameter at the [params] section to true.

[params] section

analytics = false

comments = false

As mentioned before, these settings should be set to true after the tracking ID and the Shortname are added to enable Google Analytics and Disqus Comments services respectively.

year = “true”

If true, this setting shows the current year after the copyright you have defined and it changes automatically every year.

HomePosts = “disable”

By default the homepage is the About page, however, if you want you can enable posts on the homepage as well, just remove the disable from this parameter. Notice, that if homeposts are enabled it will show all the posts from all sections including those that have been made on the index page.

postsCounter = ""

This setting enables a Posts and Projects counter after the section’s title. By default it is blank which means that it is enabled. To disable it, just add disable between the quotes.

cvCounter = “disable”

This is setting does exactly the same thing as postsCounter but on the CV section. By default is disabled but if you want to enable it just remove the disable between the quotes.

author = “Your name”

This defines the name of the main author of the site. As Self is targeted as a portfolio/personal-site theme, this name will probably be the site’s owner’s name.

profileImage = “/uploads/profile.png”

This defines the path for the profile image. The default folder for all the uploads is the /uploads/ directory inside the content folder. After the initial installation, there should be a profile.png which, as it can be seen, it’s the image defined by default on the profileImage parameter. Thus, in order to add your own image, just add the image on the uploads folder and change the /profile.png on profileImage to the “name-of-your-image.extension” after the /uploads/.

siteName = “Self Theme (title)”

This defines the main title that will be shown on the main menu below your profile image.

description = “Build a website for yourself! (description)”

This defines a description of your site after the main title.

AllDisabled = “false”

linkedin = “#”

github = “#”

facebook = “#”

instagram = “#”

twitter = “#”

snapchat = “#”

mail = “#”

These parameters define the links of the corresponding social sites that you might want to appear on your menu section. If you don’t want any specific account just add “disable” to disable it. To disable all the social buttons just change the AllDisabled variable to “true”.

cv =“true”

This parameter disables the Curriculum section for those who don’t want it and removes the “Curriculum” button from the navigation menu as well.

tab1 = “Experience”

tab2 = “Education”

tab3 = “Skills”

tab4 = “Awards”

tab5 = “Interests”

These parameters define the main Tabs for the CV’s tabular menu on the Curriculum section. By default the tabs are:

• Experience
• Education
• Skills
• Awards
• Interests

as those are the most usual categories found on CVs. However, those could be whatever you want, that’s the point of having this dynamic CV section! For example, if you don’t have Awards but you have attended lots of Seminars you can just change that tab accordingly.

The whole section supports both list and single pages so you can expect the same experience as with the other sections. Finally, a tab will appear on the section only if you have defined some content to it. For more details, check the “Front Matter” sub-section of the “Self’s Sections” section on this post.

Self’s Sections

As it can be noticed, Self consists of 4 main sections:

1. Home / About
2. Posts
3. Projects
4. Curriculum

–

The Home page is also used as the About section. However, you can use it as List page by enabling Homeposts on the config.toml file. In order to edit the About section, all you have to do is to edit the _index.md file inside the content folder and replace the text “Write something about yourself." with your own.

–

The Posts section, can be used as a blog section where you can post whatever you want. You can create a new post by opening cmd (or Git Bash) on your site’s folder and typing the command:

Git Bash or Cmd
hugo new post/"NAME OF YOUR POST.md"

Notice that that the quotes are required in order to allow spaces and prevent any other text-based errors from occuring. Moreover, the .md extension at the end is also required as all the content files for HUGO are markdown. You can edit any post you have created by navigating the post folder inside the content folder.

–

The Projects section is identical to Posts section with the only difference that every project will have a thumbnail image on the projects' list page. To create a new project just type the following command similar to posts:

Git Bash or Cmd
hugo new project/"NAME OF YOUR PROJECT.md"

By default, each project you create will get as thumbnail image the “placeholder.jpg image that exists on the uploads folder inside the content folder. You can change that image by adding your own and setting up the path at the corresponding parameter at the front-matter of each project. For more details check the Front-Matter section on this post.

–

Finally, the curriculum section provides a tabular approach for a dynamic cv. The default tabs are the ones defined in the config.toml file but they can be whatever you want. To create a new curriculum post you should type:

Git Bash or Cmd
hugo new cv/"NAME OF YOUR CV POST.md"

The name for your cv post could be based on the tab that it aims for. For example, if you want to add a new post for the Experience tab, it could have the name of a job position such as “Software Developer.md” while a post for the Education tab could be named after the institution of your studies such as “University College London.md”. Notice that after you have created a CV post, it will not be visible immediately on the curriculm section. This is because you need to setup the file’s front-matter accordingly, in which, you will also define the type of tab that it belongs to. See the Front Matter section for more details.

Front Matter

This section discusses the front matter for Self’s individual sections: About, Posts, Projects and Curriculum. Front matter is basically a way to define specific metadata for each markdown file that is created. HUGO supports some predefined variables for the front matter but there is also the option for the user to define their own. Self has both predefined and user-defined variables which they will be explained in this section. For more information about front matter visit this link.

Each markdown file that is created for all sections (as explained in “Self’s Section” before), it will contain front matter specifications that will be enclosed by 3 dashes: --- because the default format is YAML. Whatever is added after the last 3 lines it will be the content of each post. If you take a look inside the content folder you will notice that there are 4 folders, namely, cv, post, project and uploads as well as a file named _index.md.

Apart from the content folder, all the other folders also contain an _index.md file except for the uploads folder which contains all the media for your website. These _index.md files define the front matter for each section and every newly created markdown file will also “inherit” each section’s corresponding front matter. So, for example, a markdown file created in the cv section will have the same front matter as the _index.md file inside the cv folder etc.

The rest of this section explains the front matter for each section.

–

ABOUT

For the ABOUT section there is no need to create any markdown files as the only file that requires editing is the _index.md file inside the content folder. The front matter here is:

title: “About”

postType: “About”

subtitle: “This is a subtitle.”

draft: false

description: “Description was not provided.”

tags: [ ]

categories: [ ]

Write something about yourself.

If the about section is going to be used as is, the only part of the front matter that might require editing are the subtitle for adding an optional subtitle and the content, which is where the “Write something about yourself." text is. However, if the “Homeposts” setting is enabled in the config.toml file, some changes are required. Specifically, the title and postType should change to “Home”. This is required in order to show the posts counter at the home page and to change the icons of home posts from info circle icon to a home icon.

The rest of the front matter is going to be similar to the POST and PROJECTS sections as well. With description you can add a description for each post, with tags and “categories” you can define specific tags and categories for each post in the form:

tags: ["tag1", "tag2",..."tagN"]
categories: ["category1", "category2",..."caterogryN"]

and finally with draft, you can hide each post before you publish it depending on whether its true or false.

–

POST

The front matter for the POST section is:

title: “Posts”

postType: “Post”

subtitle: " "

date: 2019-06-05T12:00:04+03:00

draft: false

description: “Description was not provided.”

tags: [ ]

categories: [ ]

As it can be seen, it’s almost the same as the ABOUT section with the only difference that in this case there is a date variable and each separate post will be its own markdown file. The title, date and the postType are the only variables that will have values that will be defined upon the creation of each markdown file. For example, a newly created post named test.md will automatically have the title test, the date of its creation and postType value “Post”. All the other variables can be optionally filled in. While title and date are automatically filled in doesn’t mean that they cannot be edited afterwards as they are predefined HUGO variables. However, the postType was defined specifically for Self and it is vital to remain as is because its job is to define the type of the post and it is used from the navigation buttons to direct the readers accordingly.

–

PROJECT

The front matter for the PROJECT section is:

title: “Projects”

postType: “Project”

subtitle: " "

date: 2019-06-05T14:10:23+03:00

draft: false

img_preview: “uploads/placeholder.jpg”

description: “Description is not available.”

tags: [ ]

categories: [ ]

In this case, everything that was mentioned in the POST section before apply here as well. The only difference with PROJECT’s front matter is that there is an img_preview variable which defines a thumbnail image for each separate PROJECT post. This addition aims to distinct simple posts from projects. The placeholder.jpg image is in the uploads folder and it is used as a default thumbnail image. However, if you want to replace it, you can either add another image with the same name, or you can change the default path from the _index.md file inside the project folder to uploads/“name_of_your_image.extension”.

–

CURRICULUM

The front matter for the CURRICULUM section is:

title: “Curriculum”

postType: “CV”

subtitle: " "

tabTitle: " "

startFinishDate: " "

date: 2019-06-05T14:10:23+03:00

moreContent: false

draft: false

location: " "

description: “Description appears only if moreContent is true.”

The CV section is the only one that has some different front matter variables than the others. Moreover, some similar ones might work a bit differently as well. The most important variable for CV posts is the tabTitle as it is used to define the TAB category that each post belongs to. These categories are the ones defined in the config.toml file. For example, a CV post named Senior Developer.md could be used to define a JOB on the Experience tab. However, if it is not defined in the tabTitle variable the post will not appear in the section. Therefore, this variable must always be filled in. startFinishDate, moreContent and location, are some of the CV specific variables. The startFinishDate can be used to define a period of time for something such as a job for example. The location variable, similar to startFinishDate, is used to specify a location.

Lastly, moreContent, is boolean variable and it is used alongside the description variable. By default it’s set to false and it affects the description variable as it can be seen from its default message: “Description appears only if moreContent is true.". What this means is that, each CV post should get its content on the content section after the last 3 --- dashes and the post itself will be LISTED on the CV section without a navigation button that will lead readers to a SINGLE page for reading it. However, if moreContent is set to true, the description’s default message will appear on the CV section along with a “READ MORE” button and whatever content is written in the content section could be read from a SINGLE page after this button is pressed.

This convention was made because, a CV post such as a job position, might not have large description and thus, there is no need to send the reader to another page. On the other hand, there might be a case where you might want to describe something in a more detailed way. In this case, to prevent the page of the CV section from expanding downwards due to large content on some post, this option comes handy. To understand better how this works, check the following GIFs:

SELF Features

This last section shows some specific features that are supported by SELF and some others that sometimes should be considered as obvious!

However, instead of describing them with words, it will be better (and funnier!) to show you! So, check out the following GIFs to see SELF’s features!

This project post presented SELF theme. It explained in detail how to install it and set it up but also, presented its various features. Make sure to check the POSTS section to see all the available posts that present the type of content that is supported.

Thanks for checking out SELF, I hope you like it!