Taiyaki

April 09, 2020

published by: Yonseo

Code2College (building a static website with Zola)

Build a static website with Zola and learn github.

Code2College

What is code2college? Code2College is a career preparation program where volunteers with technical talent teach high school students coding, web development skills, resume building, and interviewing to push them to and through college.

What am I learning?

Students will learn how to build a static website using Zola, how to edit and code in html, markdown, work with templates, upload and use github. If you have no experience coding or know basic html this is for you. Every student should be able to create a website and gain some knowledge of coding to build skills in order to benefit professionally on any career path. This is about YOU the student.

Topics:

  • install Zola, Atom Code Editor
  • build a blog using Zola
  • how to use/create/upload to a repository at github.com
  • how to host your website on github

What am I building?

You can view the live website here: https://yonseo.github.io/zola_blog/.

All the code for this tutorial will be available at https://github.com/yonseo/zola_blog if you need to reference, copy/paste code.

image not found


Getting started with Zola

Why choose Zola to build a website? Zola is a static site generator which means it will generate web pages for the content we create.

What makes it different than other tools such as wordpress:

  • free: no cost / don't need to pay for a server to host your site
  • no database required/ flat file
  • generates static web pages
  • SIMPLE : only tool required to develop is a console and code editor
  • easy to learn

What you need

Before I begin I must mention that I am using a Windows 10 computer and if you are on a MAC or Linux OS your console commands will be different. On the other hand these commands are readily available on getzola.org. The commands are only for installing and creating projects so there are only a few if any and everything else is code(html, markdown, javascript, tera templates) that works the same on all systems.

  • You will need a code editor to type code. Atom is a great open source code editor, you can download at https://atom.io/.
  • If you're on windows 10 you need to install chocolatey. (A package manager for windows)
  • You need gitbash https://git-scm.com/downloads (Required to follow the github tutorial)

5 steps to Zola

1.) Create a folder where you want to save your website files.

I will save mine in the documents folder. You will need to access this folder through the console to install a zola project. To use zola I have to install the tool before I can build anything zola.

2.) Open your console as administrator and install zola by typing: choco install zola, you will need to have chocolatey installed prior to downloading zola. If you're on a MAC type: brew install zola.

3.) It will ask if you want to run the script to install zola then type: Y for yes and N for no.

image not found

4.) Once zola is installed then you can initialize a blog and give it a name. Type : zola init myblog.

It will ask several yes or no questions. Type a name for the website and press the enter key to accept the default values.

5.) Your website is ready. Change directory into your myblog folder. Type: cd myblog. Once we are inside our blog folder we can proceed to serve the website. Type : zola serve and go to the link created in the console.

image not found It's that easy.

image not found


Creating a blog with Zola

Now that we have a website we need to build a blog. You can find the tutorial and code at https://www.getzola.org/documentation/getting-started/overview/.

I will begin by creating the base.html file inside the templates folder with the following code.

image not found

Create the index.html file inside the templates folder with the following code.

image not found

Zola uses Tera templates. All you need to know is that this is one of many template engines that exist. The way it works is it breaks content into parts called blocks and in each of those blocks it injects content. All together these blocks are called templates. You can see this code on a block named content {% block content %}{% endblock %}.

image not found

The first page that will load on our website is the index.html page. This is our homepage. So if we look the code on this page we can see there is a block named extends which will inject all the code from base.html into this block and when base.html reaches {% block content %}{% endblock %} it will inject the content provided in index.html and continue to render the rest of the code from base.html.

image not found


Creating content with Zola

Let's create a content sub-directory by making a folder named blog in the content folder. We need to do this because if we have content for purposes other than a blog (for example an image gallery or portfolio) we can separate that content into folders.

I can start making blog posts but I need a way to list all the blog posts on a single page. Remember the first thing that will load is the index file so create a file named _index.md inside the blog folder with the following code.

image not found

Notice the template name : blog-page.html. We don't have a template named blog-page.html. Actually we don't have any blog templates created. So we need to make some.

Create a blog.html and blog-page.html file in the templates folder. The blog.html is our blog list page and blog-page.html is our single post page.

image not found

To access our blog page we can include a link on our home page. Add the following line of code to index.html.

image not found

Create two blog posts named first.md and second.md with the following code in content > blog These are markdown files and have an extension .md. Markdown makes it easy for us to write content when typing in code.

image not found

You can view your blog at yourwebsite/blog.

image not found


Installing Themes

I'm going to use a pohroro theme. I have ported a theme to work with zola. You can get it at https://github.com/yonseo/zola_blog.

1.) Place the dandelion folder inside the themes folder then open the file myblog > config.toml and change the theme name to dandelion

image not found

2.) Replace the base_url of your website with your github page link. If you don't have a github page link you can create one under the same project in the settings. (How to use Github is covered in this tutorial further down.)

image not found

image not found

3.) Replace any and all links with {{ config.base_url }} This is important because when your website is built it will generate pages with links using your base url. Get in the habit of using this for your links.

image not found

4.) Build your project by typing : zola build in your console. All your static web pages will be created in the public folder. Your live website is made up of all the files in the public folder of your project. We need to upload these files to github but before we can do that we need to make some changes so the website will be live.

image not found

5.) I created a folder named zola_blog and moved the myblog folder inside. Then I copied the files inside the public folder and pasted it inside zola_blog folder. This is how I will upload my project to github.

image not found


Getting Started with Github

Want to know the mysteries of github and why people use it everyday? check out this video on github explained with toys

https://www.youtube.com/watch?v=0pBUfrLi_Q0.

1.) Before you begin head over to https://github.com/ and make an account. You will need it to create and upload repositories. Then proceed to download and install gitbash from https://git-scm.com/downloads. Gitbash is a console tool used to manage files to upload to github repositories. I will be using the windows installation because I am working in windows 10.

2.) Once you finish installing gitbash open the console and cd(cd means change directory) into your project directory.

To do this type cd into your console followed by the folders name that you want to access. You can also see a list of folders available by typing ls. I will navigate to my project folder named myblog. This is the directory that I will upload from.

image not found

Before I continue I want to create a new repository at https://github.com/new.

image not found

Click the clone or download button in green. I want to copy this link because this is the link that I need to upload files to this repository.

image not found

Now back to gitbash. Here is a list of commands and what they do.

  • git init (start a project)
  • git add . (add all files in this directory to the project)
  • git commit -m "First commit" (create a commit)
  • git remote add origin https://github.com/user/your_repository_link.git (add the link to you repo)
  • git push origin master (push the changes to your repo)

image not found

You should see all your files uploaded to github.

image not found

#code2college #code #website

Last edit: 2020-04-12