Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
Added VS Code extension recommendations
  • Loading branch information
Marvin Heilemann committed Jan 21, 2020
1 parent 62e3ac3 commit f6f01f6
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 27 deletions.
14 changes: 14 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"recommendations": [
"streetsidesoftware.code-spell-checker",
"ms-azuretools.vscode-docker",
"mikestead.dotenv",
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"bierner.github-markdown-preview",
"silvenon.mdx",
"esbenp.prettier-vscode",
"stylelint.vscode-stylelint",
"muuvmuuv.vscode-sundial"
]
}
126 changes: 100 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,66 +3,140 @@
<b>Marvin Heilemann</b>
</h1>

- [Start](#start)
- [Deploy](#deploy)
- [Build](#build)
- [Docker](#docker)
A beautiful Portfolio page made by me for me based on the awesome static site
generator [Gatsby](https://www.gatsbyjs.org/).

- [Development](#development)
- [Building](#building)
- [NGINX](#nginx)
- [Now by Zeit](#now-by-zeit)
- [Auditing](#auditing)
- [Linting](#linting)
- [Deployment](#deployment)
- [Automatically](#automatically)
- [Manually](#manually)
- [Docker commands](#docker-commands)
- [Logs](#logs)
- [Performance](#performance)
- [Interactive shell session](#interactive-shell-session)
- [Image](#image)
- [Container](#container)
- [Logs](#logs)
- [Performance (top)](#performance-top)

## Start
## Development

Have a look at `Makefile` for testing the live environment or at `package.json`
for development.
Developing this project is easy, simply run this in your shell:

## Deploy
```shell
npm start
```

This will create a
[Gatsby development server](https://www.gatsbyjs.org/docs/gatsby-cli/#develop)
with
[hot module replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)
at: `http://localhost:8000`

## Building

Depending on what you want to build, there a different processes.

### NGINX

I'm using [now](https://zeit.co/muuvmuuv/portfolio) to deploy my site.
A production like build
[NGINX docker container](https://hub.docker.com/_/nginx). This will also be used
for auditing the website so make sure you have
[docker installed](https://docs.docker.com/install/) on your computer.

```shell
npm run deploy
npm run deploy-prod
npm run build
make up
```

## Build
The website is now accessible on: `https://marvin.lcl`

> You must set `.lcl` to your hosts file to point to `127.0.0.1`
### Now by Zeit

[Now by Zeit](https://zeit.co/home) provides its own
[production like server](https://zeit.co/docs/now-cli#commands/dev) to test
things locally before pushing it in the cloud.

```shell
npm run build
npm run serve
```

To test the website locally you can run either `npm run serve` to start a local
dev server by [Zeit Now](https://zeit.co/docs/now-cli#commands/dev) or build the
website and run `make up` to start a local NGINX docker container.
The website is now accessible on: `http://localhost:59235`

## Docker
## Auditing

### Interactive shell session
To audit our site and see if it matches accessibility, SEO and performance
requirements, we use [Axe](https://www.deque.com/axe/) and
[Lighthouse](https://github.com/GoogleChrome/lighthouse/). Axe is more specific
than Lighthouse but Lighthouse provides a good overview.

#### Image
```shell
npm run audit
```

## Linting

For linting I use [Stylelint](https://stylelint.io/),
[ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) (as the
formatter). There are also official VS Code plugins for those, please install
them before contributing. To run the linter, run this:

```shell
docker run -it --entrypoint bash nginx
npm run lint
```

#### Container
## Deployment

I'm using [Now by Zeit](https://zeit.co/home) to deploy my site.

### Automatically

Pushing to the development branch will automatically create a new sub-domain and
a build. So it's easy to view the changes in the production environment before
pushing it to master.

Pushing to master will create a build and directly upload it to the main domain.
Please be sure to create one on the development branch first and test/lint the
code.

### Manually

```shell
docker exec -i -t marvin-nginx bash
npm run deploy
npm run deploy-prod
```

#### Logs
## Docker commands

### Logs

```shell
docker logs -f marvin-nginx
```

#### Performance (top)
### Performance

```shell
docker-compose top nginx
```

### Interactive shell session

#### Image

```shell
docker run -it --entrypoint bash nginx
```

#### Container

```shell
docker exec -i -t marvin-nginx bash
```

> Copyright © Marvin Heilemann
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "marvin-digital",
"version": "3.8.1",
"version": "3.8.2",
"private": true,
"description": "Portfolio of and by Marvin Heilemann (@muuvmuuv)",
"repository": {
Expand Down

0 comments on commit f6f01f6

Please sign in to comment.