Editor Training - Isomer Isomer Training.pdf · Editor Training. Agenda for today ... ISOMER.GOV.SG - INITIATIVE BY GOVTECH 2. 3 Goals for today 1. Edit a page on the website 2. Format

Editor Training

Agenda for today

– Goals

– Concepts

– Isomer

– Github

– Markdown

– Work on the Goals

ISOMER.GOV.SG - INITIATIVE BY GOVTECH2

3

Goals for today

1. Edit a page on the website

2. Format content within a page

3. Add website URL to a page

4. Add images to a page

5. Add a file download link to a page

6. Add press release resource to a website

Isomer

ISOMER.GOV.SG - INITIATIVE BY GOVTECH4

Run websites powered by Markdown using Github

Site Content Editor

Website Hosting

Content OwnerInternet

You are hereYou will be learning this today!

5

You are done with the first concept!

6

Github

ISOMER.GOV.SG - INITIATIVE BY GOVTECH7

Github is tool that allows you to do version control system.

We use this to store website files in Git Repository.

1. Repository (Repo)

ISOMER.GOV.SG - INITIATIVE BY GOVTECH8

A repo is a folder with version control you view on Github

It is kind of like a folder on the internet for your website files.

9

Markdown files

10

Images files

11

2. Commit

ISOMER.GOV.SG - INITIATIVE BY GOVTECH12

A commit is like saving the changes you have made

Github remembers specific changes of your every commit.

13

14

Put in good commit title for readability for future reference

Commit to Staging branch

15

Unreadable commit that are bad for reference

Readable commit that are good for reference

16

3. Branch

ISOMER.GOV.SG - INITIATIVE BY GOVTECH17

A “Staging” branch is like safe zone for everyone to work

on without affecting production

Staging Branch

Master Branch

CommitStaging Website

Production Website

Repo

18

Content Owner

“Staging” branch to test out changes in Staging website

19

20

Merge into “Master” when you are ready to push your change to Production

21

4. Pull Request (PR)

ISOMER.GOV.SG - INITIATIVE BY GOVTECH22

Request to merge changes in “Staging” to “Master”

Reviewer reviews your PR beforemerging to “Master”

23

Staging Branch

Master Branch

CommitStaging Website

Production Website

Repo

Merge PR into

24

Content Owner

25

Put in good PR title and comment to help the reviewer understand the changes more quickly

26

27

ISOMER.GOV.SG - INITIATIVE BY GOVTECH28

Github Demo

You are done with the second concept!

29

Markdown

ISOMER.GOV.SG - INITIATIVE BY GOVTECH30

Isomer is powered by Markdown. It is designed so that

text can be easily converted to your website

Markdown Editor Demo

ISOMER.GOV.SG - INITIATIVE BY GOVTECH31

https://www.isomer.gov.sg/markdown-helper/

32

Share Your Markdown

ISOMER.GOV.SG - INITIATIVE BY GOVTECH33

Simply copy and paste your editor URL to your friends!

10 mins Hands-on

ISOMER.GOV.SG - INITIATIVE BY GOVTECH34

You are done with the last concept!

35

Time to work on the goals!

ISOMER - INITIATIVE BY GOVTECH36

37

Goals for today

1. Edit a page on the website

2. Format content within a page

3. Add website URL to a page

4. Add images to a page

5. Add a file download link to a page

6. Add press release resource to a website

Goal #1 - Edit a Page

ISOMER.GOV.SG - INITIATIVE BY GOVTECH38

39

40

41

Goal #2 - Format Content

ISOMER.GOV.SG - INITIATIVE BY GOVTECH42

43

Goal #2 - Format Content

1. Go to https://www.isomer.gov.sg/markdown-helper/

2. Find the “Formatting text”

3. Copy your content from Github into the Markdown Helper

4. Start formatting

5. Copy your content back into Github once you are done

6. Commit your changes

Goal #3 - Add Website URL

ISOMER.GOV.SG - INITIATIVE BY GOVTECH44

45

Goal #3 - Add Website URL

1. Go to https://www.isomer.gov.sg/markdown-helper/

2. Find the “Adding website URL”

3. See how it is done in the Markdown Helper

4. Copy your content back into Github once you are done

5. Commit your changes

Goal #4 - Add Image

ISOMER.GOV.SG - INITIATIVE BY GOVTECH46

47

Goal #4 - Add Image

1. Go to https://www.isomer.gov.sg/markdown-helper/

2. Find the “Adding jpg, png image or gif”

3. See how it is done in the Markdown Helper

4. Copy your content back into Github once you are done

5. Commit your changes

Goal #5 - Add a Download Link

ISOMER.GOV.SG - INITIATIVE BY GOVTECH48

49

Goal #5 - Add a Document Download Link

1. Go to https://www.isomer.gov.sg/markdown-helper/

2. Find the “Adding word, pdf, excel etc. document link”

3. See how it is done in the Markdown Helper

4. Copy your content back into Github once you are done

5. Commit your changes

Final Goal - Add Press Release

ISOMER.GOV.SG - INITIATIVE BY GOVTECH50

51

Final Goal - Add Press Release

1. Visit beta.tech.gov.sg

2. Go to Media > All in the Navigation Bar

52

53

54

55

56

1. Create a file .md file (Markdown Extension)

2. Copy content from other pages and edit

3. Commit your changes

57

Any enquiries, email us at admin@isomer.gov.sg

ISOMER.GOV.SG - INITIATIVE BY GOVTECH