A template website for blogging and showcasing work.
Built primarily with NuxtJS and TailwindCSS.
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.
A high-level overview of how the website is structured. The different pieces involved are:
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.
- A title for the section
- A
primaryViewin which to render for the section's default route (i.e.,/blog/forsrc/content/blog/index.md) - A
secondaryViewin which to render for the section's sub routes (i.e.,/blog/post-1forsrc/content/blog/post-1.md)
See more information on views below.
- 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 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 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.
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.
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.
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.