first setup

.github/workflows/deploy.yml

@@ -0,0 +1,40 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [ main ]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+      - name: Install, build, and upload your site
+        uses: withastro/action@v3
+        # with:
+          # path: . # The root location of your Astro project inside the repository. (optional)
+          # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
+          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

astro.config.mjs

@@ -5,7 +5,7 @@ import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
-    site: 'https://example.com',
+    site: 'https://ismy.blog',
     integrations: [
         mdx(),
         sitemap(),

package.json

@@ -3,7 +3,7 @@
     "type": "module",
     "version": "0.0.1",
     "scripts": {
-        "dev": "astro dev",
+        "dev": "astro dev --host",
         "start": "astro dev",
         "build": "astro build",
         "preview": "astro preview",

public/CNAME

@@ -0,0 +1 @@
+ismy.blog

src/components/Button.astro

@@ -8,7 +8,7 @@ type Props = ButtonProps | AnchorProps;
 
 const { href, class: className, ...rest } = Astro.props;
 const buttonClasses =
-    'inline-flex items-center justify-center px-6 py-2 font-serif text-sm leading-tight italic  text-main bg-main border border-main rounded-full transition hover:bg-muted';
+    'inline-flex items-center justify-center px-6 py-2 font-sans text-sm leading-tight italic  text-main bg-main border border-main rounded-full transition hover:bg-muted';
 ---
 
 {

src/components/Footer.astro

@@ -5,12 +5,12 @@ const socialLinks = siteConfig.socialLinks || [];
 const navLinks = siteConfig.footerNavLinks || [];
 ---
 
-<footer class="w-full max-w-3xl mx-auto pt-12 pb-10 sm:pt-24 sm:pb-14">
+<footer class="w-full max-w-6xl mx-auto pt-12 pb-10 sm:pt-24 sm:pb-14">
     {
         navLinks.length > 0 && (
             <div class="mb-4 flex flex-wrap gap-x-6 gap-y-1">
                 {navLinks.map((link) => (
-                    <a class="font-serif hover:underline hover:underline-offset-2" href={link.href}>
+                    <a class="font-sans hover:underline hover:underline-offset-2" href={link.href}>
                         {link.text}
                     </a>
                 ))}

src/components/Header.astro

@@ -2,14 +2,14 @@
 import siteConfig from '../data/site-config';
 ---
 
-<header class="w-full max-w-3xl mx-auto mb-12 sm:mb-16">
+<header class="w-full max-w-6xl mx-auto mb-12 sm:mb-16">
     {
         siteConfig.logo && siteConfig.logo?.src ? (
             <a href="/">
                 <img src={siteConfig.logo.src} alt={siteConfig.logo.alt || ''} class="max-h-12" />
             </a>
         ) : (
-            <a class="font-serif text-2xl leading-tight font-medium text-theme-foreground sm:text-4xl" href="/">
+            <a class="font-sans text-2xl leading-tight font-medium text-theme-foreground sm:text-4xl" href="/">
                 {siteConfig.title}
             </a>
         )

src/components/Hero.astro

@@ -9,7 +9,7 @@ const hero = siteConfig.hero;
 {
     (hero?.title || hero?.image?.src || hero?.text || (hero?.actions && hero.actions.length > 0)) && (
         <section class="w-full flex flex-col gap-8 mb-16 sm:mb-24">
-            {hero.title && <h1 class="text-3xl leading-tight font-serif font-medium sm:text-5xl sm:leading-tight">{hero.title}</h1>}
+            {hero.title && <h1 class="text-3xl leading-tight font-sans font-medium sm:text-5xl sm:leading-tight">{hero.title}</h1>}
             {hero.image?.src && (
                 <figure>
                     <img class="w-full" src={hero.image.src} loading="lazy" decoding="async" alt={hero.image.alt || ''} />

src/components/Nav.astro

@@ -9,7 +9,7 @@ const navLinks = siteConfig.headerNavLinks || [];
 <nav class="min-h-10 pt-4 pb-12 relative sm:min-h-14 sm:pb-24 md:pt-8">
     {
         navLinks.length > 0 && (
-            <div class="w-full max-w-3xl mx-auto relative">
+            <div class="w-full max-w-6xl mx-auto relative">
                 <button
                     class="menu-toggle w-8 h-8 -ml-1 flex items-center justify-center relative z-30 md:hidden"
                     aria-label="Open Menu"
@@ -22,7 +22,7 @@ const navLinks = siteConfig.headerNavLinks || [];
                     {navLinks.map((link) => (
                         <li class="py-1">
                             <NavLink
-                                class="text-xl font-serif text-main hover:underline hover:underline-offset-2 hover:decoration-1 md:text-base"
+                                class="text-xl font-sans text-main hover:underline hover:underline-offset-2 hover:decoration-1 md:text-base"
                                 href={link.href}
                             >
                                 {link.text}

src/components/PostPreview.astro

@@ -13,7 +13,7 @@ const TitleTag = headingLevel;
 <a class:list={['flex justify-between items-start gap-8 group', className]} href={`/blog/${post.slug}/`}>
     <div class="grow">
         <TitleTag
-            class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl"
+            class="text-xl leading-tight font-sans font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl"
         >
             {title}
         </TitleTag>
@@ -32,7 +32,7 @@ const TitleTag = headingLevel;
         </div>
         {excerpt && <div class="mt-3 text-sm leading-normal">{excerpt}</div>}
     </div>
-    <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
+    <div class="hidden font-sans italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
         Read Post <ArrowRight class="fill-current w-4 h-4" />
     </div>
 </a>

src/components/ProjectPreview.astro

@@ -12,13 +12,13 @@ const TitleTag = headingLevel;
 <a class:list={['flex justify-between items-start gap-8 group', className]} href={`/projects/${project.slug}/`}>
     <div class="grow">
         <TitleTag
-            class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl"
+            class="text-xl leading-tight font-sans font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl"
         >
             {title}
         </TitleTag>
         {description && <div class="mt-1 text-sm leading-normal">{description}</div>}
     </div>
-    <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
+    <div class="hidden font-sans italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
         View Project <ArrowRight class="fill-current w-4 h-4" />
     </div>
 </a>

src/components/Subscribe.astro

@@ -11,7 +11,7 @@ const { class: className } = Astro.props;
     subscribe?.formUrl && (
         <section class:list={['px-8 py-12 flex flex-col items-center border border-dashed border-main text-center sm:px-12 sm:py-16', className]}>
             {subscribe.title && (
-                <h2 class:list={['w-full max-w-xl text-2xl leading-tight font-serif font-medium sm:text-4xl', subscribe.text ? 'mb-4' : 'mb-8']}>
+                <h2 class:list={['w-full max-w-xl text-2xl leading-tight font-sans font-medium sm:text-4xl', subscribe.text ? 'mb-4' : 'mb-8']}>
                     {subscribe.title}
                 </h2>
             )}