Adding a news article

To add a new article we must go to src/pages/news folder.

src folder pages folder news folder

Now we click the Add file button in the upperright corner. Followed by the Create new file button in the dropdown menu.

add file button create new file button

Now we come to a new page, where we first must add a name for our file. The naming here is as follows:

  1. Only lowercase words, divided with -
  2. Ending on the extension .mdx

So an example would be an article called Ducks are Beautiful Animals, could be called ducks-beautiful-animals.mdx.

add file button

Now we need to add some metadata about the article. What is the date at which it is published, and what is the title of the article.

That all goes in here. This is started and ended with a line of ---. For the date we would add a line date: "YYYY-MM-DD" with YYYY being the year, MM being the month and DD being the day. For the title we would add a line: title: "Ducks are Beautiful Animals" where you can replace everything between the quotes with your own title.

metadata

Afterwards we can add our article in the markdown format. To add images take a look here.

Markdown example

This would equate to:

Markdown preview

Now we scroll down to the Commit Changes section.

commit changes

  1. Enter an appropriate title e.g. Added news article
  2. Make sure the Commit directly to the main branch is checked.
  3. Click the Commit Changes button.

The article should now be added.

Adding a banner image

To add a banner image, we can navigate to the src/pages/news/banners folder.

src folder pages folder news folder news folder

We click the Add file button (shown in the following figure).

The add file button

A small menu will pop up and we will click the Upload files button.

Upload files button

A new page will show up where we can click the choose your files. This will open a file explorer where you can direct it towards the banner image. Alternatively, you could drag the files from the source into this box, which should also add them.

IMPORTANT NOTE: Make sure your banner image has the same base filename as your article. E.g. if your article is called ducks-beautiful-animals.mdx then your banner image should be called ducks-beautiful-animals.* with the * being the extension of the image (png, jpg, gif, bmp, etc.). This should be done before uploading the image.

All uploaded images will appear under the box (as can be seen below).

Duck added

When we have added all the images we would like to upload we can move onto the next step.

Verifying the uploaded files

If we have added all the images we want to add we can scroll down the page to see the following box.

Commiting changes

In 1 we want to add a description of what we just added. I just added a banner image so I would write something like Added banner image. This is not very important, but in the long run will help with keeping track of what you did.

We want to make sure 2 is checked.

After 1 and 2 are done, we can click the Commit Changes button.