How I created this website?

Last updated on Aug 21, 2022

I describe how I created this Hugo-blogdown website and deployed it on Github.

I had a website with a Hugo-academic theme, but after it was changed to wowchemy, I went through the following steps to move everything from my old website to a new one.

  1. I saved the contents in the webiste_old folder (local) in a separate folder.

  2. I remove the Username.github.io repository from Github.

  3. I followed Matteo Courthoud’s blog on ``how to make a personal website with Hugo.”

The steps I followed from the blog are as follows.

  1. Create a Github repository - Username.github.io.

  2. Install blogdown from Github - remotes::install_github('rstudio/blogdown').

    • If Hugo was not installed, install it by calling blogdown::install_hugo()

  3. Now, I want to keep everything for the website in the website folder on my computer.

    • Open RStudio.
    • Select New Project.
    • Select New Directory.
    • Select Website using blogdown.
    • Directory name - website, Hugo theme - wowchemy/starter-academic.
    • Select Create Project.
    • Check your website folder.

  4. Build the website

    • Open the RProject file website.Rproj in the website folder.
    • Type in console, blogdown::hugo_build() - this will create a public folder which includes all needed for the website.
    • Type in colsole, blogdown::serve_site() - to preview the website in your browser.

  5. Publish the website

    • Open the file config.yaml in the webisite folderand change the baseurl to your future website url. ‘https://Username.github.io/’
    • Open terminal and direct to the public folder in the webiste folder - $cd /path-to-directory/website/public
    • Now, add the remote repository to the public/ folder, containing the actual code of the website. Follow the steps below.
      • Initialize git in the path-to-directory/website/public.
        • git init
      • Set origin
        • git remote add origin https://github.com/Username/Username.github.io.git
      • Add and commit the changes
        • git add .
        • git commit -m "update website"
      • And push your updates to remote
        • git push --set-upstream origin master

DONE - the website is ready!

  1. Customize

config.yaml: general website information.

theme: "starter-hugo-academic"
# Configuration of Hugo
# Guide: https://wowchemy.com/docs/getting-started/
# Hugo Documentation: https://gohugo.io/getting-started/configuration/#all-configuration-settings
# This file is formatted using YAML syntax - learn more at https://learnxinyminutes.com/docs/yaml/

title: # Website name
baseurl: 'https://Username.github.io/' # Website URL
copyright: '' # Footer text, e.g. '© {year} Me'

############################
## LANGUAGE
############################

defaultContentLanguage: en
hasCJKLanguage: false
defaultContentLanguageInSubdir: false
removePathAccents: true

############################
## MODULES
############################

module:
  imports:
    - path: github.com/wowchemy/wowchemy-hugo-modules/wowchemy-cms/v5
    - path: github.com/wowchemy/wowchemy-hugo-modules/wowchemy/v5

############################
## ADVANCED
############################

enableGitInfo: false
summaryLength: 30
paginate: 10
enableEmoji: true
enableRobotsTXT: true
footnotereturnlinkcontents: <sup>^</sup>
ignoreFiles: [\.ipynb$, .ipynb_checkpoints$, \.Rmd$, \.Rmarkdown$, _cache$]
permalinks:
  event: '/talk/:slug/'
  authors: '/author/:slug/'
  tags: '/tag/:slug/'
  categories: '/category/:slug/'
  publication_types: '/publication-type/:slug/'
disableAliases: true
outputs:
  home: [HTML, RSS, JSON, WebAppManifest, headers, redirects]
  section: [HTML, RSS]
imaging:
  resampleFilter: lanczos
  quality: 75
  anchor: smart
timeout: 600000
taxonomies:
  tag: tags
  category: categories
  publication_type: publication_types
  author: authors
markup:
  _merge: deep
related:
  threshold: 80
  includeNewer: true
  toLower: true
  indices:
    - name: tags
      weight: 100
    - name: categories
      weight: 70

config/_default/params.yaml: website customization.

