# Retype Powershell Guide

By

Adam Bacon

,

Awesome

,

Website

,

Presentation

●

Published 2022-09-05

PLEASE MAKE SURE YOU RUN PWSH AND EXECUTE THE BELOW STEPS RUNNING IN THAT TERMINAL WINDOW

Getting Started Step-By-Step

1. You need this specific version of .net in order for this program to run retype.exe command-line-interface program to run correctly

You must install this particular version

https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/sdk-6.0.100-windows-x86-installer

2. Once you have the above .net package installed, which has to be x86 version due to me building this on an x86 laptop. You can now install the module from the Powershell Gallery

Install-Module Retype
Import-Module Retype
Install-Retype

After doing the above commands exit the current pwsh terminal, then launch a new pwsh terminal.

3. Have a directory ready to build your website something like C:\Mywebsite\ then issue the following command

Initialize-ReTypeProject -Path C:\MyWebsite

4. This will have now created a retype.yml file in the path specified which will contain the following information

input: .
output: .retype
url: # Add your website address here
branding:
  title: Project Name
  label: Docs
links:
- text: Getting Started
  link: https://retype.com/guides/getting-started/
footer:
  copyright: "© Copyright . All rights reserved."

This file controls what is shown on the main template for your website. Please visit https://retype.com/configuration/project/ for full information on how to configure this to your requirements.

5. Now in the same directory what you specified in step 3, in the example this was

C:\MyWebsite

create a file with the name index.md and add the following content to this as the contents of the index.md file

---
authors:
  - name: Your Name
    email: youremail@domain.com
    link: https://twitter.com/yourname
    avatar: /imgs/me.jpg
    categories:
  - Awesome
  - Website
  - Presentation
date: 2022-09-05
icon: ":smile:"
label: My Site
description: My Website
order: 99
---

# :icon-person: My Blog

## Hello World

 It worked.

6. Now you can view your lovely website by issuing the following cmdlet

Initialize-ReTypeWatch -Path C:\MyWebsite

Your default browser should now open the URL http://localhost:5000/ showing you your first webpage

7. All you got to do is repeat steps 5 and 6 creating new pages, with different content, once you are done, you then issue

Initialize-ReTypeBuild -Path C:\MyWebsite

The directory name specified in the output of the retype.yml file is where your website will be built to. I then upload this folder to publish it on the world-wide-web

Again some people get a bit worried when you start bringing more languages into the mix. Like mentioning you will have to configure YAML files for the main template. It is not rocket science. So dear reader, let us take a look at the file I have configured as my main retype.yml file for this very blog.

input: .
output: Build
url: adam-bacon.netlify.app
branding:
  title: My Powershell Blog
  logo: imgs/powershell.png
  logoDark: imgs/powershelld.png
  logoAlign: right
links:
- text: :icon-mark-github:Github
  link: https://github.com/psdevuk
- text: :icon-comment:Twitter
  link: https://twitter.com/psdevuk
- text: :icon-mention:Linkedin
  link: https://uk.linkedin.com/in/adam-bacon-t2022
footer:
  copyright: "© Copyright . All rights reserved."

If you followed the 7 steps above you should now have a very basic website. By editing the main retype.yml you can then set the main theme for your website, as in the text displayed in the top left, and label or icon. The links and text displayed along the top of the page, as well as the copyright information. Remember every page you then create must be a mardown file .md extension, and must include front matter. What the heck is this front matter shell bomb you just dropped?

Basically my Front Matter for each page is the same but a few things change. So lets look at the front matter for this page:-

---
authors:
  - name: Adam Bacon
    email: adambacon1@hotmail.com
    link: https://twitter.com/psdevuk
    avatar: /imgs/me.jpg
    categories:
  - Microsoft
date: 2022-09-04
icon: ":guide_dog:"
label: Retype Powershell Guide
image: https://adam-bacon.netlify.app/imgs/dm1.png
description: Personal blog about Powershell
order: 18
---

So literally all I have to do is change the following date, icon, label, order those are the four things I change each time, as all my blogs are centered around Powershell so I keep the description the same each time. Again I do not change the image often which is the image displayed when you copy and paste the link to either twitter,linkedin, email etc. Again you may wish to change the categories that are listed. For me as long as I change the following date, icon, label, order my site will have the correct dates on blog pages. Will have a unique icon associated with that webpage, the label for the hyperlink will be different for each webpage and the order the webpages will load correctly based on the order number the lower the number the newer the webpage. Hence I would recommend starting at 99 and go down. I started at 50 for this particular website, so have over 30 pages built in less than two months using this technique, which I think it pretty good going, as this included a lot of developing of the actual modules I am blogging about.

If you got this far without throwing your computer out of the window, then you are doing great. Hopfully you have your first webpage built by following the 7 step-by-step getting started guide. Really all the information you need on this awesome static site generator is listed on their official webpage which is right here:-

Well if like me you do not like to read and try to process to much information then just bookmark that link for later. Because right now I am going to give you some more links to bookmark. That is because Retype has built-in to use two different sets of icon types these are Emojee and Octicons icon sets

Again for me this is gold-dust to be able to produce any of these icons super-easily on my webpage using the codes shown on these webpages. As you can see I use these icons for the different paragraph titles in my blogs, and the main links on the left hand side menu.

To see all of the components available to use check out the link below Please Read The Link

Again bookmark for now if you do not want to read it all at once, but believe me this makes inserting images,hyperlinks,badge,buttons,panel,alerts and lots more other things a piece of cake. No HTML required, just simple markdown like three equals signs top and bottom then anything inbetween is a panel, this is why I only need notepad.exe to build these webpages, instead of some fancy program, just because the syntax is so easy to learn and use.

Retype is a .net cli that gives you a predefined theme that has some really nice features built-in. Such as the light and dark mode, the ability to search your site, gives you the ability to view your history of the pages you have visited, custom icons for webpages and branding of the main site. I have built and hosted a few websites off of GitHub using Jekyll but this process to me was quite hard to grasp and required me to install ruby, then configure gems. I was like proper confused when I first tackled it, and almost felt like giving up before my page was hosted. I know you will need to install the following .net version to make this all work

For me this is a far less stress and hassle than installing ruby which is more than double the size of this .net installer, and then have to configure gems, pretty sure I had to install python as well, and it took me hours and hours before I could even get going with Jekyll. Now I can do the same thing from scratch in a tiny fraction of that time, using Retype to design and publish documentation websites.

Even on my ancient x86 laptop, I can build an entire site of over 30 webpages in less than 10 seconds so this module gets you stylish documented webpages super-fast

So I know that Retype cannot produce fancy real-time graphs, live API data or interactive components. This is because Retype was built for documentation, not making the most amazing website or dashboard possible. It is only using simple markdown text to produce these webpages, which is pretty damn-slick when you think about it. This gives anyone, **yes anyone the chance to produce top quality documentation that is easy to produce, easy to update and looks much more stylish than the plain text you inputted.

I really do hope you give this a go as it really will not take long to learn and spin up your first generated site. Once you create your first webpage using the markdown method I have run through, every webpage after that initial page should become an easier task, as you know the process is not very complicated.

As always I think the best things in life are free, and that is exactly what this Retype module is.

So I found this static website generator on nuget then I converted it into a binary module, and wrote an additional function to actually install configure the system path to include the path to where the retype.exe is located after installing the module. I did not design or create React, I merely made a way you could obtain this program and use it all via Powershell apart from the contents of the actual webpages which is the text I want to document and I choose notepad.exe as my application of choice, because it loads real-quick on my laptop, and I can just type-and-go. Basically if you got more queries on what Retype can and cannot do please visit the official retype website.