Creating a Website

Github Websites and Quarto

Bogdan G. Popescu

bogdan.popescu@johncabot.edu

John Cabot University

Intro

Today, we learn how to make a website to showcase everything we have done.

Your website address will be username.github.io.

For this reason, you might want to give a bit of thought to what makes the most sense for a username.

It will be difficult to change the user name and how the website will look, once you have set it up.

Benefits of Having a Website

Having of website is beneficial:

it demonstrates your tech saviness: you are comfortable with the digital space and with technology

you can include your CV and people can see it much quicker

you can show your portfolio (i.e. your project for this course for now)

you can show your creative side by using different themes and fonts

Step 1: Signing Up for Github

We now can create a Github account.

Github is a developer platform that allows developers to create, store, manage and share their code.

With Github, it easy to share code with the world.

It is also easy to have your Quarto website stored

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Selecting the username is crucially important

Step 1: Signing Up for Github

Selecting the username is crucially important

This is the username. This will appear in username.github.io

Step 1: Signing Up for Github

Selecting the username is crucially important

This is the username. This will appear in username.github.io

In this case, it will be bgpopescu2. This will appear in bgpopescu2.github.io

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Download GitHub Desktop

Download GitHub Desktop and install it on your machine

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

In case this message appears, press “Not Now”

GitHub Desktop

When getting this menu, chose “Clone”

GitHub Desktop

When getting this menu, chose “Clone”

GitHub Desktop

Choose the highlighted option

GitHub Desktop

Choose the highlighted option

GitHub Desktop

Choose the highlighted option

GitHub Desktop

Choose the highlighted option

GitHub Desktop

Choose the highlighted option

GitHub Desktop

Change where you want to save the local website.

Please avoid “Documents”.

Choose either Dropbox or the Course Folder.

GitHub Desktop

Change where you want to save the local website.

Please avoid “Documents”.

Choose either Dropbox or the Course Folder.

GitHub Desktop

Change where you want to save the local website.

Please avoid “Documents”.

Choose either Dropbox or the Course Folder.

GitHub Desktop

Notice how the path changed.

GitHub Desktop

This is what “GitHub Desktop” looks like after making the changes.

GitHub Desktop

Notice that you just created an empty folder on your computer.

Step to Create a Website

We now move to creating the website. Open R Studio.

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

This is what the rendered website looks like locally (on your computer).

Step to Create a Website

Close RStudio!!

We will now move everything we have just created to the empty folder that we cloned from Github.

Note that Quarto created the website somewhere in Documents

Step to Create a Website

If you have touble finding it, just search for the folder.

In this case, I am searching for “bgpopescu2.github.io”

I simply select all the materials in the folder and drag and drop them in the “bgpopescu2.github.io” cloned folder

Step to Create a Website

So, I select the files

Step to Create a Website

And I then drag and drop them into the empty folder created by GitHub

Step to Create a Website

And I then drag and drop them into the empty folder created by GitHub.

This is what the folder should look like after I dragged and dropped them.

Steps to Create a Website

We then go back to GitHub Desktop.

These are all updates that we made.

Steps to Create a Website

We then go back to GitHub Desktop.

These are all updates that we made.

Steps to Create a Website

We now write a short description of what we did.

Steps to Create a Website

We now write a short description of what we did.

Steps to Create a Website

And we commit the changes.

Steps to Create a Website

And we commit the changes.

Steps to Create a Website

We then push the changes to GitHub.

Steps to Create a Website

We then push the changes to GitHub.

Steps to Create a Website

We can now go and check if the files were updated.

Go to github.com

Steps to Create a Website

We can now go and check if the files were updated.

Go to github.com

Steps to Create a Website

We can see that the directory has been updated with the quarto files

Steps to Create a Website

Go to settings.

Steps to Create a Website

Go to Pages.

Steps to Create a Website

Go to Pages.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

Make the following changes.

Steps to Create a Website

After about 3 mins, we should see this page updated.

Feel free to keep refreshing the page until you see: “Your site is live at.”

Steps to Create a Website

