GithubHelp home page GithubHelp logo

sapper-blog-template

A starter template for building markdown-powered blogs with Sapper and Svelte.

👉 Demo

✨ Getting started

npx degit Charca/sapper-blog-template my-blog
cd my-blog
npm install # or yarn!
npm run dev

Open up localhost:3000 and start clicking around.

Consult sapper.svelte.dev for help getting started.

🏗 Structure

The base structure of this template is the same as Sapper's default template. These are some of the new things you'll find here:

src/routes/blog

This is the home of your blog. The most important files in here are:

  • _posts.js: this module contains the logic for loading and parsing your markdown posts.
  • [slug].svelte: this is the template of your blog post page.
  • index.svelte: this is the template of your article list page.

src/routes/blog/posts

This is where your markdown posts live in. All .md files in this directory are treated as blog posts and parsed automatically by the _posts.js module.

  • The markdown file name becomes the post slug. For example hello-world.md becomes http://localhost:3000/blog/hello-world.
  • Everything between the start of the post and the <!-- more --> tag becomes the article's "excerpt".
  • Frontmatter properties supported are title and date.

🚀 Deploy

Deploy to Netlify

🐛 Bugs and feedback

Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the Sapper issue tracker.

Matt James's Projects

awesome-uses icon awesome-uses

A list of /uses pages detailing developer setups, gear, software and configs.

dotfiles-1 icon dotfiles-1

The dotfiles and setup that I run on every computer

gatsby icon gatsby

Build blazing fast, modern apps and websites with React

gitmoji icon gitmoji

An emoji guide for your commit messages. 😜

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.