# SITE SETUP
# Guide: https://wowchemy.com/docs/getting-started/
# Documentation: https://wowchemy.com/docs/
# This file is formatted using YAML syntax - learn more at https://learnxinyminutes.com/docs/yaml/

# Appearance

theme: minimal
day_night: true
font: 'classic'
font_size: L

# SEO

site_type: Person
local_business_type: ''
org_name: ''
description: ''
twitter: 'Username_Twitter'

# Contact (edit or remove options as required)

# email: test@example.org
# phone: 888 888 88 88
# address:
#   street: 450 Serra Mall
#   city: Stanford
#   region: CA
#   postcode: '94305'
#   country: United States
#   country_code: US
# coordinates:
#   latitude: '37.4275'
#   longitude: '-122.1697'
# directions: Enter Building 1 and take the stairs to Office 200 on Floor 2
# office_hours:
#   - 'Monday 10:00 to 13:00'
#   - 'Wednesday 09:00 to 10:00'
# appointment_url: 'https://calendly.com'

contact_links:
  - icon: twitter
    icon_pack: fab
    link: 'https://twitter.com/Username_twitter'
    
  - icon: linkedin
    icon_pack: fab
    link: "https://www.linkedin.com/in/Username_linkedin/"
    
  - icon: google-scholar
    icon_pack: ai
    link: 'https://scholar.google.com/your-profile'
    
  - icon: github
    icon_pack: fab
    link: "https://github.com/Username"

# Site header

main_menu:
  enable: true
  align: r
  show_logo: true
  show_language: false
  show_day_night: true
  show_search: true
  highlight_active_link: true

# Localization

date_format: 'Jan 2, 2006'
time_format: '3:04 PM'
address_format: en-us

# Site features

highlight: true
highlight_languages:
  - r
  - python
  - latex
math: true
diagram: false
privacy_pack: false
edit_page:
  repo_url: ''
  content_dir: ''
  repo_branch: main
  editable:
    page: false
    post: false
    book: false
show_related:
  book: true
  page: false
  post: true
  project: true
  publication: true
  event: true
reading_time: true
section_pager: false
docs_section_pager: true
sharing: true
copyright_license:
  enable: false
  allow_derivatives: false
  share_alike: true
  allow_commercial: false
  notice: 'This work is licensed under {license}'
abstract_length: 135
plugins_js: []
avatar:
  gravatar: false
  shape: circle
publications:
  date_format: January 2006
  citation_style: apa
projects:
  post_view: 2
  publication_view: 2
  talk_view: 2
breadcrumb:
  page_types:
    book: true
comments:
  provider: ''
  commentable:
    post: true
    book: true
    project: true
    publication: true
    event: true
  disqus:
    shortname: ''
    show_count: true
  commento:
    url: ''
search:
  provider: wowchemy
  algolia:
    app_id: ''
    api_key: ''
    index_name: ''
    show_logo: false
map:
  provider: mapnik
  api_key: ''
  zoom: 15
marketing:
  google_analytics: ''
  google_tag_manager: ''
  google_site_verification: ''
  baidu_site_verification: ''
  baidu_tongji: ''
cms:
  branch: master
  local_backend: false
icon:
  pack:
    ai: false

config/_default/menus.yaml: top bar / menu customization.

main:
  - name: About
    url: '#about'
    weight: 10
  - name: Team
    url: '/team'
    weight: 20
  - name: Projects
    url: '/project'
    weight: 30
  - name: Teaching
    url: '/teaching'
    weight: 40
  - name: Resources
    url: '/resource'
    weight: 50
  - name: Join us
    url: '/Joinus'
    weight: 70

content/authors/admin/_index.md: personal information.

## _index.md example
---
social:
- icon: twitter
  icon_pack: fab
  link: 'https://twitter.com/Username_twitter'
    
- icon: linkedin
  icon_pack: fab
  link: "https://www.linkedin.com/in/username_linkedin/"
    
- icon: graduation-cap
  icon_pack: fas
  link: 'https://scholar.google.com/your-profile'
    
