# from R: configure git (usethis)library(usethis)use_git_config( user.name = "your-username", user.email = "you@example.org")# create a GitHub personal access token (opens browser)create_github_token()# store credentials locally (prompts for token paste)library(gitcreds)gitcreds_set()
Now it is your turn.
Create a GitHub account if you don’t already have one, and make sure you have Git installed on your laptop.
Install and load the usethis and gitcreds packages.
Configure git then run create_github_token(), and follow the instructions to generate a token.
Run gitcreds_set() and paste in the token when prompted.
05:00
Lets build the home page…
Start with a template
Start somewhere logical (Mac and Windows OS):
Terminal
cd ~/Documents/website
OR (Windows OS)
Terminal
cd /d/GIT
Get the website template:
Terminal
quarto use template chamara7h/quarto_website_template
Follow the prompts:
Terminal
Quarto templates may execute code when documents are rendered. If you do not trust the authors of the template, we recommend that you do not install or use the template.? Do you trust the authors of this template (Y/n) › Y? Create a subdirectory for template? (Y/n) › Y? Directory name: › website
Now it is your turn.
Get the starter template.
Open index.qmd
Preview index.qmd
02:00
Home page structure
index.qmd
---title:"Bruce Wayne"subtitle:"I am Batman"image: profile.jpgabout: # https://quarto.org/docs/websites/website-about.htmltemplate: jollalinks:-icon: githubtext: Githubhref: https://github.com-icon: linkedintext: LinkedInhref: https://linkedin.com---A little bit about me and my life.## EducationUniversity of XYZ, City \| Location \| Sept 20XX - June 20XX## ExperienceWorkplace \| Job title \| April 20XX - present
Webpages are like any other Quarto document:
Start with a YAML header
Can include code cells
Everything else is markdown content
About key in YAML
Landing/ home page controlled by the about key in YAML.
Content and YAML values are combined using a template:
website:navbar:title: Data Lab for Social Good logo: images/logo.pngsearch:trueleft:-text: Homehref: index.qmdicon: house-door-fillright:-text: Projectshref: projects/index.qmd-text: Talkshref: talks/index.qmdtools:-icon: githubhref: https://github.com/-icon: linkedinhref: https://www.linkedin.com/
-title: Predicting House Prices with Machine Learningpath: https://example.com/house-prices # Photo by Breno Assis on Unsplash https://unsplash.com/photos/aerial-photography-of-rural-r3WAWU5Fi5Q image: images/breno-assis-r3WAWU5Fi5Q-unsplash.jpg description: > This project involves using machine learning algorithms to predict house prices based on various features such as location, size, and amenities. It includes data cleaning, feature engineering, and model selection.categories:[Python, Machine Learning, Data Cleaning]date: 2024-01-01 ...
Path can be a relative path to a file in your site, or a URL
/* custom button */button {background-color: transparent;/* No filling */border: 2pxsolidrgb(55,58,60);/* Gray border */color: rgb(55,58,60);/* Gray text */padding: 5px10px;text-align: center;text-decoration: none;display: inline-block;font-size: 12px;margin: 4px2px;cursor: pointer;border-radius: 5px;/* Rounded corners */}/* Hover effect */button:hover {border-color: #0066b2;/* Blue border on hover */color: #0066b2;/* Blue text on hover */}/* Hover effect for Journal article */#journal-article-btn:hover {border-color: #0066b2;/* Blue border on hover */color: #0066b2;/* Blue text on hover */}/* Hover effect for GitHub repo */#github-repo-btn:hover {border-color: #00A86B;/* Green border on hover */color: #00A86B;/* Green text on hover */}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Now it is your turn.
Test different customisations in listing
Edit and customise yml in one of your blog posts
Add all the pages to your site navigation
10:00
Lets publish your website
Create a new Quarto project
In RStudio, go to File > New Project > New Directory > Quarto Website.
For the directory name, use the URL you want for your website.
If it’s a personal site, use the format your-username.github.io. For example, if your username is “batman”, the directory name would be batman.github.io.
If the site is for a GitHub organization, use the format organization-name.github.io.
Choose a location on your computer to save the project.
Ensure that “Create a git repository” and “Use renv with this project” are both checked.
Click “Create Project”.
Create a GitHub repository
Go to GitHub and create a new repository.
The repository name must exactly match the directory name you created in RStudio (e.g., your-username.github.io).
For free accounts, you must set the repository to Public for GitHub Pages to work.
Click “Create repository”.
Link your local project folder to the new GitHub repository and push the initial files.
Terminal/ Bash
# push an exisitng repogit remote add origin https://github.com/<your user name>.github.iogit branch -M main# push your initial changesgit statusgit add .git commit -m 'initial commit'git push origin main
Create a gh-pages Branch
After pushing your project, go to your repository on GitHub.
Click on the branch dropdown menu (which should say “main”) and select “View all branches”.
Click “New branch”.
Name the new branch gh-pages and click “Create new branch”.
Set up the GitHub actions workflow
In your RStudio project, create a new folder named .github.
Inside the .github folder, create another folder named workflows.
Inside the workflows folder, create a new text file and name it publish.yml.
