在github中使用pages上傳自己的網頁

轉載自:http://www.cnblogs.com/lijiayi/p/githubpages.html

學了前端小半年,如今寫了個自己的網頁想要去應聘,卻發現部署很麻煩,部署到阿里云之類,買域名啊啥的還要收費,說貴也不貴,但我就是傲嬌~

google一下了解到Github有一個Github pages的功能可以搭建博客或者托管網頁,而且免費耶,搜了下教程,猛地一看感覺步驟也不是很麻煩,所以就用這個了!

教程一大堆,卻沒有幾個能看懂的,問題一:90%的都在講解如何搭建博客,和我想要將自己的網頁部署到上面還是有點區別的。問題二:所有的教程都用到了Git,而我只知道Git是一個開源的分布式版本控制系統。完全不知道命令行是什么鬼,只能照貓畫虎的小白來說,那些教程只能幫我到橋頭,但想要成功過河,還需要深夜里的一包特濃咖啡。

?

開始教程之前的準備工作:

1、需要你自己寫的網頁文件。

2、注冊Github。

3、下載安裝git。下載地址https://git-scm.com/downloads

?

教程開始:(以下出現的test指你的網頁名或者你想起的一切名字)

步驟一:登錄到Github上,新建一個repo,命名為test,勾選 initialize this repository with a README,點擊create repository。

?

?

?

步驟二:打開settings,有一個Github Pages 的設置,點擊Launch automatic page generator(啟動自動頁面生成器)。

?

?

步驟三:點擊頁面最后的continue to layouts,然后就可以進入設置你的頁面主題,你會說這不是我的網頁呀,別急嘛,先選擇一個主題,點擊 publish pages。

?

?

這個時候會出現你的網頁的網址,也就是下圖的 http://jiayili.github.io/test.復制打開這個網址,你看到了什么?

?

哇塞,這不是剛自己設置選擇的主題頁面嗎?

?

好了,別激動了,真正讓一個小白你發瘋的階段開始了,有了自己的網址,但頁面顯示的是什么鬼?

至此以上,github上要處理的操作告一段落,該上Git了!

?

步驟四?:打開此電腦,選擇一個盤,比如 f 盤,右鍵空白處點擊 git bash here。

?

步驟五:輸入如下命令,用來在 f 盤創建 test 文件放你的github上的test repository,克隆test repository到 test 文件中。

?

這個時候你的 f 盤,就會多一個 test 文件,打開它,

?

會看到一個 README.md 的文件,這個文件是從哪來的呢?追溯到gihub上,你會發現你有兩個分支(branches),而 README 文件是來自 master 分支。

?

而我們需要編輯的是另一個分支——gh-pages,因為這個分支才能夠真正定義github pages的內容和樣式,也就是可以呈現你網頁的地方。

?

步驟六:輸入以下命令,為了在本地新建一個gh-pages分支,而這個分支是遠程分支origin/gh-pages的鏡像,也就是我們可以在本地的gh-pages看到github上的gh-pages的內容。

?

這個時候我們再打開 f 盤,發現變樣了

剛才還是README呢,怎們現在成了3個文件了,這3個文件來自哪?

?

來自github 上的 gh-pages 分支下的文件。

打開f 盤中的 index.html,你會發現就是咱們一開始選擇主題的頁面。那我們將這個頁面替換成自己coding的網頁不就好了?

?

步驟七:執行如下命令,刪除原有的gh-pages文件,并提交(commit)本次修改。

?

這個時候 f 盤沒有文件。

?

步驟八:將自己的網頁文件復制粘貼至 f 盤的 test 文件中

?

?

輸入如下命令,為了本地gh-pages中的網頁文件同步到遠程的gh-pages中。

?

輸入最后一行 git push origin gh-pages,按回車,等一會,會有彈出框讓你輸入你的 github 賬號和密碼。

?

ok之后耐心等待。

當出現像下圖中的命令行之后,你已經完成了99%。

?

最后一步:打開瀏覽器輸入給你的網址加上 test.html,然后重重的按下回車。

