Setup Development Environment on Windows and Publish a Personal Website

#1

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.

Install Chocolatey

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

Press enter. During installation you will be asked to approve some steps. Just press y and enter.

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:

mkdir Projects

Then change directory to the newly created one:

cd Projects

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 ESC. Press :, type write and then press ENTER. You can abbreviate :write to :w.

To quit Vim type :quit. You can also use :q. If you want to write and quit try :wq.

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

Create a .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.

vim .gitlab-ci.yml

Write:

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.

0 Likes

#2

Thanks for the write-up @jewiet and thanks @sarahwarnau, @m.a.s.zwaal, @i.c.bondoc for joining us yesterday. Could you post links to your websites? I remember Iris (https://cool-emu30.gitlab.io/) but I see it’s not updated with Bootstrap yet.

Let us know if we can help you in any way.

1 Like

#3

I have updated the original post above with instructions on how to use Vim.

0 Likes