My First Blog Post
I wanted a dev journal, per se, to keep track of my learning and progress. There is so much material out there that I lose track of what I have done. I did not want the overhead of one more login on Blogger/WordPress with the ads and pricing structure - simple is best!
So, I looked around on Github to see if there was a way to simply host a blogging framework on Github and deploy it via Netlify and no surprise, there was!
Astro looks for .astro
or .md
files in the src/pages/
directory. Each page is exposed as a route based on its file name. It works with React/Vue/Svelte/Preact components.
Documenting steps for a straightforward <a href=“https://astro.build/“>Astro</a> build!
What I like:
- Component Based: It works well organizationally for content. It is straightforward and simple to organize. It is well-designed for graceful code layouts. The framework makes it easy to understand as well.
- Easy dynamic routing: Almost effortless. Easiest way to dynamically generate pages, imagine all error and 404 errors are handled by default, out of box!
- Uses the most common frontend frameworks: Makes migration of current website fairly quick. There is little to relearn and enables quick adaptability.
- Solid online documentation and tutorial: I had no issues till Unit 5. It is updated. Taking about 3 hrs to cut through 5 units of the tutorial.
What I’ve accomplished
- Installing Astro: First, I created a new <a href=“https://astro.build/“>Astro</a> project and set up my online accounts.
- Making Pages: I then learned how to make pages by creating new
.astro
files and placing them in thesrc/pages/
folder. - Making Blog Posts: This is my first blog post! I now have <a href=“https://astro.build/“>Astro</a> pages and Markdown posts!
What’s next
I will finish the <a href=“https://docs.astro.build/en/tutorial” > Astro </a> tutorial, and then keep adding more posts.
Documented Steps:
- Install Astro in a directory of your choice locally, select yes for Git integration <code>npm create astro@latest — —template minimal</code>
- Run the following in terminal<br/> <code>cd blog</code><br/> <code>npm run dev</code><br/> <code>astro telemetry disable</code><br/>
- Test website via: <code>http://localhost:4321/ </code>
- Set up your <a href=“https://app.netlify.com/login”>Netlify </a> account if you do not have one
- Debug and fix tags not filtering and displaying properly
- Added formatted dates to tag filtering and blog posts.