Abell Starters

You will find starter projects here which will help you set up blog quickly

Starters

Cover image of Abell Minima

Abell Minima

by Abell Team

Use this Starter

or
Create new project locally with:
npx create-abell-app my-app --template abelljs/abell-starter-minima
Cover image of Portfolio Starter

Portfolio Starter

by Abell Team

Use this Starter

or
Create new project locally with:
npx create-abell-app my-app --template abelljs/abell-starter-portfolio
  • If you Deploy with Netlify, a new repository will be created on your GitHub account and it will be deployed to Netlify. Later you can make changes in the deployed website by Commiting to the New Repository. (This method is recommended to quickly get a blog running and deployed).
  • If you Create Project Locally with create-abell-app, You will get a website running locally. Later you can deploy to whichever platform you like.

Table of Content


Setting Up Project Locally

  • git clone <new-repository-url> (You can skip this if you've created project locally with create-abell-app)
  • cd <project-name>
  • npm install # to install dependencies (create-abell-app executes this by default)
  • npm run dev # to run a development server.

Now you can make changes in the website and development server will reload itself.

Folder Structure


abell-starter-minima/
|
|- 📂 content/
|  |- 📂 hello-world/  # Slug of blog
|     |- 📄 index.md    # Content of blog
|     |- 📄 meta.json    # Meta information of blog
|  |- 📂 another-blog/
|     |- 📂 assets/      # Assets directory which can have images, videos related to blog
|       |- 📄 doggo.png
|     |- 📄 index.md
|     |- 📄 meta.json
|  
|- 📂 theme/
|  |- 📂 components/
|     |- 📄 Nav.abell  # component
|  |- 📂 [path]/
|     |- 📄 index.abell  # Layout of blog
|  |- 📄 index.abell     # index.html
|
|- ⚙️ abell.config.js    # Configurations of Abell

With this structure, you will get a following files generated on npm run build.


abell-starter-minima/
|
|- 📂 dist/
|  |- 📂 hello-world/         
|     |- 📄 index.html  # [path]/index.abell + hello-world/index.md
|  |- 📂 another-blog/         
|     |- 📂 assets/     # assets is copied as it is
|       |- 📄 doggo.png
|     |- 📄 index.html 
|  |- 📄 index.html     # index.abell
|

Apart from these, you will find some more files and folders which are copied as it is. Also, some starters may not be dependent on markdown content so they may not have content directory and theme/[path]/ directory at all.

Edit/Create/Update Post

index.md

To create post, you can create a folder with index.md file in it inside content directory. The name of the folder becomes the path to that post. (E.g. content/hello-world/index.md becomes dist/hello-world/index.html in the output)

meta.json

The same directory of post can also have meta.json (e.g. content/hello-world/meta.json) file.

// content/hello-world/meta.json

{
  "$createdAt": "3 May 2020",
  "foo": "bar"
}

This meta information can be accessed from index.md and theme/[path]/index.abell in Abell.meta.foo variable

<!-- theme/[path]/index.abell -->

<div>{{ Abell.meta.foo }}</div> <!-- Prints `<div>bar</div>` -->




This will get you started with writing blogs. If you want to know more about editing theme, We will suggest going through our Tutorial to Create Your Portfolio from Scratch



GitHub Logo  Contribute to this page