After about 3 mins, we should see this page updated.

Feel free to keep refreshing the page until you see: “Your site is live at.”

Steps to Create a Website

After about 3 mins, we should see this page updated.

Feel free to keep refreshing the page until you see: “Your site is live at.”

Steps to Create a Website

Our website is now live!

We can now go back and do some website improvements.

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

We now need to add a .nojekyll file to the root of our repository
This tells GitHub Pages not to do additional processing of your published site using Jekyll

Mac

touch .nojekyll

Windows

copy NUL .nojekyll

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

It may take up to 5 minutes to see changes on the actual website

After that time has elapsed, you can check the updated website

Creating additional sections

You can easily create additional sections on your website

Let us create a new qmd file

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

Removing Categories

We can easily remove categories by deleting the relevant .qmd file

We then need to to update .yaml file

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Adding the Portfolio

Let us now get back to the portfolio

Let us update the text

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

You can create your html files externally (i.e. in other folders)

You can then add them to your folder on your website and link to them

Organizing the Home Page

We will now work on getting a more professional-lokking home page

The following index.qmd will change from:

---
title: "Bogdan G. Popescu"
---

Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.

You can also check out my CV.

Organizing the Home Page

We will now work on getting a more professional-lokking home page

We change the entire qmd file to:

---
title: "Bogdan G. Popescu"
image: images/popescu_photo.jpg
about:
  template: trestles
  image-width: 5cm
  image-shape: round
  links:
    - icon: twitter
      href: https://twitter.com/BogdanGPopescu1
    - icon: github
      href: https://github.com/bgpopescu
    - icon: linkedin
      href: https://www.linkedin.com/in/bogdanpopescu/
---

Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.

You can also check out my <a href="/cv/bogdan-popescu-cv.pdf" target="_blank">CV</a>.

Organizing the Home Page

To get this to work, you need to create two folders

images
cv

Organizing the Home Page

Organizing the Home Page

Organizing the Home Page

As you may guess, each one of these folders should have items inside

The images folder should have a picture of you: this is popescu_photo.jpg in my case

Organizing the Home Page

As you may guess, each one of these folders should have items inside

The cv folder should have your cv in pdf: this is bogdan-popescu-cv in my case

Organizing the Home Page

Once you have done so, you should go back to the index and update your relevant links

So update your Twitter, Linkedin, and Github.

Of course, there is not need to have all of them

Organizing the Home Page

Then render the qmd file

Organizing the Home Page

The output will look like below

Organizing the Home Page

You can play around with different templates.

Here I use: template: trestles

---
title: "Bogdan G. Popescu"
image: images/popescu_photo.jpg
about:
  template: trestles
  image-width: 5cm
  image-shape: round
  links:
    - icon: twitter
      href: https://twitter.com/BogdanGPopescu1
    - icon: github
      href: https://github.com/bgpopescu
    - icon: linkedin
      href: https://www.linkedin.com/in/bogdanpopescu/
---

Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.

You can also check out my <a href="/cv/bogdan-popescu-cv.pdf" target="_blank">CV</a>.

Organizing the Home Page

You can play around with different templates.

Here I use: template: trestles

Other options are:

jolla
solana
marquee
broadside

Go to https://quarto.org/docs/websites/website-about.html to see what they look like

Organizing the Home Page

Let us do one final step and get rid of the bgpopescu2.github.io

We can do this by changing the yaml file

Organizing the Home Page

Let us do one final step and get rid of the bgpopescu2.github.io

We can do this by changing the yaml file

Organizing the Home Page

This is the final version

Organizing the Home Page

This is the final version

Organizing the Home Page

This is the final version

Organizing the Home Page

Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there

Organizing the Home Page

Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there

Organizing the Home Page

Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there

Commiting and Pushing Everything to Github

We are now ready to commit and push everything to Github

If you open GitHub Desktop, it automatically sees all the changes we have made

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Conclusion

Congratulations!

You have created the skeleton of your first website.

There are a variety of templates, changes, edits that you can make.

You can find below two Youtube Videos that I found helpful in creating this tutorial: