Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alextmjugador/home

🌐 My own space on the web, featuring blog posts and personal highlights.
https://github.com/alextmjugador/home

astro blog giscus jamstack jamstack-site personal-website static-site

Last synced: 23 days ago
JSON representation

🌐 My own space on the web, featuring blog posts and personal highlights.

Host: GitHub
URL: https://github.com/alextmjugador/home
Owner: AlexTMjugador
License: gpl-3.0
Created: 2023-02-01T21:55:34.000Z (almost 2 years ago)
Default Branch: master
Last Pushed: 2024-04-29T22:31:04.000Z (6 months ago)
Last Synced: 2024-05-01T23:35:58.435Z (6 months ago)
Topics: astro, blog, giscus, jamstack, jamstack-site, personal-website, static-site
Language: Astro
Homepage: https://alegon.dev
Size: 7.36 MB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

🌐 Alejandro's personal space

My own space on the web, featuring blog posts and personal highlights.

This repository contains the source code for my personal website. Its design
follows the [Jamstack architecture](https://jamstack.org/), which can be easily
deployed to any web server requiring next to no server configuration.

At the heart of this architecture is [Astro](https://astro.build), a modern,
component-based static site generator built with extensibility and performance
in mind: Astro does not send any runtime JavaScript to web browsers by default,
and runs entirely at build-time.

Each commit triggers a continuous integration and deployment process powered by
GitHub Actions workflows, which statically analyzes the source, builds the site,
runs [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) on it, and
deploys the result to [Cloudflare Pages](https://pages.cloudflare.com/) edge
servers.

[Giscus](https://giscus.app/en/) is used as a database-less comments system
backed up by the GitHub Discussions of this repository.

```mermaid
graph
subgraph Developer
Change[New post, site or source change] --> Commit[

git commit

git push

]
end

Commit --> GHRepo["GitHub repository
(with Giscus GitHub Discussions integration)"]
GHRepo --> Checkout

subgraph GitHub Actions CI & CD workflow
Checkout -->
Install[Install dependencies:

npm ci

] -->
Format[Run Prettier:

npm run format

]-- No formatting issues are found -->
Lint[Run ESLint:

npm run lint

]-- No lints are found -->
Build[Build:

npm run build

]-- Astro and its integrations run in SSG mode
to build a static site bundle -->
LighthouseCI[Run Lighthouse CI]-- Quality assertions pass -->
Deploy[Deploy to Cloudflare Pages]
end

Deploy --> CFPages[Cloudflare edge servers]

subgraph End user
Client[Web browser]
end

Client-- Visits deployed website at --> CFPages
Client-- Retrieves blog post comments from --> GHRepo
```

# ✨ Highlights

- Automatic [RSS feed](https://en.wikipedia.org/wiki/RSS) generation on build
time, allowing people and computers to consume blog posts from news reader
applications.
- Written entirely in TypeScript, improving developer experience and code
safety.
- Strict CI workflow to ensure code quality and end-user website performance,
using Prettier, ESLint with additional accessibility lints, and Lighthouse
CI.
- Follows good SEO practices: automatically generates a `robots.txt` file,
sitemap and web manifest. Each page contains `` tags that describe it
in a machine-parsable way.
- Observes the [Open Graph](https://ogp.me/) protocol, which enables beautiful
link previews with custom images.
- Each blog post is associated an Open Graph image that is procedurally
generated from its title and description.
- Images may be encoded in multiple formats and resized to fit different client
viewport sizes, minimizing the bandwidth required to display them while allowing
fallbacks to less efficient arrangements.
- Critical CSS styles are automatically inlined for better loading times with
[Critters](https://github.com/GoogleChromeLabs/critters).
- Custom, refreshing analogous color scheme that defies the usual light-dark
dichotomy, implemented with [Tailwind CSS](https://tailwindcss.com/).
- Client-side blog post search powered by [Pagefind](https://pagefind.app/).

# 📥 Getting started

The development workflow should be unsurprising to anyone acquaintanced with the
`npm` ecosystem. After cloning the repository, run the following commands to get
this website up and running in a local development server:

```
npm install
npm run dev
```

I recommend using editors like Visual Studio Code for modifying the source
because they provide a better experience: this repository contains settings
files for VS Code that will prompt you to set it up as intended. However, you
are free to use any other editor you like.

After making some changes you can run `npm run format:fix` and `npm run
lint:fix` to correct formatting and static analysis lints, respectively. When
ready, you can also execute `npm run build` to generate a production site bundle
at the `dist` directory.

## 📁 Project structure

This project distributes its source artifacts across folders as follows:

```
/
├── public
│   ├── giscus: styles for the Giscus widget used for post comments.
│   └── rss: XSLT stylesheet to beautifully display the site RSS feed on user agents with no RSS feed functionality.
└── src
├── components: miscellaneous components used in the site pages.
├── content
│   └── blog: blog posts, in Markdown (.md) or MDX (.mdx).
├── images
│   └── landscape-parallax: images for the animated landscape parallax component.
├── layouts: the layouts used for the generated pages.
└── pages
├── blog
│   └── post: route for rendering blog posts.
├── rss: page to generate the site blog posts RSS feed.
└── thumbs: page to procedurally generated Open Graph thumbnail images for each blog post.
```

## ⚖️ License