Due Date: Thursday, September 7th at 10:00am

Expected time: less than one hour

Background: In this prep, you will set up a personal website that will be a kind of design portfolio for all your work this term, including blog posts and (the non-code parts of) your assignments. To do this, you will use a static site generator called VitePress. There are several popular generators, each of which is based on a particular programming language or framework; Hugo, for example, uses the Go language. We have chosen VitePress because it uses Vue.js, the same front-end framework you’ll be using in your assignments.

Purpose: To set up your portfolio website using VitePress and Github Pages. By the end of this prep, you will have a working site that is deployed in Pages and accessible on the web.

Your tasks

  1. Background reading. Read this post on the essential concepts of Static Site Generators, and answer the questions about the reading in the prep submission form (see below).
  2. Creating your repo. Create your repo and clone onto your local machine. We will be using Github Classroom, so you can click on this link to create your repo.
  3. Setting up VitePress. Follow the instructions on the README to install VitePress on your machine. Run VitePress locally, and ensure you can see it working in your web browser. Add your name and portfolio title to the site.
  4. Deploying your site. Issue the git commands (add, commit and push) so that your local changes are reflected in the remote repo. After the push, Github Pages will automatically deploy your site.
  5. Screenshot. Take a screenshot of the home page of your working site and upload it, along with your answers to the questions, in the prep submission form.
  6. Recitation. Come to recitation with your laptop and VitePress running locally so you can participate in some small exercises to further your understanding. And of course, bring whatever questions you might have!

Submission

Submit a screenshot of the home page of your deployed site along with the answers to the reading questions to the prep submission form.

Advice

Resources page. To learn more about Github, VitePress, and Node.js, check out the class resource page.

Deployment. Deployment in GitHub Pages happens automatically when you push to the repository using a predefined action. Note that it may take a few minutes for the deployment to complete, so don’t expect to see the updated site on the web immediately after pushing. Make sure always to check that your site works as you expect locally before pushing to the repo and deploying.