Fall 2023 Website - http://fa23.datastructur.es
Wiki Docs (probably outdated, check below first) - https://github.com/Berkeley-CS61B/docs/wiki
Please, please, please wrap markdown files to 80 chars
If you have not committed before, please read the docs and PR your change(s).
- Document setup (Jekyll)
- Document website structure and layout
- Switch to SASS
- Improve favicon compatibility
- Prune outdated assets and files
- Add links to deleted Google Drive materials
- Searchability (via lunr.js)
- Switch TOC to https://github.com/allejo/jekyll-toc
- Heading links https://github.com/allejo/jekyll-anchor-headings
.
├── _announcements # Announcements .md files
├── _data # Site data files (schedule, staff, lecture polls) and scripts
├── _includes # See https://jekyllrb.com/docs/includes/
├── _layouts # Content HTML templates
├── _sass # Styling files
├── assets # Site assets (fonts, images, JS scripts)
├── materials # Course materials (assignments, guides, discussions, etc.)
├── ...
├── CNAME # Specifies domain name
├── Gemfile # Dependencies
├── Makefile # Targets for building website locally and generating schedule
├── 404.html # Error page
├── about.md # Course Info page
├── announcements.html # Announcements page
├── index.html # Home page
├── resources.md # Resources page
└── staff.html # Staff page
Website repo: (https://github.com/Berkeley-CS61B/website-fa23)
This page will walk you through on how to build the website locally so you can test out your changes before pushing to the public website. It's actually pretty simple!
We recommend installing Ruby using the official directions here. Make sure to select your appropriate operating system. Stop after you get done with rbenv. We're not installing rails.
The website is built on Jekyll, which lets us do cool things like convert YAML and Markdown files to HTML files, so we don't have to worry (too much) about the underlying HTML that our website is built on. Follow the instructions here.
We're using Jekyll 3.6.2.
Run git clone https://github.com/Berkeley-CS61B/website-fa23.git
or git clone git@github.com:Berkeley-CS61B/website-fa23.git
in a memorable location.
- There are two commands you can run:
- make serve: This will serve the website and display all the pages regardless of whether they are released or not.
- make prod: This will serve the website and apply special properties of pages (e.g. not displaying unreleased pages, etc.)
- If the above two commands fail, try running bundle exec jekyll serve the first time you ever build the website. On MacOSX Big Sur (Ruby V2.6.3, Jekyll 4.2.0): if bundle exec jekyll serve fails, try bundle install first If bundle install fails, try bundle config build.ffi -- --with-cflags=-Wno-implicit-function-declaration then bundle install again
- The website will be deployed (by default) at http://127.0.0.1:4000/. Ta-da!
- Add a file
CNAME
with the custom domain of the website: for example,fa23.datastructur.es
. - Push changes to the website's Github repo.
- On Github, under Settings → GitHub Pages, change the Custom Domain to the domain name in the
CNAME
file. No other settings need to be changed. - On Dreamhost (as of Fall 2020), go to Domains → datastructur.es → DNS. Then, add a custom DNS record with:
-
name = .datastructur.es
-
Type = CNAME
-
Value = Berkeley-CS61B.github.io
It usually takes about an hour for these changes to propagate.
This section goes over how to modify the website for common tasks. If you want a new tutorial to be added, please ping infra!
- Edit the spec markdown file and supporting files (images, etc.) in the assignment's folder under
materials
. Please change the spec's main Markdown file (e.g. lab1.md) to index.md - this makes the url path nicer! - To release an assignment spec unlinked (meaning that the contents are visible if you have the url, but there is no link to it from the homepage), edit the top of the spec's Markdown file to be
released: true
. - To activate the link on the homepage: see Activate a Link on the Homepage Schedule.
Please don't add discussion PDFs to this repo. Add it to the SPA's drive instead!
- To add a discussion worksheet to the website, add the link in the corresponding week's .yml file in
_data
under that discussion'slink
variable. - To add a discussion resource (slides, video, solution), go to the week's .yml file in
_data
and add an entry underresource_links
. For example, this entry should take the form:... resource_links: - name: slides released: true/false # whether to activate the link on the schedule link: "https://docs.google.com/presentation/d/14bqo6_RosJbQxago7cnvdT1Vy9GSO6hL5c1CmzcBZp0/edit?usp=sharing"
- Finally, to activate the discussion on the website, see Activate a Link on the Homepage Schedule. *Note: this
released: true
is under the discussion, separate fromresource_links
.
-
cd _announcements
-
If adding a new announcement, make a copy of _template.md:
cp _template.md week##.md
-
Take a look at the announcement file:
--- layout: announcement title: TITLE date: YYYY-MM-DD --- Your text here.
Do not edit
layout
. Edit the title and date accordingly. ReplaceYour text here.
with the announcement you wish to make. Markdown is supported! -
Save
-
Test with
make serve
.
- Go to
_data/week#.yml
and set the correspondingreleased
flag totrue
. - Run the
gen_yaml.py
script in the_data
directory. This script can also be run withmake schedule
. If successful, it should tell you that it finished updatingschedule.yml
.
- Create a spreadsheet with responses to the staff info form, but only columns for: Email Address, Full Name, Bio, Appointment, Photo, Pronouns, and Personal Website. Download this spreadsheet as a CSV and move it to
_data/staff.csv
. - Invoke the script
create_staff_ymls.py
(located in_data
). This script will create two .yml files:tas.yml
andtutors.yml
. It also downloads the photos from Google Drive into a new folderassets/img/staff
. Make the drive folder temporarily public so the script can access the photos. - Invoke the
resize.py
script inassets/img/staff/
.