Documentações, Blogs e WebPages com Docusaurus.io

June 10, 2018

Rodrigo Martinez da Rocha

Rodrigo Martinez da Rocha

Nível: Básico

Você está trabalhando num projeto... porém o time ainda não tem um lugar bacana para fazer a documentação, queremos também divulgar e publicar conhecimentos adquiridos, por último e não menos importante, vamos precisar de uma landing-page, afinal de contas, precisamos de uma boa apresentação técnica para o nosso projeto!

É hora de conhecer o Docusaurus.io
docusaurus.io

Esse é um projeto mantido pelo Facebook OpenSource, ideal para escrever e publicar documentações, blogs e sites de apresentação, vulgo landing-pages.

Anyway... Hora de colocar a mão na massa!
É hora do #showMeTheCode

Tutorial Parte 1/2

Instalação

  1. NodeJS 8 ou superior. Link
  2. Execute npm install --global docusaurus-init para instalar o Docusaurus
  3. Pronto! :)

Kickstart

Crie um novo diretório e inicialize o projeto:

 $ mkdir missaodevops
 $ cd missaodevops/
 $ docusaurus-init

Após a execução, veremos a seguinte estrutura:

missaodevops
├── docs-examples-from-docusaurus
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   ├── exampledoc4.md
│   └── exampledoc5.md
└── website
    ├── blog-examples-from-docusaurus
    │   ├── 2016-03-11-blog-post.md
    │   ├── 2017-04-10-blog-post-two.md
    │   ├── 2017-09-25-testing-rss.md
    │   ├── 2017-09-26-adding-rss.md
    │   └── 2017-10-24-new-version-1.0.0.md
    ├── core
    │   └── Footer.js
    ├── package.json
    ├── pages
    ├── sidebars.json
    ├── siteConfig.js
    └── static

Note que tudo já vem populado com exemplos! Temos os docs-examples e também os blog-examples.
Porém eles deixarão de ser exemplos agora mesmo (risos):

 $ mv docs-examples-from-docusaurus/ docs
 $ mv website/blog-examples-from-docusaurus/ website/blog

E para subir o projeto: $ npm run start

Vamos entender um pouco melhor noss@ nov@ site/blog/documentação!

Crie, Customize & Publique

A vida a partir de agora será muito produtiva, e para comprovar isso, faremos:

  1. Update das Configurações Globais;
  2. Novas imagens ao site;
  3. Um novo post no blog;

É hora do #showMeTheCode

[![Tutorial Parte 2/2](https://img.youtube.com/vi/NytVoLSFEJM/0.jpg)](https://www.youtube.com/watch?v=NytVoLSFEJM)

Inclusive, há pouco tempo migramos todas documentações públicas do Missão DevOps que estavam no Gitlab.
Perdemos algo? De manneira nenhuma, estava tudo em Markdown!

E o melhor? Tudo foi feito em menos de duas horas, inclusos os pipelines de CI, dos quais ensinamos em:

Curso de GitLab-CI

Inscreva-se também em nosso canal!

Forte abraço!

Recent Posts