I wanted to learn NextJS for a few months. Now the time have come and I created a server for displaying markdown blog posts. So this is my first project using NextJS.
When noticing the new appwrite hackathon, I decided to add a feature to store your markdown post files in a appwrite database.
If you are planning to add posts via the Appwrite Database capability, you need to have a Appwrite instance running on your local machine or on a server.
Files should be stored in a bucket in the storage and their ids must match the file name in order to be found!
configuration.json
inconfig
- Example AppwriteDB
"appwriteDatabase": {
"url": {
"host": "localhost",
"port": 3000
},
"projectId": "YOUR_PROJECT_ID",
"postBucketId": "YOUR_POST_BUCKET_ID",
"apiKey": "YOUR_API_KEY"
}
- Environment variables
.env
or Docker-e
- Example AppwriteDB
ENV_APPWRITEDATABASE_URL_HOST=localhost
ENV_APPWRITEDATABASE_URL_PORT=3000
ENV_APPWRITEDATABASE_PROJECTID=YOUR_PROJECT_ID
ENV_APPWRITEDATABASE_POSTBUCKETID=YOUR_POST_BUCKET_ID
ENV_APPWRITEDATABASE_APIKEY=YOUR_API_KEY
All Configuration keys:
key | subkeys | type | purpose |
---|---|---|---|
blogName | string |
Name of the blog to be displayed on the page | |
blogDescription | string |
A small description about the blog to be displayed in the header and seo | |
blogCopyright | string |
Maintainer of the blog | |
colors | dark | { "primary": string, "secondary": string, "font": string, "accent": string } |
Color definition for dark theme |
light | { "primary": string, "secondary": string, "font": string, "accent": string } |
Color definition for light theme | |
appwriteDatabase | url | { "host": string, "port": string|number } |
Connection url of the appwrite database |
projectId | string |
Id for identifying the correct project | |
postBucketId | string |
Id of bucket where blog files should be stored | |
apiKey | string |
Api key for accessing the appwrite database. !Make sure only reading files is permitted! |
When changing the configuration, you need to restart the server.
- Volumes:
config
: for accessing the configuration fileposts
: when wanting to add posts via file explorerpublic/images
: when wanting to add images
- Ports:
3000
: for displaying NextJS frontend
docker pull ghcr.io/tim0-12432/markdown-blog:latest
docker run --name markdown-blog -d -p 8082:3000 -v markdown-blog_config:/config -v markdown-blog_posts:/posts -v markdown-blog_images:/public/images -e <ENVIRONMENT_VARIABLES> ghcr.io/tim0-12432/markdown-blog:latest
- Clone the repository
- Install the dependencies via
npm install
- Build the application via
npm run build
- Run the server via
npm run start
graph TD
A[(Appwrite DB)] --> N[NextJS Server]
P[(Posts Directory)] --> N
N --> F[NextJS Frontend]
device | light | dark |
---|---|---|
desktop | ||
mobile |
All colors are configurable!
mobile | desktop |
---|---|