如何創(chuàng)建GitHub上的個人免費博客

免費個人博客搭建， 這是一篇小白也能看懂的文章，本文主要針對OS X ，Windows 除了軟件安裝方式和命令有些區(qū)別（裝了git bash也一樣），其他基本一樣。

首先列出來兩個博客的樣式供參考：


image
image

image
image

OK 開始正文

1. 創(chuàng)建GitHub 域名和空間

1.1注冊

首先你需要注冊一個GitHub賬號，已有的可以直接進行1.2，注意username，這會影響到你的域名，你的域名將會是 username.github.io ，所以認真的取個名字，好的名字也讓人眼前一亮。


image
image

注冊過程可能需要驗證你的郵箱，其他就不在贅述。

1.2 創(chuàng)建倉庫

然后需要創(chuàng)建一個倉庫(repository) 來存儲我們的網(wǎng)站，點擊首頁任意位置出現(xiàn)的 Create repository按鈕創(chuàng)建倉庫, Respository name 中的username.github.io 的username 一定與前面的Owner 一致，記住你的username下面會用到。


image
image

第一步就已經(jīng)完成了，下面是安裝。

2. 安裝

Hexo 可以說是目前最流行的博客框架了，基于Nodejs，更多信息可以google／百度，下面需要安裝的工具包括 Git，Nodejs，Hexo。（Windows 用戶自行搜索這些工具，直接安裝即可）

2.1 安裝Git

// 首先打開終端使用“brew help”檢查是否已經(jīng)安裝HomeBrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"    //如果已安裝HomeBrew 無需執(zhí)行此行

$ brew install git   // 安裝Git

你也可以通過下載安裝程序來安裝

2.2 安裝Nodejs

先安裝nvm，這是Nodejs版本管理器，可以輕松切換Nodejs版本。 這里有兩種方式安裝。如果使用curl的方式安裝，安裝完成之后一定要重啟終端。

  1. Homebrew 安裝方式，此安裝方式無需重啟
$ brew install nvm  
$ mkdir ~/.nvm
$ export NVM_DIR=~/.nvm
$ . $(brew --prefix nvm)/nvm.sh
  1. curl安裝方式，此安裝方式需要重啟
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh     //安裝完成后，重啟終端

安裝完成后，重啟終端 并執(zhí)行下列命令即可安裝 Node.js。

首先查看一下可以使用的版本，然后再執(zhí)行安裝

$ nvm ls-remote

可以安裝任意一個所列出的node.js的版本
例如：

$ nvm install 6.4.0
  1. 安裝Hexo
    確保以上所有都安裝完成之后再安裝Hexo，如果此步不成功那就看看上面的是否安裝成功
 $ sudo npm install hexo-cli -g

所有必須工具已經(jīng)安裝完成，下面我們就可以生成博客，上傳至我們的GitHub 倉庫了。

3. 編寫，發(fā)布

接下來我們需要用Hexo初始化一個博客，然后更改一些自定義的配置，或者加上自己喜歡的主題，寫上第一篇文章，然后發(fā)布到自己的個人GitHub網(wǎng)站(username.github.io)。

  1. 創(chuàng)建博客
    將下面的 username 替換成你自己的username(其實也無所謂，作者強迫癥)，執(zhí)行成功后，會創(chuàng)建出一個名為 username.github.io 的文件夾。
$ hexo init username.github.io
  1. 更改配置
    主題安裝
    為了使博客不太難看，我們需要安裝一個主題，切換至剛剛生成的Hexo 目錄，安裝主題
$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next //“themes”是“username.github.io”文件夾里面的一個文件夾，“next”是對即將下載的一個主題包文件的命名

這里選了一個極簡的主題，也是Hexo眾多主題中最受歡迎的一個。上面出現(xiàn)的喵神的主題在這里。
如果想要使用其他主題只需要點擊更多主題進入后選中其中一個在詳情頁面中找到GitHub的標志點擊，然后復制地址替換上面兩行命令行的第二句中: https://github.com/iissnan/hexo-theme-next 并且為其改一個名字即可，另一個獲取主題的簡單方式就是直接在GitHub中搜索"hexo-theme"就能夠獲得無數(shù)主題，隨便找?guī)讉€喜歡的下載,獲取地址的操作步驟如下面兩圖：

image
image

image
image

基礎配置：打開文件位置username.github.io/_config.yml修改幾個鍵值對，下面把幾個必須設置的列出來按需求修改，記得保存， 還有注意配置的鍵值之間一定要有空格。更多設置...

