Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Programming - Lesson 7
Search
Ryan Chung
May 07, 2020
Technology
1
620
Web Programming - Lesson 7
Ryan Chung
May 07, 2020
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
300
Design Voice-First Games for Alexa
ryan403
0
54
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
96
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
98
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 5
ryan403
1
420
Other Decks in Technology
See All in Technology
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.1k
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
390
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
55
22k
Operating Operator
shhnjk
1
650
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
200
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
780
VGGT: Visual Geometry Grounded Transformer
peisuke
1
620
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
240
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How STYLIGHT went responsive
nonsquared
100
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Balancing Empowerment & Direction
lara
1
440
Optimizing for Happiness
mojombo
379
70k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
Web Programming –
[email protected]
行動開發學院 行動開發學院 JavaScript Lab 網站上線 Ryan
Chung 123
Web Programming –
[email protected]
行動開發學院 行動開發學院 目標 • 將完成的網站上線 –
很多選擇 • Ngrok • GitHub Pages • Self Own Server(IIS, WAMP,…) • Hosting Service + Domain Name • Azure • AWS • GCP • CHT 124
Web Programming –
[email protected]
行動開發學院 行動開發學院 使用 GitHub Pages 125
https://pages.github.com/
Web Programming –
[email protected]
行動開發學院 行動開發學院 註冊一個GitHub帳號 126 https://github.com/join
Web Programming –
[email protected]
行動開發學院 行動開發學院 登入後,建立一個新的專案 • 點選照片旁邊的+,New repository
127 https://github.com/new
Web Programming –
[email protected]
行動開發學院 行動開發學院 安裝git • 網頁拉至中間部分,右邊有下載連結 •
下載後開啟,一步一步安裝至本機 128 https://git-scm.com/
Web Programming –
[email protected]
行動開發學院 行動開發學院 在VS Code中打開終端機 • 打開VS
Code,檔案->開啟資料夾 • 選擇自己的專案 • 檢視->終端 (或按下Ctrl + ` ) 開啟內建終端機 129
Web Programming –
[email protected]
行動開發學院 行動開發學院 在終端機中設定git git config --global
user.name "你的英文姓名" 130 然後再輸入: git config --global user.email “你的電子郵件"
Web Programming –
[email protected]
行動開發學院 行動開發學院 開始使用git (這些指令都下在終端機) • Git
初始化 git init • 加入所有檔案 git add . • 設定上傳描述標記 git commit –m "First commit" • 對應遠端位置 git remote add origin https://github.com/YourUserName/YourProgectName.git • 上傳檔案 – git push –u origin master 131 這個網址就是 https://github.com/你的使用者名稱/你的專案名稱.git
Web Programming –
[email protected]
行動開發學院 行動開發學院 設定GitHub Pages • 在Github網站中,進入自己的專案
• 點擊 Settings • 下拉至GitHub Pages • 將Source設定為 master branch • 再下拉網頁,找到產生的網址 132
Web Programming –
[email protected]
行動開發學院 行動開發學院 測試網站是否已上線 • 打開瀏覽器,輸入網址 https://YourUserName.github.io/YourProjectName
網址就是 https://你的帳號名稱.github.io/你的專案名稱 133
Web Programming –
[email protected]
行動開發學院 行動開發學院 之後要怎麼更新網站內容? • 一樣在VS Code中開啟終端機(Ctrl
+ `) • 依序輸入以下指令 • 加入所有檔案 git add . • 設定上傳描述標記 git commit –m "Update for xxx" • 上傳檔案 – git push –u origin master 134
Web Programming –
[email protected]
行動開發學院 行動開發學院 Recap • GitHub –註冊帳號
–建立Repo • 本機端 –終端機下指令 –建立Git、對應遠端、加入、標記、上傳 • GitHub –設定 –GitHub Page、Source Master Branch 135