Suche senden
Hochladen
前端也能變全端
•
4 gefällt mir
•
1,208 views
ericpi Bi
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 48
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
前端转行 DevOps 经验分享
前端转行 DevOps 经验分享
Yan Wang
pyspider 介绍 - pycon2014@北京
pyspider 介绍 - pycon2014@北京
roybinux
twMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart Factory
twMVC
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
Will Huang
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
Empfohlen
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
前端转行 DevOps 经验分享
前端转行 DevOps 经验分享
Yan Wang
pyspider 介绍 - pycon2014@北京
pyspider 介绍 - pycon2014@北京
roybinux
twMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart Factory
twMVC
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
Will Huang
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
React.js what do you really mean?
React.js what do you really mean?
昱安 周
Class 20170126
Class 20170126
Ivan Wei
Kind editor设计思路
Kind editor设计思路
taobao.com
貪食蛇
貪食蛇
Weizhong Yang
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
Amigo 陳兆祥
icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介
Kito Cheng
Git 使用介绍
Git 使用介绍
medcl
Artifacts management with CI and CD
Artifacts management with CI and CD
Chen-Tien Tsai
Python 于 webgame 的应用
Python 于 webgame 的应用
勇浩 赖
Git 版本控制系統 -- 從微觀到宏觀
Git 版本控制系統 -- 從微觀到宏觀
Wen-Tien Chang
美团技术团队 - KVM性能优化
美团技术团队 - KVM性能优化
美团点评技术团队
GCP 的應用
GCP 的應用
Patrick Her
CICD Workshop 20180922
CICD Workshop 20180922
Earou Huang
使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity
kumawu
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
kumawu
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mu Chun Wang
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
kissy@2013
kissy@2013
yiming he
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
turtleknight
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
Weitere ähnliche Inhalte
Was ist angesagt?
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
React.js what do you really mean?
React.js what do you really mean?
昱安 周
Class 20170126
Class 20170126
Ivan Wei
Kind editor设计思路
Kind editor设计思路
taobao.com
貪食蛇
貪食蛇
Weizhong Yang
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
Was ist angesagt?
(6)
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
React.js what do you really mean?
React.js what do you really mean?
Class 20170126
Class 20170126
Kind editor设计思路
Kind editor设计思路
貪食蛇
貪食蛇
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Ähnlich wie 前端也能變全端
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
Amigo 陳兆祥
icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介
Kito Cheng
Git 使用介绍
Git 使用介绍
medcl
Artifacts management with CI and CD
Artifacts management with CI and CD
Chen-Tien Tsai
Python 于 webgame 的应用
Python 于 webgame 的应用
勇浩 赖
Git 版本控制系統 -- 從微觀到宏觀
Git 版本控制系統 -- 從微觀到宏觀
Wen-Tien Chang
美团技术团队 - KVM性能优化
美团技术团队 - KVM性能优化
美团点评技术团队
GCP 的應用
GCP 的應用
Patrick Her
CICD Workshop 20180922
CICD Workshop 20180922
Earou Huang
使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity
kumawu
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
kumawu
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mu Chun Wang
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
kissy@2013
kissy@2013
yiming he
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
turtleknight
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
Kvmopt osforce
Kvmopt osforce
meecheng
Go for web
Go for web
Weng Wei
Axure RP Prototyping Tool
Axure RP Prototyping Tool
Souyi Yang
百度前端技术交流会--搜搜前端架构演变与优化
百度前端技术交流会--搜搜前端架构演变与优化
tiantianli
Ähnlich wie 前端也能變全端
(20)
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介
Git 使用介绍
Git 使用介绍
Artifacts management with CI and CD
Artifacts management with CI and CD
Python 于 webgame 的应用
Python 于 webgame 的应用
Git 版本控制系統 -- 從微觀到宏觀
Git 版本控制系統 -- 從微觀到宏觀
美团技术团队 - KVM性能优化
美团技术团队 - KVM性能优化
GCP 的應用
GCP 的應用
CICD Workshop 20180922
CICD Workshop 20180922
使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
kissy@2013
kissy@2013
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
Kvmopt osforce
Kvmopt osforce
Go for web
Go for web
Axure RP Prototyping Tool
Axure RP Prototyping Tool
百度前端技术交流会--搜搜前端架构演变与优化
百度前端技术交流会--搜搜前端架构演变与优化
Mehr von ericpi Bi
20160521 社群實務及組織協作
20160521 社群實務及組織協作
ericpi Bi
20151127 kh gov-data-training
20151127 kh gov-data-training
ericpi Bi
MOPCON 2015 intro
MOPCON 2015 intro
ericpi Bi
20150630 kca big-data-with-cloud_output
20150630 kca big-data-with-cloud_output
ericpi Bi
高雄市戶政資料視覺化 - 使用 C3.js
高雄市戶政資料視覺化 - 使用 C3.js
ericpi Bi
MOPCON 2014 - 堅持在濁水溪以南的夢想
MOPCON 2014 - 堅持在濁水溪以南的夢想
ericpi Bi
KSDG BaaS Intro
KSDG BaaS Intro
ericpi Bi
KSDG LT: 6分鐘node.JS就上手
KSDG LT: 6分鐘node.JS就上手
ericpi Bi
數位創業最好的技術顧問 - 技術社群
數位創業最好的技術顧問 - 技術社群
ericpi Bi
讓你的 Web App 跟 Native 一樣使用經驗 - PhoneJS
讓你的 Web App 跟 Native 一樣使用經驗 - PhoneJS
ericpi Bi
快快樂樂利用 PhoneGap 打造屬於自己的 App
快快樂樂利用 PhoneGap 打造屬於自己的 App
ericpi Bi
AWS vs Azure
AWS vs Azure
ericpi Bi
MOPCON intro
MOPCON intro
ericpi Bi
KSDG meet-up #1
KSDG meet-up #1
ericpi Bi
COSCUP 2010 - node.JS 於互動式網站之應用
COSCUP 2010 - node.JS 於互動式網站之應用
ericpi Bi
MOPCON 2012 - 網路服務從 K 到 M
MOPCON 2012 - 網路服務從 K 到 M
ericpi Bi
KSDG web course #1 - git: 從零開始 - 如何利用版本控制提升網站開發團隊效益
KSDG web course #1 - git: 從零開始 - 如何利用版本控制提升網站開發團隊效益
ericpi Bi
Mehr von ericpi Bi
(17)
20160521 社群實務及組織協作
20160521 社群實務及組織協作
20151127 kh gov-data-training
20151127 kh gov-data-training
MOPCON 2015 intro
MOPCON 2015 intro
20150630 kca big-data-with-cloud_output
20150630 kca big-data-with-cloud_output
高雄市戶政資料視覺化 - 使用 C3.js
高雄市戶政資料視覺化 - 使用 C3.js
MOPCON 2014 - 堅持在濁水溪以南的夢想
MOPCON 2014 - 堅持在濁水溪以南的夢想
KSDG BaaS Intro
KSDG BaaS Intro
KSDG LT: 6分鐘node.JS就上手
KSDG LT: 6分鐘node.JS就上手
數位創業最好的技術顧問 - 技術社群
數位創業最好的技術顧問 - 技術社群
讓你的 Web App 跟 Native 一樣使用經驗 - PhoneJS
讓你的 Web App 跟 Native 一樣使用經驗 - PhoneJS
快快樂樂利用 PhoneGap 打造屬於自己的 App
快快樂樂利用 PhoneGap 打造屬於自己的 App
AWS vs Azure
AWS vs Azure
MOPCON intro
MOPCON intro
KSDG meet-up #1
KSDG meet-up #1
COSCUP 2010 - node.JS 於互動式網站之應用
COSCUP 2010 - node.JS 於互動式網站之應用
MOPCON 2012 - 網路服務從 K 到 M
MOPCON 2012 - 網路服務從 K 到 M
KSDG web course #1 - git: 從零開始 - 如何利用版本控制提升網站開發團隊效益
KSDG web course #1 - git: 從零開始 - 如何利用版本控制提升網站開發團隊效益
前端也能變全端
1.
前端也能變全端 ericpi MOPCON/KSDG http://goo.gl/lSx3YI
2.
這邊無線網路: Nsysu-Guest / 12345678
3.
今天投影片放在: http://goo.gl/lSx3YI 今天共筆筆記放在: http://goo.gl/iFNu1B
4.
About ericpi • KKBOX
S.RDC Manager • KSDG organizer • MOPCON 2012/2013
5.
做過的系統 • J2ME Games
& Game Service • KKBOX – Admin / CMS System – Login/Directory/Metering…API – Software SLB/Monitor – Follow Me back-end POC – …..
6.
看起來就是搞後端的…
7.
那還呼弄我們今天要講前端?!
8.
其實最初是為了 http://ksdg.me/
9.
6月15日嘴砲了要弄 ksdg.me
10.
結果… • 換工作的換工作 • 忙專案的忙專案 •
我自己也有個更重要的專案要進 行…
11.
BYOC (Build Your
Own Child) • BYOC 來自於 hlb, 有興 趣請自行參考: http://www.youtube.com/ watch?v=26CIyVFUuf8
12.
KSDG官網希望能提供… • 關於 • 新聞 •
歷屆活動訊息 • 工商服務 • Blah…blah…
13.
這不就是個 CMS? (Content Management
System)
14.
正常的工程師腦袋浮現… • Database • Dynamic
Page • Web Framework • Template • Front-end Design • Web Hosting • Domain.. Blah…blah…
15.
除了紅字以外都算是我熟悉的…
16.
即使用輕量級框架, 還是有不少 code
要堆 node.js+express php+ci python+flask Python+django
17.
Front-end 那麼多煩人的問題要處理, 哪有時間管
Back-end 要堆什麼 code
18.
所以如果有好的文本管理機制.. • 輕量級標籤語言 • 樣板引擎
(Template) • Static Page Generator
19.
加上… • High-Performance Free
Hosting • 版本控制 • Web Base Admin/Editor
20.
Github + Github
Pages + Jekyll
21.
Github + Github
Pages + Jekyll • 版本控制 • Markdown 標籤語言 • Liquid Template • Static Page Generator • Free!!!
22.
Hands-On! - Github •
https://github.com/ • 建立帳號 • 下載 Github App • 安裝 Github App
23.
Github App Login Mac
Windows
24.
Github App Setup Mac
Windows
25.
Create New Repository Mac
Windows
26.
Create [id].github.io Repository
(1) Mac Windows
27.
Create [id].github.io Repository
(1) Mac Windows
28.
Add index.html Mac Windows
29.
Say Hello World
30.
Commit The Changes Mac
Windows
31.
Upload Pages with
Git Mac Windows
32.
Hello World?
33.
Wait a minute…
34.
Customize Domain • 在
repository 目錄下建 立名為 CNAME 檔案 • 把你的域名加入 CNAME 中 • Commit & Push • 設定域名指向 – Top-level domain: A record -> 204.232.175.78 – Subdomain: CNAME record [id].github.com
35.
Hello World again
36.
Project Page (1) •
建立新的 repository (這邊用 prj_site) • 加入頁面檔案 & commit • 到 branch tab 從 master 建立新 branch 名為 gh-pages
37.
Project Page (2) •
完成後記得要 push 出去
38.
Project Page (3)
39.
How About Jekyll •
Markdown 標籤語言 • Liquid Template • Static Page Generator • Github Pages Support
40.
Jekyll-Bootstrap (1) • https://github.com/ plusjade/jekyll- bootstrap •
從以上網址右下方 “Clone In Desktop”
41.
Jekyll-Bootstrap (2) • 切換到
Repository Jekyll 的 Setting Tab • 將 Primary Remote Repository 改為之前 網站的 uri • Update Remote & Sync Branch
42.
Jekyll-Bootstrap (3) • 切換到
History Tab • 找到之前 commit 的 前一項目 • “Revert This Commit”& “Publish Branch”
43.
Jekyll-Bootstrap (4)
44.
Jekyll Directory Structure •
_config.yml • _layout • _include • _post • Index.md
45.
_config.yml
46.
Markdown • Mac: http://mouapp.com/ •
Windows: http:// markdownpad.com/
47.
Yeoman Integration • Jekyllrb
generator • Live reload tools • Put the source in “devel branch” • Deploy: – git push origin `/usr/bin/git subtree split -- prefix dist`:master --force
48.
Thanks 官方網站 http://mopcon.org/ 粉絲群 https://www.facebook.com/mopcon 堅持辦在濁水溪以南的 行動應用技術研討會!!
Jetzt herunterladen