利用GITHUBpage搭建個人部落格
今天終於把這個部落格建起來了,基本功能算是全。這是個純靜態的blog,託管在github上,生成器是jekyll。 除了這些基本的以外,一些其他功能需要依賴第三方工具。站內搜尋用的google的自定義搜尋工具; 同樣網站分析也是谷歌的analytics工具。評論用的多說。用的某位大大 的模板,還參考了另一位大大模板的一些功能。頭一次弄折騰了兩天,也算弄明白了 些裡面的執行邏輯。接下來我會詳細講解如何搭建一個類似的小站。
各種申請
申請github賬號
sign up for github 就是建立賬號了
申請google賬號
申請多說賬號
一般來說用新浪微博賬號就行了
利用gitpage搭建靜態網站
先進入你的github主頁,這裡你可以檢視和管理你的所有專案
從上倒下的點紅筆圈中的地方新建一個專案,
設定的時候上面把我的賬戶替換成你的賬戶就可以了,點綠色按鈕提交. 於是你就有了一個自己的站點位置(https://yourgitname.github.io)
然後是下載github的客戶端windows下 mac下(linux用命令列工具就不介紹了,略多不直觀),安 裝好後不同平臺會有不同,但是基本的還是一樣的,
上圖中按鈕是同步用的,會將本地倉庫內容覆蓋github上的主倉庫中, 每次同步必須在summary中填上同步的主題,下面的描述可以不填,再下面的內容是提示你哪些有改變。
你已經建立好了專案,剩下的就是在你的專案網頁點選圈中的按鈕,然後再你的客戶端中將該專案clone下來.
選好你希望該專案本地所在的位置後等待克隆成功吧~~ok!
本地配置jekyll
安裝ruby環境
window 下這裡下載ruby,安裝好後順手把rails一起安了吧~
安裝完成後記得設定環境變數, 具體就是把安裝好的ruby位置放到環境變數裡去。
win+R
調出執行,然後輸入cmd
撥出terminal,敲入gem install rails
等待安裝完成吧~~
mac下自帶ruby。。。就是任性!
安裝gitpage相同的jekyll環境
命令列輸入gem install bundler
等待安裝完,
命令列輸入gem install jekyll
等待安裝完,
接下來下載我的模板到你clone下來 的地址,記得解壓,你該看到大約是這樣
其中資料夾hsz1273327.github.io位置應該是你的專案位置
令行輸入cd XXXXX
XXXX是你的專案位置,
命令列輸入bundle install
會自動給你安裝GEMfile中提到的幾個庫
這樣jekyll環境就算搭建好了
執行jekyll
配置_config
根據我的模板主頁的readme文件設定
注意,本地試執行先把 production_url 改為http:\localhost:4000
執行jekyll
命令列依然cd到你的專案目錄,輸入 jekyll build
,執行完了後再輸入 jekyll serve
。
tips:沒事terminal不要關。
瀏覽器裡輸入地址http:\localhost:4000你就能看到部落格主頁了 (不過這個時候搜尋功能無法使用)!
實現功能
站內搜尋功能
這個功能用的谷歌的自定義搜尋,需要註冊後才能用。 除了自己的程式碼設定外還要在谷歌自定義搜尋頁面上做些設定 具體如圖
點選後彈出如圖
如果你通過站長工具提交過sitemap了,那這樣就能搜尋了~~
留言評論功能
這個沒啥好說的,註冊設定都弄好了就有了,雖然自己倒騰了好久,結果發現模板自帶這個功能。。。
瀏覽器中撰寫更新部落格功能
這個只是簡單的用超連結實現的,分別連結到git上專案所在頁面的相應功能而已,不過這樣確實方便了不少。 不過方便是有代價的,斷網沒儲存就orz了(已經吃過一次虧)。安全性應該還行,畢竟要修改本來就要用自己的 github賬號才有許可權。
經過上面的其實你的小站已經建成了,你只要將它同步到你的github上,然後等個幾分鐘就能用了~~
接下來的是給希望用自己域名的同學的~~
配置域名
購買域名
避免廣告嫌疑我就不多說了,總之找個買就行
CNAME設定
參考我的CNAME檔案,注意只能放一個域名,如果是作為部落格的話我建議不要用1級域名,略浪費
域名解析
到你買域名的供應商那邊,之後選擇域名解析,選CNAME作為解析方式,然後把自己的原始網址放上去就行了。 這個就不截圖了要不有廣告嫌疑。我的是二級域名,一級域名我沒試過,據說是用A解析。
弄好了記得_config檔案要改下url
撰寫部落格
總結
jekyll邏輯簡述
模板放在 *_includes* 裡 靜態檔案放在 asset 裡
模板內用 {{ }}來傳遞模組或頁面的屬性
用{\% \%} 描述邏輯
每個頁面開頭用--- ---分隔出獨立位置記錄這個頁面的屬性,其中layout: 和 title:是 必須的屬性,id:預設為最終的網址位置去掉域名。
前端模板知識點歸納
html5 的 <from>
和 <input>
標籤可以用來傳遞引數,用GET方法是將input的內容傳遞到物件頁面的位
置後面作引數
POST方法需要物件頁面用指令碼獲取該值
相關文章
- 搭建個人部落格
- 利用Github+Jeklly搭建個人部落格網站Github網站
- 利用GitHubPages+jekyll+Markdown搭建個人部落格Github
- Windows上利用github和hexo搭建個人部落格WindowsGithubHexo
- 個人部落格搭建( wordpress )
- hexo搭建個人部落格心得Hexo
- 使用 hexo 搭建個人部落格Hexo
- Django搭建個人部落格(二)Django
- Django搭建個人部落格:前言Django
- 搭建個人部落格總結
- 使用React搭建個人部落格React
- beego搭建個人部落格(一)Go
- beego搭建個人部落格(二)Go
- Github Pages 搭建個人部落格Github
- 利用docker快速搭建hexo部落格DockerHexo
- 利用github hexo搭建部落格GithubHexo
- 使用 Hugo 快速搭建個人部落格Go
- WordPress 搭建個人部落格/站點
- 我的個人部落格搭建之旅
- Hexo+Gitee搭建個人部落格HexoGitee
- hexo+github搭建個人部落格HexoGithub
- 基於 GitBook 搭建個人部落格Git
- 使用 github + jekyll 搭建個人部落格Github
- MkDocs+Github搭建個人部落格Github
- nuxt+node搭建個人部落格miniUX
- hexo搭建個人網站部落格完全教程Hexo網站
- 如何搭建個人獨立部落格網站?網站
- 【GitHub】GitHub+Hexo搭建個人部落格GithubHexo
- 搭建個人部落格手把手教程
- hexo結合github搭建個人部落格HexoGithub
- 搭建屬於自己的個人部落格
- github上搭建個人部落格(有更新)Github
- 【部落格搭建】Typecho個人部落格搭建,快速安裝,超小白(很簡單的)
- 『部落格搭建』—— 個人部落格全新上線(阿里域名+GitPages+hexo+Yelee)阿里GitHexo
- 史上最快用GitHub、Hexo搭建個人部落格GithubHexo
- Django搭建個人部落格:文章標籤功能Django
- HEXO-個人部落格搭建教程彙總Hexo
- Hexo+Netlify快速搭建個人部落格Hexo