|
1 | | -# AstroPaper 📄 |
| 1 | +# Binary Patrick's Blog |
2 | 2 |
|
3 | | - |
4 | | -[](https://www.figma.com/community/file/1356898632249991861) |
5 | | - |
6 | | - |
7 | | -[](https://conventionalcommits.org) |
8 | | -[](http://commitizen.github.io/cz-cli/) |
| 3 | +Just a simple blog |
9 | 4 |
|
10 | | -AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on [my personal blog](https://satnaing.dev/blog). |
| 5 | +## Local Build |
11 | 6 |
|
12 | | -Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info. |
13 | | - |
14 | | -## 🔥 Features |
15 | | - |
16 | | -- [x] type-safe markdown |
17 | | -- [x] super fast performance |
18 | | -- [x] accessible (Keyboard/VoiceOver) |
19 | | -- [x] responsive (mobile ~ desktops) |
20 | | -- [x] SEO-friendly |
21 | | -- [x] light & dark mode |
22 | | -- [x] fuzzy search |
23 | | -- [x] draft posts & pagination |
24 | | -- [x] sitemap & rss feed |
25 | | -- [x] followed best practices |
26 | | -- [x] highly customizable |
27 | | -- [x] dynamic OG image generation for blog posts [#15](https://github.com/satnaing/astro-paper/pull/15) ([Blog Post](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/)) |
28 | | - |
29 | | -_Note: I've tested screen-reader accessibility of AstroPaper using **VoiceOver** on Mac and **TalkBack** on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well._ |
30 | | - |
31 | | -## ✅ Lighthouse Score |
32 | | - |
33 | | -<p align="center"> |
34 | | - <a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fastro-paper.pages.dev%2F&form_factor=desktop"> |
35 | | - <img width="710" alt="AstroPaper Lighthouse Score" src="AstroPaper-lighthouse-score.svg"> |
36 | | - </a> |
37 | | -</p> |
38 | | - |
39 | | -## 🚀 Project Structure |
40 | | - |
41 | | -Inside of AstroPaper, you'll see the following folders and files: |
42 | | - |
43 | | -```bash |
44 | | -/ |
45 | | -├── public/ |
46 | | -│ ├── pagefind/ # auto-generated when build |
47 | | -│ ├── favicon.svg |
48 | | -│ └── astropaper-og.jpg |
49 | | -├── src/ |
50 | | -│ ├── assets/ |
51 | | -│ │ ├── icons/ |
52 | | -│ │ └── images/ |
53 | | -│ ├── components/ |
54 | | -│ ├── data/ |
55 | | -│ │ └── blog/ |
56 | | -│ │ └── some-blog-posts.md |
57 | | -│ ├── layouts/ |
58 | | -│ ├── pages/ |
59 | | -│ ├── scripts/ |
60 | | -│ ├── styles/ |
61 | | -│ ├── utils/ |
62 | | -│ ├── config.ts |
63 | | -│ ├── constants.ts |
64 | | -│ ├── content.config.ts |
65 | | -│ ├── env.d.ts |
66 | | -│ └── remark-collapse.d.ts |
67 | | -└── astro.config.ts |
68 | | -``` |
69 | | - |
70 | | -Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. |
71 | | - |
72 | | -Any static assets, like images, can be placed in the `public/` directory. |
73 | | - |
74 | | -All blog posts are stored in `src/data/blog` directory. |
75 | | - |
76 | | -## 📖 Documentation |
77 | | - |
78 | | -Documentation can be read in two formats\_ _markdown_ & _blog post_. |
79 | | - |
80 | | -- Configuration - [markdown](src/data/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/) |
81 | | -- Add Posts - [markdown](src/data/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/) |
82 | | -- Customize Color Schemes - [markdown](src/data/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/) |
83 | | -- Predefined Color Schemes - [markdown](src/data/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/) |
84 | | - |
85 | | -## 💻 Tech Stack |
86 | | - |
87 | | -**Main Framework** - [Astro](https://astro.build/) |
88 | | -**Type Checking** - [TypeScript](https://www.typescriptlang.org/) |
89 | | -**Styling** - [TailwindCSS](https://tailwindcss.com/) |
90 | | -**UI/UX** - [Figma Design File](https://www.figma.com/community/file/1356898632249991861) |
91 | | -**Static Search** - [FuseJS](https://pagefind.app/) |
92 | | -**Icons** - [Tablers](https://tabler-icons.io/) |
93 | | -**Code Formatting** - [Prettier](https://prettier.io/) |
94 | | -**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/) |
95 | | -**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/) |
96 | | -**Linting** - [ESLint](https://eslint.org) |
97 | | - |
98 | | -## 👨🏻💻 Running Locally |
99 | | - |
100 | | -You can start using this project locally by running the following command in your desired directory: |
101 | | - |
102 | | -```bash |
103 | | -# pnpm |
104 | | -pnpm create astro@latest --template satnaing/astro-paper |
105 | | - |
106 | | -# npm |
107 | | -npm create astro@latest -- --template satnaing/astro-paper |
108 | | - |
109 | | -# yarn |
110 | | -yarn create astro --template satnaing/astro-paper |
111 | | - |
112 | | -# bun |
113 | | -bun create astro@latest -- --template satnaing/astro-paper |
114 | | -``` |
115 | | - |
116 | | -Then start the project by running the following commands: |
117 | | - |
118 | | -```bash |
119 | | -# install dependencies if you haven't done so in the previous step. |
120 | | -pnpm install |
121 | | - |
122 | | -# start running the project |
123 | | -pnpm run dev |
124 | | -``` |
125 | | - |
126 | | -As an alternative approach, if you have Docker installed, you can use Docker to run this project locally. Here's how: |
| 7 | +So I don't forget |
127 | 8 |
|
128 | 9 | ```bash |
129 | | -# Build the Docker image |
130 | | -docker build -t astropaper . |
131 | | - |
132 | | -# Run the Docker container |
133 | | -docker run -p 4321:80 astropaper |
134 | | -``` |
135 | | - |
136 | | -## Google Site Verification (optional) |
137 | | - |
138 | | -You can easily add your [Google Site Verification HTML tag](https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag) in AstroPaper using an environment variable. This step is optional. If you don't add the following environment variable, the google-site-verification tag won't appear in the HTML `<head>` section. |
139 | | - |
140 | | -```bash |
141 | | -# in your environment variable file (.env) |
142 | | -PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value |
143 | | -``` |
144 | | - |
145 | | -> See [this discussion](https://github.com/satnaing/astro-paper/discussions/334#discussioncomment-10139247) for adding AstroPaper to the Google Search Console. |
146 | | -
|
147 | | -## 🧞 Commands |
148 | | - |
149 | | -All commands are run from the root of the project, from a terminal: |
150 | | - |
151 | | -> **_Note!_** For `Docker` commands we must have it [installed](https://docs.docker.com/engine/install/) in your machine. |
152 | | -
|
153 | | -| Command | Action | |
154 | | -| :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- | |
155 | | -| `pnpm install` | Installs dependencies | |
156 | | -| `pnpm run dev` | Starts local dev server at `localhost:4321` | |
157 | | -| `pnpm run build` | Build your production site to `./dist/` | |
158 | | -| `pnpm run preview` | Preview your build locally, before deploying | |
159 | | -| `pnpm run format:check` | Check code format with Prettier | |
160 | | -| `pnpm run format` | Format codes with Prettier | |
161 | | -| `pnpm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). | |
162 | | -| `pnpm run lint` | Lint with ESLint | |
163 | | -| `docker compose up -d` | Run AstroPaper on docker, You can access with the same hostname and port informed on `dev` command. | |
164 | | -| `docker compose run app npm install` | You can run any command above into the docker container. | |
165 | | -| `docker build -t astropaper .` | Build Docker image for AstroPaper. | |
166 | | -| `docker run -p 4321:80 astropaper` | Run AstroPaper on Docker. The website will be accessible at `http://localhost:4321`. | |
167 | | - |
168 | | -> **_Warning!_** Windows PowerShell users may need to install the [concurrently package](https://www.npmjs.com/package/concurrently) if they want to [run diagnostics](https://docs.astro.build/en/reference/cli-reference/#astro-check) during development (`astro check --watch & astro dev`). For more info, see [this issue](https://github.com/satnaing/astro-paper/issues/113). |
169 | | -
|
170 | | -## ✨ Feedback & Suggestions |
171 | | - |
172 | | -If you have any suggestions/feedback, you can contact me via [my email](mailto:contact@satnaing.dev). Alternatively, feel free to open an issue if you find bugs or want to request new features. |
173 | | - |
174 | | -## 📜 License |
175 | | - |
176 | | -Licensed under the MIT License, Copyright © 2025 |
177 | | - |
178 | | ---- |
179 | | - |
180 | | -Made with 🤍 by [Sat Naing](https://satnaing.dev) 👨🏻💻 and [contributors](https://github.com/satnaing/astro-paper/graphs/contributors). |
| 10 | +npm run dev |
| 11 | +``` |
0 commit comments