利用hexo+googlepages搭建個人博客

背景

各種各樣的博客五花八門,但是利用github構建個人看起來很有逼格,在其他地方積累的並不多,因此花了2天的時間研究了一下如何依靠github構建個人博客。
- 主流的個人博客工具包括hexojekyllwordpress等,具體的優劣建議參考:https://www.jianshu.com/p/c4f145fdd637
- 個人最終選擇了git + github + hexo的方案,主要是命令少,易於學習。

安裝git

# 安裝
$ sudo apt-get install git
# 配置賬戶
$git config --global user.name "your username" 
$git config --global user.email "[email protected]"
$ssh-keygen -t rsa -C "[email protected]"

創建github pages

  1. 註冊賬戶
    如果你還沒有github的賬號,去註冊一個吧(https://github.com/join?source=header-home),一個有逼格的程序員,這是必須的

  2. 創建github pages

    • 登錄(https://github.com
    • 找到Start a project或者New repository創建個項目
yourname/yourname.github.io 
# 這個地址必須嚴格按這個寫,錯了是無法訪問的

Notice: yourname必須是你註冊時的用戶名,如果你忘記了,去點下你的頭像,下拉出來的Signed in as後面就是你的名字

  1. 書寫第一個主頁
    • pull代碼
$ cd yourworkdir   #yourworkdir是工作目錄
$ git clone https://github.com/yourname/yourname.github.io
$ cd yourname.github.io
$ touch index.htm  # 創建默認頁面
  • 創建頁面
    通過vim或gedit編輯index.htm並輸入以下內容
<html>

<head>
<title>My Blog</title>
</head>

<body>
<p>Hello,world!</p>
<p>This is my first blog. </p>
</body>

</html>
  • 上傳代碼
$ git add .
$ git commit -m "創建我的第一個頁面"
$ git push origin master

後續一般需要輸入用戶名(yourname)和密碼(登錄密碼)

  1. 訪問頁面
    創建成功後,通過https://yourname.github.io即可訪問剛纔書寫的頁面

這樣你的個人博客已經可以訪問了,如果你已經可以自己構建個網站結構,那就直接開搞吧,不過作爲看這個教程的人,一般都需要去尋找一個現成的搭建博客的方案,比如hexo,jekyll等,下面先介紹hexo的使用過程。

安裝hexo

  1. 安裝nodejs
    不建議使用apt-get方式安裝,容易失敗;
    建議使用nvm工具進行安裝(nvm是一個可以讓你在同一臺機器上安裝和切換不同版本node的工具)
    使用如下命令進行安裝:
export NVM_DIR="$HOME/.nvm" && (
  git clone https://github.com/creationix/nvm.git "$NVM_DIR"
  cd "$NVM_DIR"
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" origin`
) && . "$NVM_DIR/nvm.sh"

使nvm開機啓動,將如下內容添加到~/.bashrc中:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

重啓 terminal或者重新source一下 ~/.bashrc
執行以下命令:

$nvm ls-remote //列出所有安裝包的版本信息
$nvm install stable //安裝最穩定版本
$nvm use node //使用當前版本
$nvm run node --version //也可以使用該命令 使用當前版本
$nvm alias default node //設置默認版本

如果需要更新則手動更新 nvm:

(
 cd "$NVM_DIR"
 git fetch origin
 git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" origin`
) && . "$NVM_DIR/nvm.sh"
  1. 安裝hexo
$npm install  hexo-cli -g
$npm install hexo-server -g
$npm install hexo-deployer-git -g
$npm install hexo-util -g

接下來建立博客目錄,並初始化:

$ cd yourworkdir
$ mkdir yourblogdir
$ cd yourblogdir
$ hexo init //初始化 下載必要的建站文件
$ npm install //安裝依賴項

接下來就可以開始博客的撰寫了。

撰寫博客

由於創建站點的時候,已經包含了一個hello-world的基礎頁面,所以不需要任何編輯,直接可以生成網站

$ hexo clean # 清除緩存
$ hexo g   # 生成頁面
$ hexo s   #運行本地服務

之後可以看到提示hexo is running at http://localhost:4000/. Press ctrl+c to stop,可見只需要在瀏覽器中輸入http://localhost:4000即可看到頁面,如果你不想運行了,直接Ctrl+c就可以了。

發佈博客

到現在爲止,這些操作都還是在本地完成的,那麼我們怎麼才能把這些東西推送到github的個人頁面上去呢?

通過hexo-deployer-git神器即可完成操作

  • 安裝hexo-deployer-git
$ npm install hexo-deployer-git --save
  • 配置網站git

在站點配置文件(yourblogdir/_config.yml)修改如下配置:

deploy:
    type: git
    repo: <your repository url> #你的github上創建的yourname.github.io的倉庫的地址
    branch: [branch]    # 分支名稱,可選的,默認時master分支 
  • 部署

下面的命令可以實現一鍵部署,

$ hexo d

這時候,瀏覽器中輸入https://yourname.github.io是不是可以看到自己的博客了呢,大功告成。

參考

ubuntu 下 hexo 安裝與配置
jekyll
hexo
pandoc

更多更及時的博客更新請戳—> KingRumn

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