Welcome to the second part of 14 Steps To A Career-Boosting Portfolio Interactive Course - I'm excited to start working with you on this!
If you missed it, read the announcement here!
Table of Contents
- Introduction - Why Should You Have A Portfolio?
- Start Your Portfolio Faster With Hugo
- How To Present Yourself In A Portfolio?
- How Do You Publish Your Site Online?
- Yes, It's Time To Write Your First Blog Post
- How To Polish And Publish Your Blog Post
- Guide To Spreading Your Online Presence
- An Introduction To Building Your First (Tiny) App
- Ideate And Choose A Stack For Your App
- How Do You Analyize And Plan An Application?
- A Guide To Project Setup Using Web Technologies
- Getting Your Little App From Idea To Realization
- Show Your App To The World By Deploying It
- A Few Words About Maintenance And A Goodbye
Lesson 2 - Start Your Portfolio Faster With Hugo
In this lesson we're going to get you started with Hugo - a static website generator. At the end of the lesson, you'll have a working portfolio and a blog on your local machine.
"Why not WordPress?", I hear you ask. Mainly because it requires PHP, a database and various security tweaks to get it to work good. Also, need to constantly update it and all plugins so you don't have any security vulnerabilities.
Hugo
On the other hand, we've got Hugo, which is one of many static website generators. It offers similar functionalities as WordPress - themes, widgets, templating etc., but it doesn't require PHP or a database to work.
The way Hugo works is this: you tweak a few configuration files that tell Hugo how to work, and you write your content in Markdown. Don't worry if you've never used Markdown, it's really easy to get into. Then, you run a Hugo command, and it builds all your configuration and content into static HTML pages. Now you can just copy those pages to a web server, and it will work! Hooray, no complicated server setup!
Having static HTML pages instead of PHP generated site is really beneficial to small / medium sites and blogs. It's much faster for a web server to serve HTML pages than to render HTML using PHP and pull content from the database every time someone visits your site. It uses less server resources as well, so you can have a cheaper server and still get great performance.
Installing Hugo
Let's get started with Hugo! Installing Hugo is easy, just follow the instructions from this page - https://gohugo.io/overview/installing/.
Basic Concepts
So how exactly do you get started with Hugo? Let's explore the basics, so you get the idea, and if you need to, you can always check their documentation for more details. Hugo's documentation is really good, there are also some videos that explain stuff there.
Global Configuration
You can control global settings of your website by editing config.toml file in the root of your project. It's a file that holds global configuration that is used across the site. Themes usually add some specific settings there, but there some that are common across every Hugo website.
Markdown
In Hugo, you write your content - blog posts, info about yourself, etc. in Markdown files. If you're not familiar with Markdown, it's a really simple document format where you can use a certain syntax to style your text. You can add titles, subtitles, bold text... stuff that you'd use a program like Word to do.
Take a look at this website that provides an overview of Markdown syntax.
Markdown Cheatsheet
Hugo takes those Markdown files, and turns them into HTML pages, combining it with HTML templates that tell the website how to look. The end result is a folder containing all the generated files, ready to be uploaded to a Web server.
Choosing a Theme
Now that you've got your Hugo website running on your computer, it's time to choose a theme. There's a lot of themes to choose from, and you can get find one you like on this website - http://themes.gohugo.io/. For example, this theme is tailored for portfolios.
When you've chosen a theme, you can follow the instructions at Hugo's Docs on how to install it on your website.
Templates
If you want to edit how the website looks or which content is displayed, you can edit the .html templates. There are a few basic building blocks that you can use to achieve what you want. You will see a lot of curly braces in templates, like this:
<div>{{ .Title }}</div>
That means that Hugo will take what's inside the curly braces, find that variable, and insert it in that place when it compiles your site. It's a placeholder saying which value should go there.
The . inside the curly braces represents current page scope. That way we tell Hugo to try to find the Title variable for this particular page. And pages have a lot of built in variables that you can use like this. You can see the list here.
Read more about Hugo templates here: Hugo Docs: Templates
Adding more useful things
Google Analytics
If you want to track how users use your website, you can add Google Analytics. You can see a pretty nice guide on setting it up here - Absolute Beginner's Guide to Google Analytics . But ignore the part about WordPress.
When you've set it up, you'll just need to get the number that look like this UA-XXXXXXXX-X, and put it in your config.toml file inside your Hugo project.
...
googleAnalytics = "UA-XXXXXXXX-X"
...
And that's all you need to do! Hugo themes have Google Analytics support built in, so as soon as your enter your UA- number, it will be functional.
Comments
Hugo themes use Disqus for providing comments functionality. Disqus is a popular service that manages comments. You just add it to the website, and BAM, you have comments. So if you want to have comments on your website, go to Disqus and create an account for yourself.
Setup for Disqus in Hugo is similar to Google Analytics. You will need your Disqus shortname (kinda like a username), and you'll need to enter it into the config.toml file. As all Hugo themes support Disqus, it will be functional right away. But don't worry if it won't load while on your computer. Disqus only really works once you put it on your server.
...
disqusShortname = "XXXXXX"
...
Publishing to GitHub
This step is optional, but I think it would be highly valuable for you, especially if you've never used Git before.
Git is program that you use to keep track of versions of your project. So no more files named "File 2", "File 2 final" and "File 2 final latest". A version control system like Git (other popular ones are SVN and Mercurial) is used at virtually every software (and non-software) company on Earth. It's that important.
GitHub is a website that lets you publish your Git projects and share them with others. It is a de facto hosting portal for Open Source projects. You can use it for free if your projects are Open Source. What does that mean? If you don't mind putting your code out in the open, you can use GitHub for free.
And if you're concerned about publishing your website's source code online, don't be. There's nothing to be afraid of. No one will steal your code. No one will make rude comments about your programming skills. Probably no one will even notice it. There are literally millions of Open Source projects on GitHub, and most are of personal nature. Faculty projects and exercises, side projects or anything else you can imagine.
You can watch this short and informative quick start tutorial about Git - it also covers GitHub usage - Git Video Tutorial.
And here's a nice website with Git reference - http://rogerdudler.github.io/git-guide/
One more reason to publish your portfolio on GitHub is so that you can ask for help if you're stuck. You can ask me or someone else to take a look at the code, discuss it there, and even contribute and solve the problem.
So create an account on GitHub and give it a try. You might like it!
Assignments
First thing for you to do is to install Hugo on your machine.
Then you'll create a new Hugo website following the documentation at https://gohugo.io/overview/quickstart/.
Next, you will choose and install a theme.
As a final and optional step, you will create an account on GitHub and publish the project there.
In response to this post, send me a link to the theme you chose and a link to the GitHub repository if you created one.
Take care and stay Open Source!
What's up next?
Next we talk about how to present yourself on your portfolio - and fill it up with some content!
The next lesson is scheduled for Tuesday, September the 19. 2017.
Thanks!
Drop an upvote if you liked the article, share if you believe it will be of help to someone. Feel free to ask any questions you have in the comments below.