My Blog

Setup

Simply run npm install. The following commands were run to populate the first version of package.json:

npm create astro@latest # Choose empty
npx astro add react
npx astro add astro-expressive-code
# To support a RSS Feed
npm install @astrojs/rss
npm install markdown-it
npm install sanitize-html

🚀 Project Structure

Blog posts are organized using different Astro content collections:

/
├── public/
├── src/
│   └── content/
│   |   └── read/     # .md files
│   |   └── write/    # .mdx files
│   |   └── inspect/  # .mdx files
│   └── pages/
|       └── categories
|       |   └── read.astro
|       |   └── write.astro
|       |   └── inspect.astro
|       └── read
|       |   └── [...slug].astro
|       └── write
|       |   └── [...slug].astro
|       └── inspect
|       |   └── [...slug].astro
│       └── index.astro
└── package.json

Short posts use basic Markdown files and long posts use MDX support (admonition, custom components).

Static assets, like images, are placed in the public/ directory.

🌍 Hosting

The blog is published on GitHub Pages using the official GitHub Action.

🧞 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:4321
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

Resume

Run the following command to export the resume:

$ npm run dev
# export PERSONAL_BIRTH_DATE="01 January 1985"
# export PERSONAL_EMAIL="[email protected]"
# export PERSONAL_PHONE_NUMBER="01.02.03.04.05"
$ chrome --headless --disable-gpu \
  --print-to-pdf=resume.pdf \
  --print-to-pdf-no-header \
  http://localhost:4321/resume

Define an alias if chrome doesn't exist (ex: MacOS):

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"