Journal

Getting started with journal, an Astro blog template.

This guide will walk you through the steps of installing, running locally, customizing, managing content, and deploying the journal template.

Structure

Once you’ve downloaded the template, you’ll find these folders and files inside:

.
├── public
│   ├── covers/
│   ├── fonts/
│   ├── favicon.png
│   ├── journal-logo.svg
│   ├── robots.txt
│   └── sep.svg
├── src
│   ├── components
│   │   ├── mdx/
│   │   ├── post
│   │   │   ├── post-content.astro
│   │   │   ├── post-list-item.astro
│   │   │   └── post-list.astro
│   │   ├── box.astro
│   │   ├── date-tag.astro
│   │   ├── footer.astro
│   │   ├── header.astro
│   │   ├── layout.astro
│   │   ├── menus.astro
│   │   ├── meta.astro
│   │   ├── slug-list.astro
│   │   └── tag.astro
│   ├── content
│   │   ├── blog/
│   │   └── config.ts
│   ├── helpers
│   │   └── index.ts
│   ├── pages
│   │   ├── date
│   │   │   ├── [slug].astro
│   │   │   └── index.astro
│   │   ├── posts
│   │   │   ├── [slug].astro
│   │   │   └── index.astro
│   │   ├── tags
│   │   │   ├── [slug].astro
│   │   │   └── index.astro
│   │   ├── index.astro
│   │   └── rss.xml.ts
│   ├── styles
│   │   └── global.css
│   ├── types
│   │   └── env.d.ts
│   ├── config.ts
│   └── env.d.ts
├── .gitignore
├── astro.config.mjs
├── LICENSE.txt
├── package.json
├── pnpm-lock.yaml
├── README.md
└── tsconfig.json

Stack

  • Astro

Prerequisites

  • Node.js - v20.9.0 or higher
  • Text editor
  • Terminal

Installation

To install navigate into template folder and install the dependencies.

cd journal-XXX
pnpm i

Running locally

Start the development server.

pnpm run dev

If all goes well, you should be able to view the template running locally at http://localhost:4321/.

Template will listen for live file changes in your src/ folder, saving you the need to restart the server as you make changes during development.

Success! You are now ready to start customization.

If you aren’t able to run template in the browser, go back to the terminal where you ran the dev command and look to see if an error occurred, or if template is being served at a different URL than the one linked to above.

Configuration

Configure the site by updating the src/config.ts file.

  • SITE_FAVICON — favicon of the site.
  • SITE_LOGO — logo of the site.
  • SITE_TITLE — title of the site.
  • SITE_DESCRIPTION — description of the site.
  • MENUS — the main nav.
  • FOOTER_CONTENT — footer content.

Changing theme

The default theme is set to light warm. To change it, update the data-new-ui-theme attribute located within the src/components/layout.astro file.

<html data-new-ui-theme="light--warm">
Available themes Value
Light light
Light warm (Default) light--warm
Light cold light--cold
Dark dark
Dark warm dark--warm
Dark cold dark--cold

Modifying the accent color

By default, the template uses --support-error (red) as its accent color. You can easily switch to any other color from our primary color palette or a custom value. To change it, update the :root selector within the src/styles/global.css file.

:root {
    --accent: var(--support-error);
}

Customizing blog content

The .mdx files, located within the src/content/blog/ folder, contain the blog entries. The development preview will update immediately upon any changes made to this file. Example file:

---
title: "Title of the post"
description: "Enter description here"
date: "YYYY-MM-DD"
tags: ["Tag1", "Tag2", "Tag3", "Tag4"]
cover: "/covers/cover01.png"
---

Add the content for your post here ...

Building the app

Run build command to build the page.

pnpm run build

By default, the build output will be placed at dist/. You may deploy this dist folder to any of your preferred platforms.

Deploying

Deploying your template is quick and easy. You can choose from several hosting providers and deploy using either their website dashboard or command-line interface (CLI).

A fast way to deploy your directory is to connect your online Git repository (like GitHub, GitLab, or Bitbucket) to a host provider. This lets you take advantage of continuous deployment using Git.

These host platforms automatically detect changes to your template’s code in your Git repository. They then build your site and deploy it to the web, using either a custom URL or your personal domain.

For detailed instructions on deploying your directory template on different platforms, please visit the Astro deployment guides.