Skip to content
/ Build-A-Blog Public template

Create a blog or portfolio website with ease. Built with NuxtJS, TailwindCSS, and a lot of markdown. Supports dark mode 😎

Notifications You must be signed in to change notification settings

cal-overflow/Build-A-Blog

Repository files navigation

Build-A-Blog

A template website for blogging and showcasing work.
Built primarily with NuxtJS and TailwindCSS.

Click here to see an example (cal-overflow.dev)

View the source code for the website here

Light mode

Picture of home screen (light mode)

Dark mode

Picture of home screen (dark mode)

Table of contents

Getting Started

Make your own website πŸ‘¨β€πŸ’»
This website is modular so that the content and site structure is separate from the messy Vue components and JavaScript.

If you'd like a website similar to the author's (cal-overflow.dev), you can create one without needing to build it from scratch.

Click here to get started


Structure Overview

A high-level overview of how the website is structured. The different pieces involved are:


Sections

Sections are defined as folders within the src/content folder. For instance, creating a src/content/blog folder will define a blog section within your website. Each section must include an index.md defining metadata for the section.

Metadata

Required
  1. A title for the section
  2. A primaryView in which to render for the section's default route (i.e., /blog/ for src/content/blog/index.md)
  3. A secondaryView in which to render for the section's sub routes (i.e., /blog/post-1 for src/content/blog/post-1.md)

See more information on views below.

Optional
  1. A list of tags for the section

An example index.md metadata is shown below.

---
# Required
title: Blog
primaryView: post-feed # What view to show on /blog page
secondaryView: post-view # What is shown on pages like /blog/post-1, /blog/post-2, etc.

# Optional
tags:
  - Software Engineering
  - University Course
  - Backend
  - Frontend
---

This is the blog section.

Views

Views are layouts assigned to a section.
Many sections include two views: A primary view, and a secondary view. Note that not all sections require a secondary-view (i.e., the home page of cal-overflow.dev - defined here)

An example use of views is the author's portfolio section.
The primary view of this section is shown when viewing cal-overflow.dev/portfolio.
The secondary view of the section is shown when viewing a specific item within the section. (i.e., cal-overflow.dev/portfolio/we-all-start-somewhere).

In this example, the views are:

  • Primary view: post-feed
  • Secondary view: post-view

View example sections and their definitions here.


Posts πŸ“

Posts are written in Markdown and converted to HTML with the Nuxt Content module.
Each post is a markdown file within a section (i.e., src/content/blog/ directory). An example post is shown below.

File: src/content/blog/004-com-s-309.md

---
id: 4
title: COM S 309 β˜•οΈ
slug: com-s-309
date: November 25, 2020
img: feature-images/com-s-309.png
tags:
  - University Course
  - Backend
---

Computer Science 309 (Software Development Practices) is a course at Iowa State University that provides most students with their first software development-project experience.
Students are taught the basics of GitLab (version control platform), MySQL databases, Android Studio, and Spring Boot.

<!--more-->

With this rudimentary knowledge, students are then allotted most of the semester to work on their group project.
...

View the Nuxt docs on Writing Content for more information on how to write posts.

Images

Feature images are placed within the same folder as the blog post (i.e., src/content/blog/feature-images/com-s-309.png). Other post images should be placed in src/static/blog-images/. See the source code for cal-overflow.dev as an example.


Tags

Post tags allow you to group posts within the same section together based on similarities such as topic. Post tags are defined in the sections index.md file.

Refer to the sections documentation above for more information on defining tags within a section. See the documentation for posts to learn how to reference tags within a post.


Additional Features

Placeholder images

By default, when a post is created without a corresponding feature image, this placeholder is used.

Customize the placeholder image by adding a src/content/placeholder.png image.

About

Create a blog or portfolio website with ease. Built with NuxtJS, TailwindCSS, and a lot of markdown. Supports dark mode 😎

Topics

Resources

Stars

Watchers

Forks