title: 勇不言棄     //你博客的名字
subtitle: 創(chuàng)建一個技術博客是分享自己對某一技術點的理解，有的人看到后學習了會對你心存感激，有的人看到了會對你指點。在學習以及分享的同時如果交到幾個朋友那更是意外收獲。    //顯示在博客名字下方，類似于個性簽名
author: ly92        //你的名字
language: zh-Hans    //語言 中文

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape    //themes文件夾目錄下任意一個主題的名稱

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git   //使用Git 發(fā)布
repo: https://github.com/ly92/ly92.github.io.git       // 剛創(chuàng)建的GitHub倉庫（可能需要自己添加此行）

基礎配置：
基礎配置文件在username.github.io/themes/next/_config.yml中修改，這里略過。設置詳情

  1. 寫文章
    所有基礎框架都已經(jīng)創(chuàng)建完成，接下來可以開始寫你的第一篇博客了
    在username.github.io/source/_posts下創(chuàng)建你的第一個博客吧，例如，創(chuàng)建一個名為BeforeCreateBlog.md的文件，然后編輯內(nèi)容。
// 在_posts文件夾下創(chuàng)建xxxxx.md，并打開編輯
$ cd /Users/kakatool/ly92.github.io/source/_posts 
$ touch xxxxx.md
$ open xxxxx.md     //一般使用Xcode打開

如：

---
title: 如何創(chuàng)建GitHub上面的個人免費博客
---
免費個人博客搭建， 這是一篇小白也能看懂的文章，本文主要針對OS X ，Windows 除了軟件安裝方式和命令有些區(qū)別（裝了git bash也一樣），其他基本一樣。

首先列出來兩個博客的樣式供參考：
![image](https://raw.githubusercontent.com/ly92/images/master/BeforeCreateBlog/BeforeCreateBlog_1.png)
![image](https://raw.githubusercontent.com/ly92/images/master/BeforeCreateBlog/BeforeCreateBlog_2.png)
  1. 測試（可以省略）
$ hexo s

測試服務啟動，你可以在瀏覽器中輸入https://localhost:4000 訪問了。

  1. 安裝hexo-deployer-git自動部署發(fā)布工具
 $ npm install hexo-deployer-git --save
  1. 發(fā)布
    測試沒問題后，我們就生成靜態(tài)網(wǎng)頁文件發(fā)布至我們的GitHub pages 中。
$ hexo clean && hexo g && hexo d

終端可能會讓你輸入GitHub的郵箱和密碼(我的沒有要求輸入，可能因為之前輸入過)，正確輸入后，騷等片刻，就會把你的博客上傳至GitHub 了。以后在每次把博客寫完后，執(zhí)行一下這個命令就可以直接發(fā)布了，非常方便。

  1. 查看效果
    恭喜你能走到這一步，你的博客已經(jīng)完成了，在瀏覽器中輸入 https://username.github.io 就能夠訪問了。
    最后應該是類似這個樣子的

    image
    image

  2. 補充
    也許第二次進入編寫項目時會遇到這種問題，（我遇到了）
    kakatooldeiMac:~ ly$ hexo clean && hexo g && hexo d
    -bash: hexo: command not found

我的解決方式如下：
這需要你先到“username.github.io”路徑下，然后執(zhí)行“export NVM_DIR=~/.nvm && . $(brew --prefix nvm)/nvm.sh”后再執(zhí)行“hexo clean && hexo g && hexo d”才可以，我直接在username.github.io文件中添加“firstStep.sh”內(nèi)容為：
cd /Users/kakatool/ly92.github.io
export NVM_DIR=~/.nvm && . $(brew --prefix nvm)/nvm.sh
hexo clean && hexo g && hexo d
這三行，這樣可以在編輯好username.github.io／source／_posts中的XXXXX.md文件后直接將“firstStep.sh”拖拽到終端點擊回車鍵即可，如下：


image
image

image
image
Last login: Mon Aug 22 20:09:55 on ttys001
kakatooldeiMac:~ ly$ /Users/kakatool/ly92.github.io/firstStep.sh 
INFO  Deleted database.
INFO  Deleted public folder.
INFO  Start processing

......      //省略 n 行

INFO  Generated: vendors/font-awesome/fonts/fontawesome-webfont.svg
INFO  Generated: 2016/08/22/ImageEntrepot/index.html
INFO  Generated: js/src/schemes/pisces.js
INFO  72 files generated in 833 ms
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
[master 1ca6ec9] Site updated: 2016-08-22 20:10:29
1 file changed, 1 insertion(+), 1 deletion(-)
To https://github.com/ly92/ly92.github.io.git
45d59af..1ca6ec9  HEAD -> master
Branch master set up to track remote branch master from https://github.com/ly92/ly92.github.io.git.
INFO  Deploy done: git          // *********注意，看到此行才表示發(fā)布成功
kakatooldeiMac:~ ly$

關于博客中上傳圖片的方式將會在ImageEntrepot里面介紹，本文是使用的GitHub中另一個倉庫的圖片文件images如果需要可以Fork一下

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容