Write a new Blog Post

1. Create a new file in /src/posts/.
   • You can create it in the VSCode sidebar, or in the windows flie manager, or in the terminal. It doesn't matter.
   • Give the file a name that follows this convention:yyyy-mm-dd-post-name.
   • Choose a file extention of either .md for a markdown file, or .html for an HTML file.
   • For example 2022-01-01-this-is-my-first-post.md
2. Add Frontmatter to the beginning of the new file.
   • it should be surrounded by --- and should include the following properties: title,description,date, and image.
   • image should correspond to the name of a file in /src/assets/images/posts/

See changes quickly

If you run your site in development mode using the following command, your changes will appear in the browser whenever a file is saved.

npm run dev

Open http://localhost:8080 with your favorite browser to see your blog.

Deploy to production

When you are done making changes, use the following command. Your site will be built in production mode, and it will be served at a temporary local port so you can look at it in the browser.

npm run serve

Now, your blog is ready to be deployed. All generated files are located at _site folder, which you can deploy with any hosting service.

Glossary of Terms

Markdown

Markdown is text that is styled with special characters typed within the text. https://www.markdownguide.org/cheat-sheet/

Example:

# Heading 1
## Heading 2
_italics_
**bold**
[link text](linkurl)

Markup

Markup is a system for structuring or formatting data. Notable examples include HTML (Hypertext Markup Language), XML, YAML, or KML. In web design, we mostly use the term as shorthand for HTML.

Example of HTML:

<h1>Heading 1</h1>
<h1>Heading 2</h1>
<em>italics</em>
<strong>bold</strong>
<a href="linkurl">link text</a>

Frontmatter

Frontmatter is the set of properties defined at the top of a blog page. When 11ty sees the front matter block at the top of the page, it will be processed as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines.

Example:

---
title: 'abc'
description: 'xyz'
---

Project structure

.
├── public             # Static files
│   └── assets
│       └── images     # Images not needed by Webpack
└── src
    ├── _data          # Eleventy data folder
    ├── _includes
    │   └── layouts    # HTML layout files
    ├── assets         # Assets folder that needs to be processed by Webpack
    │   ├── images
    │   │   └── posts  # Images used in your blog posts (will be compressed by Webpack)
    │   └── styles     # Your blog CSS files
    └── posts          # Your blog posts

Original Template

https://github.com/ixartz/Eleventy-Starter-Boilerplate/