1. 程式人生 > >Jekyll + Github Pages構建個人技術部落格

Jekyll + Github Pages構建個人技術部落格

寫技術部落格可以積累並且鞏固所學的知識,溫故知新,還能傳播知識,幫助他人解決問題。

前言

搭建專屬於自己的部落格,是每一個碼農都會想要去實現的,以前自己也曾想要搭建,但是總有無從下手的感覺,隨著知識閱歷的提升,知道了一些搭建的方式,時機成熟,買下了夢寐已久的域名,便開始動手搭建。

參考

安裝Jekyll

//開啟命令列 使用gem安裝Jekyll
gem install jekyll

啟動Jekyll服務

//使用Jekyll建立你的部落格站點
jekyll new blogname

//進入blog目錄
cd blogname 

//在blog資料夾內 開啟Jekyll服務
jekyll serve

//啟動成功會提示站點地址,一般是[127.0.0.1:4000](http://127.0.0.1:4000),開啟後就可以看到自己新建的站點

下載模板

// 過程中缺什麼工具靈活安裝
// 下載模板
$ git clone https://github.com/onevcat/vno-jekyll.git your_site

// 切換到模板所在的目錄下
$ cd your_site

// 安裝打包工具
$ bundler install

// 啟動服務(此後啟動站點服務都用��這句,能實時載入新文章和頁面改動,而不用重新啟動服務)
$ bundler exec jekyll serve


模板內容

1. 需要調整的檔案:
  • _config.yml——–部落格配置檔案,需要根據自身的情況修改
  • _posts————-新文章扔進這裡
  • _includes———-頁首頁尾等模板放在這裡,根據自身的情況修改
  • assets————-favicon、頭像、首頁背景圖在這裡面,可以直接替換
  • CNAME————–自定義域名放在這裡面
  • README.md———-Github說明,需要根據自身的情況修改
  • feed.xml———–訂閱
  • _site————–自動生成的部落格內容,index.html需要根據情況修改
2. 以下檔案不建議修改:
  • _layouts———–文章模板
  • index.html———首頁模板
  • 其他的...不要在意這些細節(不會用��)
3. 更多jekyll模板

套用模板:

直接將修改後的模板內容copy到其他資料夾,再執行下面兩句命令:
$ bundler install
$ bundler exec jekyll serve
即可執行成功

提交至Github Pages

  1. 在Github上Create a new repository
    • 填寫Repository name的格式為username.github.io(需要嚴格遵守),其中username用自己取的名字的替換
    • 設定自定義域名Settings->Custom domain,或者本地目錄建立CNAME亦可
    • 把本地的資料夾提交至改專案即可在username.github.io該網頁看到自己的部落格了

結語

雖然寫出來只有這麼短短的一篇,背後其實花了不少心血;
在搭建過程中,我也遇到過很多問題,遇到問題的時候不要輕易放棄,希望各位也是如此;
其次寫下這篇總結,由於我是先搭建完成然後再寫的總結,具體按步驟實施下來出現種種問題,希望讀者多多包容和提點。

相關推薦

Jekyll + Github Pages構建個人技術部落

寫技術部落格可以積累並且鞏固所學的知識,溫故知新,還能傳播知識,幫助他人解決問題。 前言 搭建專屬於自己的部落格,是每一個碼農都會想要去實現的,以前自己也曾想要搭建,但是總有無從下手的感覺,隨著知識閱歷的提升,知道了一些搭建的方式,時機成熟,

使用 jekyll + github pages 搭建個人部落

1. 新建 github.io 專案 其實 github pages 有兩個用途,大家可以在官方網頁看到。其中一個是作為個人/組織的主頁(每個賬號只能有一個),另一個是作為 github 專案的專案主頁(每個專案可以有一個)。 而 github pages 本身就支援 jekyll

使用Jekyll + GitHub Pages搭建個人部落

前言 一直就想搭建一個屬於自己的部落格網站,但是一直拖著沒有執行,在一次偶然的機會看到了鴻洋大神的 如何利用github打造部落格專屬域名,就心血來潮,馬上自己動手做了一個,耗時了近一個星期,終於差不多完成了,特意記錄下來,供他人蔘考。 本部落格同步釋出於

使用GitHub+Hexo+hexo-theme-indigo(主題)搭建自己的個人技術部落

本次搭建實在windows系統下完成: 前提條件:已經下載git、Hexo、node.js等必要的工具環境 第一步:初始化一個本地的Hexo專案 再本地建立一個部落格系統目錄:我建立的是專案根目錄:OyjBlog 再OyjBlog目錄下右鍵開啟Git Bash終端

WILLIAM-HUAN 個人技術部落

一、儲存種類和資料型別:     SQLite將資料值的儲存劃分為以下幾種儲存型別:     NULL: 表示該值為NULL值。     INTEGER: 無符號整型值。     REAL: 浮點值。     TEXT: 文字字串,儲存使用的編碼方式為UTF-8、UTF-16BE、UTF-16LE。    

