Assignment 6

Static Website

Static site generators (SSG) automate the process of building websites with HTML, CSS, and JavaScript. Similar to the previous exercise with PHP, SSGs can cut down code writing, eliminate redundancies, and improve performance. I recommend you read this Cloudflare article to better understand the term.

There are many site generators available (see this list at JamStack), and for this course we will focus on Astro.

For this exercise, you will follow Astro's tutorial to create a blog using a static site generator. Complete the tutorial up to unit 5.3 (you can skip the parts involving GitHub and Netlify if you want).

Your finished product should be a working blog with tabs and articles just like Asto's example.

Publishing to your site

One last item--we will cover this in class, but when you publish this assignment to your own site (you'll be uploading just the contents of the /dist directory), you will need to take one extra step not covered in the tutorial. Astro assumes it will be placed in the root directory of your website. In order to tell it it will reside in a subfolder, you need to replace the contents of your astro.config.mjs file to the code below (replace "yoursite.com" with your domain):

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  base: '/assignments/assignment-5',
  build: {
    site: 'http://yoursite.com/assignments/assignment-5/',
  }
});

This is a configuration change that has Astro publish the prefix to all of your links (per their documentation). Now that you've defined the base, you need to apply it to the links you've used:

src/components/Navigation.astro should look like this:

---
---
<div class="nav-links">
  <a href=`${import.meta.env.BASE_URL}`>Home</a>
  <a href=`${import.meta.env.BASE_URL}about/`>About</a>
  <a href=`${import.meta.env.BASE_URL}blog/`>Blog</a>
  <a href=`${import.meta.env.BASE_URL}tags/`>Tags</a>
</div>

And src/pages/tags/index.astro should include this BASE_URL as well:

{tags.map((tag) => (
  <p class="tag"><a href={`${import.meta.env.BASE_URL}tags/${tag}`}>{tag}</a></p>
))}

---