【前端技術】從零開始在github創建個人主頁或技術博客


閒在家裏,打算出一個前端系列的技術博客,講一下自己學習網站搭建、HTML、CSS、Javascript、Django等的學習經歷。
對於新手來說,在github搭建免費的個人主頁,不失爲一個很好的練手方法,以下將記錄我在很久以前在github搭建個人博客的經歷。

1、註冊github賬號

GitHub是一個面向開源及私有軟件項目的託管平臺,因爲只支持git 作爲唯一的版本庫格式進行託管,故名GitHub。
Github官網:https://github.com/
這裏不過多描述如何註冊github賬號,但是建議註冊賬號的時候,賬號名最好使用簡單易記的英文小寫字母,最好是自己的姓名拼音。

2、創建個人主頁專屬倉庫

登錄github,進入個人的Repositories,如下圖:
在這裏插入圖片描述點擊綠色的[New]按鈕,新建一個Repositories,需要注意的是,這個倉庫有固定的命名格式username.github.io,這裏username就是你註冊的github賬號名,例如我的github賬號是scutcyr,那麼我創建的個人主頁專屬倉庫名就是scutcyr.github.io
【參考】我的個人主頁專屬倉庫:https://github.com/scutcyr/scutcyr.github.io

3、瞭解主頁框架css代碼並下載

有很多關於在github搭建個人主頁的博客,但是
大部分都是基於markdown的。本文主要是針對希望使用html、css、javascript學習搭建網站的同學。因此,爲了讓大家快速體驗使用html、css、javascript搭建網站的樂趣,建議大家先直接利用現成的css文件和html模板,如下圖所示,文件見鏈接: https://github.com/scutcyr/build_your_homepage/tree/master/css
你可以從這裏快速下載:https://github.com/scutcyr/build_your_homepage/archive/master.zip,解壓後,可以看到一個css文件夾,以及一個index.html模板。
在這裏插入圖片描述

3、修改index.html文件

這裏假設你通過https://github.com/scutcyr/build_your_homepage/archive/master.zip下載了模板代碼。解壓後,如下圖所示:
在這裏插入圖片描述解壓後,是一個build_your_homepage文件夾,在裏面,包含一個css文件夾以及一個index.html模板。
你只需要使用sublimetext或者VSCode打開index.html文件修改。
在這裏插入圖片描述

4、把修改好的index.html文件連同css文件夾上傳到你的username.github.io

登錄github,進入你的username.github.io倉庫根目錄下,點擊Upload files按鈕,如下圖所示:
在這裏插入圖片描述
適當縮小瀏覽器頁面,然後把css文件夾以及修改好的index.html拖到上傳頁面,如下圖所示
在這裏插入圖片描述上傳文件完畢後,點擊網頁下方的綠色按鈕Commit changes

5、檢驗你的成果

打開鏈接https://username.github.io,查看你的主頁是否成功顯示!這裏可能需要等一兩分鐘,或者適當刷新頁面!
以下是我修改好的個人主頁,詳情:http://yirongchen.com/
在這裏插入圖片描述

【作者簡介】陳藝榮,男,目前在華南理工大學電子與信息學院廣東省人體數據科學工程技術研究中心攻讀博士,擔任IEEE Access、IEEE Photonics Journal的審稿人。兩次獲得美國大學生數學建模競賽(MCM)一等獎,獲得2017年全國大學生數學建模競賽(廣東賽區)一等獎、2018年廣東省大學生電子設計競賽一等獎等科技競賽獎項,主持一項2017-2019年國家級大學生創新訓練項目獲得優秀結題,參與兩項廣東大學生科技創新培育專項資金、一項2018-2019年國家級大學生創新訓練項目獲得良好結題,發表SCI論文4篇,授權實用新型專利8項,受理髮明專利13項。
我的主頁
我的Github
我的CSDN博客
我的Linkedin

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章