TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: I made a developer blog project with Astro and Tailwind

2 点作者 nemanja_codes9 个月前
Hello everyone.<p>I made a coding blog with Astro. It is pretty comprehensive project, built as a result of a thorough research of the current ecosystem and the existing open source examples, I tried to compile all the best solutions that I found in each of them and customize it to my own preference.<p>This is the Github repository for the project:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;nemanjam&#x2F;nemanjam.github.io">https:&#x2F;&#x2F;github.com&#x2F;nemanjam&#x2F;nemanjam.github.io</a><p>Live website is here:<p><a href="https:&#x2F;&#x2F;nemanjamitic.com" rel="nofollow">https:&#x2F;&#x2F;nemanjamitic.com</a><p>The main website uses Nginx, there are two additional mirrors with Github Pages and Docker:<p><a href="https:&#x2F;&#x2F;nemanjam.github.io" rel="nofollow">https:&#x2F;&#x2F;nemanjam.github.io</a><p><a href="https:&#x2F;&#x2F;nmc-docker.arm1.nemanjamitic.com" rel="nofollow">https:&#x2F;&#x2F;nmc-docker.arm1.nemanjamitic.com</a><p>You can see the complete feature list in the projects Readme, here I will note some of them:<p>It is the latest Astro, high performance, static website, has Post and Project content collections, Tailwind for styling with clean separated structure, supports both dark&#x2F;light modes and color themes with semantic colors, has support for both Tags and Categories, has Astro View Transitions that work in Chrome, Astro optimized images, all sizes are extracted as constants and reused, its fully Typescript, Zod is used for runtime (build-time) validation for content collections and config with environment variables, has usual code quality setup with ESLint and Prettier with sorted imports and paths aliases, uses class-variance-authority for components style variants, has React integration for interactive components, has separate design system on `&#x2F;design` route, has clear hierarchical layouts, well structured metadata handling and sitemap generation for good SEO, endpoint for generating Open Graph images for every page with Satori and html template with random color gradients, syntax highlighting for embedded code, embeds for Tweets, Youtube, OG links, comments with Giscus, social share button for posts, draft posts with preview mode, RSS and Json feed endpoints, has 3 different deployment methods - Nginx, Github Pages and Docker, available both locally and as Github Actions workflows, support for building both x86 and arm Docker images, deployment workflows are abstracted as Bash scripts and reused both locally and in Github Actions for easy local debugging.<p>There is a roadmap with additional features that I plan to add, currently the project is approximately 80-90% completed but it is stable enough to start populating and publishing real content, so I decided to share it with public.<p>I am not a designer, so the design is a bit raw and can be improved and polished further but the part that I put the most attention and care is the code quality, structure and readability, I made effort to make it stable, well separated, clean, understandable and maintainable in long period to come, because I plan to use it and publish coding articles in years to come.<p>All constants, types, utilities, configs, queries, styles, assets are extracted, reused, well separated, readable and easy to understand. I tried to reduce unnecessary complexity and noise as much as I can.<p>There is 4k characters limit for the initial message, I will continue in the next comment:

1 comment

nemanja_codes9 个月前
Continuation:<p>I came to an idea to make my own blog. I could just use Hashnode, Dev.to or Medium but I thought if I were to invest more time into writing coding articles I would want to have more control over it and I can always repost them on those platforms.<p>I started searching for a template where I could just customize design, I had a look at Jekyll, Hugo, Gatsby and I wasn&#x27;t so satisfied with what I found, I got impression those ecosystems are kind of in decline. I considered even Next.js although I thought it&#x27;s more suited for SSR websites. Finally I understood currently Astro is the best available tool for static websites and blog of this kind.<p>Then I researched all open source Astro blog projects that I could find and reviewed their code, eventually I found one repo that had best structure in my opinion, and had MIT license for the code, and I reused it as an starter project, it is this one:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;paularmstrong&#x2F;paularmstrong.dev">https:&#x2F;&#x2F;github.com&#x2F;paularmstrong&#x2F;paularmstrong.dev</a><p>I rewrote the most of it, also I researched and reviewed all other quality Astro open source examples that I could find, compared and reused the best solutions from each of them and integrated and customized it into my own project. All these projects are listed in Credits section in the Readme:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;nemanjam&#x2F;nemanjam.github.io#credits">https:&#x2F;&#x2F;github.com&#x2F;nemanjam&#x2F;nemanjam.github.io#credits</a><p>And 4 months and 400 commits later it is the code that I am sharing with you today. My code is also MIT licensed, feel free to reuse for your own coding blog. You might want to consider customizing the design by modifying the components in the `src&#x2F;components` folder and make it have your unique visual identity.<p>Naturally, it is open for contributions, feel free to open pull requests, issues with feature requests and bug reports. I would appreciate all constructive criticism, code reviews, have a look at code and tell me what could be done better and how, suggestions about design and functionality. If you like it consider using it or sharing it with your friends if you know that it could be interesting for them.