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

https://github.com/gbgabo/gabo.link

My corner on the internet
https://github.com/gbgabo/gabo.link

blog mpa portfolio ssg

Last synced: 3 months ago
JSON representation

My corner on the internet

Awesome Lists containing this project

README

          

# [gabo.link](https://gabo.link)

Gabo's personal static website powered by Astro, typescript, MDX and tailwindcss;

## Features

- Integration with **Tailwind CSS** ([@astrojs/tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/)) supporting **Dark mode**.
- **Production-ready** scores in [Lighthouse](https://web.dev/measure/) and [PageSpeed Insights](https://pagespeed.web.dev/) reports.
- **Fast and SEO friendly blog** with automatic **RSS feed** ([@astrojs/rss](https://docs.astro.build/en/guides/rss/)), [**MDX** support](https://docs.astro.build/en/guides/integrations-guide/mdx/), **Categories & Tags**, **Social Share**.
- **Image optimization** ([@astrojs/images](https://docs.astro.build/en/guides/integrations-guide/image/)) and **Font optimization**.
- Generation of **project sitemap** based on your routes ([@astrojs/sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)).
- **Open Graph tags** for social media sharing.
- **Generation of dynamic Open Graph images** for each post you create.
- **Analytics** built-in Google Analytics, and Splitbee integration.


gabo.link homepage Screenshot
gabo.link homepage Screenshot


This repo is based on the AstroWind template. In the project you'll see the following folders and files:

```
/
├── public/
│ ├── robots.txt
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── images/
│ │ └── styles/
│ │ └── base.css
│ ├── components/
│ │ ├── blog/
│ │ ├── common/
│ │ ├── widgets/
│ │ │ ├── Header.astro
│ │ │ └── ...
│ │ ├── CustomStyles.astro
│ │ └── Logo.astro
│ ├── content/
│ │ ├── post/
│ │ │ ├── post-slug-1.md
│ │ │ ├── post-slug-2.mdx
│ │ │ └── ...
│ │ └-- config.ts
│ ├── layouts/
│ │ ├── BaseLayout.astro
│ │ └── ...
│ ├── pages/
│ │ ├── [...blog]/
│ │ │ ├── [category]/
│ │ │ ├── [tag]/
│ │ │ ├── [...page].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── 404.astro
│ │ ├-- rss.xml.ts
│ │ └── ...
│ ├── utils/
│ ├── config.mjs
│ └── data.js
├── package.json
├── astro.config.mjs
└── ...
```

Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the `public/` directory if they do not require any transformation or in the `assets/` directory if they are imported directly.

> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Update `config.mjs` and contents. Have fun!


### Commands

All commands are run from the root of the project, from a terminal:

| Command | Action |
| :-------------------- | :------------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run format` | Format codes with Prettier |
| `npm run lint:eslint` | Run Eslint |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |


### Configuration

Basic configuration file: `./src/config.mjs`

```javascript
const CONFIG = {
name: 'Example',

origin: 'https://example.com',
basePathname: '/', // Change this if you need to deploy to Github Pages, for example
trailingSlash: false, // Generate permalinks with or without "/" at the end

title: 'Example - This is the homepage title of Example', // Default seo title
description: 'This is the homepage description of Example', // Default seo description
defaultImage: 'image.jpg', // Default seo image

defaultTheme: 'system', // Values: "system" | "light" | "dark" | "light:only" | "dark:only"

language: 'en', // Default language
textDirection: 'ltr', // Default html text direction

dateFormatter: new Intl.DateTimeFormat('en', {
// Date format
year: 'numeric',
month: 'short',
day: 'numeric',
timeZone: 'UTC',
}),

googleAnalyticsId: false, // Or "G-XXXXXXXXXX",
googleSiteVerificationId: false, // Or some value,

blog: {
disabled: false,
postsPerPage: 4,

post: {
permalink: '/%slug%', // variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
noindex: false,
disabled: false,
},

list: {
pathname: 'blog', // Blog main path, you can change this to "articles" (/articles)
noindex: false,
disabled: false,
},

category: {
pathname: 'category', // Category main path /category/some-category
noindex: true,
disabled: false,
},

tag: {
pathname: 'tag', // Tag main path /tag/some-tag
noindex: true,
disabled: false,
},
},
};
```


### Deploy

#### Deploy to production (manual)

You can create an optimized production build with:

```shell
npm run build
```

Now, your website is ready to be deployed. All generated files are located at
`dist` folder, which you can deploy the folder to any hosting service you
prefer.

## Contributing

If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request.
That would be very useful for all of us and we would be happy to listen and take action.

## Acknowledgements

Initially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/astrowind/graphs/contributors).

## License

Licensed under the MIT license — see the [LICENSE](./LICENSE.md) file for details.