Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qingwave/writings
Writings is a personal website based on Astro and Tailwind CSS.
https://github.com/qingwave/writings
astro blog qingwave tailwind tailwindcss
Last synced: 3 months ago
JSON representation
Writings is a personal website based on Astro and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/qingwave/writings
- Owner: qingwave
- License: mit
- Created: 2023-04-26T10:11:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-20T11:11:52.000Z (4 months ago)
- Last Synced: 2024-10-02T09:09:40.649Z (3 months ago)
- Topics: astro, blog, qingwave, tailwind, tailwindcss
- Language: Astro
- Homepage: https://qingwave.github.io/
- Size: 12.2 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Qingwave's Writings
This my personal website based on [Astro](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/), use the [AstroWind](https://github.com/onwidget/astrowind) theme.
### Project structure
```
/
├── public/
│ ├── robots.txt
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── images/
│ │ └── styles/
│ │ └── base.css
│ ├── components/
│ │ ├── blog/
│ │ ├── common/
│ │ ├── widgets/
│ │ │ ├── Header.astro
│ │ │ └── ...
│ │ ├── CustomStyles.astro
│ │ └── Logo.astro
│ ├── content/
│ │ ├── post/
│ │ │ ├── post-slug-1.md
│ │ │ ├── post-slug-2.mdx
│ │ │ └── ...
│ │ └-- config.ts
│ ├── layouts/
│ │ ├── BaseLayout.astro
│ │ └── ...
│ ├── pages/
│ │ ├── [...blog]/
│ │ │ ├── [category]/
│ │ │ ├── [tag]/
│ │ │ ├── [...page].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── 404.astro
│ │ ├-- rss.xml.ts
│ │ └── ...
│ ├── utils/
│ ├── config.mjs
│ └── data.js
├── package.json
├── astro.config.mjs
└── ...
```
### Dependencies
- node >=16.12.0
### Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :-------------------- | :------------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run format` | Format codes with Prettier |
| `npm run lint:eslint` | Run Eslint |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
| `npm new "some blog"` | Create a new blog |
### Configuration
Basic configuration file: `./src/config.mjs`, and you can also config the `./src/data.js`
```javascript
const CONFIG = {
name: 'Example',
origin: 'https://example.com',
basePathname: '/', // Change this if you need to deploy to Github Pages, for example
trailingSlash: false, // Generate permalinks with or without "/" at the end
title: 'Example - This is the homepage title of Example', // Default seo title
description: 'This is the homepage description of Example', // Default seo description
defaultImage: 'image.jpg', // Default seo image
defaultTheme: 'system', // Values: "system" | "light" | "dark" | "light:only" | "dark:only"
language: 'en', // Default language
textDirection: 'ltr', // Default html text direction
dateFormatter: new Intl.DateTimeFormat('en', {
// Date format
year: 'numeric',
month: 'short',
day: 'numeric',
timeZone: 'UTC',
}),
googleAnalyticsId: false, // Or "G-XXXXXXXXXX",
googleSiteVerificationId: '', // Or some value,
blog: {
disabled: false,
postsPerPage: 4,
post: {
permalink: '/%slug%', // variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
noindex: false,
disabled: false,
},
list: {
pathname: 'blog', // Blog main path, you can change this to "articles" (/articles)
noindex: false,
disabled: false,
},
category: {
pathname: 'category', // Category main path /category/some-category
noindex: true,
disabled: false,
},
tag: {
pathname: 'tag', // Tag main path /tag/some-tag
noindex: true,
disabled: false,
},
},
};
```
### Deploy
#### Deploy to production (manual)
You can create an optimized production build with:
```shell
npm run build
```
Now, your website is ready to be deployed. All generated files are located at
`dist` folder, which you can deploy the folder to any hosting service you
prefer.