Dr. Daniel Collado-Ruiz's Personal Website

This is the source code for my personal website, built with SvelteKit and Tailwind CSS.

Local Development

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open the site: Navigate to http://localhost:5173.

Building and Deployment

The site is configured as a static site using @sveltejs/adapter-static.

Automatic Deployment

The site is automatically deployed to GitHub Pages via a GitHub Action (.github/workflows/deploy.yml) whenever changes are pushed to the main branch.

Setup GitHub Pages

1. Go to your repository on GitHub.
2. Navigate to Settings > Pages.
3. Under Build and deployment > Source, select GitHub Actions. This tells GitHub to use the deployment workflow we've created instead of looking for a branch.

Custom Domain Setup

If you want to use a custom domain (e.g., collado-ruiz.es):

1. In GitHub:

   • Go to Settings > Pages.
   • Under Custom domain, enter your domain name and click Save.
   • This will create a CNAME file in your repository (or you can manually add it to the static/ folder to ensure it persists across builds).

2. In your DNS Provider (e.g., Namecheap, Cloudflare):

   • For a subdomain (e.g., www.yourdomain.com): Create a CNAME record pointing to yourusername.github.io.
   • For an apex domain (e.g., yourdomain.com): Create A records pointing to GitHub's IP addresses:
     • 185.199.108.153
     • 185.199.109.153
     • 185.199.110.153
     • 185.199.111.153
   • It is also recommended to set up a WWW redirect or ALIAS/ANAME records if your provider supports them.

3. Wait for Propagation: DNS changes can take up to 24-48 hours to propagate. Once ready, you can enable Enforce HTTPS in the GitHub Pages settings.

Manual Build

To build the static site locally:

npm run build

The output will be in the build/ directory.

Project Structure

• src/routes/: Contains the pages and layouts. Markdown files are used for content (via mdsvex).
• src/lib/: Reusable Svelte components (Hero, NavCard, Image, Tabs, etc.).
• static/: Static assets like images and favicons.
• scripts/: Utility scripts, such as fetch_blogposts.js.

External Blog Posts

The site can include blog posts from external sources (e.g., Earthster). These are stored in src/lib/external_posts.json.

To fetch the latest posts from configured sources, run:

npm run fetch_blogposts

This script will only add new posts and will not remove existing ones.