-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
583bb2d
commit 1ea9a53
Showing
25 changed files
with
716 additions
and
20 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+12 KB
_posts/2020-12-08-making-websites-with-hugo-part-2/.making-websites-with-hugo-part-2.Rmd.swp
Binary file not shown.
281 changes: 281 additions & 0 deletions
281
_posts/2020-12-08-making-websites-with-hugo-part-2/making-websites-with-hugo-part-2.Rmd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,281 @@ | ||
| --- | ||
| title: "Making websites with HUGO, Part 2" | ||
| description: | | ||
| This workshop provides a general introduction to HUGO, a popular open source framework for building websites without requiring a knowledge of HTML/CSS or web programming. HUGO is especially convenient for developing websites for laboratories and researchers, for personal pages or to showcase a particular project. Workshop's content include general concepts behind HUGO, demonstration of the most important features, customization of the website and adapting the template for particular situations. | ||
| authors: | ||
| - Dominique Gravel | ||
| - Guillaume Larocque | ||
| preview: thumb.png | ||
| categories: | ||
| - Technical | ||
| - EN | ||
| date: 12-08-2020 | ||
| output: | ||
| distill::distill_article: | ||
| self_contained: false | ||
| toc: true | ||
| --- | ||
| ## Using a theme | ||
|
|
||
| It is usually a good idea to not modify a template directly, but to have the template and the site in a separate folder. The basic concept when doing this is that the config.toml file of the site has to link to the proper folder of the theme. | ||
|
|
||
| For example | ||
|
|
||
| ```toml | ||
| theme = "template-site" | ||
| themesDir = "../.." | ||
| ``` | ||
| This means that the template site is in a folder named template-site which is a parent folder of the site folder. Other options are possible. | ||
|
|
||
| Usually, all the content should go in the site folder, not in the theme folder. | ||
|
|
||
| ### Exercise 1 | ||
|
|
||
| * Start modifying the theme to make it look like a website for a Zoo. Choose your preferred color scheme by changing the style= parameter in the config.toml file. | ||
|
|
||
| * Feel free to download some images from [unsplash](https://unsplash.com) and save them in the static/img folder. You can then use these images in the carrousel, as "testimonial" photos or as background images for some of the sections. You can add or remove sections from the home page by editing the config.toml file and changing the enable= parameter in the params. segment at the bottom. | ||
|
|
||
| * You can also try to create a new blog entry by adding a new file in the content/blog folder. This file will have a .md extension and will be written in markdown format. | ||
|
|
||
|
|
||
|
|
||
| ## Customizing a theme | ||
|
|
||
| ## Basics of HTML | ||
|
|
||
| Core structure of an HTML page | ||
|
|
||
| ```html | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>This is my great website</title> | ||
| <style> | ||
| .css_goes_here{ | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Main title</h1> | ||
| <div>Main content goes here</div> | ||
| </body> | ||
| </html> | ||
|
|
||
| ``` | ||
|
|
||
| ### A divider, used to organize content into blocks | ||
| ```html | ||
| <div></div> | ||
| ``` | ||
|
|
||
| ### A span, used to organize content or text into sections with different styles. Usually on the same line. | ||
| ```html | ||
| <span></span> | ||
| ``` | ||
|
|
||
| ### A paragraph | ||
| ```html | ||
| <p></p> | ||
| ``` | ||
|
|
||
| ### Headings at different levels | ||
|
|
||
| ```html | ||
| <h1>Main title</h1> | ||
| <h2>Second level</h2> | ||
| <h3>Third level</h3> | ||
| ``` | ||
|
|
||
| ### An image | ||
| ```html | ||
| <img src='img/image_name.jpg'> | ||
| ``` | ||
|
|
||
| ### A link | ||
| ```html | ||
| <a href="https://bios2.github.io">Great website here!</a> | ||
| ``` | ||
|
|
||
| ## Link between HTML and CSS | ||
|
|
||
| ### In html | ||
|
|
||
| id is always unique. Class is not. | ||
| ```html | ||
| <div id="this-div-only" class="this-type-of-div"> | ||
| One great div! | ||
| </div> | ||
| ``` | ||
|
|
||
| ### In CSS | ||
|
|
||
| "#" is applied to id and "." is applied to class. When nothing is specified, applies to tag. | ||
| ```css | ||
| #this-div-only{ | ||
| font-size:24px; | ||
| } | ||
|
|
||
| .this-type-of-div{ | ||
| color: #bb0000; | ||
| } | ||
|
|
||
| div{ | ||
| display:block; | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| ## Basics of CSS | ||
|
|
||
| [W3 Schools CSS reference](https://www.w3schools.com/cssref/) | ||
|
|
||
|
|
||
| Property | Description | Example | ||
| --- | --- | --- | ||
| width, height | width of item | 200px, 200pt, 100%, 100vw/vh | ||
| min-width, min-height | minimum size of item | 200px, 200pt, 100%, 100vw | ||
| color | font color | #aa0000, red or rgb(255,0,0) | ||
| background-color | color of background | #aa0000, red or rgb(255,0,0) | ||
| border-color | color of border | #aa0000, red or rgb(255,0,0) | ||
| border | size, type and color of border | 1px solid black | | ||
| margin | margin around item (top right bottom left) | 1px, or 1px 2px 2px 1px | ||
| padding | padding within item, inside div for example | 10px | ||
| font-family | name of font | Verdana, Arial | ||
| font-size | size of text | 14px, 2em | ||
| display | should item be on the same line, or in a separate block? | inline, block, inline-block, flex, ... | ||
|
|
||
|
|
||
| ### Exercise 2 | ||
|
|
||
| * Create a file named custom.css under template-site/my-site/static/css/. | ||
|
|
||
| * Right-click on elements on the web page that you want to modify, then click on Inspect element and try to find CSS properties that you could modify to improve the look of the page. Then, choosing the proper class, add entries in the custom.css file that start with a dot (.) followed by the proper class names. | ||
|
|
||
| ```css | ||
| .this-class { | ||
| font-size:28px; | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| ## Partials | ||
|
|
||
| Partials are snippets of HTML code that could be reused on different places on the website. For example, you will see that the layouts/index.html file in the template-site folder lists all the partials that create the home page. | ||
|
|
||
| An important point to remember is that Hugo will look for files first in the site's folders, and if it doesn't find the files there, it will look for them in the theme's folder. So site folder layouts and CSS take priority over the theme folder. | ||
|
|
||
| ### Exercise 3 | ||
|
|
||
| * Create a new folder template-site/my-site/layouts. In this folder, create a new file named index.html and copy the content of the template-site/layouts/index.html file into it. Remove the testimonials section from the newly created file. | ||
|
|
||
| * Create a new folder template-site/my-site/layouts/partials. In this folder, create a new file named featured-species.html put the following content into it, replacing the information with the species you selected. | ||
|
|
||
| ```html | ||
| <div class="featured-species"> | ||
| <img src="img/species/frog.jpg" class="species-image" alt="" > | ||
| <div class="species-description"> | ||
| <h3>Red-Eyed Tree Frog</h3> | ||
| <p>This frog can be found in the tropical rain forests of Costa Rica.</p> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| * Then, add this section to the index.html file created above. | ||
|
|
||
| ``` | ||
| {{ partial "featured_species.html" . }} | ||
| ``` | ||
|
|
||
| * You will probably need to restart the Hugo server to see the changes appear on the site. | ||
|
|
||
| * Now, you need to edit the CSS! In your custom.css file, add the following lines. | ||
|
|
||
| ```css | ||
|
|
||
| .featured-species{ | ||
| height:300px; | ||
| background-color: #1d1f20; | ||
| color:white; | ||
| } | ||
|
|
||
| .species-image{ | ||
| height:300px; | ||
| float:left; | ||
| } | ||
|
|
||
| .featured-species h3{ | ||
| color:white; | ||
| font-size:1.5em; | ||
| } | ||
|
|
||
| .species-description{ | ||
| float:left; | ||
| padding:20px; | ||
| font-size:2em; | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| Modify this as you see fit! | ||
|
|
||
| ## Now a bit of GO lang to make the featured species different. | ||
|
|
||
| [Introduction to Hugo templating](https://gohugo.io/templates/introduction/) | ||
|
|
||
| ### Exercise 4 | ||
|
|
||
| * Replace your partial featured-species.html content with this one | ||
|
|
||
| ```html | ||
| {{ range .Site.Data.species }} | ||
| {{ if eq (.enable) true }} | ||
| <div class="featured-species"> | ||
| <img src="img/species/{{ .image }}" class="species-image" alt="" > | ||
| <div class="species-description"> | ||
| <h3>{{ .name }}</h3> | ||
| <p> {{ .description }}</p> | ||
| </div> | ||
| </div> | ||
| {{end}} | ||
| {{end}} | ||
| ``` | ||
|
|
||
| * Now, create a new folder /template-site/my-site/data/species. | ||
|
|
||
| * In this folder, create new file named frog.yaml with the following content. | ||
|
|
||
| ```yaml | ||
| enable: true | ||
| name: "Red-eyed tree frog" | ||
| description: "This frog can be found in the forests of Costa Rica" | ||
| image: "frog.jpg" | ||
|
|
||
| ``` | ||
| * Find other species photos and add them to the img folder. Then you can add new .yaml files in the data/species folder for each species. | ||
| ## iFrames | ||
| An iFrame is a HTML tag that essentially allows you to embed another web page inside of your site. | ||
| ### Exercise 5 | ||
| * Find a Youtube video and click on the share option below the video. Find the Embed option and copy the code that starts with <iframe> to a new partial that will be shown on a new page. Surround the iframe with a div tag with class="video". For example: | ||
| ```html | ||
| <div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/42GAn4v5MgE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> | ||
|
|
||
| ``` | ||
|
|
||
| * Edit the custom.css file and add this section | ||
|
|
||
| ```css | ||
| .video{ | ||
| width:100%; | ||
| background-color:black; | ||
| text-align:center; | ||
| } | ||
|
|
||
| ``` |
415 changes: 415 additions & 0 deletions
415
_posts/2020-12-08-making-websites-with-hugo-part-2/making-websites-with-hugo-part-2.html
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.