- icon: github
  icon_pack: fab
  link: "https://github.com/Usernamae"

title: 
---

First Name Last Name
***  
Assistant Professor in the [XXXX](https://www.xxx.ca/)  
Associate Member of the [YYY](https://yyy.ca/)  


<span style="color:blue">Contact:</span>  
address 
Email: jjjj dot ca


<span style="color:blue">Research Interests:</span>  
***  
aaa  
bbb
ccc

<span style="color:blue">Education and Training:</span>  
*** 
* X,  (2016-2020)  
* Y (2016)  
* Z (2013)  
* W (2010)
  • Add and commit the changes (terminal should be in public/ folder)
    • blogdown::hugo_build().
    • git add .
    • git commit -m "update website"
  • And push your updates to remote
    • git push --set-upstream origin master

  1. From the website/content/ folder, I removed the folders except admin, authors, home/about.md, home/index.md, privacy.md, terms.md.

  2. Create a team folder in content.

  • Add team.md, and index.md.
## index.md example 
---
summary: Team
title: "Team"
type: widget_page
---
# team.md example

---
# An instance of the Pages widget.
# Documentation: https://wowchemy.com/docs/page-builder/
widget: pages

# This file represents a page section.
headless: true

# Order that this section appears on the page.
weight: 60

title: 

subtitle:

content:
  # Page type to display. E.g. post, talk, publication...
  page_type: team
  # Choose how many pages you would like to display (0 = all pages)
  count: 0
  # Filter on criteria
  filters:
    author: ""
    category: ""
    tag: ""
    exclude_featured: false
    exclude_future: false
    exclude_past: false
    publication_type: ""
  # Choose how many pages you would like to offset by
  offset: 0
  # Page order: descending (desc) or ascending (asc) date.
  order: asc

design:
  # Choose a view for the listings:
  #   1 = List
  #   2 = Compact
  #   3 = Card
  #   4 = Citation (publication only)
  view: 2
---

We focus on challenges that arise in modern datasets and multi-view learning.....
  • Add pages to team.
    • blogdown::new_post(title = “Post on January 2021”, subdir = “team/”, ext = “.Rmd”)
# .Rmd example

---
title: Prospective students
author: ''
date: '2021-09-05'
slug: prospective-hqp
categories: []
tags: []
subtitle: ''
summary: ''
authors: []
lastmod: '2021-09-05T12:08:07-04:00'
featured: no
image:
  caption: ''
  focal_point: ''
  preview_only: no
projects: []
weight: 101
---

We welcome ....
- Use weight: XX to order the pages.
- Add featured.png to display a thumbnail picture for the page.
  1. Create a project folder.
  • Add _index.md - make title empty.
# _index.md example
---
cms_exclude: true
header:
  caption: ""
  image: ""
title: 
view: 2
---
  • Add pages to project.
    • blogdown::new_post(title = “project1”, subdir = “project/”, ext = “.Rmd”)
# .Rmd example

---
title: title for the project 1
author: ''
date: '2021-09-05'
slug: espa
categories: []
tags: []
subtitle: ''
summary: 'summary for the project 2'
authors: []
lastmod: '2021-09-05T21:09:51-04:00'
featured: no
image:
  caption: ''
  focal_point: 'Right'
  preview_only: no
projects: []
weight: 98
output:
  blogdown::html_page:
    toc: true
---

Any RMarkdown content
  • blogdown::new_post(title = “project2”, subdir = “project/”, ext = “.Rmd”)
# .Rmd example

---
title: title for the project 2
author: ''
date: '2021-09-05'
slug: espa
categories: []
tags: []
subtitle: ''
summary: 'summary for the project 2'
authors: []
lastmod: '2021-09-05T21:09:51-04:00'
featured: no
image:
  caption: ''
  focal_point: 'Right'
  preview_only: no
projects: []
weight: 97
output:
  blogdown::html_page:
    toc: true
---

Any RMarkdown content

Change weight to order the projects.