部署hexo-github個人博客(圖文並茂)

我的個人博客:https://chenzhangchi.com/posts/31968.html

本文將演示如果通過mac部署hexo+github個人博客,如果你用的是windows,聰明的你一定可以類比完成

第一階段:本地搭建

1、安裝node.js

登錄 https://nodejs.org/ ,下載 node.js 安裝,這個安裝完後 node 和 npm 就都有了
點擊 LTS 版本下載

雙擊下載下來的 node-v12.14.1.pkg ,一直點擊繼續,來進行安裝

使用 node -v 命令和 npm -v 命令驗證

2、安裝cnpm

如果不是 root 賬戶,必須用 sudo 提權

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

3、使用cnpm安裝hexo框架

sudo cnpm install -g hexo-cli

使用 hexo -v 命令驗證

4、創建博客目錄並初始化

創建目錄

mkdir ~/Dev/blog && cd ~/Dev/blog  # 寫給小白:~表示家目錄

如果後面操作失敗,直接刪除 blog 目錄即可
初始化目錄

hexo init

初始化過程中會有幾個報錯和警告,不要管它,有這個提示就表示可以了

5、啓動hexo,測試發佈博客

在 blog 的根目錄下,使用命令啓動 hexo

hexo s  # s是start的簡寫,所以可以使用命令 hexo start

系統會提示使用 http://localhost:4000 來訪問博客,可以看到系統已經爲我們生成了一篇博客,這篇博客已經介紹了 hexo 的常用命令

hexo new "My New Post"  # 創建一篇新博客
hexo server    # 啓動hexo
hexo generate  # 生成靜態網站
hexo deploy    # 部署靜態網站到遠端服務器
# 我覺得這個命令也挺重要的,在 hexo g 前使用
hexo clean     # 刪除生成的靜態網頁和緩存
在終端中使用 ctrl+c 組合鍵退出,現在來創建一篇新的博客
cd ~/Dev/blog
hexo new "第一篇自己寫的博客"
系統提示生成了一個.md文件,沒錯,hexo博客就是使用markdown標記語言寫作博客的
vim ~/Dev/blog/source/_posts/第一篇自己寫的博客.md  # 編輯博客

最終內容如下

重新生成靜態網頁並啓動hexo

hexo clean
hexo g
hexo s

可以看到剛纔新發布的博客已經可以查看了


第二階段:部署到github

首先要有一個 github 賬號,這裏默認你已經有了,沒有的話就去 https://github.com/ 申請一個

1、創建一個倉庫併發布默認網站

倉庫名必須是 你的github賬號名.github.io

從這進入倉庫的 settings

選擇一個主題

選擇完主題後會讓確認默認頁面,確認默認頁面後,然後訪問 https://zhegeshijiehuiyouai.github.io 就可以看到默認的網站了

2、安裝git部署插件

cnpm install --save hexo-deployer-git

安裝完畢

3、編輯blog根目錄的_config.yml文件

注意這個 _config.yml 是 blog 根目錄的,有些主題也有 _config.yml

vim _config.yml

找到最下面的 deploy,修改如下

deploy:
  type: git
  repo: https://github.com/zhegeshijiehuiyouai/zhegeshijiehuiyouai.github.io.git
  branch: master

repo 中填寫的是剛纔在 github 創建的倉庫的地址,master 表示主分支。
這是 yaml 格式的文件,注意對齊。下級縮進可以使用多個空格,這裏使用兩個空格,同時注意有值的行,冒號後面有一個空格。

4、推送剛纔生成的網站到github

hexo d

如果沒有用命令行登錄過 github,這是會讓你輸入 github 的賬號密碼,輸入即可。
部署成功後,提示如下

此時刷新自己的 github 倉庫,就會看到倉庫中已經有內容了

此時使用倉庫名就可以訪問到網站了,我的就是 http://zhegeshijiehuiyouai.github.io ,看到剛纔的默認網站已經變成我們生成的網站了


進階操作

1、將github網站綁定到自己的域名

沒有自己的域名也可以不管這節,直接用github提供的域名訪問就是了,申請域名的話可以到阿里雲的萬網去註冊,注意註冊域名後要實名認證
首先在自己的域名下添加一條 CNAME 記錄

在 github 的 settings 中的 GitHub Pages 的 Custom domain 中添加自己的域名

此時倉庫根目錄會生成一個文件:CNAME ,內容爲剛剛填寫的域名。但是如果我們重新使用 hexo 生成網站,並不會有這個文件,所以還需要到 blog/source 目錄創建 CNAME

cd ~/Dev/blog/source
echo "chenzhangchi.com" > CNAME

重新生成網站併發布,就可以使用 chenzhangchi.com 訪問了

hexo clean
hexo s
hexo d

2、更換主題

首先找一個hexo的主題,以下面這個爲例

https://github.com/blinkfox/hexo-theme-matery.git
將主題克隆到 themes 目錄下,這個目錄默認是有一個 landscape 主題的

cd ~/Dev/blog
git clone https://github.com/blinkfox/hexo-theme-matery themes/matery

下載完後,修改 _config.yml 文件修改主題

vim _config.yml

找到 themes,將其由 landscape 修改爲 matery

根據每個主題的要求進行修改後,在重新發布就可以了。需要注意的是,由於我們使用了 cnpm 來管理包,所以這些主題中如果有使用 npm 來安裝模塊的,要全部換成 cnpm 。

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