I Built an Astro Portfolio Blog Theme So You Can Setup Your Personal Website in 10 Minutes 🚀🔥
Syakir

Syakir @syakirurahman

About: Senior Frontend Engineer Based in Indonesia. Skills: Typescript, React, Vue.js, Storybook, Angular, Wordpress Theme Development

Location:
Bogor
Joined:
Mar 13, 2020

I Built an Astro Portfolio Blog Theme So You Can Setup Your Personal Website in 10 Minutes 🚀🔥

Publish Date: Aug 22 '24
90 19

Hey there 👋, Syakir here!

If you read my previous article about make money from coding, I encourage you to setup a portfolio or blog website to showcase your work.

In the past couple days, i have been building an simple, minimal portfolio / blog template for you so you can quckly deploy your personal website.

This template is Devolio.

Star Devolio on Github ⭐

Devolio built on top of Astro.js and Tailwind CSS as a Static website.

Devolio features

  • ✅ Minimal styling (make it your own!)
  • ✅ 100/100 Lighthouse performance
  • ✅ SEO-friendly with canonical URLs and OpenGraph data
  • ✅ Sitemap support
  • ✅ RSS Feed support
  • ✅ Markdown & MDX support
  • ✅ Dark Mode
  • ✅ Responsive
  • ✅ Post tags
  • ✅ Projects
  • ✅ Table of content
  • ✅ Comment box with Giscus app
  • ✅ Google tag / analytics integration

Devolio desktop lighthoust performance

Devolio mobile lighthoust performance

Setup your personal website with Devolio

You can deploy it to Netlify, Vercel or Cloudflare pages with just a few clicks.

Deploy to Netlify
Deploy with Vercel
Deploy to cloudflare

I personally deploy all my websites to Cloudflare pages because their free tier doesnt have bandwith limitation and allow commercial project.

After you clone and deploy it to any hosting provider you choose, dont forget to:

1. Change the theme content

Change the logo, picture post and project list. I use my own data for default content.

2. Setup environment variables



SITE='http://localhost:4321' # your site domain

# Google tag manager / analytics setting (optional)
PUBLIC_GTAG_MEASUREMENT_ID='' # Google tag measurement ID 'G-MXXXXXXX'

# Github token setting to call github repository API with higher limit
GITHUB_PERSONAL_ACCESS_TOKEN='' # Github Personal access token 'ghp_xxxxxxxxxxxxxxxxxxxxxxxxxx'

# Blog post comment setting (optional)
GISCUS_REPO='' # giscus.app repo 'devaradise/xxxxxxxx'
GISCUS_REPO_ID='' # giscus.app repo id 'R_xxxxxxx'
GISCUS_CATEGORY='' # giscus.app category 'Comments'
GISCUS_CATEGORY_ID='' # giscus.app category id 'DIC_xxxxxxxxxxx'

Enter fullscreen mode Exit fullscreen mode



  1. Start writing and building

Blogging with static website is simple. All your contents are stored in /src/content/blog/. You just need to copy or follow the existing content format to write a new post.

When you're finished, commit your changes and push it to your repository. Vercel, Netlify or Cloudflare will deploy your changes automatically.

4. Setup your domain name (optional)

To make your website more professional, consider to buy a domain name at namecheap started from $5.98 per year and point it to your website. Vercel, Netlify or Cloudflare have a feature where you can set a custom domain for your blog project.

I will receive a commission at no additional cost to you if you buy a domain from the link above. It will support me to keep producing high quality contents and templates in this website :)


If you find this template useful, please give it a star on Github, or share it so more people can make use of it :D
Thank you!

Happy coding!

Comments 19 total

  • Daniel T Sasser II
    Daniel T Sasser IIAug 23, 2024

    I LOVE ASTRO
    Astro is now my framework of choice. I am also creating templates for use but still a bit behind where yours is.
    I could see Astro becoming the framework of choice in the near future.

    • Syakir
      SyakirAug 23, 2024

      Yes!! Astro FTW.
      I also thinking the same.
      Now, its the best static site generator. I will believe its SSR feature will be a contender for next.js in the near future

      • Daniel T Sasser II
        Daniel T Sasser IIAug 23, 2024

        I have replaced all my PHP with their SSR using express.js. I'm working on converting a site right now.

        • Syakir
          SyakirAug 23, 2024

          with express.js?
          how does it work?
          You can just use Astro SSR right?

          • Daniel T Sasser II
            Daniel T Sasser IIAug 23, 2024

            Astro SSR has to have some sort of middleware such as node or netlify to handle the request. It's in the SSR docs. I use a server.js entry point and that has Astro route handlers in it. I also use separate middlewares in the /src/middleware folder to handle auth and verifications.

      • Daniel T Sasser II
        Daniel T Sasser IIAug 23, 2024

        Also, love the pokemon game. I've also been working on some Pokemon stuff as well.

        • Syakir
          SyakirAug 23, 2024

          The pokemon project is actually my old project for a technical interview :D

  • shimr0d
    shimr0dAug 24, 2024

    Thanks that very generous to share ;)

    • Syakir
      SyakirAug 25, 2024

      You're welcome. i hope you find it helpful :)

  • KC
    KCAug 27, 2024

    Thanks a lot for this. Will be very useful for my portfolio building. I looked through some posts and found an existing site called Devencyclopedia.dev that uses ASTRO as well.

    I'm a react developer that uses mostly Next.js in work, but I'm looking forward to this in personal development

    • Syakir
      SyakirAug 27, 2024

      You're welcome! Good luck!

  • Alijun
    AlijunAug 27, 2024

    Info linkedin bang😁

    • Syakir
      SyakirAug 27, 2024

      /in/syakirurahman bro 😁

  • Carl Eliezer
    Carl EliezerSep 4, 2024

    I’m thrilled to share my excitement after reading this fantastic content! With my recent engagement, I wanted to find something truly special and new for myself. That’s when someone introduced me to SEVlaser, and I’m so grateful for it! I reserved time as a gift for myself, and it’s been such a joy. Reading the positive experiences of others here really made my decision easier. For anyone considering, do check out Laser Hair Removal in Glendale. 🌟

  • Chandra Panta Chhetri
    Chandra Panta ChhetriOct 7, 2024

    Thank you for the template. Template looks clean and simple.

    I've been hearing a lot of good things about Astro in terms of static site generation. I've used Gatsby before which is good but it has horrible mobile LightHouse scores. The desktop scores are really good.

    For Astro, I've done LightHouse tests on multiple sites and it has very high scores on both mobile & desktop...I wonder why Gatsby lacks in that. Have you used Gatsby before?

    Also Cloudflare Pages is awesome, I don't know how I didn't know about it before. It's great for hosting front-end projects, maybe even full stack if you use Workers.

    • Syakir
      SyakirOct 9, 2024

      I havent use Gatsby before.. but its probably how it handle the javascript overhead. A lot of factors involved though.

Add comment