基於 Hexo + GitHub Pages 搭建個人部落

參考 markdown一些語法 1、 --- title: Hello Blog --- 2、連結[CSDN](https://blog.csdn.net/owenfy) 3、大小標題 ## Quick Start ### Create a new post 4、中間

使用Hexo + GitHub Pages 搭建個人部落

一.前言   之前是在CSDN上寫部落格的,但是無奈其廣告滿天飛,還有因為個人不太喜歡CSDN部落格裡的一些東西,加上看到很多技術大牛都有自己的個人部落格,於是乎!便想著搭建一個自己的個人部落格。其實之前寫部落格還是追求於有很多人來看,以滿足自己這樣的一個慾望,後來慢慢覺得寫部落格無非是記錄一下自己成長的歷

如何擁有個人Github技術部落

題圖:87testing.com前不久用wordpress搭建了一個部落格,用起來感覺不是太好用

Github+Jekyll —— 建立個人免費部落(四)jekyll第一個頁面

摘要:         本文中我將介紹一下如何在github上搭建個人Blog(部落格),也順便讓我們掌握一下githubPages功能,另外還涉及到Jekyll技術。 ===========

使用jekyll+Github搭建個人獨立部落

step 1.選擇GitHub作為部落格伺服器 Repository name(倉庫名)必須是 your_user_name.github.io 比如我的使用者名稱是admin,那麼倉庫的名稱就必須是admin.github.io ,這

Github+Jekyll —— 建立個人免費部落(五)jekyll工程釋出到github

摘要:         本文中我將介紹一下如何在github上搭建個人Blog(部落格),也順便讓我們掌握一下githubPages功能,另外還涉及到Jekyll技術。 ===========

使用Hexo + GitHub Pages搭建個人部落

--- title: github pages+hexo搭建部落格 date: 2017-09-20 10:39:20 tags: ["技術","學習",'部落格'] --- Web 前端愛好者。寫部落格的好處,不是為了寫而寫,而是一個記錄思想的過程。不要考慮它能帶給你什麼,而是你自己從中收穫了什麼。 最近

技術人如何利用 github+Jekyll ,搭建一個獨立免費的技術部落

上次有人留言說,技術部落格是程式設計師的標配,但據我所知絕大部分技術同學到現在仍然沒有自己的技術部落格。原因有很多,有的是懶的寫,有的是怕寫不好,還有的是一直想憋個大招,幻想做到完美再發出來,結果一直胎死腹中。但其實更多程式設計師是不知道如何去搭建一個部落格,其實如今搭建一個個人技術部落格非常簡單,其中最簡單

建立GitHub技術部落全攻略

說明: 首先,你需要註冊一個 github 賬號,最好取一個有意義的名字,比如姓名全拼,暱稱全拼,如果被佔用,可以加上有意義的數字.本文中假設使用者名稱為 tiemaocsdn1. 註冊賬號:地址: https://github.com/輸入賬號、郵箱、密碼,然後點選註冊按鈕

建立github技術部落——安裝Git,Node.js,npm,hexo進行中

一、註冊Github2.github在首頁提供了快速註冊通道,直接點選綠色按鈕 Sign up for GitHub3.然後依次填寫,使用者名稱,郵箱,密碼,然後點選建立4.來到第二步,會讓你選擇個人計劃和收費計劃(收費計劃有建立私人版本庫的許可權,第一次使用選擇免費的就可以

評判一篇技術部落價值的標準一些個人見解

    1.將複雜的問題簡單化:               勤勞的牛人: 把原本複雜的問題,簡單化,可以得到更多的觀眾關注度,因為只有越簡單的方式解釋越複雜的問題,才能有更多的讀者來去讀且讀懂,如果很多關鍵性問題的研究一筆帶過,且認為顯而易見,那麼說明該論文或者程式解釋得

個人部落: https://cbbfcd.github.io/

3.類遷徙圖 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

一晚上搭建個人域名部落Github+Hexo

搭建個人域名部落格其實沒有那麼難。下班到家後,九點開始,十二點半的時候就可以訪問了http://www.lvchongstudio.top。 接下來就記錄一下整個搭建的過程,以及這其中的坑,重點是坑。 首先要準備的環境 Node.js git 阿里雲購

Hexo個人免費部落(一) 從零到釋出Github

之前使用過jekyll+github做過一版自己的部落格網站,有興趣的可以看一下我之前的文章:http://blog.csdn.net/linshuhe1/article/details/51143026,其實也很簡單,但是存在一些問題:目錄、Rss、si

hexo+gitHub搭建個人獨立部落(一)

最新資訊 谷歌的一篇文章則著重說明了新成立的指導小組將如何“讓MDN成為最好的Web參考文件,幫助我們更好地進行Web開發”。指導小組目前的成員包括微軟、谷歌、Mozilla、三星和W3C。值得注意的是,蘋果公司並沒有參與這次釋出宣告。 前言 一直想要