wshowair / portfolio

Astro Starter Kit: Blog

npm create astro@latest -- --template blog

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

Features:

• ✅ Minimal styling (make it your own!)
• ✅ 100/100 Lighthouse performance
• ✅ SEO-friendly with canonical URLs and OpenGraph data
• ✅ Sitemap support
• ✅ RSS Feed support
• ✅ Markdown & MDX support

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

├── public/
├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json

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.

🧞 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 astro ...	Run CLI commands like astro add, astro check
npm run astro --help	Get help using the Astro CLI

👀 Want to learn more?

Check out our documentation or jump into our Discord server.

Credit

This theme is based off of the lovely Bear Blog.

portfolio's Issues

security scanners

• Scan app dependencies
• Scan docker image before pushing it to registry

Update README file

• Customize the content
• Update badges

migrate Gitlab CI to GitHub actions

docker image tag does not have SHA

The docker image tag that is created is always main, no indication of which commit exactly.

Acceptance criteria

• Add short sha as another tag for the pushed docker image.

Dev Notes

docker/metadata-action has tag input with default value that does not include sha type at all. Add it

linked url preview

CSS

• Define css variables for the theme
• function to convert px to rem

CD workflow

Header Link: Enforce image width inside the component

Support build for ARM64 processor

Dev Notes:

https://github.com/docker/build-push-action/blob/master/docs/advanced/multi-platform.md

Use prod dependencies only in final docker image

push docker image to the registry

• Use Github Cloud Registry as a Docker registry.

• The docker image repository should be named after the repository.

• Image tag should indicate commit SHA and branch name.
  Example: ghcr.io/wshowair/portfolio:sha-abcd, ghcr.io/wshowair/portfolio:main

• Separate the step of building the docker image from pushing it to the registry so that in the future you can scan the docker image for vulnerabilities before pushing it.

Resources

• Publishing images to Github Cloud Registry

Security

• Why did I stopped using docker commands in the workflow?

Avoid passing secrets between processes from the command line, whenever possible. Command-line processes may be visible to other users (using the ps command) or captured by security audit events. To help protect secrets, consider using environment variables, STDIN, or other mechanisms supported by the target process.

If you must pass secrets within a command line, then enclose them within the proper quoting rules. Secrets often contain special characters that may unintentionally affect your shell. To escape these special characters, use quoting with your environment variables.

• Use GITHUB_TOKEN instead of PAT

To authenticate to the Container registry within a GitHub Actions workflow, use the GITHUB_TOKEN for the best security and experience. If your workflow is using a personal access token (PAT) to authenticate to ghcr.io, then we highly recommend you update your workflow to use the GITHUB_TOKEN.

• What is GITHUB_TOKEN

When you enable GitHub Actions, GitHub installs a GitHub App on your repository. The GITHUB_TOKEN secret is a GitHub App installation access token. You can use the installation access token to authenticate on behalf of the GitHub App installed on your repository.