May 12, 2023
Start a blog with Astro
This is the first post of my new Astro blog.
Hi there, I am Peter, this is my first post of my new blog. I am trying to learn in public, and I think this is a good way to do it.
Astro’s tutorial on how to start a blog inspired me to start my own blog. I have been thinking about it for a long time, but I was not sure how to start.
I have been using Svelte for a while now, I really like it, but the SvelteKit that comes with it is causing me some problems. mainly because the file-based routing is using a
+page.svelte naming convention. I don’t really like it, the opened file list everything as +page, I want to just use
page.svelte like the old one. I know that I can change it, but I don’t want to spend time on it, I just want to write a blog, preferably in Markdown.
And guess what, you can use Markdown with Astro, and it is really easy to use, it also support rendering Svelte component, so I can use it to show Path of Exile items, or even a calculator if I want to.
I am not sure if I will continue to use Astro, but I will give it a try. I will try to write a few posts, and see how it goes.
Steps I took to start this blog so far
- Create a new Astro project using the Astro Starter Kit: Minimal template.
- Open the project in VS Code, and install the recommended extensions.
- Publish the project to GitHub.
- Create a new Cloudflare Pages project, and connect it to the GitHub repository.
- Choose the Astro preset
- Add the following environment variables:
- Add a custom domain:
xiaz.tvthis will create a CNAME record in Cloudflare DNS
- Add Tailwind
- Add Svelte
- Install Fonts I put Inter first and Kanit last so all the latin/etc. characters will use Inter, and the rest will use Kanit.
- Follow the tutorial, adjust as needed.