First off thank you for those who attended the first monthly meetup!
Here I will write a recap of the meetup. It will be a guide for those who didn’t attend and a reminder for those who were present. It’s a first draft. Please ask questions and we will try to improve it over time.
It’s a package manager for Windows. We will use it to install NodeJS and Cmder in the next step. To install Chocolatey follow the instructions here https://chocolatey.org/
Install NodeJS and Cmder using Chocolatey
After installing Chocolatey you should have a command line window (cmd.exe or PowerShell). In this window type:
choco install nodejs cmder
enter. During installation you will be asked to approve some steps. Just press
Once installed open Cmder. It should be visible in Start menu, but you may need to restart Windows.
Create a simple website locally using Parcel and Pug
Let’s make a directory for our projects. Enter the following command:
Then change directory to the newly created one:
Inside Projects directory create directory called personal-website and go there.
mkdir personal-website cd personal-website
This directory will contain our website.
npm init npm install parcel vim index.pug
How to use Vim
In Vim there are several modes. We will be using two of them: Normal mode and Insert mode.
When you open the file Vim is in Normal mode. Press
i to switch to Insert mode. Now you can type the code. Try typing
p Hello my name is Vim.
To save the file switch back to Normal mode by pressing
write and then press
ENTER. You can abbreviate
To quit Vim type
:quit. You can also use
:q. If you want to write and quit try
Preview your website locally
Enter the following command in Cmder:
npx parcel index.pug
It should display the following address: http://localhost:1234/. Open it in a browser. This is how your first website will look like.
Publish your files to GitLab
.gitignore file containing the following:
.cache/ dist/ node_modules/
Setup account on GitLab and create a new project called
your-username.gitlab.io. In Visibility Level select Public and click create project. Follow the command line instructions to configure Git and setting up existing folder. Type the commands from sections “Git global setup” and “Existing folder” in to Cmder.
CAREFUL there are four different sections. You only need to follow the first and third.
Reload the browser tab and you should see your files in GitLab.
image: node:11 pages: stage: deploy script: - npm clean-install - npx parcel build src/index.pug - cp -r dist/ public/ artifacts: paths: - public/ only: - master
git commit git push
On GitLab on the left side there is a row of icons. Click on the one in the middle with the icon of rocket (CI/CD). You should see a running pipeline. Wait until both stages are done (two green icons). Your website will be online roughly in 20 minutes at https://your-username.gitlab.io
Tada! You have created your first Website.