This Website
I suppose this website itself is a project that I have been infrequently working on. I am not a web developer (as you can most likely tell by looking at this website), however, I wanted to create a place to showcase my projects to the 5 people who will look at this site.
How I Created This Website
To create this site, I decided to use something called Gatsby JS... It is a static webpage generator which turns special JavaScript functions and "elements" into HTML/JS/CSS for hosting. The way I created these article pages is rather interesting: This website is actually completely static, there is no database, no CRUD operations, these article pages are all generated still, but are statically created from special markdown files called MDX files.
These files are then ingested by Gatsby JS and are then turned into static styled HTML pages. These MDX files can also contain some rudimentary special JavaScript elements, which will be expanded at website "compile" time (I say compiled, but it only means the static site is being generated from dynamic JS content).
One such example of these JavaScript elements is this article's page itself:
return (
<PageLayout>
<h1 className="mb-2">Articles</h1>
<hr className="mb-6"></hr>
<ul className="mx-auto max-w-3xl p-4 sm:p-0">
{data.allMdx.edges.map(({ node }) => (
<li key={node.id} className="mb-4 last-of-type:mb-0">
<Link
to={`/articles/${node.frontmatter?.slug}`}
className="block rounded-lg border border-gray-400 p-6"
>
<h2 className="mb-1">
{node.frontmatter?.title}
</h2>
<span className="mb-2 block text-sm font-thin">
{node.frontmatter?.date}
</span>
<span className="block text-lg">{node.excerpt}</span>
</Link>
</li>
))}
</ul>
</PageLayout>
);
This is used to generate a list of articles and assign links to them. As I have learned, these elements (such as Link, and the special commands) are not regular JavaScript, but are instead something called JSX, or JavaScript Extension.
I am not very up to date on the minutiae of JavaScript and the modern web development environment and frameworks, but I thought for a project like this, I might try out something new to see what's on offer, and for a bit of a learning exercise.