editor training - isomer isomer training.pdf · editor training. agenda for today ... isomer.gov.sg...
TRANSCRIPT
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 [email protected]
ISOMER.GOV.SG - INITIATIVE BY GOVTECH