ithub應該很多人都有聽說過,全球最大的同性社交網站,一個面向開源及私有軟件項目的托管平臺,也是一個分布式版本控制系統。
Github Pages則是github上的一項功能,可以放置網頁文件到指定文件夾,然后給你一個專屬域名用于展示一些項目,但現在大多用來開發制作個人博客網站。而你需要做的就是創建一個項目、編輯項目內容、推送到遠程服務器,打開對應的地址就能看到你想要的東西了。接下來就一步步來搭建個人博客吧。
GitHub Pages
想要一個這樣的免費博客你首先需要有github的賬號,首先轉到GitHub并創建一個名為username.github.io 的新存儲庫,其中username是您在GitHub上的用戶名,如下圖(比如我注冊的用戶名叫light)。
創建新的倉庫
把代碼拉到本地(git clone 或者 download都可以),在項目根目錄新增一個index.html的文件,內容可以是你想要的任意,保存更改,提交的github,打開light.github.io這個你定義的域名,如果訪問成功你會看到你剛剛在Index里面寫的東西。其實到這里你的個人主頁其實就完成了,你可以在項目里任意組織你的結構,這是一個完整的靜態資源網站,做一個絢麗的個人網絡簡歷還是很方便的,前提是你熟悉html、js、css等。好了,接下來介紹下如何用Hexo維護個人博客。
Hexo是一個輕量、簡易、高逼格的博客生成系統,hexo 可以理解為是基于node.js制作的一個博客生成工具,不是一個開源的博客系統。hexo不需要部署到我們的服務器上,hexo通過將markdown語法編寫的文章,生成靜態的html頁面,然后將生成的html上傳到我們的服務器(這里指的是githubpage)。
Hexo
生成一個博客項目:根據官網提示依次
npm install hexo-cli -g > hexo init myblog > cd myblog > npm install > hexo server
這樣一個初始化的博客就打開了,在項目的source文件夾下編輯markdown文檔,這些md文件就是你的一篇篇的Blog,不熟悉語法的同學可以找一篇照著寫。
Hexo項目目錄結構
有了個人Blog怎樣才能在親朋好友面前ZB呢?關聯你的githubpages:快速在項目根目錄下找到 _congif.yml,找到 deploy 字段(沒有新增)并填寫完整如下代碼,直接拿(copy)。
type: 'git'
repository: https://github.com/light/light.github.io.git(比如這個就是你之前創建的page項目)
branch: master
還差一步,我們需要一個工具來幫助我們將生成的靜態資源推到倉庫上:
npm install hexo-deployer-git --save
接下來就是激動人心的時刻,要發布了。只要在項目的命令提示行執行下面命令就行(easy)
hexo clean
hexo generate
hexo deploy
大功告成,瀏覽器打開https://light.github.io.git(你的page地址),你將得到一個永久免費的個人博客。
博客示例
另外,hexo支持主題、插件等。
擊查看智能機器人動圖
javascript課題:Web前端開發人工智能機器人
知識點: ajax概念解析,ajax封裝,如何調用數據庫
函數封裝,javascript正則匹配,元素創建,企業開發標準
2017就業形勢分析,面試技巧等
PS:現在人工智能很火,包括前端時間,騰訊的群里面都有了官方的機器人了,當然是為了活躍群氣氛,也成了很多宅男的解悶的對象。我們今天的課題就是在自己的網站上搭建一個智能機器人的聊天窗口,當然數據不是我們自己編輯的,是從其他地方調用的,但是這樣的一個項目也比較考驗我們的前端知識的綜合能力,特別是對于javascript的使用,包括ajax的封裝等等,如果你的個人博客上也能有這樣的一個人工機器人,我相信對于web前端的求職會有很大的幫助的!
如果想要更多的企業求職加分項目,案例,可以來一下我的前端群216634437,每天都會精挑細選一個特效,項目出來詳細講解,分享!
需要文檔版源碼來我的前端群216634437,已上傳到群文件
智能機器人學習視頻:HTML5+javascript大神帶你開發人工智能機器人
頭條號里有許多web前端學習視頻,企業常用特效/案例/項目,敬請關注!
看完這張圖有多少想去@baby Q的?
為一個IT從業者,怎么能沒有自己博客呢?雖然有很多平臺可供使用,但總有太多的限制,有了自己的網站,就方便很多了。
通過hexo+github,搭建博客框架。
一、介紹
1.GitHub Pages
大家都知道,GitHub 是各種開源及私有軟件項目的托管平臺,目前已經擁有超過千萬的開發者用戶,使用 GitHub Pages 可以把我們托管到 GitHub 上的靜態網站展示出來,而且還良心地給我們提供了一個免費的 HTTP 的 github 二級域名。我們通過 github 可以完全免費的享受從建站到 SSL 的全部服務,而且訪問速度也不賴。要說明一點的是,只限純靜態網站(僅 html + css + js),對于寫博客來說,已經完全夠用了。
2.Hexo
Hexo 是一個快速、簡潔且高效的博客框架,使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁,然后發布到 github 中,即可在我們的網頁中展示出來。
二、創建個人倉庫存放網站資源
三、操作步驟
1.安裝node.js
2.安裝并配置Git倉庫
找到Git安裝目錄,打開Git Bash窗口,設置user.name和 user.email :
git config --global user.name "你的 GitHub 用戶名"
git config --global user.email "你的 GitHub 注冊郵箱"
3.配置Git公鑰
GitHub要求每次推送代碼都是合法用戶,所以每次推送都需要輸入賬號密碼驗證推送用戶是否是合法用戶,為了省去每次輸入密碼的步驟,采用 ssh 來實現。
在本地通過rsa非對稱加密方式生成密鑰對,然后把私鑰放置在本地電腦,公鑰放置在GitHub上,當你推送時,git就會匹配你的私鑰跟GitHub上面的公鑰是否配對,若匹配成功則認為你是合法用戶,允許推送,不需要手動輸入密碼,這樣可以保證每次的推送都是正確合法的。
ssh-keygen -t rsa -C "你的GitHub注冊郵箱",
然后連續三個回車之后,根據信息中的路徑找到id_rsa.pub 密鑰文件,復制其中全部內容;
4.安裝Hexo
Hexo就是個人博客網站的框架,先在本地電腦創建一個文件夾,可以命名為Blog,用于存放Hexo框架的內容和之后發布的網頁等資源。
在Blog文件夾中執行下面的命令(其中 blog 是存放具體網站信息的文件夾,名字可以自定義):
hexo new test_blog #新建一個文章
hexo g #生成靜態頁面
hexo s #啟動服務器
在瀏覽器地址欄輸入“http://localhost:4000/”打開頁面,即可看到剛創建的頁面:
5.將Git庫與hexo連接起來
上面只是在本地預覽,接下來要發布到GitHub上,就可以通過http://xxx.github.io的域名來訪問。
deploy:
type: git
repo: git@github.com:xxx/xxx.github.io.git
branch: master
其中 repo 要填入你之前在 GitHub 上創建的倉庫的完整路徑,保存文件。這一步其實是把Hexo與GitHub關聯起來,使發布命令指向我們的GigHub倉庫。
在cmd命令行窗口中,輸入如下命令:
npm install hexo-deployer-git --save
發布網站
在 blog 目錄下,分別輸入如下三條命令:
hexo clean #清除緩存
hexo g
hexo d
*請認真填寫需求信息,我們會在24小時內與您取得聯系。