Added some example blog posts
This commit is contained in:
parent
aeec9554ca
commit
a14cb236e3
6 changed files with 94 additions and 8 deletions
|
|
@ -1,5 +1,18 @@
|
||||||
---
|
---
|
||||||
|
const pageTitle = "About Me";
|
||||||
|
|
||||||
|
const identity = {
|
||||||
|
firstName: "Sarah",
|
||||||
|
country: "Canada",
|
||||||
|
occupation: "Technical Writer",
|
||||||
|
hobbies: ["photography", "birdwatching", "baseball"],
|
||||||
|
};
|
||||||
|
|
||||||
|
const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
|
||||||
|
|
||||||
|
const happy = true;
|
||||||
|
const finished = false;
|
||||||
|
const goal = 3;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
@ -8,18 +21,37 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Astro</title>
|
<title>{pageTitle}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
<a href="/about/">About</a>
|
<a href="/about/">About</a>
|
||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
|
|
||||||
<h1>About Me</h1>
|
<h1>{pageTitle}</h1>
|
||||||
<h2>... and my new Astro site!</h2>
|
<h2>... and my new Astro site!</h2>
|
||||||
|
|
||||||
<p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
|
<p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
|
||||||
|
|
||||||
<p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
|
<p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
|
||||||
|
|
||||||
|
<p>Here are a few facts about me:</p>
|
||||||
|
<ul>
|
||||||
|
<li>My name is {identity.firstName}.</li>
|
||||||
|
<li>I live in {identity.country} and I work as a {identity.occupation}.</li>
|
||||||
|
{identity.hobbies.length >= 2 &&
|
||||||
|
<li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<p>My skills are:</p>
|
||||||
|
<ul>
|
||||||
|
{skills.map((skill) => <li>{skill}</li>)}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{happy && <p>I am happy to be learning Astro!</p>}
|
||||||
|
|
||||||
|
{finished && <p>I finished this tutorial!</p>}
|
||||||
|
|
||||||
|
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
|
const pageTitle = "My Astro Learning Blog";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
@ -8,14 +8,19 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Astro</title>
|
<title>{pageTitle}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
<a href="/about/">About</a>
|
<a href="/about/">About</a>
|
||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
|
|
||||||
<h1>My Astro Learning Blog</h1>
|
<h1>{pageTitle}</h1>
|
||||||
<p>This is where I will post about my journey learning Astro.</p>
|
<p>This is where I will post about my journey learning Astro.</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/posts/post-1/">Post 1</a></li>
|
||||||
|
<li><a href="/posts/post-2/">Post 2</a></li>
|
||||||
|
<li><a href="/posts/post-3/">Post 3</a></li>
|
||||||
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
|
const pageTitle = "Home Page";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Astro</title>
|
<title>{pageTitle}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
<a href="/about/">About</a>
|
<a href="/about/">About</a>
|
||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
|
|
||||||
<h1>My Astro Site</h1>
|
<h1>{pageTitle}</h1>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
27
src/pages/posts/post-1.md
Normal file
27
src/pages/posts/post-1.md
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
title: 'My First Blog Post'
|
||||||
|
pubDate: 2022-07-01
|
||||||
|
description: 'This is the first post of my new Astro blog.'
|
||||||
|
author: 'Astro Learner'
|
||||||
|
image:
|
||||||
|
url: 'https://docs.astro.build/assets/rose.webp'
|
||||||
|
alt: 'The Astro logo on a dark background with a pink glow.'
|
||||||
|
tags: ["astro", "blogging", "learning in public"]
|
||||||
|
---
|
||||||
|
# My First Blog Post
|
||||||
|
|
||||||
|
Published on: 2022-07-01
|
||||||
|
|
||||||
|
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
|
||||||
|
|
||||||
|
## What I've accomplished
|
||||||
|
|
||||||
|
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
|
||||||
|
|
||||||
|
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||||
|
|
||||||
|
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||||
|
|
||||||
|
## What's next
|
||||||
|
|
||||||
|
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||||
11
src/pages/posts/post-2.md
Normal file
11
src/pages/posts/post-2.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
title: My Second Blog Post
|
||||||
|
author: Astro Learner
|
||||||
|
description: "After learning some Astro, I couldn't stop!"
|
||||||
|
image:
|
||||||
|
url: "https://docs.astro.build/assets/arc.webp"
|
||||||
|
alt: "The Astro logo on a dark background with a purple gradient arc."
|
||||||
|
pubDate: 2022-07-08
|
||||||
|
tags: ["astro", "blogging", "learning in public", "successes"]
|
||||||
|
---
|
||||||
|
After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
|
||||||
11
src/pages/posts/post-3.md
Normal file
11
src/pages/posts/post-3.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
title: My Third Blog Post
|
||||||
|
author: Astro Learner
|
||||||
|
description: "I had some challenges, but asking in the community really helped!"
|
||||||
|
image:
|
||||||
|
url: "https://docs.astro.build/assets/rays.webp"
|
||||||
|
alt: "The Astro logo on a dark background with rainbow rays."
|
||||||
|
pubDate: 2022-07-15
|
||||||
|
tags: ["astro", "learning in public", "setbacks", "community"]
|
||||||
|
---
|
||||||
|
It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!
|
||||||
Loading…
Add table
Add a link
Reference in a new issue