?

?

恭喜你,成功了!!!哦不,還差一步,不評論關注一下我?

?

?

附錄一:常用git命令:

$ git clone??//本地如果無遠程代碼,先做這步,不然就忽略

$ cd //定位到你blog的目錄下

$ git status //查看本地自己修改了多少文件

$ git add . //添加遠程不存在的git文件

$ git commit ?-m "what I want told to someone" //提交修改

$ git push ?//更新到遠程服務器上

$ git rm //移除文件

?

附錄二:如何修改你的網頁?

方法一:在github上的gh-pages分支中直接進行修改。(如果不添加新的文件推薦此法)

方法二:在github客戶端進行修改在同步。(如果添加了新的文集推薦此法)

轉載于:https://www.cnblogs.com/ztoz/p/5515475.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/271766.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/271766.shtml
英文地址,請注明出處:http://en.pswp.cn/news/271766.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

使用lamba中stream 進行分組統計

對一個list中的元素進行分組&#xff0c;并統計各個元素出現的次數。放入map<String,Long>。 代碼如下: Test public void test8() {List<String> items Arrays.asList("1", "2", "3","4", "1", "3"…

php 表單select,表單控件select標簽是如何使用的

表單控件select標簽是用來創建下拉列表的&#xff0c;通過標簽來定義可用選項以及其他屬性來設置表單控件的選擇個數等。今天將介紹的是HTML中的表單控件select的用法&#xff0c;具有一定的參考價值&#xff0c;希望對大家有所幫助。【推薦課程&#xff1a;HTML教程】select標…

電腦經常死機是什么原因?如何解決?

目錄 一、電腦經常死機是什么原因&#xff1f; 二、電腦經常死機如何解決&#xff1f; ??????? 一、電腦經常死機是什么原因&#xff1f; 1、電腦頻繁死機&#xff0c;在進行CMOS設置時也會出現死機現象&#xff0c;一般由硬件問題引起的&#xff0c;散熱不良…

重量級框架

1.概述 重量級框架則強調高可伸縮性&#xff0c;適合與開發大型企業應用。輕量級框架側重于減小開發的復雜度&#xff0c;相應的它的處理能力便有所減弱&#xff08;如事務功能弱、不具備分布式處理能力&#xff09;&#xff0c;比較適用于開發中小型企業應用。輕量級框架和重量…

Win10磁盤占用達到100%,優化一下就解決了

??作者主頁&#xff1a;IT技術分享社區 ??作者簡介&#xff1a;大家好,我是IT技術分享社區的博主&#xff0c;從事C#、Java開發九年&#xff0c;對數據庫、C#、Java、前端、運維、電腦技巧等經驗豐富。 ??個人榮譽&#xff1a; 數據庫領域優質創作者&#x1f3c6;&#x…

2、IDEA以新窗口的形式打開多個項目

IDEA以新窗口的形式打開多個項目 修改1處如圖所示

160523、Oracle建立表空間和用戶

建立表空間和用戶的步驟&#xff1a; 用戶 建立&#xff1a;create user 用戶名 identified by "密碼"; 授權&#xff1a;grant create session to 用戶名; grant create table to 用戶名; grant create tablespace to 用戶名; …

Win10 該如何設置FTP呢,詳細設置步驟

復印&#xff0c;打印&#xff0c;掃描的日常操作是每個辦公人員的必備技能&#xff0c;我們來了解一下掃描至FTP的具體操作方法。 要使用FTP功能掃描文件到電腦&#xff0c;首先要需要一臺可以接收文件的FTP服務器&#xff0c;這個服務器我們可以借助第三方軟件搭建&#xff0…

數值的加減會改變python中id,在python中調用Nan值并更改為數字

ix已棄用&#xff0c;請不要使用它。在選項1我會用np.where-df df.assign(pronp.where(df.pro.isnull(), df.property_type, df.pro))dfid property_type1 property_type pro0 1 Condominium 2 2.01 2 Farm 14 14.02 3 House 7 7.03 4 Lots/Land 15 15.04 5 Mobile/Manufactur…

