my friends showed interest in having a personal website, but also didn't know where to start, so i made a little downloadable site layout so get them up and running more quickly. it comes with some snazzy styling, automatically-updating blog page, and some basic components.
download it:
here's an overview of how it works and how to get it set up.
(explaining everything about Astro, HTML, and CSS will be outside the scope of this post, so i'll leave useful links in the where to next section.)
it uses Astro, a static site generator (SSG) to build the site. SSGs are middlemen software that give you tools to develop websites more smoothly, and then output regular HTML at the end.
the main thing i like is the HTML templating, meaning i can easily reuse HTML components across pages instead of copy/pasting everything. when you export the project, Astro combines all relevant code into plain HTML files. (this is how the whole site has a consistent layout, style, and header with links.)
first, get Node.js, a runtime for JavaScript code. we're interested in npm, a command-line interface (CLI) package manager, to install Astro, and the easiest way to get it is to just use the windows installer (.msi).
once installed, we can run it from a terminal. windows ships with the command prompt as a standard text terminal, so open it from the windows menu, and run npm to check if Node's been installed successfully.
now, having downloaded the site .zip, extract it somewhere with a file archiver like 7zip or WinRAR.
cd into that directory's path and run npm install to install all the packages the project requires. if it complains about unapproved scripts, run npm approve-scripts with the unallowed script name.
the project is now ready to use.
to avoid having to build + export + upload to see changes you've made, you can run your website locally in dev mode. this also automatically updates the site every time you change a file.
in the command line, cd into the project folder as before, and run npm run dev. now a live preview of the site's accessible at localhost:4321 on your browser.
you can now start making changes to it! you'll need a text editor to change the html.
we'll go into hosting a bit later.
the site's folder structure is as follows.
this is mostly the site's framework and supporting code. if you're editing it into your own thing, you'll want to focus on /public and /src.
/publicthis is where all public-facing content and media (like images, sounds, any files you distribute) should go. all the contents of the /public folder are accessible to all pages by default, with no leading path. for example, to add /public/images/laptop.png to a page, the path would just be images/laptop.png.
<img src="/images/laptop.png" />this is true for any type of file, for any component, for any page.
/srcthis is the source code for the site itself.
/src/pages have the public-facing pages. to add a new page, create a new file inside /src/pages. that file will automatically be converted into an HTML page in your site, with the link being the same as the file's name./src/blogposts have .md files. due to how the project is set up, the /blog page in the site will search for every file inside this folder and organize it into a list. add new .md files to automatically create new blogposts./src/layouts and /src/components have .astro files which are used by pages to build up their structure. layouts are page blueprints, while components are pieces of reusable HTML.components are .astro files containing some HTML, and optionally some JavaScript at the top, inside triple-dashes --- - this is called the "frontmatter."
the JS may do all sorts of things and calculations, which the HTML portion of the file can use by putting JS code and variables inside curly braces {}.
for example, by using Astro.props, the component can receive properties from outside.
<!-- src/components/Footer.astro -->
---
const { message } = Astro.props;
---
<footer>
<p>i'm the site's footer.</p>
<p>the sent message was: {message}</p>
</footer>when you insert a component, you can pass in properties to it, similar to HTML attributes.
<!-- src/pages/index.astro -->
---
import Footer from "../components/Footer.astro";
---
<p>the footer will be below this paragraph.</p>
<Footer message="hello"/>
<!-- this will display "the sent message was: hello!" -->note how, structurally, <Footer message="hello"/> looks similar to <img src="/images/laptop.png" />. components should act as basically supercharged HTML elements.
(note that the JS mostly runs at build-time. for "live" JS interactivity, you'll need to use Astro islands.)
Astro also lets you apply styling per-component, meaning you can write CSS that only applies to the current file and nowhere else.
for example, this <style> tag at the start of this file makes all p elements inside the file gold, but won't affect p tags anywhere else.
<style>
p {
color: gold;
}
</style>
<p>(in the old man voice) i'm gold!</p>this project also uses Bootstrap, a collection of CSS rules for common usecases, like styling, sizing, and coloring. Bootstrap uses HTML classes to apply styling and functionality to elements, hopefully reducing the amount of handwritten CSS you need for common situations.
for example, the mw-100 class is equivalent to adding the max-width: 100%; style to an element.
<img src="/example.png" class="mw-100"/>
<!-- is the same as -->
<img src="/example.png" style="max-width: 100%;"/>the biggest pain-point it addresses is that it makes it much easier to have your site easily rearrange itself to fit a variety of screen sizes with its breakpoint system.
once you're happy with the state of your site, you can render it into plain html by running npm run build in the terminal. this will create a dist folder with your site inside the root project folder. then, you're free to place the contents of that folder anywhere you want to host it.
for example, neocities is a free site host, and a great place for hobbyist websites. to host your site there:
dist onto the dashboard.
done! your site is now accessible worldwide.
(note: if you're a nerd and would like to skip this build + upload process, netlify can automatically deploy from a GitHub repo of an Astro project. this is how i do my personal site, and it's very convenient.)
this should give you a basic idea of how the site works, hopefully enough that you can start messing around with the innards of the site to style and compose it the way you like.
some further reading:
i also have a bunch of retro sites i like the look of in my homepage.
good luck :3 i look forward to seeing what you make
