PC Fam Gatherings

Page Location: /help/helpen/how-to-make-a-small-website

Page FileName: content/help/helpen/how-to-make-a-small-website.md

Jump to Formatted Article Close Page Source View

---
Title: How to make a small website
---
Learn how to make your website.

[toc]

## First steps

[Follow the installation instructions](how-to-get-started), select `Small website` and click `Install`. Your website is immediately available. The installation comes with two pages, 'Home' and 'About'. This is just an example to get you started. Change everything as you like. You can edit web pages in a web browser or text editor. Do what fits best into your workflow.

## Edit web pages

If you want to edit web pages in a web browser, you can do this on your website at `http://website/edit/`. If you want to edit web pages on your computer, have a look inside your `content` folder. Give it a try. Open the file `content/1-home/page.md`. At the top of the page you can change `Title` and other [page settings](how-to-change-the-system#page-settings). Below you can change [text](how-to-change-the-content#text) and [images](how-to-change-the-media#images). Here's an example:

```
---
Title: Home
---
[image photo.jpg Example rounded]

[edit - You can edit this page] or use a text editor. 
[Get help](https://datenstrom.se/yellow/help/).
```

To create a new page, add a new file to the home folder or to another `content` folder:

```
---
Title: Example page
---
This is an example page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 
```

Now let's add text formatting:

```
---
Title: Example page
---
This is an example page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 

Normal **bold** *italic* ~~strikethrough~~ `code`
```

## Show header and footer

To show a header create the file `content/shared/header.md`. Here's an example:

```
---
Title: Header
---
Website is under construction.
```

To show a footer create the file `content/shared/footer.md`. Here's an example:

```
---
Title: Footer
---
[Made with Datenstrom Yellow](https://datenstrom.se/yellow/).
```

## Add features, languages and themes

There are [extensions for your website](https://datenstrom.se/yellow/extensions/) and an [API for developers](api-for-developers).

## Related information

* [How to edit a website in a web browser](https://github.com/annaesvensson/yellow-edit)
* [How to edit a website on your computer](https://github.com/annaesvensson/yellow-core)
* [How to generate a static website](https://github.com/annaesvensson/yellow-generate)

Do you have questions? [Get help](.).

Jump to Top Page Source Close Page Source View

---
Title: Home
---
[image photo.jpg Example rounded]

[edit - You can edit this page] or use a text editor. 
[Get help](https://datenstrom.se/yellow/help/).

---
Title: Example page
---
This is an example page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 

---
Title: Example page
---
This is an example page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 

Normal **bold** *italic* ~~strikethrough~~ `code`

---
Title: Header
---
Website is under construction.

---
Title: Footer
---
[Made with Datenstrom Yellow](https://datenstrom.se/yellow/).