portails/content/docs/prologue/quick-start.md

205 lines
3.9 KiB
Markdown
Raw Normal View History

2020-12-03 16:07:04 +01:00
---
title: "Quick Start"
description: "One page summary of how to start a new Doks project."
lead: "One page summary of how to start a new Doks project."
date: 2020-11-16T13:59:39+01:00
lastmod: 2020-11-16T13:59:39+01:00
draft: false
images: []
2021-01-15 20:07:37 +01:00
menu:
2020-12-03 16:07:04 +01:00
docs:
parent: "prologue"
weight: 110
toc: true
---
2021-07-01 16:37:59 +02:00
```js
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
```
2021-06-30 15:16:45 +02:00
## Flow
2021-07-01 16:21:03 +02:00
### Shortcode
2021-06-30 20:32:28 +02:00
```md
{{</* mermaid class="bg-light text-center" */>}}
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{{</* /mermaid */>}}
```
2021-06-30 15:16:45 +02:00
{{< mermaid class="bg-light text-center">}}
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{{< /mermaid >}}
2021-07-01 16:21:03 +02:00
### Code fences
````md
```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
````
```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
2021-06-30 15:16:45 +02:00
## Sequence
{{< mermaid >}}
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
{{< /mermaid >}}
## Gantt
{{< mermaid >}}
gantt
2021-07-01 16:21:03 +02:00
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
2021-06-30 15:16:45 +02:00
{{< /mermaid >}}
## Class
{{< mermaid >}}
classDiagram
2021-06-30 20:32:28 +02:00
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
2021-06-30 15:16:45 +02:00
{{< /mermaid >}}
## State
{{< mermaid >}}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{< /mermaid >}}
## Pie
{{< mermaid >}}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{{< /mermaid >}}
## User Journey
{{< mermaid >}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
{{< /mermaid >}}
2021-01-19 08:11:59 +01:00
## Requirements
2021-01-18 16:05:33 +01:00
2021-04-02 20:01:29 +02:00
Doks uses npm to centralize dependency management, making it [easy to update]({{< relref "how-to-update" >}}) resources, build tooling, plugins, and build scripts:
- Download and install [Node.js](https://nodejs.org/) (it includes npm) for your platform.
2020-12-03 16:07:04 +01:00
## Start a new Doks project
2021-02-01 10:35:23 +01:00
Create a new site, change directories, install dependencies, and start development server.
2020-12-03 16:07:04 +01:00
### Create a new site
2021-04-02 20:01:29 +02:00
Doks is available as a child theme, and a starter theme:
- Use the Doks child theme, if you do __not__ plan to customize a lot, and/or need future Doks updates.
- Use the Doks starter theme, if you plan to customize a lot, and/or do __not__ need future Doks updates.
Not quite sure? Use the Doks child theme.
#### Doks child theme
```bash
git clone https://github.com/h-enk/doks-child-theme.git my-doks-site
```
#### Doks starter theme
2020-12-03 16:07:04 +01:00
```bash
git clone https://github.com/h-enk/doks.git my-doks-site
```
### Change directories
```bash
cd my-doks-site
```
2021-02-01 10:35:23 +01:00
### Install dependencies
2020-12-03 16:07:04 +01:00
```bash
npm install
```
### Start development server
```bash
npm run start
```
Doks will start the Hugo development webserver accessible by default at `http://localhost:1313`. Saved changes will live reload in the browser.
## Other commands
2021-04-02 19:45:05 +02:00
Doks comes with commands for common tasks. [Commands →]({{< relref "commands" >}})