Git Product home page Git Product logo

val-town-blog's Introduction

Val Town Blog

npm create astro@latest -- --template blog

Open in StackBlitz Open with CodeSandbox Open in GitHub Codespaces

๐Ÿง‘โ€๐Ÿš€ Seasoned astronaut? Delete this file. Have fun!

blog

Features:

  • โœ… Minimal styling (make it your own!)
  • โœ… 100/100 Lighthouse performance
  • โœ… SEO-friendly with canonical URLs and OpenGraph data
  • โœ… Sitemap support
  • โœ… RSS Feed support
  • โœ… Markdown & MDX support

๐Ÿš€ Project Structure

Inside of your Astro project, you'll see the following folders and files:

โ”œโ”€โ”€ public/
โ”œโ”€โ”€ src/
โ”‚ย ย  โ”œโ”€โ”€ components/
โ”‚ย ย  โ”œโ”€โ”€ content/
โ”‚ย ย  โ”œโ”€โ”€ layouts/
โ”‚ย ย  โ””โ”€โ”€ pages/
โ”œโ”€โ”€ astro.config.mjs
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ tsconfig.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

The src/content/ directory contains "collections" of related Markdown and MDX documents. Use getCollection() to retrieve posts from src/content/blog/, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.

Any static assets, like images, can be placed in the public/ directory.

๐Ÿ“ฆ Git LFS

Make sure you have git lfs (brew install git-lfs) installed before cloning. If you get errors when building you might be working with LFS references instead of downloaded images. Install git-lfs and re-clone the repo.

๐Ÿงž 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:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro -- --help Get help using the Astro CLI

๐Ÿ‘€ Want to learn more?

Check out our documentation or jump into our Discord server.

Credit

This theme is based off of the lovely Bear Blog.

Private fork development

If you're a Val Town employee, working on a super secret blog post, here's how to develop on this repo in secret:

  1. git lfs install
  2. Create a new branch off the main of this public blog repo git checkout -b super-secret-branch
  3. Add the private fork as a remote: git remote add private https://github.com/val-town/private-blog.git
  4. Push the new branch to the private fork: git push private super-secret-branch
  5. Develop in secret on the private fork
  6. When you're ready to publish, create a public remote on the private repo: git remote add public https://github.com/val-town/val-town-blog.git
  7. Push the branch to the public repo: git push public super-secret-branch
  8. Open a PR from the public repo to the main branch of the public blog repo

val-town-blog's People

Contributors

tmcw avatar stevekrouse avatar dependabot[bot] avatar andreterron avatar neverstew avatar xkonti avatar maxmcd avatar

Stargazers

 avatar id-2 avatar Jack Harrhy avatar

Watchers

 avatar  avatar  avatar  avatar Brent Jackson avatar

Forkers

xkonti neverstew

val-town-blog's Issues

Add a form to subscribe by email

We had this before, powered by sendgrid, but it was pretty clunk. We could make a new component and hit the sendgrid api with it, or proxy it with Val Town.

Add thumbnail images

Thumbnail images tend to help a ton with both ranking and the design of the site - we should work on adding some.

Fix max-pixels bug

Currently failing to generate the site because of this error:

generating optimized images
16:06:30   โ–ถ /_astro/untitled-1.TT4nkGxv_Z2rFvbz.webp (before: 107kB, after: 15kB) (+30ms) (1/101)
16:06:30   โ–ถ /_astro/screenshot_2023-11-28_at_1024522x.NmWuJ3HQ_Jkm9g.webp (before: 60kB, after: 17kB) (+60ms) (2/101)
16:06:30   โ–ถ /_astro/untitled.u6f8TGc5_ZlvI9d.webp (before: 89kB, after: 34kB) (+64ms) (3/101)
16:06:30   โ–ถ /_astro/screenshot_2023-10-19_at_123546.TSYjGZtS_Z14riFn.webp (before: 53kB, after: 25kB) (+54ms) (4/101)
16:06:30   โ–ถ /_astro/screenshot_2023-11-28_at_1029372x.5c_ENIgY_29hnCi.webp (before: 104kB, after: 40kB) (+157ms) (5/101)
16:06:30   โ–ถ /_astro/screenshot_2023-10-02_at_160105.ZjKIWbso_2oVpEw.webp (before: 83kB, after: 38kB) (+45ms) (6/101)
16:06:30   โ–ถ /_astro/frame_1.G23pLodK_1l8Gb9.webp (before: 101kB, after: 54kB) (+48ms) (7/101)
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: Input image exceeds pixel limit]

Annoying that Astro doesn't report the image name!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.