Linux和Windows操作系統有什么區別?

目錄 1、Linux系統的優缺點 2、Linux系統與Windows系統的區別 在所有操作系統中&#xff0c;Windows系統屬于最多用戶使用的操作系統&#xff0c;而這一次小編要來跟大家聊聊Linux系統&#xff0c;目前很多筆記本也已經開始預裝Linux系統了。那么Linux系統有什么優缺點呢&#…

idea自動生成not null判斷語句

自動生成not null這種if判斷&#xff0c;在IDEA里有很多種辦法&#xff0c;其中一種辦法你可能沒想到。 直接輸入notnull并回車&#xff0c;IDEA就好自動生成if判斷了

C#三層開發做學生管理系統

1.定義各個層 2.添加各個層之間的引用 DAL 層調用Model BLL層調用DAL和Model UI層調用BLL和Model層 Model層供各個層調用 3.根據數據庫建立實體類,每張表對應一個實體類 4.在DAL層調用MyTool類和SQLhelper類,添加system.Configuration 引用 并編寫app.config 在SqlHelper類調用…

硬件:選購CPU和顯卡需了解的參數介紹

??作者主頁&#xff1a;IT技術分享社區 ??作者簡介&#xff1a;大家好,我是IT技術分享社區的博主&#xff0c;從事C#、Java開發九年&#xff0c;對數據庫、C#、Java、前端、運維、電腦技巧等經驗豐富。 ??個人榮譽&#xff1a; 數據庫領域優質創作者&#x1f3c6;&#x…

PHP解決http和https跨域,php中http與https跨域共享session的解決方法

這篇文章主要介紹了http與https跨域共享session的解決方法,需要的朋友可以參考下遇到了HTTP、HTTPS協議下session共享解決cookie失效的問題&#xff0c;這里提供一個臨時解決辦法。實現原理&#xff1a;把session id設置到本地的cookie。如下&#xff1a;復制代碼 代碼如下:$cu…

SDUT 3258 Square Number 簡單數學

和上一題一樣&#xff0c;把平方因子除去&#xff0c;然后對應的數就變成固定的 #include <cstdio> #include <iostream> #include <algorithm> #include <cstring> using namespace std; typedef long long LL; const int N1e65; const int INF0x3f3f…

RedisTemplate中opsForValue()中的方法

使用redisTemplate.opsForValue().set(); 先引入依賴 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> 注入redisTemplate redisTempla操作String類…

硬件:U盤無法識別的解決方案

USB接口我們一定不會陌生&#xff0c;鍵盤、鼠標、U盤、移動硬盤等等硬件都需要通過USB接口連接到電腦。尤其是U盤&#xff0c;幾乎成為我們商務辦公必不可少的工具&#xff0c;各種重要資料和軟件都會通過U盤進行傳輸。但是如果遇到U盤無法識別的情況要怎么辦呢?接下來快啟動…

泰山服務器 oracle數據庫,泰山之巔對話?Oracle數據庫掌門人:領先對手10年?憑什么口氣這么大?...

在采訪中&#xff0c;Andrew透露&#xff0c;目前Oracle數據庫的一個重點研發方向&#xff0c;是基于NVRAM技術重新定義數據庫架構&#xff0c;支持數據庫直接放在NVRAM里的架構。他認為&#xff0c;去年Intel發布的NVRAM是一項顛覆性的技術&#xff0c;這意味著&#xff0c;以…

Linux的inode的理解

http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html轉載于:https://www.cnblogs.com/zengkefu/p/5529576.html

redisTemplate.opsForHash()

Hash類型 Redis hash 是一個string類型的field和value的映射表&#xff0c;hash特別適合用于存儲對象。 Redis 中每個 hash 可以存儲 2^32 - 1 鍵值對&#xff08;40多億&#xff09;。 Map以map集合的形式添加鍵值對 <String, String> maps new HashMap(); maps.put(…